From eb702ec2fb7cde70e663e650a1fdabdb4a02b5ca Mon Sep 17 00:00:00 2001 From: Ben Mathwig Date: Mon, 10 Jul 2023 14:08:45 -0700 Subject: [PATCH] Updating Origin Trials Landing Page Added new code to power the active trials cards via a JSON file checked in to the folder. Updated the wording on the site to clarify a few things. Moved trial-card component to it's own file. --- origin-trials.html | 220 --------------------- {img => origin-trials/img}/origin-hero.svg | 0 origin-trials/index.html | 70 +++++++ origin-trials/script.js | 41 ++++ styles.css => origin-trials/styles.css | 10 + origin-trials/trial-card.component.html | 59 ++++++ origin-trials/trial-card.component.js | 76 +++++++ origin-trials/trials.json | 18 ++ 8 files changed, 274 insertions(+), 220 deletions(-) delete mode 100644 origin-trials.html rename {img => origin-trials/img}/origin-hero.svg (100%) create mode 100644 origin-trials/index.html create mode 100644 origin-trials/script.js rename styles.css => origin-trials/styles.css (81%) create mode 100644 origin-trials/trial-card.component.html create mode 100644 origin-trials/trial-card.component.js create mode 100644 origin-trials/trials.json diff --git a/origin-trials.html b/origin-trials.html deleted file mode 100644 index cf1fdf0d..00000000 --- a/origin-trials.html +++ /dev/null @@ -1,220 +0,0 @@ - - - - - - - - - - -
-
-

Microsoft Edge Origin Trials

-

The Origin Trial system is a way for web developers to connect with browser engineers and the Web standards community, it enables Web developers to experiment in new web platform capabilities and offers a medium where they can continuously provide feedback on various APIs shape, usability and effectiveness after experimenting with them for a limited period of time in real production sites.

-
-
-
-
-

Active Origin Trials

- - - -
-
-

Getting Started

-

Register for an Experiment

-

