@mdn/fred 1.1.1 → 1.2.0

package/out/static/client/{370.85e6b0ff8596c5ae.js → 370.d2e13711140af6d1.js}

@@ -1,5 +1,5 @@
-/*! For license information please see 370.85e6b0ff8596c5ae.js.LICENSE.txt */
-export const __webpack_id__="370";export const __webpack_ids__=["370"];export const __webpack_modules__={95060:function(r,o,e){e.d(o,{A:()=>p});var t=e(63819),a=e(31601),i=e.n(a),s=e(76314),n=e.n(s),l=e(55196),d=e(283),m=e(23653),u=n()(i());u.i(l.A),u.i(d.A),u.i(m.A),u.push([r.id,':host{font:400 var(--base-font-size) var(--font-body);--border-radius:0.3rem}.observatory-form__input-group{display:flex;height:3rem}.observatory-form__input-group :focus-visible{outline:1px solid var(--observatory-accent);outline-offset:-1px;outline-width:1px}.observatory-form__input-group ::placeholder{color:var(--color-text-secondary);opacity:.8}.observatory-form__input-group .observatory-form__input{flex-grow:1;font:inherit;padding:0 .75rem;width:100%;--csstools-light-dark-toggle-77e093d8-0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle-77e093d8-0,var(--color-gray-90));border:1px solid var(--color-border-primary);border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}@supports (color:light-dark(red,red)){.observatory-form__input-group .observatory-form__input{background-color:light-dark(var(--color-gray-90),var(--color-gray-05))}}:is(.observatory-form__input-group .observatory-form__input)::placeholder{overflow-x:hidden;text-overflow:ellipsis}.observatory-form__input-group .observatory-form__submit{border:none;border-radius:0 var(--border-radius) var(--border-radius) 0;border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);font-size:var(--font-size-normal);font-weight:var(--font-weight-bold);height:unset;padding:0 2rem}.error{color:var(--form-invalid-color);margin-top:.5rem}.error:before{background-color:var(--form-invalid-color);content:"";display:inline-block;height:1.15rem;margin-bottom:.25rem;margin-right:.5rem;-webkit-mask-image:var(--alert-circle-img);mask-image:var(--alert-circle-img);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}',""]);let p=(0,t.AH)([u.toString()])},55196:function(r,o,e){e.d(o,{A:()=>n});var t=e(31601),a=e.n(t),i=e(76314),s=e.n(i)()(a());s.push([r.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let n=s.toString()},23653:function(r,o,e){e.d(o,{A:()=>n});var t=e(31601),a=e.n(t),i=e(76314),s=e.n(i)()(a());s.push([r.id,".visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}",""]);let n=s.toString()},92691:function(r,o,e){e.r(o),e.d(o,{MDNObservatoryForm:()=>MDNObservatoryForm});var t=e(63819),a=e(69392),i=e(79097);e(73589),e(99638);var s=e(95060);let n={TypeError:"Observatory is currently down."};let MDNObservatoryForm=class MDNObservatoryForm extends t.WF{static styles=s.A;static properties={_queryRunning:{type:Boolean,state:!0},_hostname:{type:String,state:!0},_errorMessage:{type:String,state:!0}};constructor(){super(),this._queryRunning=!1,this._hostname="",this._errorMessage=""}inputRef=(0,a._)();firstUpdated(){this.inputRef.value?.focus()}async _handleSubmit(r){r.preventDefault(),this._errorMessage="";let o=this.inputRef.value;if(!o?.value.trim()){this._errorMessage="Please enter a valid hostname";return}let e=o.value.trim();try{let r=new URL(e);this._hostname=r.hostname.trim()||e}catch{this._hostname=e}this._queryRunning=!0;try{let r=new URL(i.Q+`/api/v2/analyze?host=${encodeURIComponent(this._hostname)}`),o=await fetch(r,{method:"POST"});if(!o.ok){let r=await o.json();throw Error(`Request failed: ${r.message}`)}globalThis.location.href=`/en-US/observatory/analyze?host=${encodeURIComponent(this._hostname)}`}catch(r){this._errorMessage=`${n[r.name]||"message"in r?r.message:r}`}finally{this._queryRunning=!1}}render(){return this._queryRunning?(0,t.qy)`
+/*! For license information please see 370.d2e13711140af6d1.js.LICENSE.txt */
+export const __webpack_id__="370";export const __webpack_ids__=["370"];export const __webpack_modules__={95060:function(r,o,e){e.d(o,{A:()=>p});var t=e(63819),a=e(31601),i=e.n(a),s=e(76314),n=e.n(s),l=e(55196),d=e(283),m=e(23653),u=n()(i());u.i(l.A),u.i(d.A),u.i(m.A),u.push([r.id,':host{font:400 var(--base-font-size) var(--font-body);--border-radius:0.3rem}.observatory-form__input-group{display:flex;height:3rem}.observatory-form__input-group :focus-visible{outline:1px solid var(--observatory-accent);outline-offset:-1px;outline-width:1px}.observatory-form__input-group ::placeholder{color:var(--color-text-secondary);opacity:.8}.observatory-form__input-group .observatory-form__input{flex-grow:1;font:inherit;padding:0 .75rem;width:100%;--csstools-light-dark-toggle-77e093d8-0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle-77e093d8-0,var(--color-gray-90));border:1px solid var(--color-border-primary);border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}@supports (color:light-dark(red,red)){.observatory-form__input-group .observatory-form__input{background-color:light-dark(var(--color-gray-90),var(--color-gray-05))}}:is(.observatory-form__input-group .observatory-form__input)::placeholder{overflow-x:hidden;text-overflow:ellipsis}.observatory-form__input-group .observatory-form__submit{border:none;border-radius:0 var(--border-radius) var(--border-radius) 0;border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);font-size:var(--font-size-normal);font-weight:var(--font-weight-bold);height:unset;padding:0 2rem}.error{color:var(--form-invalid-color);margin-top:.5rem}.error:before{background-color:var(--form-invalid-color);content:"";display:inline-block;height:1.15rem;margin-bottom:.25rem;margin-right:.5rem;-webkit-mask-image:var(--alert-circle-img);mask-image:var(--alert-circle-img);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}',""]);let p=(0,t.AH)([u.toString()])},55196:function(r,o,e){e.d(o,{A:()=>n});var t=e(31601),a=e.n(t),i=e(76314),s=e.n(i)()(a());s.push([r.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let n=s.toString()},23653:function(r,o,e){e.d(o,{A:()=>n});var t=e(31601),a=e.n(t),i=e(76314),s=e.n(i)()(a());s.push([r.id,".visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}",""]);let n=s.toString()},92691:function(r,o,e){e.r(o),e.d(o,{MDNObservatoryForm:()=>MDNObservatoryForm});var t=e(63819),a=e(69392),i=e(36728);e(73589),e(99638);var s=e(95060);let n={TypeError:"Observatory is currently down."};let MDNObservatoryForm=class MDNObservatoryForm extends t.WF{static styles=s.A;static properties={_queryRunning:{type:Boolean,state:!0},_hostname:{type:String,state:!0},_errorMessage:{type:String,state:!0}};constructor(){super(),this._queryRunning=!1,this._hostname="",this._errorMessage=""}inputRef=(0,a._)();firstUpdated(){this.inputRef.value?.focus()}async _handleSubmit(r){r.preventDefault(),this._errorMessage="";let o=this.inputRef.value;if(!o?.value.trim()){this._errorMessage="Please enter a valid hostname";return}let e=o.value.trim();try{let r=new URL(e);this._hostname=r.hostname.trim()||e}catch{this._hostname=e}this._queryRunning=!0;try{let r=new URL(i.Q+`/api/v2/analyze?host=${encodeURIComponent(this._hostname)}`),o=await fetch(r,{method:"POST"});if(!o.ok){let r=await o.json();throw Error(`Request failed: ${r.message}`)}globalThis.location.href=`/en-US/observatory/analyze?host=${encodeURIComponent(this._hostname)}`}catch(r){this._errorMessage=`${n[r.name]||"message"in r?r.message:r}`}finally{this._queryRunning=!1}}render(){return this._queryRunning?(0,t.qy)`
           <label class="visually-hidden" for="progress-bar">
             Scanning ${this._hostname} </label
           ><mdn-progress-bar id="progress-bar"></mdn-progress-bar>
@@ -31,4 +31,4 @@ export const __webpack_id__="370";export const __webpack_ids__=["370"];export co
           </form>
           ${this._errorMessage?(0,t.qy)`<div class="error">${this._errorMessage}</div>`:t.s6}
         `}};customElements.define("mdn-observatory-form",MDNObservatoryForm)},62963:function(r,o,e){e.d(o,{J:()=>a});var t=e(97160);let a=r=>r??t.s6}};
-//# sourceMappingURL=370.85e6b0ff8596c5ae.js.map
+//# sourceMappingURL=370.d2e13711140af6d1.js.map

package/out/static/client/{370.85e6b0ff8596c5ae.js.map → 370.d2e13711140af6d1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"370.85e6b0ff8596c5ae.js","sources":["webpack://@mdn/fred/./components/observatory-form/element.css","webpack://@mdn/fred/./components/global/global.css?1b68","webpack://@mdn/fred/./components/visually-hidden/global.css?228a","webpack://@mdn/fred/./components/observatory-form/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../button/server.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_2___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../visually-hidden/global.css\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_2___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{font:400 var(--base-font-size) var(--font-body);--border-radius:0.3rem}.observatory-form__input-group{display:flex;height:3rem}.observatory-form__input-group :focus-visible{outline:1px solid var(--observatory-accent);outline-offset:-1px;outline-width:1px}.observatory-form__input-group ::placeholder{color:var(--color-text-secondary);opacity:.8}.observatory-form__input-group .observatory-form__input{flex-grow:1;font:inherit;padding:0 .75rem;width:100%;--csstools-light-dark-toggle-77e093d8-0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle-77e093d8-0,var(--color-gray-90));border:1px solid var(--color-border-primary);border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}@supports (color:light-dark(red,red)){.observatory-form__input-group .observatory-form__input{background-color:light-dark(var(--color-gray-90),var(--color-gray-05))}}:is(.observatory-form__input-group .observatory-form__input)::placeholder{overflow-x:hidden;text-overflow:ellipsis}.observatory-form__input-group .observatory-form__submit{border:none;border-radius:0 var(--border-radius) var(--border-radius) 0;border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);font-size:var(--font-size-normal);font-weight:var(--font-weight-bold);height:unset;padding:0 2rem}.error{color:var(--form-invalid-color);margin-top:.5rem}.error:before{background-color:var(--form-invalid-color);content:\"\";display:inline-block;height:1.15rem;margin-bottom:.25rem;margin-right:.5rem;-webkit-mask-image:var(--alert-circle-img);mask-image:var(--alert-circle-img);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { LitElement, html, nothing } from \"lit\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport { OBSERVATORY_API_URL } from \"../env/index.js\";\nimport \"../progress-bar/element.js\";\nimport \"../button/element.js\";\n\nimport styles from \"./element.css?lit\";\n\nconst ERROR_MAP = {\n  TypeError: \"Observatory is currently down.\", // `fetch()` errors catch-all\n};\n\nexport class MDNObservatoryForm extends LitElement {\n  static styles = styles;\n\n  static properties = {\n    _queryRunning: { type: Boolean, state: true },\n    _hostname: { type: String, state: true },\n    _errorMessage: { type: String, state: true },\n  };\n\n  constructor() {\n    super();\n    this._queryRunning = false;\n    this._hostname = \"\";\n    this._errorMessage = \"\";\n  }\n  /** @type {import(\"@lit\").Ref<HTMLInputElement>}  */\n  inputRef = createRef();\n\n  firstUpdated() {\n    this.inputRef.value?.focus();\n  }\n\n  /**\n   * @param {Event} event\n   */\n  async _handleSubmit(event) {\n    event.preventDefault();\n    this._errorMessage = \"\";\n    const input = this.inputRef.value;\n    if (!input?.value.trim()) {\n      this._errorMessage = \"Please enter a valid hostname\";\n      return;\n    }\n\n    const host = input.value.trim();\n    try {\n      // tolerate url-style host values and pick out the hostname part\n      const url = new URL(host);\n      this._hostname = url.hostname.trim() || host;\n    } catch {\n      this._hostname = host;\n    }\n    this._queryRunning = true;\n    try {\n      const apiUrl = new URL(\n        OBSERVATORY_API_URL +\n          `/api/v2/analyze?host=${encodeURIComponent(this._hostname)}`,\n      );\n      const response = await fetch(apiUrl, { method: \"POST\" });\n      if (!response.ok) {\n        const json = await response.json();\n        throw new Error(`Request failed: ${json.message}`);\n      }\n      globalThis.location.href = `/en-US/observatory/analyze?host=${encodeURIComponent(\n        this._hostname,\n      )}`;\n    } catch (error) {\n      // @ts-expect-error\n      this._errorMessage = `${ERROR_MAP[error.name] || \"message\" in error ? error[\"message\"] : error}`;\n    } finally {\n      this._queryRunning = false;\n    }\n  }\n\n  render() {\n    return this._queryRunning\n      ? html`\n          <label class=\"visually-hidden\" for=\"progress-bar\">\n            Scanning ${this._hostname} </label\n          ><mdn-progress-bar id=\"progress-bar\"></mdn-progress-bar>\n        `\n      : html`\n          <form @submit=${this._handleSubmit} class=\"observatory-form\">\n            <div class=\"observatory-form__input-group\">\n              <label htmlFor=\"host\" class=\"visually-hidden\">\n                Domain name or URL\n              </label>\n              <input\n                class=\"input observatory-form__input\"\n                placeholder=\"Scan a website for free (e.g. mdn.dev)\"\n                type=\"text\"\n                name=\"host\"\n                id=\"host\"\n                .value=${this._hostname}\n                autofocus\n                ${ref(this.inputRef)}\n              />\n              <button\n                class=\"button observatory-form__submit\"\n                type=\"submit\"\n                ?disabled=${this._queryRunning}\n                data-variant=\"primary\"\n              >\n                Scan\n              </button>\n            </div>\n          </form>\n          ${this._errorMessage\n            ? html`<div class=\"error\">${this._errorMessage}</div>`\n            : nothing}\n        `;\n  }\n}\n\ncustomElements.define(\"mdn-observatory-form\", MDNObservatoryForm);\n","import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n"],"names":["MDNObservatoryForm","s","Boolean","String","URL","encodeURIComponent","fetch","Error","globalThis","customElements","t"],"mappings":"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"}
+{"version":3,"file":"370.d2e13711140af6d1.js","sources":["webpack://@mdn/fred/./components/observatory-form/element.css","webpack://@mdn/fred/./components/global/global.css?1b68","webpack://@mdn/fred/./components/visually-hidden/global.css?228a","webpack://@mdn/fred/./components/observatory-form/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../button/server.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_2___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../visually-hidden/global.css\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_2___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{font:400 var(--base-font-size) var(--font-body);--border-radius:0.3rem}.observatory-form__input-group{display:flex;height:3rem}.observatory-form__input-group :focus-visible{outline:1px solid var(--observatory-accent);outline-offset:-1px;outline-width:1px}.observatory-form__input-group ::placeholder{color:var(--color-text-secondary);opacity:.8}.observatory-form__input-group .observatory-form__input{flex-grow:1;font:inherit;padding:0 .75rem;width:100%;--csstools-light-dark-toggle-77e093d8-0:var(--csstools-color-scheme--light) var(--color-gray-05);background-color:var(--csstools-light-dark-toggle-77e093d8-0,var(--color-gray-90));border:1px solid var(--color-border-primary);border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}@supports (color:light-dark(red,red)){.observatory-form__input-group .observatory-form__input{background-color:light-dark(var(--color-gray-90),var(--color-gray-05))}}:is(.observatory-form__input-group .observatory-form__input)::placeholder{overflow-x:hidden;text-overflow:ellipsis}.observatory-form__input-group .observatory-form__submit{border:none;border-radius:0 var(--border-radius) var(--border-radius) 0;border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius);font-size:var(--font-size-normal);font-weight:var(--font-weight-bold);height:unset;padding:0 2rem}.error{color:var(--form-invalid-color);margin-top:.5rem}.error:before{background-color:var(--form-invalid-color);content:\"\";display:inline-block;height:1.15rem;margin-bottom:.25rem;margin-right:.5rem;-webkit-mask-image:var(--alert-circle-img);mask-image:var(--alert-circle-img);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:middle;width:1.5em}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { LitElement, html, nothing } from \"lit\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport { OBSERVATORY_API_URL } from \"../env/index.js\";\nimport \"../progress-bar/element.js\";\nimport \"../button/element.js\";\n\nimport styles from \"./element.css?lit\";\n\nconst ERROR_MAP = {\n  TypeError: \"Observatory is currently down.\", // `fetch()` errors catch-all\n};\n\nexport class MDNObservatoryForm extends LitElement {\n  static styles = styles;\n\n  static properties = {\n    _queryRunning: { type: Boolean, state: true },\n    _hostname: { type: String, state: true },\n    _errorMessage: { type: String, state: true },\n  };\n\n  constructor() {\n    super();\n    this._queryRunning = false;\n    this._hostname = \"\";\n    this._errorMessage = \"\";\n  }\n  /** @type {import(\"@lit\").Ref<HTMLInputElement>}  */\n  inputRef = createRef();\n\n  firstUpdated() {\n    this.inputRef.value?.focus();\n  }\n\n  /**\n   * @param {Event} event\n   */\n  async _handleSubmit(event) {\n    event.preventDefault();\n    this._errorMessage = \"\";\n    const input = this.inputRef.value;\n    if (!input?.value.trim()) {\n      this._errorMessage = \"Please enter a valid hostname\";\n      return;\n    }\n\n    const host = input.value.trim();\n    try {\n      // tolerate url-style host values and pick out the hostname part\n      const url = new URL(host);\n      this._hostname = url.hostname.trim() || host;\n    } catch {\n      this._hostname = host;\n    }\n    this._queryRunning = true;\n    try {\n      const apiUrl = new URL(\n        OBSERVATORY_API_URL +\n          `/api/v2/analyze?host=${encodeURIComponent(this._hostname)}`,\n      );\n      const response = await fetch(apiUrl, { method: \"POST\" });\n      if (!response.ok) {\n        const json = await response.json();\n        throw new Error(`Request failed: ${json.message}`);\n      }\n      globalThis.location.href = `/en-US/observatory/analyze?host=${encodeURIComponent(\n        this._hostname,\n      )}`;\n    } catch (error) {\n      // @ts-expect-error\n      this._errorMessage = `${ERROR_MAP[error.name] || \"message\" in error ? error[\"message\"] : error}`;\n    } finally {\n      this._queryRunning = false;\n    }\n  }\n\n  render() {\n    return this._queryRunning\n      ? html`\n          <label class=\"visually-hidden\" for=\"progress-bar\">\n            Scanning ${this._hostname} </label\n          ><mdn-progress-bar id=\"progress-bar\"></mdn-progress-bar>\n        `\n      : html`\n          <form @submit=${this._handleSubmit} class=\"observatory-form\">\n            <div class=\"observatory-form__input-group\">\n              <label htmlFor=\"host\" class=\"visually-hidden\">\n                Domain name or URL\n              </label>\n              <input\n                class=\"input observatory-form__input\"\n                placeholder=\"Scan a website for free (e.g. mdn.dev)\"\n                type=\"text\"\n                name=\"host\"\n                id=\"host\"\n                .value=${this._hostname}\n                autofocus\n                ${ref(this.inputRef)}\n              />\n              <button\n                class=\"button observatory-form__submit\"\n                type=\"submit\"\n                ?disabled=${this._queryRunning}\n                data-variant=\"primary\"\n              >\n                Scan\n              </button>\n            </div>\n          </form>\n          ${this._errorMessage\n            ? html`<div class=\"error\">${this._errorMessage}</div>`\n            : nothing}\n        `;\n  }\n}\n\ncustomElements.define(\"mdn-observatory-form\", MDNObservatoryForm);\n","import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n"],"names":["MDNObservatoryForm","s","Boolean","String","URL","encodeURIComponent","fetch","Error","globalThis","customElements","t"],"mappings":"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"}

package/out/static/client/{451.d36f6f80badd6af6.js → 451.cd85e2808f388a00.js}

@@ -1,4 +1,4 @@
-export const __webpack_id__="451";export const __webpack_ids__=["451"];export const __webpack_modules__={18526:function(t,e,a){a.r(e),a.d(e,{MDNCompatTableLazy:()=>MDNCompatTableLazy});var o=a(64889),r=a(63819);a(30191);var i=a(86484),s=a(96336),n=a(79097);let MDNCompatTableLazy=class MDNCompatTableLazy extends(0,i.J)(r.WF){static properties={query:{},locale:{}};constructor(){super(),this.query="",this.locale=s.Xn}connectedCallback(){super.connectedCallback()}get _issueUrl(){let t=new URLSearchParams,e=s.Nx.replaceAll("$DATE",new Date().toISOString()).replaceAll("$QUERY_ID",this.query).trim();return t.set("mdn-url",`https://developer.mozilla.org${globalThis.location.pathname}`),t.set("metadata",e),t.set("title",`${this.query} - Missing compatibility data`),t.set("template","data-problem.yml"),`https://github.com/mdn/browser-compat-data/issues/new?${t.toString()}`}get _issueLink(){let t=t=>{t.preventDefault(),window.open(this._issueUrl,"_blank","noopener,noreferrer")};return(0,r.qy)`<a
+export const __webpack_id__="451";export const __webpack_ids__=["451"];export const __webpack_modules__={18526:function(t,e,a){a.r(e),a.d(e,{MDNCompatTableLazy:()=>MDNCompatTableLazy});var o=a(64889),r=a(63819);a(30191);var i=a(86484),s=a(96336),n=a(36728);let MDNCompatTableLazy=class MDNCompatTableLazy extends(0,i.J)(r.WF){static properties={query:{},locale:{}};constructor(){super(),this.query="",this.locale=s.Xn}connectedCallback(){super.connectedCallback()}get _issueUrl(){let t=new URLSearchParams,e=s.Nx.replaceAll("$DATE",new Date().toISOString()).replaceAll("$QUERY_ID",this.query).trim();return t.set("mdn-url",`https://developer.mozilla.org${globalThis.location.pathname}`),t.set("metadata",e),t.set("title",`${this.query} - Missing compatibility data`),t.set("template","data-problem.yml"),`https://github.com/mdn/browser-compat-data/issues/new?${t.toString()}`}get _issueLink(){let t=t=>{t.preventDefault(),window.open(this._issueUrl,"_blank","noopener,noreferrer")};return(0,r.qy)`<a
       class="bc-github-link external external-icon"
       href="#"
       @click=${t}
@@ -14,4 +14,4 @@ export const __webpack_id__="451";export const __webpack_ids__=["451"];export co
                 .data=${t.data}
                 .browserInfo=${t.browsers}
               ></mdn-compat-table>`:(0,r.qy)`<p>No compatibility data found</p>`,error:t=>(0,r.qy)`<p>${t}</p>`})}};customElements.define("mdn-compat-table-lazy",MDNCompatTableLazy)}};
-//# sourceMappingURL=451.d36f6f80badd6af6.js.map
+//# sourceMappingURL=451.cd85e2808f388a00.js.map

package/out/static/client/{451.d36f6f80badd6af6.js.map → 451.cd85e2808f388a00.js.map}

@@ -1 +1 @@
-{"version":3,"file":"451.d36f6f80badd6af6.js","sources":["webpack://@mdn/fred/./components/compat-table-lazy/element.js"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { LitElement, html } from \"lit\";\n\nimport \"../compat-table/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport {\n  DEFAULT_LOCALE,\n  ISSUE_METADATA_TEMPLATE,\n} from \"../compat-table/constants.js\";\nimport { BCD_BASE_URL } from \"../env/index.js\";\n\n/**\n * @typedef {{data: import(\"@bcd\").Identifier, browsers: import(\"@bcd\").Browsers}} Compat\n */\n\nexport class MDNCompatTableLazy extends L10nMixin(LitElement) {\n  static properties = {\n    query: {},\n    locale: {},\n  };\n\n  constructor() {\n    super();\n    this.query = \"\";\n    this.locale = DEFAULT_LOCALE;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  get _issueUrl() {\n    const url = \"https://github.com/mdn/browser-compat-data/issues/new\";\n    const sp = new URLSearchParams();\n    const metadata = ISSUE_METADATA_TEMPLATE.replaceAll(\n      \"$DATE\",\n      new Date().toISOString(),\n    )\n      .replaceAll(\"$QUERY_ID\", this.query)\n      .trim();\n    sp.set(\n      \"mdn-url\",\n      `https://developer.mozilla.org${globalThis.location.pathname}`,\n    );\n    sp.set(\"metadata\", metadata);\n    sp.set(\"title\", `${this.query} - Missing compatibility data`);\n    sp.set(\"template\", \"data-problem.yml\");\n\n    return `${url}?${sp.toString()}`;\n  }\n\n  get _issueLink() {\n    const onClick = (/** @type {MouseEvent} */ event) => {\n      event.preventDefault();\n      window.open(this._issueUrl, \"_blank\", \"noopener,noreferrer\");\n    };\n\n    return html`<a\n      class=\"bc-github-link external external-icon\"\n      href=\"#\"\n      @click=${onClick}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      title=${this.l10n(\n        \"compat-link-report-missing-title\",\n      )`Report missing compatibility data`}\n      >${this.l10n(\"compat-link-report-missing\")`Report this issue`}</a\n    >`;\n  }\n\n  _dataTask = new Task(this, {\n    args: () => [this.query],\n    task: async ([query], { signal }) => {\n      const response = await fetch(\n        `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`,\n        { signal },\n      );\n      if (!response.ok) {\n        console.error(\"Failed to fetch BCD data:\", response);\n\n        if (response.status === 404) {\n          throw html`No compatibility data found for <code>${query}</code>.\n            (${this._issueLink})`;\n        }\n\n        throw html`Got HTTP ${response.status} when fetching browser\n          compatibility data for <code>${query}</code>`;\n      }\n      return /** @type {Promise<Compat>} */ response.json();\n    },\n  });\n\n  render() {\n    return this._dataTask.render({\n      initial: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n      pending: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n\n      complete:\n        /**\n         * @param {Compat} compat\n         */\n        (compat) =>\n          compat\n            ? html`<mdn-compat-table\n                query=${this.query}\n                locale=${this.locale}\n                .data=${compat.data}\n                .browserInfo=${compat.browsers}\n              ></mdn-compat-table>`\n            : html`<p>No compatibility data found</p>`,\n      error: (error) => html`<p>${error}</p>`,\n    });\n  }\n}\n\ncustomElements.define(\"mdn-compat-table-lazy\", MDNCompatTableLazy);\n"],"names":["MDNCompatTableLazy","URLSearchParams","Date","globalThis","window","fetch","console","customElements"],"mappings":"iQAeO,IAAMA,mBAAN,MAAMA,0BAA2B,QAAU,IAAU,EAC1D,OAAO,WAAa,CAClB,MAAO,CAAC,EACR,OAAQ,CAAC,CACX,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,KAAK,CAAG,GACb,IAAI,CAAC,MAAM,CAAG,IAAc,AAC9B,CAEA,mBAAoB,CAClB,KAAK,CAAC,mBACR,CAEA,IAAI,WAAY,CAEd,IAAM,EAAK,IAAIC,gBACT,EAAW,eAAkC,CACjD,QACA,IAAIC,OAAO,WAAW,IAErB,UAAU,CAAC,YAAa,IAAI,CAAC,KAAK,EAClC,IAAI,GASP,OARA,EAAG,GAAG,CACJ,UACA,CAAC,6BAA6B,EAAEC,WAAW,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAEhE,EAAG,GAAG,CAAC,WAAY,GACnB,EAAG,GAAG,CAAC,QAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAC5D,EAAG,GAAG,CAAC,WAAY,oBAEZ,yDAAU,EAAG,QAAQ,IAAI,AAClC,CAEA,IAAI,YAAa,CACf,IAAM,EAAU,AAA2B,IACzC,EAAM,cAAc,GACpBC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAE,SAAU,sBACxC,EAEA,MAAO,QAAI,CAAC;;;aAGH,EAAE,EAAQ;;;YAGX,EAAE,IAAI,CAAC,IAAI,CACf,mCACD,CAAC,iCAAiC,CAAC,CAAC;OACpC,EAAE,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;KAC/D,CAAC,AACJ,CAEA,UAAY,IAAI,IAAI,CAAC,IAAI,CAAE,CACzB,KAAM,IAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CACxB,KAAM,MAAO,CAAC,EAAM,CAAE,CAAE,QAAM,CAAE,IAC9B,IAAM,EAAW,MAAMC,MACrB,CAAC,EAAE,IAAY,CAAC,oBAAoB,EAAE,EAAM,KAAK,CAAC,CAClD,CAAE,QAAO,GAEX,GAAI,CAAC,EAAS,EAAE,CAAE,CAGhB,GAFAC,QAAQ,KAAK,CAAC,4BAA6B,GAEvC,AAAoB,MAApB,EAAS,MAAM,CACjB,KAAM,QAAI,CAAC,sCAAsC,EAAE,EAAM;aACtD,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,AAGzB,MAAM,QAAI,CAAC,SAAS,EAAE,EAAS,MAAM,CAAC;uCACP,EAAE,EAAM,OAAO,CAAC,AACjD,CACA,OAAsC,EAAS,IAAI,EACrD,CACF,EAAG,AAEH,SAAS,CACP,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAC3B,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CACpE,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAEpE,SAIE,AAAC,GACC,EACI,QAAI,CAAC;sBACG,EAAE,IAAI,CAAC,KAAK,CAAC;uBACZ,EAAE,IAAI,CAAC,MAAM,CAAC;sBACf,EAAE,EAAO,IAAI,CAAC;6BACP,EAAE,EAAO,QAAQ,CAAC;kCACb,CAAC,CACrB,QAAI,CAAC,kCAAkC,CAAC,CAChD,MAAO,AAAC,GAAU,QAAI,CAAC,GAAG,EAAE,EAAM,IAAI,CAAC,AACzC,EACF,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBP,mB"}
+{"version":3,"file":"451.cd85e2808f388a00.js","sources":["webpack://@mdn/fred/./components/compat-table-lazy/element.js"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { LitElement, html } from \"lit\";\n\nimport \"../compat-table/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport {\n  DEFAULT_LOCALE,\n  ISSUE_METADATA_TEMPLATE,\n} from \"../compat-table/constants.js\";\nimport { BCD_BASE_URL } from \"../env/index.js\";\n\n/**\n * @typedef {{data: import(\"@bcd\").Identifier, browsers: import(\"@bcd\").Browsers}} Compat\n */\n\nexport class MDNCompatTableLazy extends L10nMixin(LitElement) {\n  static properties = {\n    query: {},\n    locale: {},\n  };\n\n  constructor() {\n    super();\n    this.query = \"\";\n    this.locale = DEFAULT_LOCALE;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  get _issueUrl() {\n    const url = \"https://github.com/mdn/browser-compat-data/issues/new\";\n    const sp = new URLSearchParams();\n    const metadata = ISSUE_METADATA_TEMPLATE.replaceAll(\n      \"$DATE\",\n      new Date().toISOString(),\n    )\n      .replaceAll(\"$QUERY_ID\", this.query)\n      .trim();\n    sp.set(\n      \"mdn-url\",\n      `https://developer.mozilla.org${globalThis.location.pathname}`,\n    );\n    sp.set(\"metadata\", metadata);\n    sp.set(\"title\", `${this.query} - Missing compatibility data`);\n    sp.set(\"template\", \"data-problem.yml\");\n\n    return `${url}?${sp.toString()}`;\n  }\n\n  get _issueLink() {\n    const onClick = (/** @type {MouseEvent} */ event) => {\n      event.preventDefault();\n      window.open(this._issueUrl, \"_blank\", \"noopener,noreferrer\");\n    };\n\n    return html`<a\n      class=\"bc-github-link external external-icon\"\n      href=\"#\"\n      @click=${onClick}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      title=${this.l10n(\n        \"compat-link-report-missing-title\",\n      )`Report missing compatibility data`}\n      >${this.l10n(\"compat-link-report-missing\")`Report this issue`}</a\n    >`;\n  }\n\n  _dataTask = new Task(this, {\n    args: () => [this.query],\n    task: async ([query], { signal }) => {\n      const response = await fetch(\n        `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`,\n        { signal },\n      );\n      if (!response.ok) {\n        console.error(\"Failed to fetch BCD data:\", response);\n\n        if (response.status === 404) {\n          throw html`No compatibility data found for <code>${query}</code>.\n            (${this._issueLink})`;\n        }\n\n        throw html`Got HTTP ${response.status} when fetching browser\n          compatibility data for <code>${query}</code>`;\n      }\n      return /** @type {Promise<Compat>} */ response.json();\n    },\n  });\n\n  render() {\n    return this._dataTask.render({\n      initial: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n      pending: () => html`<p>${this.l10n(\"compat-loading\")`Loading…`}</p>`,\n\n      complete:\n        /**\n         * @param {Compat} compat\n         */\n        (compat) =>\n          compat\n            ? html`<mdn-compat-table\n                query=${this.query}\n                locale=${this.locale}\n                .data=${compat.data}\n                .browserInfo=${compat.browsers}\n              ></mdn-compat-table>`\n            : html`<p>No compatibility data found</p>`,\n      error: (error) => html`<p>${error}</p>`,\n    });\n  }\n}\n\ncustomElements.define(\"mdn-compat-table-lazy\", MDNCompatTableLazy);\n"],"names":["MDNCompatTableLazy","URLSearchParams","Date","globalThis","window","fetch","console","customElements"],"mappings":"iQAeO,IAAMA,mBAAN,MAAMA,0BAA2B,QAAU,IAAU,EAC1D,OAAO,WAAa,CAClB,MAAO,CAAC,EACR,OAAQ,CAAC,CACX,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,KAAK,CAAG,GACb,IAAI,CAAC,MAAM,CAAG,IAAc,AAC9B,CAEA,mBAAoB,CAClB,KAAK,CAAC,mBACR,CAEA,IAAI,WAAY,CAEd,IAAM,EAAK,IAAIC,gBACT,EAAW,eAAkC,CACjD,QACA,IAAIC,OAAO,WAAW,IAErB,UAAU,CAAC,YAAa,IAAI,CAAC,KAAK,EAClC,IAAI,GASP,OARA,EAAG,GAAG,CACJ,UACA,CAAC,6BAA6B,EAAEC,WAAW,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAEhE,EAAG,GAAG,CAAC,WAAY,GACnB,EAAG,GAAG,CAAC,QAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,6BAA6B,CAAC,EAC5D,EAAG,GAAG,CAAC,WAAY,oBAEZ,yDAAU,EAAG,QAAQ,IAAI,AAClC,CAEA,IAAI,YAAa,CACf,IAAM,EAAU,AAA2B,IACzC,EAAM,cAAc,GACpBC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAE,SAAU,sBACxC,EAEA,MAAO,QAAI,CAAC;;;aAGH,EAAE,EAAQ;;;YAGX,EAAE,IAAI,CAAC,IAAI,CACf,mCACD,CAAC,iCAAiC,CAAC,CAAC;OACpC,EAAE,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;KAC/D,CAAC,AACJ,CAEA,UAAY,IAAI,IAAI,CAAC,IAAI,CAAE,CACzB,KAAM,IAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CACxB,KAAM,MAAO,CAAC,EAAM,CAAE,CAAE,QAAM,CAAE,IAC9B,IAAM,EAAW,MAAMC,MACrB,CAAC,EAAE,IAAY,CAAC,oBAAoB,EAAE,EAAM,KAAK,CAAC,CAClD,CAAE,QAAO,GAEX,GAAI,CAAC,EAAS,EAAE,CAAE,CAGhB,GAFAC,QAAQ,KAAK,CAAC,4BAA6B,GAEvC,AAAoB,MAApB,EAAS,MAAM,CACjB,KAAM,QAAI,CAAC,sCAAsC,EAAE,EAAM;aACtD,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,AAGzB,MAAM,QAAI,CAAC,SAAS,EAAE,EAAS,MAAM,CAAC;uCACP,EAAE,EAAM,OAAO,CAAC,AACjD,CACA,OAAsC,EAAS,IAAI,EACrD,CACF,EAAG,AAEH,SAAS,CACP,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAC3B,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CACpE,QAAS,IAAM,QAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAEpE,SAIE,AAAC,GACC,EACI,QAAI,CAAC;sBACG,EAAE,IAAI,CAAC,KAAK,CAAC;uBACZ,EAAE,IAAI,CAAC,MAAM,CAAC;sBACf,EAAE,EAAO,IAAI,CAAC;6BACP,EAAE,EAAO,QAAQ,CAAC;kCACb,CAAC,CACrB,QAAI,CAAC,kCAAkC,CAAC,CAChD,MAAO,AAAC,GAAU,QAAI,CAAC,GAAG,EAAE,EAAM,IAAI,CAAC,AACzC,EACF,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBP,mB"}

package/out/static/client/{606.221fc4347a8278e8.js → 606.d22d2cf33232a730.js}

@@ -1,4 +1,4 @@
-export const __webpack_id__="606";export const __webpack_ids__=["606"];export const __webpack_modules__={70846:function(r,e,t){t.d(e,{A:()=>c});var a=t(63819),o=t(31601),s=t.n(o),i=t(76314),d=t.n(i),l=t(55196),n=t(23653),g=d()(s());g.i(l.A),g.i(n.A),g.push([r.id,".grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);height:5rem;line-height:5rem;text-align:center;width:5rem}.grade-a{--grade-bg:var(--observatory-grade-a-bg);--grade-border:var(--observatory-grade-a-border)}.grade-b{--grade-bg:var(--observatory-grade-b-bg);--grade-border:var(--observatory-grade-b-border)}.grade-c{--grade-bg:var(--observatory-grade-c-bg);--grade-border:var(--observatory-grade-c-border)}.grade-d{--grade-bg:var(--observatory-grade-d-bg);--grade-border:var(--observatory-grade-d-border)}.grade-f{--grade-bg:var(--observatory-grade-f-bg);--grade-border:var(--observatory-grade-f-border)}.chart{background-color:var(--color-background-primary);border-radius:var(--border-radius)}.tick text{font-family:var(--font-body);font-size:var(--font-size-normal);font-weight:300;fill:var(--color-text-secondary);transform:scale(1)}.tick text.x-labels{text-anchor:middle}.current:is(.tick text.x-labels){fill:var(--grade-border)}.tick text.y-labels{text-anchor:end}.tick line{opacity:.9;--csstools-light-dark-toggle-00eec90e-0:var(--csstools-color-scheme--light) var(--color-gray-40);stroke:var(--csstools-light-dark-toggle-00eec90e-0,var(--color-gray-60));stroke-width:1px;stroke-dasharray:5,5}@supports (color:light-dark(red,red)){.tick line{stroke:light-dark(var(--color-gray-60),var(--color-gray-40))}}.bar{fill:var(--grade-bg);stroke:var(--grade-bg);stroke-width:1}.bar.current-grade{stroke:var(--grade-border)}.you-are-here polyline{filter:drop-shadow(0 0 3px rgb(170 170 170));z-index:9;fill:var(--color-background-primary)}.you-are-here text{font-family:var(--font-body);font-size:var(--font-size-small);font-weight:var(--font-weight-normal);fill:var(--color-text-primary)}",""]);let c=(0,a.AH)([g.toString()])},23653:function(r,e,t){t.d(e,{A:()=>d});var a=t(31601),o=t.n(a),s=t(76314),i=t.n(s)()(o());i.push([r.id,".visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}",""]);let d=i.toString()},30077:function(r,e,t){t.r(e),t.d(e,{MDNObservatoryComparisonTable:()=>MDNObservatoryComparisonTable});var a=t(64889),o=t(63819),s=t(79097),i=t(35241),d=t(70846);let MDNObservatoryComparisonTable=class MDNObservatoryComparisonTable extends o.WF{static properties={result:{type:Object}};static styles=d.A;constructor(){super(),this.result=null}_gradeDistributionTask=new a.YZ(this,{task:async()=>{try{let r=new URL(s.Q+"/api/v2/grade_distribution"),e=await fetch(r);if(!e.ok){let r=`${e.status}: ${e.statusText}`;try{let t=await e.json();t.error&&(r=t.message)}catch{}throw Error(r)}return await e.json()}catch(r){throw console.log(r),Error("Observatory API request for comparison data failed")}},args:()=>[]});render(){return this.result?this._gradeDistributionTask.render({pending:()=>(0,o.qy)`<progress></progress>`,complete:r=>this.result?function({gradeDistribution:r,result:e}){let t=960/(r.length-1),a=100+t/2,s=function(r){let e=Math.max(...r.map(r=>r.count)),t=l(e,!1),a=l(t/7,!0),o=Math.ceil(Math.ceil(e/a)*a/a)+1,s=[];for(let r=0;r<o;r++)s.push(r*a);return s}(r),d=260/(s.length-1),n=Math.max(...s),g=r.map(r=>(0,o.qy)` <tr>
+export const __webpack_id__="606";export const __webpack_ids__=["606"];export const __webpack_modules__={70846:function(r,e,t){t.d(e,{A:()=>c});var a=t(63819),o=t(31601),s=t.n(o),i=t(76314),d=t.n(i),l=t(55196),n=t(23653),g=d()(s());g.i(l.A),g.i(n.A),g.push([r.id,".grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);height:5rem;line-height:5rem;text-align:center;width:5rem}.grade-a{--grade-bg:var(--observatory-grade-a-bg);--grade-border:var(--observatory-grade-a-border)}.grade-b{--grade-bg:var(--observatory-grade-b-bg);--grade-border:var(--observatory-grade-b-border)}.grade-c{--grade-bg:var(--observatory-grade-c-bg);--grade-border:var(--observatory-grade-c-border)}.grade-d{--grade-bg:var(--observatory-grade-d-bg);--grade-border:var(--observatory-grade-d-border)}.grade-f{--grade-bg:var(--observatory-grade-f-bg);--grade-border:var(--observatory-grade-f-border)}.chart{background-color:var(--color-background-primary);border-radius:var(--border-radius)}.tick text{font-family:var(--font-body);font-size:var(--font-size-normal);font-weight:300;fill:var(--color-text-secondary);transform:scale(1)}.tick text.x-labels{text-anchor:middle}.current:is(.tick text.x-labels){fill:var(--grade-border)}.tick text.y-labels{text-anchor:end}.tick line{opacity:.9;--csstools-light-dark-toggle-00eec90e-0:var(--csstools-color-scheme--light) var(--color-gray-40);stroke:var(--csstools-light-dark-toggle-00eec90e-0,var(--color-gray-60));stroke-width:1px;stroke-dasharray:5,5}@supports (color:light-dark(red,red)){.tick line{stroke:light-dark(var(--color-gray-60),var(--color-gray-40))}}.bar{fill:var(--grade-bg);stroke:var(--grade-bg);stroke-width:1}.bar.current-grade{stroke:var(--grade-border)}.you-are-here polyline{filter:drop-shadow(0 0 3px rgb(170 170 170));z-index:9;fill:var(--color-background-primary)}.you-are-here text{font-family:var(--font-body);font-size:var(--font-size-small);font-weight:var(--font-weight-normal);fill:var(--color-text-primary)}",""]);let c=(0,a.AH)([g.toString()])},23653:function(r,e,t){t.d(e,{A:()=>d});var a=t(31601),o=t.n(a),s=t(76314),i=t.n(s)()(o());i.push([r.id,".visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}",""]);let d=i.toString()},30077:function(r,e,t){t.r(e),t.d(e,{MDNObservatoryComparisonTable:()=>MDNObservatoryComparisonTable});var a=t(64889),o=t(63819),s=t(36728),i=t(35241),d=t(70846);let MDNObservatoryComparisonTable=class MDNObservatoryComparisonTable extends o.WF{static properties={result:{type:Object}};static styles=d.A;constructor(){super(),this.result=null}_gradeDistributionTask=new a.YZ(this,{task:async()=>{try{let r=new URL(s.Q+"/api/v2/grade_distribution"),e=await fetch(r);if(!e.ok){let r=`${e.status}: ${e.statusText}`;try{let t=await e.json();t.error&&(r=t.message)}catch{}throw Error(r)}return await e.json()}catch(r){throw console.log(r),Error("Observatory API request for comparison data failed")}},args:()=>[]});render(){return this.result?this._gradeDistributionTask.render({pending:()=>(0,o.qy)`<progress></progress>`,complete:r=>this.result?function({gradeDistribution:r,result:e}){let t=960/(r.length-1),a=100+t/2,s=function(r){let e=Math.max(...r.map(r=>r.count)),t=l(e,!1),a=l(t/7,!0),o=Math.ceil(Math.ceil(e/a)*a/a)+1,s=[];for(let r=0;r<o;r++)s.push(r*a);return s}(r),d=260/(s.length-1),n=Math.max(...s),g=r.map(r=>(0,o.qy)` <tr>
         <th>
           ${(0,i.c0)(r.grade)}
           ${r.grade===e.scan.grade?"(Current grade)":""}
@@ -99,4 +99,4 @@ export const __webpack_id__="606";export const __webpack_ids__=["606"];export co
     </svg>
   `}
   `}({gradeDistribution:r,result:this.result}):o.s6,error:r=>(0,o.qy)`<div class="error">${r}</div>`}):o.s6}};function l(r,e){let t=Math.floor(Math.log10(r)),a=r/Math.pow(10,t);return(e?a<1.5?1:a<3?2:a<7?5:10:a<=1?1:a<=2?2:a<=5?5:10)*Math.pow(10,t)}customElements.define("mdn-observatory-comparison-table",MDNObservatoryComparisonTable)}};
-//# sourceMappingURL=606.221fc4347a8278e8.js.map
+//# sourceMappingURL=606.d22d2cf33232a730.js.map

package/out/static/client/{606.221fc4347a8278e8.js.map → 606.d22d2cf33232a730.js.map}

@@ -1 +1 @@
-{"version":3,"file":"606.221fc4347a8278e8.js","sources":["webpack://@mdn/fred/./components/observatory-comparison-table/element.css","webpack://@mdn/fred/./components/visually-hidden/global.css?228a","webpack://@mdn/fred/./components/observatory-comparison-table/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../visually-hidden/global.css\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);height:5rem;line-height:5rem;text-align:center;width:5rem}.grade-a{--grade-bg:var(--observatory-grade-a-bg);--grade-border:var(--observatory-grade-a-border)}.grade-b{--grade-bg:var(--observatory-grade-b-bg);--grade-border:var(--observatory-grade-b-border)}.grade-c{--grade-bg:var(--observatory-grade-c-bg);--grade-border:var(--observatory-grade-c-border)}.grade-d{--grade-bg:var(--observatory-grade-d-bg);--grade-border:var(--observatory-grade-d-border)}.grade-f{--grade-bg:var(--observatory-grade-f-bg);--grade-border:var(--observatory-grade-f-border)}.chart{background-color:var(--color-background-primary);border-radius:var(--border-radius)}.tick text{font-family:var(--font-body);font-size:var(--font-size-normal);font-weight:300;fill:var(--color-text-secondary);transform:scale(1)}.tick text.x-labels{text-anchor:middle}.current:is(.tick text.x-labels){fill:var(--grade-border)}.tick text.y-labels{text-anchor:end}.tick line{opacity:.9;--csstools-light-dark-toggle-00eec90e-0:var(--csstools-color-scheme--light) var(--color-gray-40);stroke:var(--csstools-light-dark-toggle-00eec90e-0,var(--color-gray-60));stroke-width:1px;stroke-dasharray:5,5}@supports (color:light-dark(red,red)){.tick line{stroke:light-dark(var(--color-gray-60),var(--color-gray-40))}}.bar{fill:var(--grade-bg);stroke:var(--grade-bg);stroke-width:1}.bar.current-grade{stroke:var(--grade-border)}.you-are-here polyline{filter:drop-shadow(0 0 3px rgb(170 170 170));z-index:9;fill:var(--color-background-primary)}.you-are-here text{font-family:var(--font-body);font-size:var(--font-size-small);font-weight:var(--font-weight-normal);fill:var(--color-text-primary)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing, svg } from \"lit\";\n\nimport { OBSERVATORY_API_URL } from \"../env/index.js\";\nimport { formatMinus } from \"../observatory/utils.js\";\n\nimport styles from \"./element.css?lit\";\n\nexport class MDNObservatoryComparisonTable extends LitElement {\n  static properties = {\n    result: { type: Object },\n  };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    /** @type {import(\"@observatory\").Result | null} */\n    this.result = null;\n  }\n\n  _gradeDistributionTask = new Task(this, {\n    task: async () => {\n      try {\n        const url = new URL(OBSERVATORY_API_URL + \"/api/v2/grade_distribution\");\n        const res = await fetch(url);\n        if (!res.ok) {\n          let message = `${res.status}: ${res.statusText}`;\n          try {\n            const data = await res.json();\n            if (data.error) {\n              message = data.message;\n            }\n          } catch {\n            // Ignore.\n          }\n          throw new Error(message);\n        }\n        return await res.json();\n      } catch (error) {\n        console.log(error);\n        throw new Error(\"Observatory API request for comparison data failed\");\n      }\n    },\n    args: () => [],\n  });\n\n  render() {\n    if (!this.result) {\n      return nothing;\n    }\n    return this._gradeDistributionTask.render({\n      pending: () => html`<progress></progress>`,\n\n      complete: (gradeDistribution) => {\n        if (!this.result) {\n          return nothing;\n        }\n\n        return GradeSVG({ gradeDistribution, result: this.result });\n      },\n\n      error: (e) => html`<div class=\"error\">${e}</div>`,\n    });\n  }\n}\n\ncustomElements.define(\n  \"mdn-observatory-comparison-table\",\n  MDNObservatoryComparisonTable,\n);\n\n/**\n *\n * @param {{gradeDistribution: import(\"@observatory\").GradeDistribution[], result: import(\"@observatory\").Result}} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nfunction GradeSVG({ gradeDistribution, result }) {\n  const width = 1200;\n  const height = 380;\n  const leftSpace = 100; // left edge to left edge of first bar\n  const rightSpace = 80; // right edge to tight edge of last bar\n  const bottomSpace = 60; // bottom edge to bottom edge of bars\n  const topSpace = 60; // top padding\n  const itemCount = gradeDistribution.length;\n  const barWidth = 60;\n\n  // The x-axis has the different grades from \"A+\" to \"D-\".\n  const xTickIncr =\n    (width - leftSpace - rightSpace - barWidth) / (itemCount - 1);\n  const xTickOffset = leftSpace + xTickIncr / 2;\n\n  // The y-axis has ticks according to the maximum value of all grades.\n  const yMarks = calculateTicks(gradeDistribution);\n  const yTickOffset = height - bottomSpace;\n  const yTickIncr = (height - bottomSpace - topSpace) / (yMarks.length - 1);\n  const yTickMax = Math.max(...yMarks);\n\n  const rows = gradeDistribution.map(\n    (item) =>\n      html` <tr>\n        <th>\n          ${formatMinus(item.grade)}\n          ${item.grade === result.scan.grade ? \"(Current grade)\" : \"\"}\n        </th>\n        <td>${item.count} sites</td>\n      </tr>`,\n  );\n\n  return html`\n    <table id=\"grade-svg-a11y-table\" class=\"visually-hidden\">\n      <caption>\n        Number of sites by grade\n      </caption>\n      <thead>\n        <tr>\n          <th scope=\"col\">Grade</th>\n          <th scope=\"col\">Sites</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n    ${svg`\n    <svg\n      class=\"chart\"\n      viewBox=\"0 0 1200 380\"\n      aria-labelledby=\"grade-svg-title\"\n      aria-describedby=\"grade-svg-a11y-table\"\n    >\n      <title id=\"grade-svg-title\">Number of sites by grade</title>\n      <g class=\"axes-g\"> </g>\n        <g\n          class=\"x-axis\"\n          transform=\"translate(${xTickOffset}, ${height - bottomSpace})\"\n        >\n          ${gradeDistribution.map((item, index) => {\n            return svg` <g\n              class=\"tick tick-x\"\n              transform=\"${`translate(${index * xTickIncr}, 0)`}\"\n            >\n              <text\n                fill=\"currentColor\"\n                y=\"6\"\n                dy=\"1em\"\n                class=\"${[\n                  \"x-labels\",\n                  item.grade === result.scan.grade\n                    ? `current grade-${item.grade[0]?.toLowerCase()}`\n                    : undefined,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\"\n              >\n                ${formatMinus(item.grade)}\n              </text>\n            </g>`;\n          })}\n        </g>\n        <g>\n          ${gradeDistribution.map((item, index) => {\n            const barHeight =\n              (height - bottomSpace - topSpace) * (item.count / yTickMax);\n            return svg` <rect\n              class=\"bar grade-${item.grade\n                .replace(/[+-]/, \"\")\n                .toLowerCase()} ${\n                item.grade === result.scan.grade ? \"current-grade\" : \"\"\n              }\"\n              x=\"${xTickOffset + index * xTickIncr - barWidth / 2}\"\n              y=\"${yTickOffset - barHeight - 1}\"\n              rx=\"4\"\n              ry=\"4\"\n              width=\"${barWidth}\"\n              height=\"${barHeight}\"\n            ></rect>`;\n          })}\n        </g>\n        <g\n          class=\"y-axis\"\n          fill=\"none\"\n          textAnchor=\"end\"\n          transform=\"translate(${leftSpace}, 0)\"\n        >\n          ${yMarks.map(\n            (item, index) => svg` <g\n              class=\"tick tick-y\"\n              transform=\"translate(0, ${yTickOffset - yTickIncr * index})\"\n            >\n              <line\n                stroke=\"currentColor\"\n                x2=\"${width - leftSpace - rightSpace + barWidth / 2}\"\n              ></line>\n              <text class=\"y-labels\" fill=\"currentColor\" x=\"-25\" dy=\"0.32em\">\n                ${item / 1000}k\n              </text>\n            </g>`,\n          )}\n        </g>\n      </g>\n      <g>\n        ${gradeDistribution.map((item, index) => {\n          if (item.grade === result.scan.grade) {\n            const barHeight =\n              (height - bottomSpace - topSpace) * (item.count / yTickMax);\n            return svg` <g\n              key=\"you-are-here\"\n              class=\"you-are-here\"\n              transform=\"translate(${xTickOffset + index * xTickIncr}, ${\n                height - bottomSpace - barHeight - 50\n              })\"\n            >\n              <polyline\n                points=\"-60,0 60,0 60,36 7,36 0,48 -7,36 -60,36\"\n              ></polyline>\n              <text\n                x=\"0\"\n                y=\"0\"\n                text-anchor=\"middle\"\n                transform=\"translate(0, 24)\"\n              >\n                Current grade\n              </text>\n            </g>`;\n          } else {\n            return [];\n          }\n        })}\n      </g>\n    </svg>\n  `}\n  `;\n}\n\n/**\n * Calculate\n * @param {import(\"@observatory\").GradeDistribution[]} gradeDistribution\n * @returns {number[]}\n */\nfunction calculateTicks(gradeDistribution) {\n  const maxValue = Math.max(...gradeDistribution.map((item) => item.count));\n  const tickTargetCount = 7; // Target number of ticks between 5 and 10\n  const range = rangeForValue(maxValue, false); // Get a nice range\n  const tickInterval = rangeForValue(range / tickTargetCount, true); // Determine a nice tick interval\n  const niceMaxValue = Math.ceil(maxValue / tickInterval) * tickInterval; // Adjust max value to a nice number\n  const tickCount = Math.ceil(niceMaxValue / tickInterval) + 1; // Calculate the number of ticks\n\n  /** @type {number[]} */\n  const ticks = [];\n  for (let i = 0; i < tickCount; i++) {\n    ticks.push(i * tickInterval);\n  }\n  return ticks;\n}\n\n/**\n * This returns values to construct proper axis measurements in\n * diagrams. The returned value is 1|2|5 * 10^x.\n *\n * If `round` is `true`, the returned value can be also rounded down,\n * useful for calculating ticks on an axis.\n *\n * Examples:\n *\n * |range    |rounded=false|rounded=true|\n * |---------|-------------|------------|\n * |  1      |  1          |  1         |\n * |  2      |  2          |  2         |\n * |  3      |  5          |  5         |\n * |  4      |  5          |  5         |\n * |  5      |  5          |  5         |\n * |  6      |  10         |  5         |\n * |  7      |  10         |  10        |\n * |  8      |  10         |  10        |\n * |  9      |  10         |  10        |\n * |  10     |  10         |  10        |\n * |  34     |  50         |  50        |\n * |  450    |  500        |  500       |\n * |  560    |  1000       |  500       |\n * |  6780   |  10000      |  5000      |\n * |  10     |  10         |  10        |\n * |  100    |  100        |  100       |\n * |  1000   |  1000       |  1000      |\n * |  10000  |  10000      |  10000     |\n * @param {number} range The input value\n * @param {boolean} round If false, the returned value will always be greater than `range`, otherwise it can be rounded off\n * @returns {number} a number according to `1|2|5 * 10^x`, where x is derived from `range` to be in the same order of magnitude\n */\n\nfunction rangeForValue(range, round) {\n  const exponent = Math.floor(Math.log10(range));\n  const fraction = range / Math.pow(10, exponent);\n\n  /** @type {number} */\n  let niceFraction;\n  if (round) {\n    if (fraction < 1.5) {\n      niceFraction = 1;\n    } else if (fraction < 3) {\n      niceFraction = 2;\n    } else if (fraction < 7) {\n      niceFraction = 5;\n    } else {\n      niceFraction = 10;\n    }\n  } else {\n    if (fraction <= 1) {\n      niceFraction = 1;\n    } else if (fraction <= 2) {\n      niceFraction = 2;\n    } else if (fraction <= 5) {\n      niceFraction = 5;\n    } else {\n      niceFraction = 10;\n    }\n  }\n  return niceFraction * Math.pow(10, exponent);\n}\n"],"names":["MDNObservatoryComparisonTable","Object","URL","fetch","Error","console","Math","Boolean","r","customElements"],"mappings":"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"}
+{"version":3,"file":"606.d22d2cf33232a730.js","sources":["webpack://@mdn/fred/./components/observatory-comparison-table/element.css","webpack://@mdn/fred/./components/visually-hidden/global.css?228a","webpack://@mdn/fred/./components/observatory-comparison-table/element.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_1___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../visually-hidden/global.css\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);height:5rem;line-height:5rem;text-align:center;width:5rem}.grade-a{--grade-bg:var(--observatory-grade-a-bg);--grade-border:var(--observatory-grade-a-border)}.grade-b{--grade-bg:var(--observatory-grade-b-bg);--grade-border:var(--observatory-grade-b-border)}.grade-c{--grade-bg:var(--observatory-grade-c-bg);--grade-border:var(--observatory-grade-c-border)}.grade-d{--grade-bg:var(--observatory-grade-d-bg);--grade-border:var(--observatory-grade-d-border)}.grade-f{--grade-bg:var(--observatory-grade-f-bg);--grade-border:var(--observatory-grade-f-border)}.chart{background-color:var(--color-background-primary);border-radius:var(--border-radius)}.tick text{font-family:var(--font-body);font-size:var(--font-size-normal);font-weight:300;fill:var(--color-text-secondary);transform:scale(1)}.tick text.x-labels{text-anchor:middle}.current:is(.tick text.x-labels){fill:var(--grade-border)}.tick text.y-labels{text-anchor:end}.tick line{opacity:.9;--csstools-light-dark-toggle-00eec90e-0:var(--csstools-color-scheme--light) var(--color-gray-40);stroke:var(--csstools-light-dark-toggle-00eec90e-0,var(--color-gray-60));stroke-width:1px;stroke-dasharray:5,5}@supports (color:light-dark(red,red)){.tick line{stroke:light-dark(var(--color-gray-60),var(--color-gray-40))}}.bar{fill:var(--grade-bg);stroke:var(--grade-bg);stroke-width:1}.bar.current-grade{stroke:var(--grade-border)}.you-are-here polyline{filter:drop-shadow(0 0 3px rgb(170 170 170));z-index:9;fill:var(--color-background-primary)}.you-are-here text{font-family:var(--font-body);font-size:var(--font-size-small);font-weight:var(--font-weight-normal);fill:var(--color-text-primary)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.visually-hidden{border:0!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing, svg } from \"lit\";\n\nimport { OBSERVATORY_API_URL } from \"../env/index.js\";\nimport { formatMinus } from \"../observatory/utils.js\";\n\nimport styles from \"./element.css?lit\";\n\nexport class MDNObservatoryComparisonTable extends LitElement {\n  static properties = {\n    result: { type: Object },\n  };\n\n  static styles = styles;\n\n  constructor() {\n    super();\n    /** @type {import(\"@observatory\").Result | null} */\n    this.result = null;\n  }\n\n  _gradeDistributionTask = new Task(this, {\n    task: async () => {\n      try {\n        const url = new URL(OBSERVATORY_API_URL + \"/api/v2/grade_distribution\");\n        const res = await fetch(url);\n        if (!res.ok) {\n          let message = `${res.status}: ${res.statusText}`;\n          try {\n            const data = await res.json();\n            if (data.error) {\n              message = data.message;\n            }\n          } catch {\n            // Ignore.\n          }\n          throw new Error(message);\n        }\n        return await res.json();\n      } catch (error) {\n        console.log(error);\n        throw new Error(\"Observatory API request for comparison data failed\");\n      }\n    },\n    args: () => [],\n  });\n\n  render() {\n    if (!this.result) {\n      return nothing;\n    }\n    return this._gradeDistributionTask.render({\n      pending: () => html`<progress></progress>`,\n\n      complete: (gradeDistribution) => {\n        if (!this.result) {\n          return nothing;\n        }\n\n        return GradeSVG({ gradeDistribution, result: this.result });\n      },\n\n      error: (e) => html`<div class=\"error\">${e}</div>`,\n    });\n  }\n}\n\ncustomElements.define(\n  \"mdn-observatory-comparison-table\",\n  MDNObservatoryComparisonTable,\n);\n\n/**\n *\n * @param {{gradeDistribution: import(\"@observatory\").GradeDistribution[], result: import(\"@observatory\").Result}} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nfunction GradeSVG({ gradeDistribution, result }) {\n  const width = 1200;\n  const height = 380;\n  const leftSpace = 100; // left edge to left edge of first bar\n  const rightSpace = 80; // right edge to tight edge of last bar\n  const bottomSpace = 60; // bottom edge to bottom edge of bars\n  const topSpace = 60; // top padding\n  const itemCount = gradeDistribution.length;\n  const barWidth = 60;\n\n  // The x-axis has the different grades from \"A+\" to \"D-\".\n  const xTickIncr =\n    (width - leftSpace - rightSpace - barWidth) / (itemCount - 1);\n  const xTickOffset = leftSpace + xTickIncr / 2;\n\n  // The y-axis has ticks according to the maximum value of all grades.\n  const yMarks = calculateTicks(gradeDistribution);\n  const yTickOffset = height - bottomSpace;\n  const yTickIncr = (height - bottomSpace - topSpace) / (yMarks.length - 1);\n  const yTickMax = Math.max(...yMarks);\n\n  const rows = gradeDistribution.map(\n    (item) =>\n      html` <tr>\n        <th>\n          ${formatMinus(item.grade)}\n          ${item.grade === result.scan.grade ? \"(Current grade)\" : \"\"}\n        </th>\n        <td>${item.count} sites</td>\n      </tr>`,\n  );\n\n  return html`\n    <table id=\"grade-svg-a11y-table\" class=\"visually-hidden\">\n      <caption>\n        Number of sites by grade\n      </caption>\n      <thead>\n        <tr>\n          <th scope=\"col\">Grade</th>\n          <th scope=\"col\">Sites</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n    ${svg`\n    <svg\n      class=\"chart\"\n      viewBox=\"0 0 1200 380\"\n      aria-labelledby=\"grade-svg-title\"\n      aria-describedby=\"grade-svg-a11y-table\"\n    >\n      <title id=\"grade-svg-title\">Number of sites by grade</title>\n      <g class=\"axes-g\"> </g>\n        <g\n          class=\"x-axis\"\n          transform=\"translate(${xTickOffset}, ${height - bottomSpace})\"\n        >\n          ${gradeDistribution.map((item, index) => {\n            return svg` <g\n              class=\"tick tick-x\"\n              transform=\"${`translate(${index * xTickIncr}, 0)`}\"\n            >\n              <text\n                fill=\"currentColor\"\n                y=\"6\"\n                dy=\"1em\"\n                class=\"${[\n                  \"x-labels\",\n                  item.grade === result.scan.grade\n                    ? `current grade-${item.grade[0]?.toLowerCase()}`\n                    : undefined,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\"\n              >\n                ${formatMinus(item.grade)}\n              </text>\n            </g>`;\n          })}\n        </g>\n        <g>\n          ${gradeDistribution.map((item, index) => {\n            const barHeight =\n              (height - bottomSpace - topSpace) * (item.count / yTickMax);\n            return svg` <rect\n              class=\"bar grade-${item.grade\n                .replace(/[+-]/, \"\")\n                .toLowerCase()} ${\n                item.grade === result.scan.grade ? \"current-grade\" : \"\"\n              }\"\n              x=\"${xTickOffset + index * xTickIncr - barWidth / 2}\"\n              y=\"${yTickOffset - barHeight - 1}\"\n              rx=\"4\"\n              ry=\"4\"\n              width=\"${barWidth}\"\n              height=\"${barHeight}\"\n            ></rect>`;\n          })}\n        </g>\n        <g\n          class=\"y-axis\"\n          fill=\"none\"\n          textAnchor=\"end\"\n          transform=\"translate(${leftSpace}, 0)\"\n        >\n          ${yMarks.map(\n            (item, index) => svg` <g\n              class=\"tick tick-y\"\n              transform=\"translate(0, ${yTickOffset - yTickIncr * index})\"\n            >\n              <line\n                stroke=\"currentColor\"\n                x2=\"${width - leftSpace - rightSpace + barWidth / 2}\"\n              ></line>\n              <text class=\"y-labels\" fill=\"currentColor\" x=\"-25\" dy=\"0.32em\">\n                ${item / 1000}k\n              </text>\n            </g>`,\n          )}\n        </g>\n      </g>\n      <g>\n        ${gradeDistribution.map((item, index) => {\n          if (item.grade === result.scan.grade) {\n            const barHeight =\n              (height - bottomSpace - topSpace) * (item.count / yTickMax);\n            return svg` <g\n              key=\"you-are-here\"\n              class=\"you-are-here\"\n              transform=\"translate(${xTickOffset + index * xTickIncr}, ${\n                height - bottomSpace - barHeight - 50\n              })\"\n            >\n              <polyline\n                points=\"-60,0 60,0 60,36 7,36 0,48 -7,36 -60,36\"\n              ></polyline>\n              <text\n                x=\"0\"\n                y=\"0\"\n                text-anchor=\"middle\"\n                transform=\"translate(0, 24)\"\n              >\n                Current grade\n              </text>\n            </g>`;\n          } else {\n            return [];\n          }\n        })}\n      </g>\n    </svg>\n  `}\n  `;\n}\n\n/**\n * Calculate\n * @param {import(\"@observatory\").GradeDistribution[]} gradeDistribution\n * @returns {number[]}\n */\nfunction calculateTicks(gradeDistribution) {\n  const maxValue = Math.max(...gradeDistribution.map((item) => item.count));\n  const tickTargetCount = 7; // Target number of ticks between 5 and 10\n  const range = rangeForValue(maxValue, false); // Get a nice range\n  const tickInterval = rangeForValue(range / tickTargetCount, true); // Determine a nice tick interval\n  const niceMaxValue = Math.ceil(maxValue / tickInterval) * tickInterval; // Adjust max value to a nice number\n  const tickCount = Math.ceil(niceMaxValue / tickInterval) + 1; // Calculate the number of ticks\n\n  /** @type {number[]} */\n  const ticks = [];\n  for (let i = 0; i < tickCount; i++) {\n    ticks.push(i * tickInterval);\n  }\n  return ticks;\n}\n\n/**\n * This returns values to construct proper axis measurements in\n * diagrams. The returned value is 1|2|5 * 10^x.\n *\n * If `round` is `true`, the returned value can be also rounded down,\n * useful for calculating ticks on an axis.\n *\n * Examples:\n *\n * |range    |rounded=false|rounded=true|\n * |---------|-------------|------------|\n * |  1      |  1          |  1         |\n * |  2      |  2          |  2         |\n * |  3      |  5          |  5         |\n * |  4      |  5          |  5         |\n * |  5      |  5          |  5         |\n * |  6      |  10         |  5         |\n * |  7      |  10         |  10        |\n * |  8      |  10         |  10        |\n * |  9      |  10         |  10        |\n * |  10     |  10         |  10        |\n * |  34     |  50         |  50        |\n * |  450    |  500        |  500       |\n * |  560    |  1000       |  500       |\n * |  6780   |  10000      |  5000      |\n * |  10     |  10         |  10        |\n * |  100    |  100        |  100       |\n * |  1000   |  1000       |  1000      |\n * |  10000  |  10000      |  10000     |\n * @param {number} range The input value\n * @param {boolean} round If false, the returned value will always be greater than `range`, otherwise it can be rounded off\n * @returns {number} a number according to `1|2|5 * 10^x`, where x is derived from `range` to be in the same order of magnitude\n */\n\nfunction rangeForValue(range, round) {\n  const exponent = Math.floor(Math.log10(range));\n  const fraction = range / Math.pow(10, exponent);\n\n  /** @type {number} */\n  let niceFraction;\n  if (round) {\n    if (fraction < 1.5) {\n      niceFraction = 1;\n    } else if (fraction < 3) {\n      niceFraction = 2;\n    } else if (fraction < 7) {\n      niceFraction = 5;\n    } else {\n      niceFraction = 10;\n    }\n  } else {\n    if (fraction <= 1) {\n      niceFraction = 1;\n    } else if (fraction <= 2) {\n      niceFraction = 2;\n    } else if (fraction <= 5) {\n      niceFraction = 5;\n    } else {\n      niceFraction = 10;\n    }\n  }\n  return niceFraction * Math.pow(10, exponent);\n}\n"],"names":["MDNObservatoryComparisonTable","Object","URL","fetch","Error","console","Math","Boolean","r","customElements"],"mappings":"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"}

package/out/static/client/{8093.81b1b345d454a85e.js → 8093.b03f1cb1e8b0984a.js}

@@ -1,5 +1,5 @@
-/*! For license information please see 8093.81b1b345d454a85e.js.LICENSE.txt */
-export const __webpack_id__="8093";export const __webpack_ids__=["8093"];export const __webpack_modules__={730:function(n,t,o){o.r(t),o.d(t,{MDNLoginButton:()=>MDNLoginButton});var e=o(63819);o(99638);var r=o(86484),i=o(79097);let MDNLoginButton=class MDNLoginButton extends(0,r.J)(e.WF){static ssr=!1;get _loginUrl(){let n=location.href.replace(location.origin,""),t=new URL(i.vQ,location.origin);return t.search=new URLSearchParams({next:n}).toString(),t.toString()}render(){return(0,e.qy)`<mdn-button href=${this._loginUrl}
+/*! For license information please see 8093.b03f1cb1e8b0984a.js.LICENSE.txt */
+export const __webpack_id__="8093";export const __webpack_ids__=["8093"];export const __webpack_modules__={730:function(n,t,o){o.r(t),o.d(t,{MDNLoginButton:()=>MDNLoginButton});var e=o(63819);o(99638);var r=o(86484),i=o(36728);let MDNLoginButton=class MDNLoginButton extends(0,r.J)(e.WF){static ssr=!1;get _loginUrl(){let n=location.href.replace(location.origin,""),t=new URL(i.vQ,location.origin);return t.search=new URLSearchParams({next:n}).toString(),t.toString()}render(){return(0,e.qy)`<mdn-button href=${this._loginUrl}
       >${this.l10n`Login`}</mdn-button
     >`}};customElements.define("mdn-login-button",MDNLoginButton)},62963:function(n,t,o){o.d(t,{J:()=>r});var e=o(97160);let r=n=>n??e.s6}};
-//# sourceMappingURL=8093.81b1b345d454a85e.js.map
+//# sourceMappingURL=8093.b03f1cb1e8b0984a.js.map

package/out/static/client/{8093.81b1b345d454a85e.js.map → 8093.b03f1cb1e8b0984a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"8093.81b1b345d454a85e.js","sources":["webpack://@mdn/fred/./components/login-button/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport \"../button/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { FXA_SIGNIN_URL } from \"../env/index.js\";\n\nexport class MDNLoginButton extends L10nMixin(LitElement) {\n  static ssr = false;\n\n  get _loginUrl() {\n    const next = location.href.replace(location.origin, \"\");\n    // TODO: deal with local login\n    const loginUrl = new URL(FXA_SIGNIN_URL, location.origin);\n    loginUrl.search = new URLSearchParams({ next }).toString();\n    return loginUrl.toString();\n  }\n\n  render() {\n    return html`<mdn-button href=${this._loginUrl}\n      >${this.l10n`Login`}</mdn-button\n    >`;\n  }\n}\n\ncustomElements.define(\"mdn-login-button\", MDNLoginButton);\n","import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n"],"names":["MDNLoginButton","n","location","URL","URLSearchParams","customElements"],"mappings":";mOAMO,IAAMA,eAAN,MAAMA,sBAAuB,QAAU,IAAU,EACtD,OAAO,IAAM,EAAM,AAEnB,KAAI,WAAY,CACd,IAAMC,EAAOC,SAAS,IAAI,CAAC,OAAO,CAACA,SAAS,MAAM,CAAE,IAE9C,EAAW,IAAIC,IAAI,IAAc,CAAED,SAAS,MAAM,EAExD,OADA,EAAS,MAAM,CAAG,IAAIE,gBAAgB,CAAEH,KAAAA,CAAK,GAAG,QAAQ,GACjD,EAAS,QAAQ,EAC1B,CAEA,QAAS,CACP,MAAO,QAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC;OAC3C,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACrB,CAAC,AACJ,CACF,EAEAI,eAAe,MAAM,CAAC,mBAAoBL,uECnBvC,IAAM,EAAE,GAAG,GAAG,IAAC"}
+{"version":3,"file":"8093.b03f1cb1e8b0984a.js","sources":["webpack://@mdn/fred/./components/login-button/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/if-defined.js"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport \"../button/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { FXA_SIGNIN_URL } from \"../env/index.js\";\n\nexport class MDNLoginButton extends L10nMixin(LitElement) {\n  static ssr = false;\n\n  get _loginUrl() {\n    const next = location.href.replace(location.origin, \"\");\n    // TODO: deal with local login\n    const loginUrl = new URL(FXA_SIGNIN_URL, location.origin);\n    loginUrl.search = new URLSearchParams({ next }).toString();\n    return loginUrl.toString();\n  }\n\n  render() {\n    return html`<mdn-button href=${this._loginUrl}\n      >${this.l10n`Login`}</mdn-button\n    >`;\n  }\n}\n\ncustomElements.define(\"mdn-login-button\", MDNLoginButton);\n","import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n"],"names":["MDNLoginButton","n","location","URL","URLSearchParams","customElements"],"mappings":";mOAMO,IAAMA,eAAN,MAAMA,sBAAuB,QAAU,IAAU,EACtD,OAAO,IAAM,EAAM,AAEnB,KAAI,WAAY,CACd,IAAMC,EAAOC,SAAS,IAAI,CAAC,OAAO,CAACA,SAAS,MAAM,CAAE,IAE9C,EAAW,IAAIC,IAAI,IAAc,CAAED,SAAS,MAAM,EAExD,OADA,EAAS,MAAM,CAAG,IAAIE,gBAAgB,CAAEH,KAAAA,CAAK,GAAG,QAAQ,GACjD,EAAS,QAAQ,EAC1B,CAEA,QAAS,CACP,MAAO,QAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC;OAC3C,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACrB,CAAC,AACJ,CACF,EAEAI,eAAe,MAAM,CAAC,mBAAoBL,uECnBvC,IAAM,EAAE,GAAG,GAAG,IAAC"}

package/out/static/client/{9784.0096d3445a2a7e98.js → 9784.214845ec6d3b77e3.js}

@@ -1,5 +1,5 @@
-/*! For license information please see 9784.0096d3445a2a7e98.js.LICENSE.txt */
-export const __webpack_id__="9784";export const __webpack_ids__=["9784"];export const __webpack_modules__={68552:function(e,t,n){n.d(t,{A:()=>c});var r=n(63819),o=n(31601),i=n.n(o),a=n(76314),s=n.n(a),l=n(55196),d=s()(i());d.i(l.A),d.push([e.id,'.wrapper{display:grid;gap:1rem;grid-template-areas:"left runner";grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.wrapper section{display:flex;flex-direction:column;flex-grow:1;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;border:var(--border);border-radius:.25rem;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}.playground__runner-console:is(.wrapper section){border:var(--border);border-radius:.25rem;grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border-top:var(--border)}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 992px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):first-child{margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}',""]);let c=(0,r.AH)([d.toString()])},55196:function(e,t,n){n.d(t,{A:()=>s});var r=n(31601),o=n.n(r),i=n(76314),a=n.n(i)()(o());a.push([e.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let s=a.toString()},730:function(e,t,n){n.r(t),n.d(t,{MDNLoginButton:()=>MDNLoginButton});var r=n(63819);n(99638);var o=n(86484),i=n(79097);let MDNLoginButton=class MDNLoginButton extends(0,o.J)(r.WF){static ssr=!1;get _loginUrl(){let e=location.href.replace(location.origin,""),t=new URL(i.vQ,location.origin);return t.search=new URLSearchParams({next:e}).toString(),t.toString()}render(){return(0,r.qy)`<mdn-button href=${this._loginUrl}
+/*! For license information please see 9784.214845ec6d3b77e3.js.LICENSE.txt */
+export const __webpack_id__="9784";export const __webpack_ids__=["9784"];export const __webpack_modules__={68552:function(e,t,n){n.d(t,{A:()=>c});var r=n(63819),o=n(31601),i=n.n(o),a=n(76314),s=n.n(a),l=n(55196),d=s()(i());d.i(l.A),d.push([e.id,'.wrapper{display:grid;gap:1rem;grid-template-areas:"left runner";grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.wrapper section{display:flex;flex-direction:column;flex-grow:1;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;border:var(--border);border-radius:.25rem;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}.playground__runner-console:is(.wrapper section){border:var(--border);border-radius:.25rem;grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border-top:var(--border)}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 992px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):first-child{margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}',""]);let c=(0,r.AH)([d.toString()])},55196:function(e,t,n){n.d(t,{A:()=>s});var r=n(31601),o=n.n(r),i=n(76314),a=n.n(i)()(o());a.push([e.id,"*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}",""]);let s=a.toString()},730:function(e,t,n){n.r(t),n.d(t,{MDNLoginButton:()=>MDNLoginButton});var r=n(63819);n(99638);var o=n(86484),i=n(36728);let MDNLoginButton=class MDNLoginButton extends(0,o.J)(r.WF){static ssr=!1;get _loginUrl(){let e=location.href.replace(location.origin,""),t=new URL(i.vQ,location.origin);return t.search=new URLSearchParams({next:e}).toString(),t.toString()}render(){return(0,r.qy)`<mdn-button href=${this._loginUrl}
       >${this.l10n`Login`}</mdn-button
     >`}};customElements.define("mdn-login-button",MDNLoginButton)},75259:function(e,t,n){n.r(t),n.d(t,{MDNPlayground:()=>MDNPlayground});var r=n(64889),o=n(63819),i=n(69392),a=n(86484),s=n(39943),l=n(93526),d=n(68552),c=n(45842);n(99723),n(99638),n(20002),n(86129),n(75143),n(53343),n(730);let p="playground-session-code";let MDNPlayground=class MDNPlayground extends(0,a.J)(o.WF){static styles=d.A;static properties={_gistID:{state:!0}};constructor(){super(),this._permalink="",this._autoRun=!0,this._gistId=void 0}_controller=(0,i._)();_shareModal=(0,i._)();_reportModal=(0,i._)();_user=new r.YZ(this,{task:async()=>await (0,l.L)()});_format(){this._controller.value?.format()}_run(){let e=this._controller.value;e&&(e.run(),this._autoRun||(this._autoRun=!0,e.runOnChange=!0,this._storeSession()))}_share(){this._shareModal.value?.showModal()}_clear(){let e=this._controller.value;if(confirm(this.l10n`Do you really want to clear everything?`)&&e){e.clear(),this._storeSession(),this.requestUpdate();let t=new URL(location.href);t.search="",history.replaceState(void 0,"",t)}}_reset(){let e=this._controller.value;confirm(this.l10n`Do you really want to revert your changes?`)&&e&&(e.reset(),this._storeSession(),this.requestUpdate())}async _copyMarkdown(){let e=this._controller.value;if(e){let t=Object.entries(e.code).map(([e,t])=>t&&`\`\`\`${e}
 ${t}
@@ -117,4 +117,4 @@ ${t}
         </section>
       </mdn-modal>
     `}firstUpdated(){this._loadSession(),this._loadFromUrl()}};function u(e){return"html"in e?{srcPrefix:e.src||"",code:{html:e.html,css:e.css,js:e.js}}:"srcPrefix"in e?e:{srcPrefix:"",code:{}}}function m(e,t){return void 0===e||void 0===t?e===t:Object.keys(e).length===Object.keys(t).length&&Object.entries(e).every(([e,n])=>t[e]===n)}customElements.define("mdn-playground",MDNPlayground)},70209:function(e,t,n){n.d(t,{D:()=>a});var r=n(97160),o=n(17316),i=n(98176);let a=(0,o.u$)(class extends o.WL{constructor(){super(...arguments),this.key=r.s6}render(e,t){return this.key=e,t}update(e,[t,n]){return t!==this.key&&((0,i.mY)(e),this.key=t),n}})},39943:function(e,t,n){n.d(t,{w:()=>o});var r=n(92);function o(e,{type:t,label:n}){r.A.recordElementClick({id:e,type:t,label:n})}}};
-//# sourceMappingURL=9784.0096d3445a2a7e98.js.map
+//# sourceMappingURL=9784.214845ec6d3b77e3.js.map

package/out/static/client/{9784.0096d3445a2a7e98.js.map → 9784.214845ec6d3b77e3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"9784.0096d3445a2a7e98.js","sources":["webpack://@mdn/fred/./components/playground/element.css","webpack://@mdn/fred/./components/global/global.css?1b68","webpack://@mdn/fred/./components/login-button/element.js","webpack://@mdn/fred/./components/playground/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/keyed.js","webpack://@mdn/fred/./utils/glean.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.wrapper{display:grid;gap:1rem;grid-template-areas:\"left runner\";grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.wrapper section{display:flex;flex-direction:column;flex-grow:1;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;border:var(--border);border-radius:.25rem;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}.playground__runner-console:is(.wrapper section){border:var(--border);border-radius:.25rem;grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border-top:var(--border)}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 992px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):first-child{margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { LitElement, html } from \"lit\";\n\nimport \"../button/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { FXA_SIGNIN_URL } from \"../env/index.js\";\n\nexport class MDNLoginButton extends L10nMixin(LitElement) {\n  static ssr = false;\n\n  get _loginUrl() {\n    const next = location.href.replace(location.origin, \"\");\n    // TODO: deal with local login\n    const loginUrl = new URL(FXA_SIGNIN_URL, location.origin);\n    loginUrl.search = new URLSearchParams({ next }).toString();\n    return loginUrl.toString();\n  }\n\n  render() {\n    return html`<mdn-button href=${this._loginUrl}\n      >${this.l10n`Login`}</mdn-button\n    >`;\n  }\n}\n\ncustomElements.define(\"mdn-login-button\", MDNLoginButton);\n","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { globalUser } from \"../user/context.js\";\n\nimport styles from \"./element.css?lit\";\nimport { decompressFromBase64 } from \"./utils.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../button/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../play-console/element.js\";\nimport \"../modal/element.js\";\nimport \"../login-button/element.js\";\n\n/**\n * @import { MDNPlayController } from \"../play-controller/element.js\";\n * @import { MDNModal } from \"../modal/element.js\";\n * @import { Ref } from \"lit/directives/ref.js\";\n */\n\nconst SESSION_KEY = \"playground-session-code\";\n\nexport class MDNPlayground extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    _gistID: { state: true },\n  };\n\n  constructor() {\n    super();\n    this._permalink = \"\";\n    this._autoRun = true;\n    /** @type {string | undefined} */\n    this._gistId = undefined;\n  }\n\n  /** @type {Ref<MDNPlayController>} */\n  _controller = createRef();\n  /** @type {Ref<MDNModal>} */\n  _shareModal = createRef();\n  /** @type {Ref<MDNModal>} */\n  _reportModal = createRef();\n\n  _user = new Task(this, {\n    task: async () => {\n      return await globalUser();\n    },\n  });\n\n  _format() {\n    this._controller.value?.format();\n  }\n\n  _run() {\n    const controller = this._controller.value;\n    if (controller) {\n      controller.run();\n      if (!this._autoRun) {\n        this._autoRun = true;\n        controller.runOnChange = true;\n        this._storeSession();\n      }\n    }\n  }\n\n  _share() {\n    this._shareModal.value?.showModal();\n  }\n\n  _clear() {\n    const controller = this._controller.value;\n    if (\n      confirm(this.l10n`Do you really want to clear everything?`) &&\n      controller\n    ) {\n      controller.clear();\n      this._storeSession();\n      this.requestUpdate();\n      const urlWithoutSearch = new URL(location.href);\n      urlWithoutSearch.search = \"\";\n      history.replaceState(undefined, \"\", urlWithoutSearch);\n    }\n  }\n\n  _reset() {\n    const controller = this._controller.value;\n    if (\n      confirm(this.l10n`Do you really want to revert your changes?`) &&\n      controller\n    ) {\n      controller.reset();\n      this._storeSession();\n      this.requestUpdate();\n    }\n  }\n\n  async _copyMarkdown() {\n    const controller = this._controller.value;\n    if (controller) {\n      const markdown = Object.entries(controller.code)\n        .map(\n          ([lang, code]) =>\n            code &&\n            `${\"```\"}${lang}\n${code}\n${\"```\"}`,\n        )\n        .filter(Boolean)\n        .join(\"\\n\\n\");\n      await navigator.clipboard.writeText(markdown);\n    }\n  }\n\n  async _createPermalink() {\n    const controller = this._controller.value;\n    if (controller) {\n      const res = await fetch(\"/api/v1/play/\", {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify(controller.code),\n      });\n      const { id } = await res.json();\n      const permalink = new URL(location.href);\n      permalink.search = new URLSearchParams({ id }).toString();\n\n      controller.initialCode = controller.code;\n      this._permalink = permalink.toString();\n      history.replaceState(undefined, \"\", permalink);\n      this.requestUpdate();\n    }\n  }\n\n  async _copyPermalink() {\n    if (this._permalink) {\n      await navigator.clipboard.writeText(this._permalink);\n    }\n  }\n\n  _storeSession() {\n    const controller = this._controller.value;\n    if (controller) {\n      const { srcPrefix, initialCode, code } = controller;\n      /** @type {import(\"./types.js\").PlaygroundSession} */\n      const session = {\n        srcPrefix,\n        initialCode,\n        code,\n        autoRun: this._autoRun,\n      };\n      sessionStorage.setItem(SESSION_KEY, JSON.stringify(session));\n    }\n  }\n\n  _loadSession() {\n    const { srcPrefix, initialCode, code, autoRun } = stateToSession(\n      JSON.parse(sessionStorage.getItem(SESSION_KEY) || \"{}\"),\n    );\n    const controller = this._controller.value;\n    if (controller) {\n      if (autoRun === false) {\n        this._autoRun = false;\n        controller.runOnStart = false;\n        controller.runOnChange = false;\n      }\n      controller.srcPrefix = srcPrefix;\n      controller.initialCode = initialCode;\n      controller.code = code;\n      this.requestUpdate();\n    }\n  }\n\n  async _loadFromUrl() {\n    const controller = this._controller.value;\n    if (controller) {\n      const params = new URLSearchParams(location.search);\n      const idParam = params.get(\"id\");\n      const stateParam = params.get(\"state\");\n      const srcPrefixParam = params.get(\"srcPrefix\");\n\n      if (idParam) {\n        this._gistId = idParam;\n      }\n\n      const { srcPrefix: srcPrefixState, code } =\n        (await (idParam\n          ? this._sessionFromApi(idParam)\n          : stateParam\n            ? this._sessionFromState(stateParam)\n            : undefined)) || {};\n\n      const srcPrefix = srcPrefixParam || srcPrefixState;\n\n      if (\n        srcPrefix !== undefined &&\n        code !== undefined &&\n        (controller.srcPrefix !== srcPrefix ||\n          !compareCode(controller.initialCode, code))\n      ) {\n        try {\n          if (\n            !opener?.location?.origin ||\n            opener?.location?.origin !== location.origin\n          ) {\n            throw new Error(\"origin doesn't match\");\n          }\n        } catch {\n          this._autoRun = false;\n          controller.runOnStart = false;\n          controller.runOnChange = false;\n        }\n        controller.srcPrefix = srcPrefix;\n        controller.initialCode = code;\n        controller.code = code;\n        this._storeSession();\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  /** @param {string} id */\n  async _sessionFromApi(id) {\n    const response = await fetch(`/api/v1/play/${encodeURIComponent(id)}`);\n    if (!response.ok) {\n      console.error(response.statusText);\n      return;\n    }\n\n    const permalink = new URL(location.href);\n    permalink.search = new URLSearchParams({ id }).toString();\n    this._permalink = permalink.toString();\n\n    gleanClick(\"playground\", { type: \"load-shared\" });\n    const code = await response.json();\n    return stateToSession(code);\n  }\n\n  /** @param {string} stateParam */\n  async _sessionFromState(stateParam) {\n    const { state } = await decompressFromBase64(stateParam);\n    return stateToSession(JSON.parse(state || \"{}\"));\n  }\n\n  _editorUpdate() {\n    this._storeSession();\n    this.requestUpdate();\n  }\n\n  _reportOpen() {\n    this._reportModal.value?.showModal();\n  }\n\n  _reportCancel() {\n    this._reportModal.value?.close();\n  }\n\n  async _reportSubmit() {\n    await fetch(\"/api/v1/play/flag\", {\n      method: \"POST\",\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n      body: JSON.stringify({\n        id: this._gistId,\n        reason: this._reportModal.value?.querySelector(\"textarea\")?.value,\n      }),\n    });\n    this._reportModal.value?.close();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._user.run();\n  }\n\n  render() {\n    const { code, initialCode } = this._controller.value ?? {};\n    const hasCode = Object.values(code ?? {}).some(Boolean);\n    const hasInitialCode = Object.values(initialCode ?? {}).some(Boolean);\n    const isResettable = hasInitialCode && !compareCode(code, initialCode);\n\n    return html`\n      <div class=\"wrapper\">\n        <mdn-play-controller\n          ${ref(this._controller)}\n          run-on-start\n          run-on-change\n        >\n          <section>\n            <aside>\n              <h1>${this.l10n`Playground`}</h1>\n              <menu>\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._format}\n                  ?disabled=${!hasCode}\n                  >${this.l10n`Format`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._run}\n                  ?disabled=${!hasCode}\n                  >${this.l10n`Run`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._share}\n                  ?disabled=${!hasCode}\n                  >${this.l10n`Share`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._clear}\n                  ?disabled=${!(hasCode || isResettable)}\n                  >${this.l10n`Clear`}</mdn-button\n                >\n                ${hasInitialCode\n                  ? html`<mdn-button\n                      variant=\"secondary\"\n                      @click=${this._reset}\n                      ?disabled=${!isResettable}\n                      >${this.l10n`Reset`}</mdn-button\n                    >`\n                  : nothing}\n              </menu>\n            </aside>\n            <details open>\n              <summary>HTML</summary>\n              <mdn-play-editor\n                language=\"html\"\n                @update=${this._editorUpdate}\n              ></mdn-play-editor>\n            </details>\n            <details open>\n              <summary>CSS</summary>\n              <mdn-play-editor\n                language=\"css\"\n                @update=${this._editorUpdate}\n              ></mdn-play-editor>\n            </details>\n            <details open>\n              <summary>JAVASCRIPT</summary>\n              <mdn-play-editor\n                language=\"js\"\n                @update=${this._editorUpdate}\n              ></mdn-play-editor>\n            </details>\n          </section>\n          <section class=\"playground__runner-console\">\n            ${this._gistId\n              ? html`<mdn-button @click=${this._reportOpen} variant=\"plain\">\n                  Seeing something inappropriate?\n                </mdn-button>`\n              : nothing}\n            <mdn-play-runner></mdn-play-runner>\n            <div class=\"playground__console\">\n              <div>${this.l10n`Console`}</div>\n              <mdn-play-console></mdn-play-console>\n            </div>\n          </section>\n        </mdn-play-controller>\n      </div>\n      <mdn-modal ${ref(this._shareModal)} class=\"share\">\n        <section>\n          <h2>${this.l10n`Share Markdown`}</h2>\n          <mdn-button variant=\"secondary\" @click=${this._copyMarkdown}\n            >${this.l10n`Copy markdown to clipboard`}</mdn-button\n          >\n        </section>\n        <section>\n          <h2>${this.l10n`Share your code via Permalink`}</h2>\n          ${this._user.render({\n            initial: () => html`<mdn-login-button></mdn-login-button>`,\n            pending: () => html`<mdn-login-button></mdn-login-button>`,\n            complete: (user) =>\n              user.isAuthenticated\n                ? this._permalink && !isResettable\n                  ? html`\n                      <input .value=${this._permalink} />\n                      <mdn-button\n                        variant=\"secondary\"\n                        @click=${this._copyPermalink}\n                        >${this.l10n`Copy to clipboard`}</mdn-button\n                      >\n                    `\n                  : html`<mdn-button @click=${this._createPermalink}\n                      >${this.l10n`Create link`}</mdn-button\n                    >`\n                : html`<mdn-login-button></mdn-login-button>`,\n          })}\n        </section>\n      </mdn-modal>\n      <mdn-modal ${ref(this._reportModal)} class=\"report\">\n        <section>\n          <p>Report this malicious or inappropriate shared playground.</p>\n          <label>\n            Can you please share some details on what's wrong with this content:\n            <textarea></textarea>\n          </label>\n        </section>\n        <section>\n          <mdn-button variant=\"secondary\" @click=${this._reportCancel}\n            >Cancel</mdn-button\n          >\n          <mdn-button @click=${this._reportSubmit}>Report</mdn-button>\n        </section>\n      </mdn-modal>\n    `;\n  }\n\n  firstUpdated() {\n    this._loadSession();\n    this._loadFromUrl();\n  }\n}\n\ncustomElements.define(\"mdn-playground\", MDNPlayground);\n\n/**\n * @param {import(\"./types.js\").PlaygroundStateParam | import(\"./types.js\").PlaygroundSession | {}} stateOrSession\n * @returns {import(\"./types.js\").PlaygroundSession}\n */\nfunction stateToSession(stateOrSession) {\n  if (\"html\" in stateOrSession) {\n    return {\n      srcPrefix: stateOrSession.src || \"\",\n      code: {\n        html: stateOrSession.html,\n        css: stateOrSession.css,\n        js: stateOrSession.js,\n      },\n    };\n  }\n  if (\"srcPrefix\" in stateOrSession) {\n    return stateOrSession;\n  }\n  return {\n    srcPrefix: \"\",\n    code: {},\n  };\n}\n\n/**\n * @param {Record<string, string>} [a]\n * @param {Record<string, string>} [b]\n * @returns {boolean}\n */\nfunction compareCode(a, b) {\n  return a === undefined || b === undefined\n    ? a === b\n    : Object.keys(a).length === Object.keys(b).length &&\n        Object.entries(a).every(([k, v]) => b[k] === v);\n}\n","import{nothing as r}from\"../lit-html.js\";import{directive as t,Directive as e}from\"../directive.js\";import{setCommittedValue as s}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const i=t(class extends e{constructor(){super(...arguments),this.key=r}render(r,t){return this.key=r,t}update(r,[t,e]){return t!==this.key&&(s(r),this.key=t),e}});export{i as keyed};\n//# sourceMappingURL=keyed.js.map\n","// @ts-expect-error \"Could not find declaration file\"\nimport GleanMetrics from \"@mozilla/glean/metrics\";\n\n/**\n * Records a click event.\n *\n * Use only if automatic click events are not an option.\n * See: https://mozilla.github.io/glean.js/automatic_instrumentation/click_events/\n *\n * @param {string} id\n * @param {object} options\n * @param {string=} options.type\n * @param {string=} options.label\n */\nexport function gleanClick(id, { type, label }) {\n  GleanMetrics.recordElementClick({\n    id,\n    type,\n    label,\n  });\n}\n"],"names":["MDNLoginButton","location","URL","URLSearchParams","customElements","MDNPlayground","confirm","history","Object","Boolean","navigator","fetch","JSON","sessionStorage","s","opener","Error","encodeURIComponent","console","arguments","r","t"],"mappings":"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"}
+{"version":3,"file":"9784.214845ec6d3b77e3.js","sources":["webpack://@mdn/fred/./components/playground/element.css","webpack://@mdn/fred/./components/global/global.css?1b68","webpack://@mdn/fred/./components/login-button/element.js","webpack://@mdn/fred/./components/playground/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/keyed.js","webpack://@mdn/fred/./utils/glean.js"],"sourcesContent":["import { css } from \"lit\";\n// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nimport ___CSS_LOADER_AT_RULE_IMPORT_0___ from \"-!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../build/loaders/fix-light-dark.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../global/global.css\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.wrapper{display:grid;gap:1rem;grid-template-areas:\"left runner\";grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%}.wrapper section{display:flex;flex-direction:column;flex-grow:1;gap:1rem;grid-area:left}:is(.wrapper section) aside{align-items:center;border:var(--border);border-radius:.25rem;display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:is(:is(.wrapper section) aside) h1{font-size:var(--font-size-normal);margin:0 auto 0 0}:is(:is(.wrapper section) aside) menu{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}:is(.wrapper section) details{border:var(--border);border-radius:.25rem;flex-direction:column;flex-shrink:0;overflow:hidden}[open]:is(:is(.wrapper section) details){flex-basis:0;flex-grow:1;min-height:12rem}[open]:is(:is(.wrapper section) details) mdn-play-editor{display:block}:is(:is(.wrapper section) details)::details-content{display:contents}:is(:is(.wrapper section) details) summary{cursor:pointer;height:2em;line-height:var(--font-line-ui);padding:.5em;-webkit-user-select:none;user-select:none}:is(:is(.wrapper section) details) mdn-play-editor{display:none;height:calc(100% - 2em)}.playground__runner-console:is(.wrapper section){border:var(--border);border-radius:.25rem;grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border-top:var(--border)}:is(.playground__runner-console:is(.wrapper section) .playground__console) div{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-align:center}:is(.playground__runner-console:is(.wrapper section) .playground__console) mdn-play-console{height:6rem}.wrapper mdn-placement-sidebar{grid-area:place;justify-self:center}@media (width <= 992px){.wrapper{display:flex;flex-direction:column}}mdn-modal section{display:flex;flex-direction:column;gap:.5rem}:is(mdn-modal section):first-child{margin-bottom:1rem}mdn-modal h2{font-size:var(--font-size-normal);font-weight:400;margin:0}mdn-modal label{display:flex;flex-direction:column;gap:.5rem}mdn-modal p{margin:0}mdn-modal.share section{align-items:center}mdn-modal.report section:last-child{flex-direction:row;justify-content:flex-end}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}img{height:auto;max-width:100%}a{color:var(--color-link-normal)}[hidden]{display:none!important}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { LitElement, html } from \"lit\";\n\nimport \"../button/element.js\";\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { FXA_SIGNIN_URL } from \"../env/index.js\";\n\nexport class MDNLoginButton extends L10nMixin(LitElement) {\n  static ssr = false;\n\n  get _loginUrl() {\n    const next = location.href.replace(location.origin, \"\");\n    // TODO: deal with local login\n    const loginUrl = new URL(FXA_SIGNIN_URL, location.origin);\n    loginUrl.search = new URLSearchParams({ next }).toString();\n    return loginUrl.toString();\n  }\n\n  render() {\n    return html`<mdn-button href=${this._loginUrl}\n      >${this.l10n`Login`}</mdn-button\n    >`;\n  }\n}\n\ncustomElements.define(\"mdn-login-button\", MDNLoginButton);\n","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { globalUser } from \"../user/context.js\";\n\nimport styles from \"./element.css?lit\";\nimport { decompressFromBase64 } from \"./utils.js\";\n\nimport \"../play-controller/element.js\";\nimport \"../button/element.js\";\nimport \"../play-editor/element.js\";\nimport \"../play-runner/element.js\";\nimport \"../play-console/element.js\";\nimport \"../modal/element.js\";\nimport \"../login-button/element.js\";\n\n/**\n * @import { MDNPlayController } from \"../play-controller/element.js\";\n * @import { MDNModal } from \"../modal/element.js\";\n * @import { Ref } from \"lit/directives/ref.js\";\n */\n\nconst SESSION_KEY = \"playground-session-code\";\n\nexport class MDNPlayground extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    _gistID: { state: true },\n  };\n\n  constructor() {\n    super();\n    this._permalink = \"\";\n    this._autoRun = true;\n    /** @type {string | undefined} */\n    this._gistId = undefined;\n  }\n\n  /** @type {Ref<MDNPlayController>} */\n  _controller = createRef();\n  /** @type {Ref<MDNModal>} */\n  _shareModal = createRef();\n  /** @type {Ref<MDNModal>} */\n  _reportModal = createRef();\n\n  _user = new Task(this, {\n    task: async () => {\n      return await globalUser();\n    },\n  });\n\n  _format() {\n    this._controller.value?.format();\n  }\n\n  _run() {\n    const controller = this._controller.value;\n    if (controller) {\n      controller.run();\n      if (!this._autoRun) {\n        this._autoRun = true;\n        controller.runOnChange = true;\n        this._storeSession();\n      }\n    }\n  }\n\n  _share() {\n    this._shareModal.value?.showModal();\n  }\n\n  _clear() {\n    const controller = this._controller.value;\n    if (\n      confirm(this.l10n`Do you really want to clear everything?`) &&\n      controller\n    ) {\n      controller.clear();\n      this._storeSession();\n      this.requestUpdate();\n      const urlWithoutSearch = new URL(location.href);\n      urlWithoutSearch.search = \"\";\n      history.replaceState(undefined, \"\", urlWithoutSearch);\n    }\n  }\n\n  _reset() {\n    const controller = this._controller.value;\n    if (\n      confirm(this.l10n`Do you really want to revert your changes?`) &&\n      controller\n    ) {\n      controller.reset();\n      this._storeSession();\n      this.requestUpdate();\n    }\n  }\n\n  async _copyMarkdown() {\n    const controller = this._controller.value;\n    if (controller) {\n      const markdown = Object.entries(controller.code)\n        .map(\n          ([lang, code]) =>\n            code &&\n            `${\"```\"}${lang}\n${code}\n${\"```\"}`,\n        )\n        .filter(Boolean)\n        .join(\"\\n\\n\");\n      await navigator.clipboard.writeText(markdown);\n    }\n  }\n\n  async _createPermalink() {\n    const controller = this._controller.value;\n    if (controller) {\n      const res = await fetch(\"/api/v1/play/\", {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify(controller.code),\n      });\n      const { id } = await res.json();\n      const permalink = new URL(location.href);\n      permalink.search = new URLSearchParams({ id }).toString();\n\n      controller.initialCode = controller.code;\n      this._permalink = permalink.toString();\n      history.replaceState(undefined, \"\", permalink);\n      this.requestUpdate();\n    }\n  }\n\n  async _copyPermalink() {\n    if (this._permalink) {\n      await navigator.clipboard.writeText(this._permalink);\n    }\n  }\n\n  _storeSession() {\n    const controller = this._controller.value;\n    if (controller) {\n      const { srcPrefix, initialCode, code } = controller;\n      /** @type {import(\"./types.js\").PlaygroundSession} */\n      const session = {\n        srcPrefix,\n        initialCode,\n        code,\n        autoRun: this._autoRun,\n      };\n      sessionStorage.setItem(SESSION_KEY, JSON.stringify(session));\n    }\n  }\n\n  _loadSession() {\n    const { srcPrefix, initialCode, code, autoRun } = stateToSession(\n      JSON.parse(sessionStorage.getItem(SESSION_KEY) || \"{}\"),\n    );\n    const controller = this._controller.value;\n    if (controller) {\n      if (autoRun === false) {\n        this._autoRun = false;\n        controller.runOnStart = false;\n        controller.runOnChange = false;\n      }\n      controller.srcPrefix = srcPrefix;\n      controller.initialCode = initialCode;\n      controller.code = code;\n      this.requestUpdate();\n    }\n  }\n\n  async _loadFromUrl() {\n    const controller = this._controller.value;\n    if (controller) {\n      const params = new URLSearchParams(location.search);\n      const idParam = params.get(\"id\");\n      const stateParam = params.get(\"state\");\n      const srcPrefixParam = params.get(\"srcPrefix\");\n\n      if (idParam) {\n        this._gistId = idParam;\n      }\n\n      const { srcPrefix: srcPrefixState, code } =\n        (await (idParam\n          ? this._sessionFromApi(idParam)\n          : stateParam\n            ? this._sessionFromState(stateParam)\n            : undefined)) || {};\n\n      const srcPrefix = srcPrefixParam || srcPrefixState;\n\n      if (\n        srcPrefix !== undefined &&\n        code !== undefined &&\n        (controller.srcPrefix !== srcPrefix ||\n          !compareCode(controller.initialCode, code))\n      ) {\n        try {\n          if (\n            !opener?.location?.origin ||\n            opener?.location?.origin !== location.origin\n          ) {\n            throw new Error(\"origin doesn't match\");\n          }\n        } catch {\n          this._autoRun = false;\n          controller.runOnStart = false;\n          controller.runOnChange = false;\n        }\n        controller.srcPrefix = srcPrefix;\n        controller.initialCode = code;\n        controller.code = code;\n        this._storeSession();\n      }\n\n      this.requestUpdate();\n    }\n  }\n\n  /** @param {string} id */\n  async _sessionFromApi(id) {\n    const response = await fetch(`/api/v1/play/${encodeURIComponent(id)}`);\n    if (!response.ok) {\n      console.error(response.statusText);\n      return;\n    }\n\n    const permalink = new URL(location.href);\n    permalink.search = new URLSearchParams({ id }).toString();\n    this._permalink = permalink.toString();\n\n    gleanClick(\"playground\", { type: \"load-shared\" });\n    const code = await response.json();\n    return stateToSession(code);\n  }\n\n  /** @param {string} stateParam */\n  async _sessionFromState(stateParam) {\n    const { state } = await decompressFromBase64(stateParam);\n    return stateToSession(JSON.parse(state || \"{}\"));\n  }\n\n  _editorUpdate() {\n    this._storeSession();\n    this.requestUpdate();\n  }\n\n  _reportOpen() {\n    this._reportModal.value?.showModal();\n  }\n\n  _reportCancel() {\n    this._reportModal.value?.close();\n  }\n\n  async _reportSubmit() {\n    await fetch(\"/api/v1/play/flag\", {\n      method: \"POST\",\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n      body: JSON.stringify({\n        id: this._gistId,\n        reason: this._reportModal.value?.querySelector(\"textarea\")?.value,\n      }),\n    });\n    this._reportModal.value?.close();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._user.run();\n  }\n\n  render() {\n    const { code, initialCode } = this._controller.value ?? {};\n    const hasCode = Object.values(code ?? {}).some(Boolean);\n    const hasInitialCode = Object.values(initialCode ?? {}).some(Boolean);\n    const isResettable = hasInitialCode && !compareCode(code, initialCode);\n\n    return html`\n      <div class=\"wrapper\">\n        <mdn-play-controller\n          ${ref(this._controller)}\n          run-on-start\n          run-on-change\n        >\n          <section>\n            <aside>\n              <h1>${this.l10n`Playground`}</h1>\n              <menu>\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._format}\n                  ?disabled=${!hasCode}\n                  >${this.l10n`Format`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._run}\n                  ?disabled=${!hasCode}\n                  >${this.l10n`Run`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._share}\n                  ?disabled=${!hasCode}\n                  >${this.l10n`Share`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._clear}\n                  ?disabled=${!(hasCode || isResettable)}\n                  >${this.l10n`Clear`}</mdn-button\n                >\n                ${hasInitialCode\n                  ? html`<mdn-button\n                      variant=\"secondary\"\n                      @click=${this._reset}\n                      ?disabled=${!isResettable}\n                      >${this.l10n`Reset`}</mdn-button\n                    >`\n                  : nothing}\n              </menu>\n            </aside>\n            <details open>\n              <summary>HTML</summary>\n              <mdn-play-editor\n                language=\"html\"\n                @update=${this._editorUpdate}\n              ></mdn-play-editor>\n            </details>\n            <details open>\n              <summary>CSS</summary>\n              <mdn-play-editor\n                language=\"css\"\n                @update=${this._editorUpdate}\n              ></mdn-play-editor>\n            </details>\n            <details open>\n              <summary>JAVASCRIPT</summary>\n              <mdn-play-editor\n                language=\"js\"\n                @update=${this._editorUpdate}\n              ></mdn-play-editor>\n            </details>\n          </section>\n          <section class=\"playground__runner-console\">\n            ${this._gistId\n              ? html`<mdn-button @click=${this._reportOpen} variant=\"plain\">\n                  Seeing something inappropriate?\n                </mdn-button>`\n              : nothing}\n            <mdn-play-runner></mdn-play-runner>\n            <div class=\"playground__console\">\n              <div>${this.l10n`Console`}</div>\n              <mdn-play-console></mdn-play-console>\n            </div>\n          </section>\n        </mdn-play-controller>\n      </div>\n      <mdn-modal ${ref(this._shareModal)} class=\"share\">\n        <section>\n          <h2>${this.l10n`Share Markdown`}</h2>\n          <mdn-button variant=\"secondary\" @click=${this._copyMarkdown}\n            >${this.l10n`Copy markdown to clipboard`}</mdn-button\n          >\n        </section>\n        <section>\n          <h2>${this.l10n`Share your code via Permalink`}</h2>\n          ${this._user.render({\n            initial: () => html`<mdn-login-button></mdn-login-button>`,\n            pending: () => html`<mdn-login-button></mdn-login-button>`,\n            complete: (user) =>\n              user.isAuthenticated\n                ? this._permalink && !isResettable\n                  ? html`\n                      <input .value=${this._permalink} />\n                      <mdn-button\n                        variant=\"secondary\"\n                        @click=${this._copyPermalink}\n                        >${this.l10n`Copy to clipboard`}</mdn-button\n                      >\n                    `\n                  : html`<mdn-button @click=${this._createPermalink}\n                      >${this.l10n`Create link`}</mdn-button\n                    >`\n                : html`<mdn-login-button></mdn-login-button>`,\n          })}\n        </section>\n      </mdn-modal>\n      <mdn-modal ${ref(this._reportModal)} class=\"report\">\n        <section>\n          <p>Report this malicious or inappropriate shared playground.</p>\n          <label>\n            Can you please share some details on what's wrong with this content:\n            <textarea></textarea>\n          </label>\n        </section>\n        <section>\n          <mdn-button variant=\"secondary\" @click=${this._reportCancel}\n            >Cancel</mdn-button\n          >\n          <mdn-button @click=${this._reportSubmit}>Report</mdn-button>\n        </section>\n      </mdn-modal>\n    `;\n  }\n\n  firstUpdated() {\n    this._loadSession();\n    this._loadFromUrl();\n  }\n}\n\ncustomElements.define(\"mdn-playground\", MDNPlayground);\n\n/**\n * @param {import(\"./types.js\").PlaygroundStateParam | import(\"./types.js\").PlaygroundSession | {}} stateOrSession\n * @returns {import(\"./types.js\").PlaygroundSession}\n */\nfunction stateToSession(stateOrSession) {\n  if (\"html\" in stateOrSession) {\n    return {\n      srcPrefix: stateOrSession.src || \"\",\n      code: {\n        html: stateOrSession.html,\n        css: stateOrSession.css,\n        js: stateOrSession.js,\n      },\n    };\n  }\n  if (\"srcPrefix\" in stateOrSession) {\n    return stateOrSession;\n  }\n  return {\n    srcPrefix: \"\",\n    code: {},\n  };\n}\n\n/**\n * @param {Record<string, string>} [a]\n * @param {Record<string, string>} [b]\n * @returns {boolean}\n */\nfunction compareCode(a, b) {\n  return a === undefined || b === undefined\n    ? a === b\n    : Object.keys(a).length === Object.keys(b).length &&\n        Object.entries(a).every(([k, v]) => b[k] === v);\n}\n","import{nothing as r}from\"../lit-html.js\";import{directive as t,Directive as e}from\"../directive.js\";import{setCommittedValue as s}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const i=t(class extends e{constructor(){super(...arguments),this.key=r}render(r,t){return this.key=r,t}update(r,[t,e]){return t!==this.key&&(s(r),this.key=t),e}});export{i as keyed};\n//# sourceMappingURL=keyed.js.map\n","// @ts-expect-error \"Could not find declaration file\"\nimport GleanMetrics from \"@mozilla/glean/metrics\";\n\n/**\n * Records a click event.\n *\n * Use only if automatic click events are not an option.\n * See: https://mozilla.github.io/glean.js/automatic_instrumentation/click_events/\n *\n * @param {string} id\n * @param {object} options\n * @param {string=} options.type\n * @param {string=} options.label\n */\nexport function gleanClick(id, { type, label }) {\n  GleanMetrics.recordElementClick({\n    id,\n    type,\n    label,\n  });\n}\n"],"names":["MDNLoginButton","location","URL","URLSearchParams","customElements","MDNPlayground","confirm","history","Object","Boolean","navigator","fetch","JSON","sessionStorage","s","opener","Error","encodeURIComponent","console","arguments","r","t"],"mappings":"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"}

package/out/static/client/{9837.2374d8bd425a9866.js → 9837.6876cb5a9d3ad763.js}

@@ -1,4 +1,4 @@
-export const __webpack_id__="9837";export const __webpack_ids__=["9837"];export const __webpack_modules__={336:function(t,e,a){a.d(e,{A:()=>y});var s=a(63819),r=a(31601),o=a.n(r),i=a(76314),l=a.n(i),n=a(55196),d=a(23653),c=a(4417),b=a.n(c),p=new a.U(a(37554)),h=new a.U(a(38620)),g=l()(o());g.i(n.A),g.i(d.A);var u=b()(p),m=b()(h);g.push([t.id,`:host{line-height:var(--font-line-content)}.scan-result{column-gap:2rem;display:grid;grid-template-areas:"grade data actions";grid-template-columns:auto 3fr 1fr;justify-content:space-between;max-width:var(--max-width)}.scan-result a{color:var(--color-text-primary)}.scan-result{background-color:var(--color-background-primary);border-radius:.3rem;margin-bottom:3rem;padding:2rem}@media (width <= 1200px){.scan-result{align-items:flex-start;grid-template-areas:"grade data actions";grid-template-columns:auto 1fr auto;justify-content:space-between;row-gap:calc(var(--spacing)/2)}}@media (width <= 992px){.scan-result{grid-template-areas:"grade data   " "grade actions";grid-template-columns:min-content 1fr}}.trend{margin-top:1rem}.arrow-down{color:var(--observatory-arrow-down-color)}.arrow-up{color:var(--observatory-arrow-up-color)}h2{font-size:var(--font-size-large);font-weight:var(--font-weight-bold);margin-bottom:1rem;margin-top:1.5rem}h2:before{background-color:var(--color-text-primary);content:"";display:inline-block;-webkit-mask-position:left;mask-position:left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}h2 .host{font-weight:var(--font-weight-normal)}h2.summary:before{height:1.4rem;-webkit-mask-image:url(${u});mask-image:url(${u});width:2rem}h2.result:before{height:1.2rem;-webkit-mask-image:url(${m});mask-image:url(${m});width:2rem}code{font-weight:var(--font-weight-bold)}.grade-trend{grid-area:grade;justify-self:start}.grade-trend .overall{position:relative}.data{grid-area:data}.actions{grid-area:actions}@media (width <= 992px){.actions{margin-top:1rem}}mdn-observatory-rescan-button{min-width:30rem}.info-tooltip{background:none;border:none;cursor:pointer;display:inline-block}.scan-another{font-size:var(--font-size-small);font-weight:var(--font-weight-normal);margin-top:1.2rem}.grade,.label{font-weight:var(--font-weight-bold)}.grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:var(--font-size-large);height:5rem;line-height:5rem;text-align:center;width:5rem}.grade-a{--grade-bg:var(--observatory-grade-a-bg);--grade-border:var(--observatory-grade-a-border)}.grade-b{--grade-bg:var(--observatory-grade-b-bg);--grade-border:var(--observatory-grade-b-border)}.grade-c{--grade-bg:var(--observatory-grade-c-bg);--grade-border:var(--observatory-grade-c-border)}.grade-d{--grade-bg:var(--observatory-grade-d-bg);--grade-border:var(--observatory-grade-d-border)}.grade-f{--grade-bg:var(--observatory-grade-f-bg);--grade-border:var(--observatory-grade-f-border)}.tooltip-popup{--csstools-light-dark-toggle-fd181dce-0:var(--csstools-color-scheme--light) #696969;--color-tooltip:var(--csstools-light-dark-toggle-fd181dce-0,#b3b3b3);--csstools-light-dark-toggle-fd181dce-1:var(--csstools-color-scheme--light) #1b1b1b;--color-tooltip-highlight:var(--csstools-light-dark-toggle-fd181dce-1,#fff);--csstools-light-dark-toggle-fd181dce-2:var(--csstools-color-scheme--light) #fff;--color-bg-tooltip:var(--csstools-light-dark-toggle-fd181dce-2,#1b1b1b);background-color:var(--color-bg-tooltip);border-radius:var(--border-radius);border-width:0;color:var(--color-tooltip);inset:unset;left:50%;line-height:var(--font-line-content);margin-top:.5rem;max-width:min(100vw,20rem);overflow:visible;padding:1.5rem;position:absolute;text-align:center;transform:translateX(-50%);width:max-content;z-index:1}@supports (color:light-dark(red,red)){.tooltip-popup{--color-tooltip:light-dark(#b3b3b3,#696969);--color-tooltip-highlight:light-dark(#fff,#1b1b1b);--color-bg-tooltip:light-dark(#1b1b1b,#fff)}}@supports not (color:light-dark(tan,tan)){.tooltip-popup *{--csstools-light-dark-toggle-fd181dce-0:var(--csstools-color-scheme--light) #696969;--color-tooltip:var(--csstools-light-dark-toggle-fd181dce-0,#b3b3b3);--csstools-light-dark-toggle-fd181dce-1:var(--csstools-color-scheme--light) #1b1b1b;--color-tooltip-highlight:var(--csstools-light-dark-toggle-fd181dce-1,#fff);--csstools-light-dark-toggle-fd181dce-2:var(--csstools-color-scheme--light) #fff;--color-bg-tooltip:var(--csstools-light-dark-toggle-fd181dce-2,#1b1b1b)}}.tooltip-popup .arrow{margin-left:-1rem;margin-top:-2rem;padding:0;position:absolute;fill:var(--color-bg-tooltip)}.tooltip-popup table{border:0;border-collapse:collapse;white-space:nowrap;width:10rem}:is(.tooltip-popup table) tr{color:var(--color-tooltip);font-size:var(--font-size-small)}.current:is(:is(.tooltip-popup table) tr){color:var(--color-tooltip-highlight);font-weight:var(--font-weight-bold)}:is(.tooltip-popup table) td,:is(.tooltip-popup table) th{background-color:unset;border:0;font-weight:var(--font-body);text-align:left;width:50%}:is(.tooltip-popup table) th{font-size:var(--font-size-normal);padding:0 0 .75rem}:is(.tooltip-popup table) td{padding:0}:is(:is(.tooltip-popup table) td) svg{vertical-align:-.3rem}.scroll-container{margin-bottom:1.5rem;margin-top:.8rem;overflow-x:auto;overscroll-behavior-x:none}.detail-header{display:flex;gap:.5rem;padding:0 1.5rem 0 0}.detail-header .arrow{color:var(--color-text-secondary)}.detail-header .detail-header-title{font-weight:var(--font-weight-bold);padding-right:.2rem}.detail-header p{margin:1rem 0}:is(.obs-pass-icon svg.pass) path{fill:var(--observatory-pass-icon-bg)}:is(.obs-pass-icon svg.pass) circle{fill:var(--observatory-pass-icon-color)}:is(.obs-pass-icon svg.fail) path{fill:var(--observatory-fail-icon-bg)}:is(.obs-pass-icon svg.fail) circle{fill:var(--observatory-fail-icon-color)}.footnote{font-size:var(--font-size-small);margin-top:1rem}.scan-results table{background:var(--observatory-table-bg);border:none;border-collapse:collapse;min-width:calc(992px - 14rem);width:100%}:is(.scan-results table) th{background:var(--observatory-table-header-bg);color:var(--color-text-secondary);font-weight:500;vertical-align:top}:is(:is(.scan-results table) th) tr{background-color:unset}:is(.scan-results table) tr:nth-child(2n){background-color:var(--observatory-table-bg-alternate)}:is(.scan-results table) td{overflow-wrap:anywhere;padding:.5rem 1.5rem;vertical-align:top}.cookie-name:is(:is(.scan-results table) td):first-child{max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score:is(:is(.scan-results table) td)>span{display:flex;flex-direction:row;justify-content:space-between}:is(.scan-results table) a{color:var(--color-text-primary);-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--color-text-secondary)}:is(:is(.scan-results table) a):active,:is(:is(.scan-results table) a):hover{-webkit-text-decoration:none;text-decoration:none}:is(.scan-results table) span.not-counted{color:var(--color-text-secondary)}:is(:is(.scan-results table) span.not-counted) a{-webkit-text-decoration:none;text-decoration:none}:is(.tests:is(.scan-results table) th,.tests:is(.scan-results table) td):first-of-type{width:25%}.tests:is(.scan-results table) td.score{white-space:nowrap}:is(.csp:is(.scan-results table) th,.csp:is(.scan-results table) td):first-of-type{width:45%}:is(.headers:is(.scan-results table) th,.headers:is(.scan-results table) td):first-of-type{width:30%}:is(.cookies:is(.scan-results table) th,.cookies:is(.scan-results table) td):nth-of-type(n+3){text-align:center}:is(.scan-results table) td,:is(.scan-results table) th{border:none;padding:1.5rem}:is(:is(.scan-results table) th,:is(.scan-results table) td) :first-child{margin-top:0}:is(:is(.scan-results table) th,:is(.scan-results table) td) :last-child{margin-bottom:0}:is(.scan-results table) .icon{height:1.3rem;width:1.3rem}@media (width <= 426px){:is(:is(:is(.scan-results table) td) .iso-date) code{font-size:x-small}}@media not print{@media (width <= 992px){.scan-results table{min-width:0}:is(.scan-results table) thead{display:none}:is(.scan-results table) tbody{display:block}:is(.scan-results table) tr{display:grid;grid-template-columns:max-content auto}:is(.scan-results table) tr:nth-of-type(odd){background:var(--observatory-table-header-bg)}:is(.scan-results table) td{column-gap:2em;display:grid;grid-auto-flow:column;grid-column:span 2;grid-template-columns:subgrid}:is(:is(.scan-results table) td) .humanized-duration{display:none}}:is(.scan-results table) td:before{content:attr(data-header);display:inline;font-weight:var(--font-weight-bold)}:is(.tests:is(.scan-results table),.csp:is(.scan-results table),.headers:is(.scan-results table),.cookies:is(.scan-results table)) td:first-of-type{width:auto}:is(.scan-results table) td:not(:last-of-type){padding-bottom:0}:is(.scan-results table) td:nth-of-type(n+2){padding-top:.75rem}.cookies:is(.scan-results table) td:nth-of-type(n+3){text-align:left}:is(.scan-results table) td.score{display:grid}:is(:is(.scan-results table) td.score)>span{display:block}:is(:is(.scan-results table) td.score) .obs-pass-icon{display:inline-block;height:1.5em;vertical-align:top}}ol.tabs-list{column-gap:3rem;display:grid;grid-template-areas:"tab-0 tab-1 tab-2 tab-3 tab-4 tab-5 ." "hr    hr    hr    hr    hr    hr    hr " "mod   mod   mod   mod   mod   mod   mod";grid-template-columns:repeat(6,max-content) 1fr;margin:0;overflow-x:auto;overscroll-behavior-x:none;padding:0}@media (width <= 992px){ol.tabs-list{column-gap:1.75rem;grid-template-columns:repeat(6,max-content) auto}}ol.tabs-list:before{border:none;border-top:1px solid var(--color-border-primary);content:"";grid-area:hr;margin:0;width:100%}ol.tabs-list input[type=radio]:not(:checked)~.tab-content{display:none}ol.tabs-list li.tabs-list-item{display:contents}:is(ol.tabs-list li.tabs-list-item)>input:checked+label{border-bottom:2px solid var(--observatory-accent);color:var(--color-text-primary)}:is(ol.tabs-list li.tabs-list-item)>input:not(:checked)+label:hover{border-bottom:2px solid var(--observatory-accent-light);color:var(--color-text-primary)}:is(ol.tabs-list li.tabs-list-item)>input:checked:focus-visible+label{outline-color:var(--accent-primary);outline-offset:1px;outline-style:auto}:is(ol.tabs-list li.tabs-list-item)>input:not(:checked)+label{color:var(--color-text-secondary);opacity:.775}:is(ol.tabs-list li.tabs-list-item)>label{cursor:pointer;height:2.2rem;width:max-content}#tabs-0:is(ol.tabs-list li.tabs-list-item)>input,#tabs-0:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-0}#tabs-1:is(ol.tabs-list li.tabs-list-item)>input,#tabs-1:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-1}#tabs-2:is(ol.tabs-list li.tabs-list-item)>input,#tabs-2:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-2}#tabs-3:is(ol.tabs-list li.tabs-list-item)>input,#tabs-3:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-3}#tabs-4:is(ol.tabs-list li.tabs-list-item)>input,#tabs-4:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-4}#tabs-5:is(ol.tabs-list li.tabs-list-item)>input,#tabs-5:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-5}:is(ol.tabs-list li.tabs-list-item)>section.tab-content{grid-area:mod;left:0;margin:0;position:sticky;width:calc(100vw - 18rem)}@media (1200px < width){:is(ol.tabs-list li.tabs-list-item)>section.tab-content{width:100%}}@media (width <= 769px){:is(ol.tabs-list li.tabs-list-item)>section.tab-content{width:calc(100vw - 2rem)}}@media print{.scan-result{grid-template-columns:1fr 3fr!important;padding:.5rem!important}.obs-pass-icon svg{height:1.5em!important;width:1.5em!important}.scroll-container{overflow:hidden!important}ol.tabs-list input[type=radio]:not(:checked)~.tab-content{display:block!important}ol.tabs-list input[type=radio]{display:none!important}li.tabs-list-item input:checked+label,li.tabs-list-item input:checked+label:hover,li.tabs-list-item input:checked:focus-visible+label,li.tabs-list-item input:not(:checked)+label,li.tabs-list-item input:not(:checked)+label:hover{color:var(--color-text-primary)!important;display:block!important;font-size:1.5rem!important;font-weight:700!important;-webkit-text-decoration:none!important;text-decoration:none!important}ol.tabs-list,ol.tabs-list li.tabs-list-item{display:block!important}td,th{padding:.5rem!important}}`,""]);let y=(0,s.AH)([g.toString()])},96101:function(t,e,a){a.d(e,{A:()=>n});var s=a(63819),r=a(31601),o=a.n(r),i=a(76314),l=a.n(i)()(o());l.push([t.id,"@media print{.observatory-results-wrapper{background-color:#fff!important;grid-template-columns:[full-start] minmax(0,1fr) [full-end]!important}.observatory-results{grid-area:full!important}.actions,.button-wrap,.observatory-results-toc,.page-layout__header,.page_layout__banner,.rescan-button{display:none!important}}",""]);let n=(0,s.AH)([l.toString()])},38620:function(t,e,a){t.exports=a.p+"results-icon.cdcd65a79b167843.svg"},37554:function(t,e,a){t.exports=a.p+"summary-icon.70312ad5ea1a4289.svg"},85324:function(t,e,a){a.r(e),a.d(e,{MDNObservatoryResults:()=>MDNObservatoryResults});var s=a(64889),r=a(63819),o=a(79097),i=a(336),l=a(96101),n=a(35241);let d=(0,r.JW)`<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" role="presentation" viewBox="0 0 22 22"><path fill="#DFD172" d="m18 0-1.26 2.75L14 4l2.74 1.26L18 8l1.25-2.74L22 4l-2.75-1.25M8 3 5.5 8.5 0 11l5.5 2.5L8 19l2.5-5.5L16 11l-5.5-2.5M18 14l-1.26 2.74L14 18l2.74 1.25L18 22l1.25-2.75L22 18l-2.75-1.26"/></svg>`,c=(0,r.JW)`<svg width="22" height="22" class="arrow" role="presentation" viewBox="0 0 22 22"><path id="path1" d="M12.124 1.733a1 1 0 0 1 1.673 0l8.811 13.423a1 1 0 0 1-.835 1.548l-17.614.007a1 1 0 0 1-.837-1.548Z"/></svg>`,b=[{grade:"A+",scoreText:"100+",score:100,stars:!0},{grade:"A",scoreText:"90",score:90,stars:!0},{grade:"A-",scoreText:"85",score:85,stars:!0},{grade:"B+",scoreText:"80",score:80},{grade:"B",scoreText:"70",score:70},{grade:"B-",scoreText:"65",score:65},{grade:"C+",scoreText:"60",score:60},{grade:"C",scoreText:"50",score:50},{grade:"C-",scoreText:"45",score:45},{grade:"D+",scoreText:"40",score:40},{grade:"D",scoreText:"30",score:30},{grade:"D-",scoreText:"25",score:25},{grade:"F",scoreText:"0",score:0}],p=["content-security-policy","cookies","cross-origin-resource-sharing","redirection","referrer-policy","strict-transport-security","subresource-integrity","x-content-type-options","x-frame-options","cross-origin-resource-policy"];a(81512),a(1783);let h=["unsafeInline","unsafeEval","unsafeObjects","unsafeInlineStyle","insecureSchemeActive","insecureSchemePassive","antiClickjacking","defaultNone","insecureBaseUri","insecureFormAction","strictDynamic"],g=new Set(["insecureBaseUri","insecureFormAction","insecureSchemeActive","insecureSchemePassive","unsafeEval","unsafeInline","unsafeInlineStyle","unsafeObjects"]);a(82767),a(73589),a(30077),a(22061);let MDNObservatoryResults=class MDNObservatoryResults extends r.WF{static styles=[i.A,l.A];constructor(){super(),this.host=null,this.selectedTab=0,this._usePostInApi=!1}static properties={host:{type:String},selectedTab:{state:!0,type:Number},_usePostInApi:{state:!0,type:Boolean}};_apiTask=new s.YZ(this,{args:()=>[this.host],task:async([t],{signal:e})=>{if(!t)throw Error("No host provided");try{let a=await fetch(`${o.Q}/api/v2/analyze?host=${encodeURIComponent(t)}`,{signal:e,method:this._usePostInApi?"POST":"GET"});if(!a.ok){let t=`${a.status}: ${a.statusText}`;try{let e=await a.json();e.error&&(t=e.message)}catch{}throw Error(t)}return await a.json()}catch(t){throw Error("Observatory API request for scan data failed",{cause:t})}}});connectedCallback(){super.connectedCallback(),this._updateSelectedTab=this._updateSelectedTab.bind(this),this.selectedTab=this._getSelectedTab(),globalThis.addEventListener("hashchange",this._updateSelectedTab)}disconnectedCallback(){super.disconnectedCallback(),globalThis.removeEventListener("hashchange",this._updateSelectedTab)}firstUpdated(){let t=new URLSearchParams(globalThis.location.search);this.host=t.get("host")}_updateSelectedTab(){this.selectedTab=this._getSelectedTab()}_getSelectedTab(){let t=["scoring","csp","cookies","headers","history","benchmark"].indexOf(globalThis.location.hash.replace("#",""));return -1===t?0:t}async _rescan(t){t.preventDefault(),this.host&&(this._usePostInApi=!0,this._apiTask.run())}_handleTabSelect(t,e){this.selectedTab=t,globalThis.history.replaceState("","",globalThis.location.pathname+globalThis.location.search+"#"+e)}render(){return this.host?this._apiTask.render({pending:()=>(0,r.qy)` <label class="visually-hidden" for="progress-bar">
+export const __webpack_id__="9837";export const __webpack_ids__=["9837"];export const __webpack_modules__={336:function(t,e,a){a.d(e,{A:()=>y});var s=a(63819),r=a(31601),o=a.n(r),i=a(76314),l=a.n(i),n=a(55196),d=a(23653),c=a(4417),b=a.n(c),p=new a.U(a(37554)),h=new a.U(a(38620)),g=l()(o());g.i(n.A),g.i(d.A);var u=b()(p),m=b()(h);g.push([t.id,`:host{line-height:var(--font-line-content)}.scan-result{column-gap:2rem;display:grid;grid-template-areas:"grade data actions";grid-template-columns:auto 3fr 1fr;justify-content:space-between;max-width:var(--max-width)}.scan-result a{color:var(--color-text-primary)}.scan-result{background-color:var(--color-background-primary);border-radius:.3rem;margin-bottom:3rem;padding:2rem}@media (width <= 1200px){.scan-result{align-items:flex-start;grid-template-areas:"grade data actions";grid-template-columns:auto 1fr auto;justify-content:space-between;row-gap:calc(var(--spacing)/2)}}@media (width <= 992px){.scan-result{grid-template-areas:"grade data   " "grade actions";grid-template-columns:min-content 1fr}}.trend{margin-top:1rem}.arrow-down{color:var(--observatory-arrow-down-color)}.arrow-up{color:var(--observatory-arrow-up-color)}h2{font-size:var(--font-size-large);font-weight:var(--font-weight-bold);margin-bottom:1rem;margin-top:1.5rem}h2:before{background-color:var(--color-text-primary);content:"";display:inline-block;-webkit-mask-position:left;mask-position:left;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}h2 .host{font-weight:var(--font-weight-normal)}h2.summary:before{height:1.4rem;-webkit-mask-image:url(${u});mask-image:url(${u});width:2rem}h2.result:before{height:1.2rem;-webkit-mask-image:url(${m});mask-image:url(${m});width:2rem}code{font-weight:var(--font-weight-bold)}.grade-trend{grid-area:grade;justify-self:start}.grade-trend .overall{position:relative}.data{grid-area:data}.actions{grid-area:actions}@media (width <= 992px){.actions{margin-top:1rem}}mdn-observatory-rescan-button{min-width:30rem}.info-tooltip{background:none;border:none;cursor:pointer;display:inline-block}.scan-another{font-size:var(--font-size-small);font-weight:var(--font-weight-normal);margin-top:1.2rem}.grade,.label{font-weight:var(--font-weight-bold)}.grade{background:var(--grade-bg);border:1px solid var(--grade-border);border-radius:.2em;color:var(--grade-border);display:inline-block;font-size:var(--font-size-large);height:5rem;line-height:5rem;text-align:center;width:5rem}.grade-a{--grade-bg:var(--observatory-grade-a-bg);--grade-border:var(--observatory-grade-a-border)}.grade-b{--grade-bg:var(--observatory-grade-b-bg);--grade-border:var(--observatory-grade-b-border)}.grade-c{--grade-bg:var(--observatory-grade-c-bg);--grade-border:var(--observatory-grade-c-border)}.grade-d{--grade-bg:var(--observatory-grade-d-bg);--grade-border:var(--observatory-grade-d-border)}.grade-f{--grade-bg:var(--observatory-grade-f-bg);--grade-border:var(--observatory-grade-f-border)}.tooltip-popup{--csstools-light-dark-toggle-fd181dce-0:var(--csstools-color-scheme--light) #696969;--color-tooltip:var(--csstools-light-dark-toggle-fd181dce-0,#b3b3b3);--csstools-light-dark-toggle-fd181dce-1:var(--csstools-color-scheme--light) #1b1b1b;--color-tooltip-highlight:var(--csstools-light-dark-toggle-fd181dce-1,#fff);--csstools-light-dark-toggle-fd181dce-2:var(--csstools-color-scheme--light) #fff;--color-bg-tooltip:var(--csstools-light-dark-toggle-fd181dce-2,#1b1b1b);background-color:var(--color-bg-tooltip);border-radius:var(--border-radius);border-width:0;color:var(--color-tooltip);inset:unset;left:50%;line-height:var(--font-line-content);margin-top:.5rem;max-width:min(100vw,20rem);overflow:visible;padding:1.5rem;position:absolute;text-align:center;transform:translateX(-50%);width:max-content;z-index:1}@supports (color:light-dark(red,red)){.tooltip-popup{--color-tooltip:light-dark(#b3b3b3,#696969);--color-tooltip-highlight:light-dark(#fff,#1b1b1b);--color-bg-tooltip:light-dark(#1b1b1b,#fff)}}@supports not (color:light-dark(tan,tan)){.tooltip-popup *{--csstools-light-dark-toggle-fd181dce-0:var(--csstools-color-scheme--light) #696969;--color-tooltip:var(--csstools-light-dark-toggle-fd181dce-0,#b3b3b3);--csstools-light-dark-toggle-fd181dce-1:var(--csstools-color-scheme--light) #1b1b1b;--color-tooltip-highlight:var(--csstools-light-dark-toggle-fd181dce-1,#fff);--csstools-light-dark-toggle-fd181dce-2:var(--csstools-color-scheme--light) #fff;--color-bg-tooltip:var(--csstools-light-dark-toggle-fd181dce-2,#1b1b1b)}}.tooltip-popup .arrow{margin-left:-1rem;margin-top:-2rem;padding:0;position:absolute;fill:var(--color-bg-tooltip)}.tooltip-popup table{border:0;border-collapse:collapse;white-space:nowrap;width:10rem}:is(.tooltip-popup table) tr{color:var(--color-tooltip);font-size:var(--font-size-small)}.current:is(:is(.tooltip-popup table) tr){color:var(--color-tooltip-highlight);font-weight:var(--font-weight-bold)}:is(.tooltip-popup table) td,:is(.tooltip-popup table) th{background-color:unset;border:0;font-weight:var(--font-body);text-align:left;width:50%}:is(.tooltip-popup table) th{font-size:var(--font-size-normal);padding:0 0 .75rem}:is(.tooltip-popup table) td{padding:0}:is(:is(.tooltip-popup table) td) svg{vertical-align:-.3rem}.scroll-container{margin-bottom:1.5rem;margin-top:.8rem;overflow-x:auto;overscroll-behavior-x:none}.detail-header{display:flex;gap:.5rem;padding:0 1.5rem 0 0}.detail-header .arrow{color:var(--color-text-secondary)}.detail-header .detail-header-title{font-weight:var(--font-weight-bold);padding-right:.2rem}.detail-header p{margin:1rem 0}:is(.obs-pass-icon svg.pass) path{fill:var(--observatory-pass-icon-bg)}:is(.obs-pass-icon svg.pass) circle{fill:var(--observatory-pass-icon-color)}:is(.obs-pass-icon svg.fail) path{fill:var(--observatory-fail-icon-bg)}:is(.obs-pass-icon svg.fail) circle{fill:var(--observatory-fail-icon-color)}.footnote{font-size:var(--font-size-small);margin-top:1rem}.scan-results table{background:var(--observatory-table-bg);border:none;border-collapse:collapse;min-width:calc(992px - 14rem);width:100%}:is(.scan-results table) th{background:var(--observatory-table-header-bg);color:var(--color-text-secondary);font-weight:500;vertical-align:top}:is(:is(.scan-results table) th) tr{background-color:unset}:is(.scan-results table) tr:nth-child(2n){background-color:var(--observatory-table-bg-alternate)}:is(.scan-results table) td{overflow-wrap:anywhere;padding:.5rem 1.5rem;vertical-align:top}.cookie-name:is(:is(.scan-results table) td):first-child{max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score:is(:is(.scan-results table) td)>span{display:flex;flex-direction:row;justify-content:space-between}:is(.scan-results table) a{color:var(--color-text-primary);-webkit-text-decoration:underline;text-decoration:underline;text-decoration-color:var(--color-text-secondary)}:is(:is(.scan-results table) a):active,:is(:is(.scan-results table) a):hover{-webkit-text-decoration:none;text-decoration:none}:is(.scan-results table) span.not-counted{color:var(--color-text-secondary)}:is(:is(.scan-results table) span.not-counted) a{-webkit-text-decoration:none;text-decoration:none}:is(.tests:is(.scan-results table) th,.tests:is(.scan-results table) td):first-of-type{width:25%}.tests:is(.scan-results table) td.score{white-space:nowrap}:is(.csp:is(.scan-results table) th,.csp:is(.scan-results table) td):first-of-type{width:45%}:is(.headers:is(.scan-results table) th,.headers:is(.scan-results table) td):first-of-type{width:30%}:is(.cookies:is(.scan-results table) th,.cookies:is(.scan-results table) td):nth-of-type(n+3){text-align:center}:is(.scan-results table) td,:is(.scan-results table) th{border:none;padding:1.5rem}:is(:is(.scan-results table) th,:is(.scan-results table) td) :first-child{margin-top:0}:is(:is(.scan-results table) th,:is(.scan-results table) td) :last-child{margin-bottom:0}:is(.scan-results table) .icon{height:1.3rem;width:1.3rem}@media (width <= 426px){:is(:is(:is(.scan-results table) td) .iso-date) code{font-size:x-small}}@media not print{@media (width <= 992px){.scan-results table{min-width:0}:is(.scan-results table) thead{display:none}:is(.scan-results table) tbody{display:block}:is(.scan-results table) tr{display:grid;grid-template-columns:max-content auto}:is(.scan-results table) tr:nth-of-type(odd){background:var(--observatory-table-header-bg)}:is(.scan-results table) td{column-gap:2em;display:grid;grid-auto-flow:column;grid-column:span 2;grid-template-columns:subgrid}:is(:is(.scan-results table) td) .humanized-duration{display:none}}:is(.scan-results table) td:before{content:attr(data-header);display:inline;font-weight:var(--font-weight-bold)}:is(.tests:is(.scan-results table),.csp:is(.scan-results table),.headers:is(.scan-results table),.cookies:is(.scan-results table)) td:first-of-type{width:auto}:is(.scan-results table) td:not(:last-of-type){padding-bottom:0}:is(.scan-results table) td:nth-of-type(n+2){padding-top:.75rem}.cookies:is(.scan-results table) td:nth-of-type(n+3){text-align:left}:is(.scan-results table) td.score{display:grid}:is(:is(.scan-results table) td.score)>span{display:block}:is(:is(.scan-results table) td.score) .obs-pass-icon{display:inline-block;height:1.5em;vertical-align:top}}ol.tabs-list{column-gap:3rem;display:grid;grid-template-areas:"tab-0 tab-1 tab-2 tab-3 tab-4 tab-5 ." "hr    hr    hr    hr    hr    hr    hr " "mod   mod   mod   mod   mod   mod   mod";grid-template-columns:repeat(6,max-content) 1fr;margin:0;overflow-x:auto;overscroll-behavior-x:none;padding:0}@media (width <= 992px){ol.tabs-list{column-gap:1.75rem;grid-template-columns:repeat(6,max-content) auto}}ol.tabs-list:before{border:none;border-top:1px solid var(--color-border-primary);content:"";grid-area:hr;margin:0;width:100%}ol.tabs-list input[type=radio]:not(:checked)~.tab-content{display:none}ol.tabs-list li.tabs-list-item{display:contents}:is(ol.tabs-list li.tabs-list-item)>input:checked+label{border-bottom:2px solid var(--observatory-accent);color:var(--color-text-primary)}:is(ol.tabs-list li.tabs-list-item)>input:not(:checked)+label:hover{border-bottom:2px solid var(--observatory-accent-light);color:var(--color-text-primary)}:is(ol.tabs-list li.tabs-list-item)>input:checked:focus-visible+label{outline-color:var(--accent-primary);outline-offset:1px;outline-style:auto}:is(ol.tabs-list li.tabs-list-item)>input:not(:checked)+label{color:var(--color-text-secondary);opacity:.775}:is(ol.tabs-list li.tabs-list-item)>label{cursor:pointer;height:2.2rem;width:max-content}#tabs-0:is(ol.tabs-list li.tabs-list-item)>input,#tabs-0:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-0}#tabs-1:is(ol.tabs-list li.tabs-list-item)>input,#tabs-1:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-1}#tabs-2:is(ol.tabs-list li.tabs-list-item)>input,#tabs-2:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-2}#tabs-3:is(ol.tabs-list li.tabs-list-item)>input,#tabs-3:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-3}#tabs-4:is(ol.tabs-list li.tabs-list-item)>input,#tabs-4:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-4}#tabs-5:is(ol.tabs-list li.tabs-list-item)>input,#tabs-5:is(ol.tabs-list li.tabs-list-item)>label{grid-area:tab-5}:is(ol.tabs-list li.tabs-list-item)>section.tab-content{grid-area:mod;left:0;margin:0;position:sticky;width:calc(100vw - 18rem)}@media (1200px < width){:is(ol.tabs-list li.tabs-list-item)>section.tab-content{width:100%}}@media (width <= 769px){:is(ol.tabs-list li.tabs-list-item)>section.tab-content{width:calc(100vw - 2rem)}}@media print{.scan-result{grid-template-columns:1fr 3fr!important;padding:.5rem!important}.obs-pass-icon svg{height:1.5em!important;width:1.5em!important}.scroll-container{overflow:hidden!important}ol.tabs-list input[type=radio]:not(:checked)~.tab-content{display:block!important}ol.tabs-list input[type=radio]{display:none!important}li.tabs-list-item input:checked+label,li.tabs-list-item input:checked+label:hover,li.tabs-list-item input:checked:focus-visible+label,li.tabs-list-item input:not(:checked)+label,li.tabs-list-item input:not(:checked)+label:hover{color:var(--color-text-primary)!important;display:block!important;font-size:1.5rem!important;font-weight:700!important;-webkit-text-decoration:none!important;text-decoration:none!important}ol.tabs-list,ol.tabs-list li.tabs-list-item{display:block!important}td,th{padding:.5rem!important}}`,""]);let y=(0,s.AH)([g.toString()])},96101:function(t,e,a){a.d(e,{A:()=>n});var s=a(63819),r=a(31601),o=a.n(r),i=a(76314),l=a.n(i)()(o());l.push([t.id,"@media print{.observatory-results-wrapper{background-color:#fff!important;grid-template-columns:[full-start] minmax(0,1fr) [full-end]!important}.observatory-results{grid-area:full!important}.actions,.button-wrap,.observatory-results-toc,.page-layout__header,.page_layout__banner,.rescan-button{display:none!important}}",""]);let n=(0,s.AH)([l.toString()])},38620:function(t,e,a){t.exports=a.p+"results-icon.cdcd65a79b167843.svg"},37554:function(t,e,a){t.exports=a.p+"summary-icon.70312ad5ea1a4289.svg"},85324:function(t,e,a){a.r(e),a.d(e,{MDNObservatoryResults:()=>MDNObservatoryResults});var s=a(64889),r=a(63819),o=a(36728),i=a(336),l=a(96101),n=a(35241);let d=(0,r.JW)`<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" role="presentation" viewBox="0 0 22 22"><path fill="#DFD172" d="m18 0-1.26 2.75L14 4l2.74 1.26L18 8l1.25-2.74L22 4l-2.75-1.25M8 3 5.5 8.5 0 11l5.5 2.5L8 19l2.5-5.5L16 11l-5.5-2.5M18 14l-1.26 2.74L14 18l2.74 1.25L18 22l1.25-2.75L22 18l-2.75-1.26"/></svg>`,c=(0,r.JW)`<svg width="22" height="22" class="arrow" role="presentation" viewBox="0 0 22 22"><path id="path1" d="M12.124 1.733a1 1 0 0 1 1.673 0l8.811 13.423a1 1 0 0 1-.835 1.548l-17.614.007a1 1 0 0 1-.837-1.548Z"/></svg>`,b=[{grade:"A+",scoreText:"100+",score:100,stars:!0},{grade:"A",scoreText:"90",score:90,stars:!0},{grade:"A-",scoreText:"85",score:85,stars:!0},{grade:"B+",scoreText:"80",score:80},{grade:"B",scoreText:"70",score:70},{grade:"B-",scoreText:"65",score:65},{grade:"C+",scoreText:"60",score:60},{grade:"C",scoreText:"50",score:50},{grade:"C-",scoreText:"45",score:45},{grade:"D+",scoreText:"40",score:40},{grade:"D",scoreText:"30",score:30},{grade:"D-",scoreText:"25",score:25},{grade:"F",scoreText:"0",score:0}],p=["content-security-policy","cookies","cross-origin-resource-sharing","redirection","referrer-policy","strict-transport-security","subresource-integrity","x-content-type-options","x-frame-options","cross-origin-resource-policy"];a(81512),a(1783);let h=["unsafeInline","unsafeEval","unsafeObjects","unsafeInlineStyle","insecureSchemeActive","insecureSchemePassive","antiClickjacking","defaultNone","insecureBaseUri","insecureFormAction","strictDynamic"],g=new Set(["insecureBaseUri","insecureFormAction","insecureSchemeActive","insecureSchemePassive","unsafeEval","unsafeInline","unsafeInlineStyle","unsafeObjects"]);a(82767),a(73589),a(30077),a(22061);let MDNObservatoryResults=class MDNObservatoryResults extends r.WF{static styles=[i.A,l.A];constructor(){super(),this.host=null,this.selectedTab=0,this._usePostInApi=!1}static properties={host:{type:String},selectedTab:{state:!0,type:Number},_usePostInApi:{state:!0,type:Boolean}};_apiTask=new s.YZ(this,{args:()=>[this.host],task:async([t],{signal:e})=>{if(!t)throw Error("No host provided");try{let a=await fetch(`${o.Q}/api/v2/analyze?host=${encodeURIComponent(t)}`,{signal:e,method:this._usePostInApi?"POST":"GET"});if(!a.ok){let t=`${a.status}: ${a.statusText}`;try{let e=await a.json();e.error&&(t=e.message)}catch{}throw Error(t)}return await a.json()}catch(t){throw Error("Observatory API request for scan data failed",{cause:t})}}});connectedCallback(){super.connectedCallback(),this._updateSelectedTab=this._updateSelectedTab.bind(this),this.selectedTab=this._getSelectedTab(),globalThis.addEventListener("hashchange",this._updateSelectedTab)}disconnectedCallback(){super.disconnectedCallback(),globalThis.removeEventListener("hashchange",this._updateSelectedTab)}firstUpdated(){let t=new URLSearchParams(globalThis.location.search);this.host=t.get("host")}_updateSelectedTab(){this.selectedTab=this._getSelectedTab()}_getSelectedTab(){let t=["scoring","csp","cookies","headers","history","benchmark"].indexOf(globalThis.location.hash.replace("#",""));return -1===t?0:t}async _rescan(t){t.preventDefault(),this.host&&(this._usePostInApi=!0,this._apiTask.run())}_handleTabSelect(t,e){this.selectedTab=t,globalThis.history.replaceState("","",globalThis.location.pathname+globalThis.location.search+"#"+e)}render(){return this.host?this._apiTask.render({pending:()=>(0,r.qy)` <label class="visually-hidden" for="progress-bar">
             Rescanning ${this.host} </label
           ><mdn-progress-bar id="progress-bar"></mdn-progress-bar>`,complete:t=>(0,r.qy)`
         <section class="summary">
@@ -386,4 +386,4 @@ export const __webpack_id__="9837";export const __webpack_ids__=["9837"];export
   `})({result:t,selectedTab:this.selectedTab,onTabSelect:(t,e)=>this._handleTabSelect(t,e)})}
         </section>
       </div>`,error:t=>(0,r.qy)`<div class="error">${t}</div>`}):r.s6}};customElements.define("mdn-observatory-results",MDNObservatoryResults)}};
-//# sourceMappingURL=9837.2374d8bd425a9866.js.map
+//# sourceMappingURL=9837.6876cb5a9d3ad763.js.map