Our framework is consistent with [Chrome Origin Trials](https://developers.chrome.com/origintrials/#/trials/active), simply click the `register` button for any of the available experiments in our Origin Trials Developer console, provide your website's origin, and we will instantly generate a token once you agree to our terms and conditions and submit the form.

- -

There are 2 ways to use the tokens provide in your page:

- - Option 1: Using a <meta> Tag -

Add an origin-trial tag to the head of any page, example:

- - 

-                <meta http-equiv="origin-trial" content="your-token-gues-here">
-
- - - Option 2: Using an HTTP Header - Another option is to add `Origin-Trial` to your HTTP server response headers, example: - - 

-                Origin-Trial: your-token-goes-here
-
- -

Once you have registered your website for an experiment, you will be able to use the experimental API without requiring your beta testers to turn a feature flag in [edge://flags](about://flags).

- -

Web Developer Guidelines

- -

Allowed Origins

- -

The Edge Origin Trials portal today **only supports SSL Enabled Origins**, websites wanting to register for an experiment must have `HTTPS` properly implemented. However, in future portal releases we are looking to enable more secure origins such as:

- -
    -
  • Localhost: it's going to be possible to register `http://localhost` in experiments, today developer can *enable* the appropriate feature flag in [edge://flags](about://flags).
    • -
  • Extensions: it's going to be possible for `extensions://` prefixed origins to enroll in experiments.
    • -
- -

Subdomains, URL Paths and Query Params

- -

It is possible to only enroll a specific subdomain such as `https://dev.example.com` or an origin with wild-card match to all it's subdomains by answering *Yes* to the "Do you need to match all subdomains for the provided origin?" question in the [Microsoft Edge Origin Trials Developer Console](https://developer.microsoft.com/en-us/microsoft-edge/origin-trials). However, the following scenarios are **not** possible:

- -
    -
  • https://example.com/path/new-feature
    • -
  • https://example.com/path/new-feature?test_id=12345
    • -
- -

Registered Trial Duration

- -

Once you have registered for a trial, your token will be valid for **6 weeks**, which this is the standard duration for a trial cycle, and the end of each cycle, you are eligible to renew after providing your feedback on the API you are experimenting with.

- -

We will send out emails reminding you to provide feedback and renew before your token expires.

- -

Experiment duration

- -

The duration of an experiment is usually longer than 6 weeks, the standard duration for a trial cycle. When browsing available experiments you will be able to see which versions of Edge the experiment will be available for as well as the estimated end date.

- -

A browser feature team may decide to early-end an experiment in case of any major security incidents caused by the feature, or they have collected enough feedback and concluded the currently proposed API does not meet the web developer needs, and a major redesign need to happen. We will be sending out emails to all developers enrolled in an experiment in the case of early-end.

- -

Opting out of an experiment

- -

To opt out of an experiment, you can simply remove the token we have provided from your page's HEAD `meta` tag or server's response HTTP header.

- -

Experimental feature implementation best practices

- -

MDN has a great resource on best practices for feature detection, you can [view it here](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection). In summary, it is important to always provide a working experience if the feature your website is using does not exist in the browser your visitor is running, this is extremely applicable when relying on an experimental feature using a token that needs to be renewed every 6 weeks.

-
- -
- - diff --git a/img/origin-hero.svg b/origin-trials/img/origin-hero.svg similarity index 100% rename from img/origin-hero.svg rename to origin-trials/img/origin-hero.svg diff --git a/origin-trials/index.html b/origin-trials/index.html new file mode 100644 index 00000000..614fcfe6 --- /dev/null +++ b/origin-trials/index.html @@ -0,0 +1,70 @@ + + + + + + + + +
+
+

Microsoft Edge Origin Trials

+

Origin trials give web developers access to experimental web platform features to ensure utility and stability of a feature prior to being available to every developer. These trials are open to all developers and are limited in duration and usage.

+
+
+
+

Active Origin Trials

+
+
+
+

Getting Started

+

Register for an Experiment

+

Our registration process is consistent with Chrome Origin Trials, simply click the Register button for any of the available experiments listed above. Follow the prompts in the registration form and we'll send you a valid token to use on your site.

+ +

Using an Origin Trial Token

+

There are two ways to use the tokens provide in your page:

+ + Option 1: Using a <meta> Tag +

Add an origin-trial tag to the head of any page.

+ + 

+                    <meta http-equiv="origin-trial" content="your-token-goes-here">
+
+ + Option 2: Using an HTTP Header +

Alternatively, you can add an `Origin-Trial` header to your HTTP server response.

+ + 

+                    Origin-Trial: your-token-goes-here
+
+ +

When a token is found in a document, Microsoft Edge will automatically turn on the Edge Feature Flag corresponding to the trial for which the token is valid. This will allow visitors of the application to use the feature despite it's off-by-default state in their local browser.

+ +

Developer Guidelines

+ +

Allowed Origins

+

Edge origin trials only support SSL-enabled domains. For localhost testing of a feature, please use the appropriate Edge Feature Flag located in about://flags. In the future, we may publish public tokens that are valid for localhost testing. + +

Subdomains, URL Paths and Query Params

+

Origin trial tokens can be configured to support a single domain or subdomain, but they can also be configured to support wild card subdomains for a specific domain. For example, a developer can register https://beta.example.com without subdomain support or a developer can register https://example.com with the subdomain support checkbox selected at registration time to enable all subdomains of that origin.

+ +

Paths and query parameters are not supported by the origin trial system. URIs that are submitted with trailing paths or query parameters, such as https://example.com/path/new-feature will be registered as the root domain.

+ +

Origin Trial Duration

+

Once you have registered for a trial, your token will be valid until the expiration date listed on the trial informational card. After this date, the token will no longer function and the feature associated with the trial will be considered ready to ship or be brought back for further development based on developer feedback.

+ +

A browser feature team may decide to early-end an experiment in case of any major security incidents caused by the feature, or they have collected enough feedback and concluded the currently proposed API does not meet the web developer needs, and a major redesign need to happen. We will be sending out emails to all developers enrolled in an experiment in the case of early-end.

+ +

Providing Feedback on an Origin Trial

+

If you would like to provide public feedback for a particular trial, please click the issues button located next to the registration button for that trial. We track all feedback as GitHub issues in order to allow for public discourse on ergonomics and stability of a feature.

+ +

Opting out of an experiment

+

To opt out of an experiment, you can simply remove the token we have provided from the <meta> tag or from the server response headers.

+ +

Experimental feature implementation best practices

+

MDN has a great resource on best practices for feature detection, you can view it here. We encourage all developers to treat origin trials as experimental and provide graceful fallback mechanisms should the token expire or the browser team choose to discontinue an active trial.

+
+
+ + + diff --git a/origin-trials/script.js b/origin-trials/script.js new file mode 100644 index 00000000..21c6eed7 --- /dev/null +++ b/origin-trials/script.js @@ -0,0 +1,41 @@ +if (document.readyState != 'loading') { + onload(); +} else { + document.addEventListener('DOMContentLoaded', onload); +} + +async function onload() { + await populateActiveTrialList(); +} + +async function populateActiveTrialList() { + + let trials = await fetch('trials.json') + .then( stream => stream.json() ) + + let active = trials["active"]; + + let section = document.querySelector("#active-trials-section"); + + active.forEach( trial => { + let label = trial["label"]; + let expires = trial["expiration"]; + let explainer = trial["explainer"]; + let issue = trial["issue"]; + + let card = document.createElement("trial-card"); + + card.setAttribute("label", label); + card.setAttribute("expires", expires); + + if (explainer != undefined) { + card.setAttribute("explainer", explainer); + } + + if (issue != undefined) { + card.setAttribute("issue", issue); + } + + section.appendChild(card); + }); +} \ No newline at end of file diff --git a/styles.css b/origin-trials/styles.css similarity index 81% rename from styles.css rename to origin-trials/styles.css index 73959ebf..0fbb0601 100644 --- a/styles.css +++ b/origin-trials/styles.css @@ -32,6 +32,12 @@ header h1 { font-weight: 200; } +hr { + margin: 4rem 0 4rem 0; + border: 1px solid #dfdfdf; + border-top: 1px solid #b0b0b0; +} + .header__section-left { display: flex; flex-direction: column; @@ -50,4 +56,8 @@ header h1 { font-weight: 600; color: rgb(14, 80, 14); padding: 0rem 0rem 1rem 0rem +} + +#active-trials-section { + margin: 4rem 0 0 0; } \ No newline at end of file diff --git a/origin-trials/trial-card.component.html b/origin-trials/trial-card.component.html new file mode 100644 index 00000000..442282c6 --- /dev/null +++ b/origin-trials/trial-card.component.html @@ -0,0 +1,59 @@ + +
+ + Explainer + + + +
\ No newline at end of file diff --git a/origin-trials/trial-card.component.js b/origin-trials/trial-card.component.js new file mode 100644 index 00000000..7910b863 --- /dev/null +++ b/origin-trials/trial-card.component.js @@ -0,0 +1,76 @@ +fetch("trial-card.component.html") + .then( stream => stream.text() ) + .then( text => define(text) ); + +const REGISTRATION_LINK = "https://aka.ms/origin-trial-registration" + +function define(template) { + class TrialCard extends HTMLElement { + constructor() { + super(); + + this._shadow = this.attachShadow({ mode: "open" }); + this._shadow.innerHTML = template; + + // Store references to internal components + this._heading = this._shadow.querySelector('.trial-card__title'); + this._explainer = this._shadow.querySelector('.trial-card__explainer'); + this._expires = this._shadow.querySelector('.trial-card__expires'); + this._badge = this._shadow.querySelector('.trial-card__issue-badge'); + this._register = this._shadow.querySelector('.trial-card__registration-button'); + } + + connectedCallback() { + // Set initial values of elements based on attributes + let heading = this.getAttribute("label"); + let explainer = this.getAttribute("explainer"); + let expires = this.getAttribute("expires"); + let issue = this.getAttribute("issue"); + + this._heading.innerHTML = heading; + this._expires.innerHTML = expires; + + this._explainer.setAttribute('href', explainer); + + if (issue != null && issue.length > 0) { + this._badge.setAttribute('href', this.getIssueLink(issue)); + + let img = document.createElement('img'); + img.src = this.getIssueBadgeLink(issue); + + this._badge.appendChild(img) + } else { + this._badge.setAttribute('href', this.getGenericIssueLink(heading)); + + let img = document.createElement('img'); + img.src = this.getIssueBadgeLink('OriginTrialFeedback'); + + this._badge.appendChild(img); + } + + this._register.addEventListener('click', () => window.open(REGISTRATION_LINK, '_blank')) + } + + attributeChangedCallback(name, previous, current) { + console.log(`${name} ${previous} ${current}`); + } + + getIssueBadgeLink(tag) { + let encoded = encodeURI(tag); + return `https://img.shields.io/github/issues/MicrosoftEdge/MSEdgeExplainers/${encoded}?label=issues`; + } + + getIssueLink(tag) { + let encoded = encodeURI(tag); + let label = tag.replace(' ', '+') + return `https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?labels=${label},OriginTrialFeedback&title=%5B${encoded}%5D+Feedback` + } + + getGenericIssueLink(name) { + let encoded = encodeURI(name); + return `https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?labels=OriginTrialFeedback&title=%5B${encoded}%5D+Feedback`; + } + } + + customElements.define('trial-card', TrialCard); +} \ No newline at end of file diff --git a/origin-trials/trials.json b/origin-trials/trials.json new file mode 100644 index 00000000..59fb5c5b --- /dev/null +++ b/origin-trials/trials.json @@ -0,0 +1,18 @@ +{ + "active": [ + { + "label": "Web Haptics API", + "expiration": "2023-12-31", + "issue": "HapticsDevice API", + "explainer": "https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/HapticsDevice/explainer.md" + },{ + "label": "Digital Goods API", + "expiration": "2023-12-31", + "explainer": "#" + } + ], + + "expired": [ + + ] +} \ No newline at end of file