@mdn/fred 2.5.0 → 2.6.0

package/out/static/ssr/stats.json

@@ -9,11 +9,11 @@
       "assets": [
         {
           "name": "index.js",
-          "size": 1429673
+          "size": 1433980
         }
       ],
       "filteredAssets": 0,
-      "assetsSize": 1429673,
+      "assetsSize": 1433980,
       "auxiliaryAssets": [
         {
           "name": "desktop-saving-page.bbb8eedefb3e848f.png",
@@ -317,7 +317,7 @@
         },
         {
           "name": "index.js.map",
-          "size": 4287986
+          "size": 4298423
         },
         {
           "name": "deno.aed70d20abbf1067.svg",
@@ -512,7 +512,7 @@
           "size": 135602
         }
       ],
-      "auxiliaryAssetsSize": 8750987,
+      "auxiliaryAssetsSize": 8761424,
       "children": {},
       "childAssets": {}
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdn/fred",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "repository": "https://github.com/mdn/fred",
   "license": "MPL-2.0",
   "author": "MDN Web Docs",
@@ -44,7 +44,7 @@
     "@lit-labs/ssr": "^4.0.0",
     "@lit-labs/ssr-client": "^1.1.8",
     "@lit/task": "^1.0.3",
-    "@mdn/rari": "0.2.20",
+    "@mdn/rari": "0.2.21",
     "@mdn/watify": "^1.1.9",
     "@mozilla/glean": "^5.0.8",
     "codemirror": "^6.0.1",
@@ -75,7 +75,7 @@
     "@fluent/syntax": "^0.19.0",
     "@jackolope/lit-analyzer": "^3.2.0",
     "@jackolope/ts-lit-plugin": "^3.1.6",
-    "@mdn/browser-compat-data": "^7.3.12",
+    "@mdn/browser-compat-data": "^7.3.13",
     "@mdn/yari": "^5.1.2",
     "@rsdoctor/rspack-plugin": "^1.5.0",
     "@rspack/cli": "^1.7.11",
@@ -111,7 +111,7 @@
     "eslint-plugin-wc": "^3.1.0",
     "globals": "^17.5.0",
     "lefthook": "^2.1.6",
-    "postcss": "^8.5.10",
+    "postcss": "^8.5.12",
     "postcss-custom-media": "^12.0.1",
     "postcss-loader": "^8.2.1",
     "postcss-mixins": "^12.1.2",
@@ -122,13 +122,13 @@
     "sass-embedded": "^1.99.0",
     "sass-loader": "^16.0.7",
     "spdy": "^4.0.2",
-    "stylelint": "^17.9.0",
+    "stylelint": "^17.9.1",
     "stylelint-config-recess-order": "^7.7.0",
     "stylelint-config-standard": "^40.0.0",
     "svgo-loader": "^5.0.0",
     "ts-morph": "^28.0.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.0",
+    "typescript-eslint": "^8.59.1",
     "webpack-dev-middleware": "^8.0.3",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^6.0.1",

package/out/static/client/291.91650ffed3a60424.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"291.91650ffed3a60424.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/icon/triangle-alert.svg","webpack://@mdn/fred/./components/playground/element.js","webpack://@mdn/fred/./node_modules/lit-html/directives/keyed.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;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)}:is(.wrapper section) .playground__runner-menu{align-self:flex-end;padding:.5rem 0}@media (width <= 992px){:is(.wrapper section) .playground__runner-menu{align-self:center}}.playground__runner-console:is(.wrapper section){grid-area:runner;overflow:hidden}.playground__runner-console:is(.wrapper section) mdn-play-runner{border:var(--border);border-radius:.25rem;flex-grow:1}.playground__runner-console:is(.wrapper section) .playground__console{background-color:var(--color-background-secondary);border:var(--border);border-radius:.25rem}: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):not(:last-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-button-login\")`Login`}</mdn-button\n    >`;\n  }\n}\n\ncustomElements.define(\"mdn-login-button\", MDNLoginButton);\n","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01\"/></svg>`;","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 warningIcon from \"../icon/triangle-alert.svg?lit\";\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(\n        this.l10n(\n          \"playground-do-you-really-want-to-clear-ever\",\n        )`Do you really want to clear everything?`,\n      ) &&\n      controller\n    ) {\n      controller.clear();\n      this._autoRun = true;\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(\n        this.l10n(\n          \"playground-do-you-really-want-to-revert-you\",\n        )`Do you really want to revert your changes?`,\n      ) &&\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 _copyDataUrl() {\n    const controller = this._controller.value;\n    if (controller) {\n      const { css, html, js } = controller.code;\n      let code = `<!doctype html><body>`;\n      if (css) code += `<style>${css}</style>`;\n      if (html) code += html;\n      if (js) code += `<script>${js}</script>`;\n      code += `</body>`;\n      // encode non-space whitespace and percent\n      code = code.replaceAll(/([^\\S ]|%)+/g, (str) => encodeURIComponent(str));\n      await navigator.clipboard.writeText(\n        `data:text/html;charset=utf-8,${code}`,\n      );\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: 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-playground\")`Playground`}</h1>\n              <menu>\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._format}\n                  ?disabled=${!hasCode}\n                  >${this.l10n(\"playground-format\")`Format`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._run}\n                  ?disabled=${!hasCode}\n                  >${this.l10n(\"playground-run\")`Run`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._share}\n                  ?disabled=${!hasCode}\n                  data-id=\"share\"\n                  >${this.l10n(\"playground-share\")`Share`}</mdn-button\n                >\n                <mdn-button\n                  variant=\"secondary\"\n                  @click=${this._clear}\n                  ?disabled=${!(hasCode || isResettable)}\n                  data-id=\"clear\"\n                  >${this.l10n(\"playground-clear\")`Clear`}</mdn-button\n                >\n                ${hasInitialCode\n                  ? html`<mdn-button\n                      variant=\"secondary\"\n                      @click=${this._reset}\n                      ?disabled=${!isResettable}\n                      >${this.l10n(\"playground-reset\")`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`<aside class=\"playground__runner-menu\">\n                  <menu>\n                    <mdn-button\n                      @click=${this._reportOpen}\n                      variant=\"secondary\"\n                      .icon=${warningIcon}\n                    >\n                      ${this.l10n(\n                        \"playground-seeing-something-inappropriate\",\n                      )`Seeing something inappropriate?`}\n                    </mdn-button>\n                  </menu>\n                </aside>`\n              : nothing}\n            <mdn-play-runner></mdn-play-runner>\n            <div class=\"playground__console\">\n              <div>${this.l10n(\"playground-console\")`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(\"playground-share-markdown\")`Share Markdown`}</h2>\n          <mdn-button\n            variant=\"secondary\"\n            @click=${this._copyMarkdown}\n            data-glean-id=\"playground: share-markdown\"\n            >${this.l10n(\n              \"playground-copy-markdown-to-clipboard\",\n            )`Copy markdown to clipboard`}</mdn-button\n          >\n        </section>\n        <section>\n          <h2>${this.l10n(\"playground-share-data-url\")`Share Data URL`}</h2>\n          <mdn-button\n            variant=\"secondary\"\n            @click=${this._copyDataUrl}\n            data-glean-id=\"playground: share-data-url\"\n            >${this.l10n(\n              \"playground-copy-data-url-to-clipboard\",\n            )`Copy data URL to clipboard`}</mdn-button\n          >\n        </section>\n        <section>\n          <h2>\n            ${this.l10n(\n              \"playground-share-your-code-via-permalink\",\n            )`Share your code via Permalink`}\n          </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                        data-glean-id=\"playground: share-permalink\"\n                        >${this.l10n(\n                          \"playground-copy-to-clipboard\",\n                        )`Copy to clipboard`}</mdn-button\n                      >\n                    `\n                  : html`<mdn-button @click=${this._createPermalink}\n                      >${this.l10n(\n                        \"playground-create-link\",\n                      )`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>\n            ${this.l10n(\n              \"playground-report-this-malicious-or-inappro\",\n            )`Report this malicious or inappropriate shared playground.`}\n          </p>\n          <label>\n            ${this.l10n(\n              \"playground-can-you-please-share-some-detail\",\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            >${this.l10n(\"playground-cancel\")`Cancel`}</mdn-button\n          >\n          <mdn-button @click=${this._reportSubmit}\n            >${this.l10n(\"playground-report\")`Report`}</mdn-button\n          >\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"],"names":["MDNLoginButton","location","URL","URLSearchParams","customElements","MDNPlayground","confirm","history","Object","Boolean","navigator","encodeURIComponent","fetch","JSON","sessionStorage","s","opener","Error","console","i","arguments","r","t"],"mappings":";2MAKI,EAA0B,IAA4B,KAC1D,EAAwB,CAAC,CAAC,GAAiC,EAE3D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,o4EAAq4E,GAAG,EAEj7E,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,oECPnD,EAA0B,SAA4B,KAE1D,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,wNAAyN,GAAG,EAErQ,MAAe,EAAwB,QAAQ,qHCDxC,IAAMA,eAAN,MAAMA,sBAAuB,QAAU,IAAU,EACtD,OAAO,IAAM,EAAM,AAEnB,KAAI,WAAY,CACd,IAAM,EAAOC,SAAS,IAAI,CAAC,OAAO,CAACA,SAAS,MAAM,CAAE,IAE9C,EAAW,IAAIC,IAAI,IAAc,CAAED,SAAS,MAAM,EAExD,OADA,EAAS,MAAM,CAAG,IAAIE,gBAAgB,CAAE,MAAK,GAAG,QAAQ,GACjD,EAAS,QAAQ,EAC1B,CAEA,QAAS,CACP,MAAO,QAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC;OAC3C,EAAE,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;KAC3C,CAAC,AACJ,CACF,EAEAC,eAAe,MAAM,CAAC,mBAAoBJ,yICxBf,MAAe,QAAG,CAAC,8RAA8R,CAAC,qGC0B7U,IAAM,EAAc,0BAEb,IAAMK,cAAN,MAAMA,qBAAsB,QAAU,IAAU,EACrD,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,QAAS,CAAE,MAAO,EAAK,CACzB,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,UAAU,CAAG,GAClB,IAAI,CAAC,QAAQ,CAAG,GAEhB,IAAI,CAAC,OAAO,CAAG,MACjB,CAGA,YAAc,SAAY,AAE1B,aAAc,SAAY,AAE1B,cAAe,SAAY,AAE3B,OAAQ,IAAI,IAAI,CAAC,IAAI,CAAE,CACrB,KAAM,SACG,MAAM,SAEjB,EAAG,AAEH,UAAU,CACR,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,QAC1B,CAEA,MAAO,CACL,IAAM,EAAa,IAAI,CAAC,WAAW,CAAC,KAAK,CACrC,IACF,EAAW,GAAG,GACT,IAAI,CAAC,QAAQ,GAChB,IAAI,CAAC,QAAQ,CAAG,GAChB,EAAW,WAAW,CAAG,GACzB,IAAI,CAAC,aAAa,IAGxB,CAEA,QAAS,CACP,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,WAC1B,CAEA,QAAS,CACP,IAAM,EAAa,IAAI,CAAC,WAAW,CAAC,KAAK,CACzC,GACEC,QACE,IAAI,CAAC,IAAI,CACP,8CACD,CAAC,uCAAuC,CAAC,GAE5C,EACA,CACA,EAAW,KAAK,GAChB,IAAI,CAAC,QAAQ,CAAG,GAChB,IAAI,CAAC,aAAa,GAClB,IAAI,CAAC,aAAa,GAClB,IAAM,EAAmB,IAAIJ,IAAID,SAAS,IAAI,CAC9C,GAAiB,MAAM,CAAG,GAC1BM,QAAQ,YAAY,CAAC,OAAW,GAAI,EACtC,CACF,CAEA,QAAS,CACP,IAAM,EAAa,IAAI,CAAC,WAAW,CAAC,KAAK,CAEvCD,QACE,IAAI,CAAC,IAAI,CACP,8CACD,CAAC,0CAA0C,CAAC,GAE/C,IAEA,EAAW,KAAK,GAChB,IAAI,CAAC,aAAa,GAClB,IAAI,CAAC,aAAa,GAEtB,CAEA,MAAM,eAAgB,CACpB,IAAM,EAAa,IAAI,CAAC,WAAW,CAAC,KAAK,CACzC,GAAI,EAAY,CACd,IAAM,EAAWE,OAAO,OAAO,CAAC,EAAW,IAAI,EAC5C,GAAG,CACF,CAAC,CAAC,EAAM,EAAK,GACX,GACA,SAAW;EACrB;OACO,EAEA,MAAM,CAACC,SACP,IAAI,CAAC,OACR,OAAMC,UAAU,SAAS,CAAC,SAAS,CAAC,EACtC,CACF,CAEA,MAAM,cAAe,CACnB,IAAM,EAAa,IAAI,CAAC,WAAW,CAAC,KAAK,CACzC,GAAI,EAAY,CACd,GAAM,CAAE,KAAG,CAAE,MAAI,CAAE,IAAE,CAAE,CAAG,EAAW,IAAI,CACrC,EAAO,uBACP,IAAK,IAAQ,CAAC,OAAO,EAAE,EAAI,QAAQ,CAAC,AAAD,EACnC,GAAM,IAAQ,CAAG,EACjB,GAAI,IAAQ,CAAC,QAAQ,EAAE,EAAG,SAAS,CAAC,AAAD,EACvC,GAAQ,UAER,EAAO,EAAK,UAAU,CAAC,eAAgB,AAAC,GAAQC,mBAAmB,IACnE,MAAMD,UAAU,SAAS,CAAC,SAAS,CACjC,CAAC,6BAA6B,EAAE,EAAK,CAAC,CAE1C,CACF,CAEA,MAAM,kBAAmB,CACvB,IAAM,EAAa,IAAI,CAAC,WAAW,CAAC,KAAK,CACzC,GAAI,EAAY,CACd,IAAM,EAAM,MAAME,MAAM,gBAAiB,CACvC,OAAQ,OACR,QAAS,CACP,eAAgB,kBAClB,EACA,KAAMC,KAAK,SAAS,CAAC,EAAW,IAAI,CACtC,GACM,CAAE,IAAE,CAAE,CAAG,MAAM,EAAI,IAAI,GACvB,EAAY,IAAIX,IAAID,SAAS,IAAI,CACvC,GAAU,MAAM,CAAG,IAAIE,gBAAgB,CAAE,IAAG,GAAG,QAAQ,GAEvD,EAAW,WAAW,CAAG,EAAW,IAAI,CACxC,IAAI,CAAC,UAAU,CAAG,EAAU,QAAQ,GACpCI,QAAQ,YAAY,CAAC,OAAW,GAAI,GACpC,IAAI,CAAC,aAAa,EACpB,CACF,CAEA,MAAM,gBAAiB,CACjB,IAAI,CAAC,UAAU,EACjB,MAAMG,UAAU,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAEvD,CAEA,eAAgB,CACd,IAAM,EAAa,IAAI,CAAC,WAAW,CAAC,KAAK,CACzC,GAAI,EAAY,CACd,GAAM,CAAE,WAAS,CAAE,aAAW,CAAE,MAAI,CAAE,CAAG,EAEnC,EAAU,CACd,YACA,cACA,OACA,QAAS,IAAI,CAAC,QAAQ,AACxB,EACAI,eAAe,OAAO,CAAC,EAAaD,KAAK,SAAS,CAAC,GACrD,CACF,CAEA,cAAe,CACb,GAAM,CAAE,WAAS,CAAE,aAAW,CAAE,MAAI,CAAE,SAAO,CAAE,CAAG,EAChDA,KAAK,KAAK,CAACC,eAAe,OAAO,CAAC,IAAgB,OAE9C,EAAa,IAAI,CAAC,WAAW,CAAC,KAAK,CACrC,IACc,KAAZ,IACF,IAAI,CAAC,QAAQ,CAAG,GAChB,EAAW,UAAU,CAAG,GACxB,EAAW,WAAW,CAAG,IAE3B,EAAW,SAAS,CAAG,EACvB,EAAW,WAAW,CAAG,EACzB,EAAW,IAAI,CAAG,EAClB,IAAI,CAAC,aAAa,GAEtB,CAEA,MAAM,cAAe,CACnB,IAAM,EAAa,IAAI,CAAC,WAAW,CAAC,KAAK,CACzC,GAAI,EAAY,CACd,IAAM,EAAS,IAAIX,gBAAgBF,SAAS,MAAM,EAC5C,EAAU,EAAO,GAAG,CAAC,MACrB,EAAa,EAAO,GAAG,CAAC,SACxB,EAAiB,EAAO,GAAG,CAAC,YAE9B,IACF,KAAI,CAAC,OAAO,CAAG,CAAM,EAGvB,GAAM,CAAE,UAAW,CAAc,CAAE,MAAI,CAAE,CACvC,AAAC,MAAO,GACJ,IAAI,CAAC,eAAe,CAAC,GACrB,EACE,IAAI,CAAC,iBAAiB,CAAC,GACvB,MAAQ,GAAO,CAAC,EAElBc,EAAY,GAAkB,EAEpC,GACEA,AAAc,SAAdA,GACA,AAAS,SAAT,GACC,GAAW,SAAS,GAAKA,GACxB,CAAC,EAAY,EAAW,WAAW,CAAE,EAAI,EAC3C,CACA,GAAI,CACF,GACE,CAACC,QAAQ,UAAU,QACnBA,QAAQ,UAAU,SAAWf,SAAS,MAAM,CAE5C,MAAM,AAAIgB,MAAM,uBAEpB,CAAE,KAAM,CACN,IAAI,CAAC,QAAQ,CAAG,GAChB,EAAW,UAAU,CAAG,GACxB,EAAW,WAAW,CAAG,EAC3B,CACA,EAAW,SAAS,CAAGF,EACvB,EAAW,WAAW,CAAG,EACzB,EAAW,IAAI,CAAG,EAClB,IAAI,CAAC,aAAa,EACpB,CAEA,IAAI,CAAC,aAAa,EACpB,CACF,CAGA,MAAM,gBAAgB,CAAE,CAAE,CACxB,IAAM,EAAW,MAAMH,MAAM,CAAC,aAAa,EAAED,mBAAmB,GAAI,CAAC,EACrE,GAAI,CAAC,EAAS,EAAE,CAAE,YAChBO,QAAQ,KAAK,CAAC,EAAS,UAAU,EAInC,IAAM,EAAY,IAAIhB,IAAID,SAAS,IAAI,EAMvC,OALA,EAAU,MAAM,CAAG,IAAIE,gBAAgB,CAAE,IAAG,GAAG,QAAQ,GACvD,IAAI,CAAC,UAAU,CAAG,EAAU,QAAQ,GAEpC,QAAW,2BAEJ,EADM,MAAM,EAAS,IAAI,GAElC,CAGA,MAAM,kBAAkB,CAAU,CAAE,CAClC,GAAM,CAAE,OAAK,CAAE,CAAG,MAAM,QAAqB,GAC7C,OAAO,EAAeU,KAAK,KAAK,CAAC,GAAS,MAC5C,CAEA,eAAgB,CACd,IAAI,CAAC,aAAa,GAClB,IAAI,CAAC,aAAa,EACpB,CAEA,aAAc,CACZ,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,WAC3B,CAEA,eAAgB,CACd,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,OAC3B,CAEA,MAAM,eAAgB,CACpB,MAAMD,MAAM,oBAAqB,CAC/B,OAAQ,OACR,QAAS,CACP,eAAgB,kBAClB,EACA,KAAMC,KAAK,SAAS,CAAC,CACnB,GAAI,IAAI,CAAC,OAAO,CAChB,OAAQ,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,cAAc,aAAa,KAC9D,EACF,GACA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,OAC3B,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,KAAK,CAAC,GAAG,EAChB,CAEA,QAAS,CACP,GAAM,CAAE,MAAI,CAAE,aAAW,CAAE,CAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAI,CAAC,EACnD,EAAUL,OAAO,MAAM,CAAC,GAAQ,CAAC,GAAG,IAAI,CAACC,SACzC,EAAiBD,OAAO,MAAM,CAAC,GAAe,CAAC,GAAG,IAAI,CAACC,SACvDU,EAAe,GAAkB,CAAC,EAAY,EAAM,GAE1D,MAAO,QAAI,CAAC;;;UAGN,EAAE,QAAI,IAAI,CAAC,WAAW,EAAE;;;;;;kBAMhB,EAAE,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAC,CAAC;;;;yBAI1C,EAAE,IAAI,CAAC,OAAO,CAAC;4BACZ,EAAE,CAAC,EAAQ;mBACpB,EAAE,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;;;;yBAInC,EAAE,IAAI,CAAC,IAAI,CAAC;4BACT,EAAE,CAAC,EAAQ;mBACpB,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;;;;yBAI7B,EAAE,IAAI,CAAC,MAAM,CAAC;4BACX,EAAE,CAAC,EAAQ;;mBAEpB,EAAE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;;;;yBAIjC,EAAE,IAAI,CAAC,MAAM,CAAC;4BACX,EAAE,CAAE,IAAWA,CAAW,EAAG;;mBAEtC,EAAE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;;gBAE1C,EAAE,EACE,QAAI,CAAC;;6BAEI,EAAE,IAAI,CAAC,MAAM,CAAC;gCACX,EAAE,CAACA,EAAa;uBACzB,EAAE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;qBACzC,CAAC,CACF,IAAO,CAAC;;;;;;;wBAOJ,EAAE,IAAI,CAAC,aAAa,CAAC;;;;;;;wBAOrB,EAAE,IAAI,CAAC,aAAa,CAAC;;;;;;;wBAOrB,EAAE,IAAI,CAAC,aAAa,CAAC;;;;;YAKjC,EAAE,IAAI,CAAC,OAAO,CACV,QAAI,CAAC;;;6BAGQ,EAAE,IAAI,CAAC,WAAW,CAAC;;4BAEpB,EAAE,EAAY;;sBAEpB,EAAE,IAAI,CAAC,IAAI,CACT,4CACD,CAAC,+BAA+B,CAAC,CAAC;;;wBAGjC,CAAC,CACT,IAAO,CAAC;;;mBAGL,EAAE,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;;;;;;iBAM7C,EAAE,QAAI,IAAI,CAAC,WAAW,EAAE;;cAE3B,EAAE,IAAI,CAAC,IAAI,CAAC,4BAA4B,CAAC,cAAc,CAAC,CAAC;;;mBAGpD,EAAE,IAAI,CAAC,aAAa,CAAC;;aAE3B,EAAE,IAAI,CAAC,IAAI,CACV,wCACD,CAAC,0BAA0B,CAAC,CAAC;;;;cAI5B,EAAE,IAAI,CAAC,IAAI,CAAC,4BAA4B,CAAC,cAAc,CAAC,CAAC;;;mBAGpD,EAAE,IAAI,CAAC,YAAY,CAAC;;aAE1B,EAAE,IAAI,CAAC,IAAI,CACV,wCACD,CAAC,0BAA0B,CAAC,CAAC;;;;;YAK9B,EAAE,IAAI,CAAC,IAAI,CACT,2CACD,CAAC,6BAA6B,CAAC,CAAC;;UAEnC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAClB,QAAS,IAAM,QAAI,CAAC,qCAAqC,CAAC,CAC1D,QAAS,IAAM,QAAI,CAAC,qCAAqC,CAAC,CAC1D,SAAU,AAAC,GACT,EAAK,eAAe,CAChB,IAAI,CAAC,UAAU,EAAI,CAACA,EAClB,QAAI,CAAC;oCACW,EAAE,IAAI,CAAC,UAAU,CAAC;;;+BAGvB,EAAE,IAAI,CAAC,cAAc,CAAC;;yBAE5B,EAAE,IAAI,CAAC,IAAI,CACV,+BACD,CAAC,iBAAiB,CAAC,CAAC;;oBAEzB,CAAC,CACD,QAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,CAAC;uBAC7C,EAAE,IAAI,CAAC,IAAI,CACV,yBACD,CAAC,WAAW,CAAC,CAAC;qBAChB,CAAC,CACJ,QAAI,CAAC,qCAAqC,CAAC,AACnD,GAAG;;;iBAGI,EAAE,QAAI,IAAI,CAAC,YAAY,EAAE;;;YAG9B,EAAE,IAAI,CAAC,IAAI,CACT,8CACD,CAAC,yDAAyD,CAAC,CAAC;;;YAG7D,EAAE,IAAI,CAAC,IAAI,CACT,8CACD,CAAC,oEAAoE,CAAC,CAAC;;;;;iDAKnC,EAAE,IAAI,CAAC,aAAa,CAAC;aACzD,EAAE,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;;6BAEzB,EAAE,IAAI,CAAC,aAAa,CAAC;aACrC,EAAE,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;;;;IAIlD,CAAC,AACH,CAEA,cAAe,CACb,IAAI,CAAC,YAAY,GACjB,IAAI,CAAC,YAAY,EACnB,CACF,EAQA,SAAS,EAAe,CAAc,QACpC,AAAI,SAAU,EACL,CACL,UAAW,EAAe,GAAG,EAAI,GACjC,KAAM,CACJ,KAAM,EAAe,IAAI,CACzB,IAAK,EAAe,GAAG,CACvB,GAAI,EAAe,EAAE,AACvB,CACF,EAEE,cAAe,EACV,EAEF,CACL,UAAW,GACX,KAAM,CAAC,CACT,CACF,CAOA,SAAS,EAAY,CAAC,CAAE,CAAC,EACvB,OAAO,AAAM,SAAN,GAAmB,AAAM,SAAN,EACtB,IAAM,EACNX,OAAO,IAAI,CAAC,GAAG,MAAM,GAAKA,OAAO,IAAI,CAAC,GAAG,MAAM,EAC7CA,OAAO,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAG,EAAE,GAAK,CAAC,CAAC,EAAE,GAAK,EACrD,CApCAJ,eAAe,MAAM,CAAC,iBAAkBC,kFC3erC,IAAMc,EAAE,SAAE,cAAc,IAAC,CAAC,aAAa,CAAC,KAAK,IAAIC,WAAW,IAAI,CAAC,GAAG,CAACC,EAAA,EAAC,CAAC,OAAO,CAAC,CAACC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,EAAEA,CAAC,CAAC,OAAO,CAAC,CAAC,CAACA,EAAE,EAAE,CAAC,CAAC,OAAOA,IAAI,IAAI,CAAC,GAAG,EAAG,UAAE,GAAG,IAAI,CAAC,GAAG,CAACA,CAAAA,EAAG,CAAC,CAAC"}

package/out/static/client/3259.ac8a5539251c647a.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"3259.ac8a5539251c647a.js","sources":["webpack://@mdn/fred/./components/observatory-results/element.css","webpack://@mdn/fred/./components/observatory-results/print.css?18a8","webpack://@mdn/fred/./components/observatory/assets/stars.svg","webpack://@mdn/fred/./components/observatory/assets/tooltip-arrow.svg","webpack://@mdn/fred/./components/observatory/constants.js","webpack://@mdn/fred/./components/observatory-results/csp.js","webpack://@mdn/fred/./components/observatory-results/element.js","webpack://@mdn/fred/./components/observatory-results/rating.js","webpack://@mdn/fred/./components/observatory-results/tooltip.js","webpack://@mdn/fred/./components/observatory-results/trend.js","webpack://@mdn/fred/./components/observatory-results/tabs.js","webpack://@mdn/fred/./components/observatory-results/scoring.js","webpack://@mdn/fred/./components/observatory-results/cookies.js","webpack://@mdn/fred/./components/observatory-results/raw-headers.js","webpack://@mdn/fred/./components/observatory-results/history.js","webpack://@mdn/fred/./components/observatory-results/comparison.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\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../observatory/assets/summary-icon.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"../observatory/assets/results-icon.svg\", import.meta.url);\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___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.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(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});width:2rem}h2.result:before{height:1.2rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});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 (width > 1200px){: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}}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","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\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.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}}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { svg } from \"lit\"; export default svg`<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>`;","import { svg } from \"lit\"; export default svg`<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>`;","/**\n * Scoring table for Observatory grades\n * @type {Array<{grade: string, scoreText: string, score: number, stars?: boolean}>}\n */\nconst SCORING_TABLE = [\n  { grade: \"A+\", scoreText: \"100+\", score: 100, stars: true },\n  { grade: \"A\", scoreText: \"90\", score: 90, stars: true },\n  { grade: \"A-\", scoreText: \"85\", score: 85, stars: true },\n  { grade: \"B+\", scoreText: \"80\", score: 80 },\n  { grade: \"B\", scoreText: \"70\", score: 70 },\n  { grade: \"B-\", scoreText: \"65\", score: 65 },\n  { grade: \"C+\", scoreText: \"60\", score: 60 },\n  { grade: \"C\", scoreText: \"50\", score: 50 },\n  { grade: \"C-\", scoreText: \"45\", score: 45 },\n  { grade: \"D+\", scoreText: \"40\", score: 40 },\n  { grade: \"D\", scoreText: \"30\", score: 30 },\n  { grade: \"D-\", scoreText: \"25\", score: 25 },\n  { grade: \"F\", scoreText: \"0\", score: 0 },\n];\n\n/**\n * Maintain consistent test order.\n * @type {string[]}\n */\nconst TEST_NAMES_IN_ORDER = [\n  \"content-security-policy\",\n  \"cookies\",\n  \"cross-origin-resource-sharing\",\n  \"redirection\",\n  \"referrer-policy\",\n  \"strict-transport-security\",\n  \"subresource-integrity\",\n  \"x-content-type-options\",\n  \"x-frame-options\",\n  \"cross-origin-resource-policy\",\n];\n\n// Export the constants\nexport { SCORING_TABLE, TEST_NAMES_IN_ORDER };\n","import { html } from \"lit\";\n\nimport { PassIcon } from \"../observatory/utils.js\";\n\n/** @type {(keyof import(\"@observatory\").CSPPolicy)[]} */\nconst policyTests = [\n  \"unsafeInline\",\n  \"unsafeEval\",\n  \"unsafeObjects\",\n  \"unsafeInlineStyle\",\n  \"insecureSchemeActive\",\n  \"insecureSchemePassive\",\n  \"antiClickjacking\",\n  \"defaultNone\",\n  \"insecureBaseUri\",\n  \"insecureFormAction\",\n  \"strictDynamic\",\n];\n\n// Policies where pass means bad\nconst negatedPolicies = new Set([\n  \"insecureBaseUri\",\n  \"insecureFormAction\",\n  \"insecureSchemeActive\",\n  \"insecureSchemePassive\",\n  \"unsafeEval\",\n  \"unsafeInline\",\n  \"unsafeInlineStyle\",\n  \"unsafeObjects\",\n]);\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns { import(\"@lit\").TemplateResult }\n */\nexport function CSP({ result }) {\n  const policy = result.tests[\"content-security-policy\"]?.policy;\n  const pass = result.tests[\"content-security-policy\"]?.pass || false;\n\n  if (!policy) {\n    if (\n      result.tests[\"content-security-policy\"]?.result ===\n      \"csp-not-implemented-but-reporting-enabled\"\n    ) {\n      return html`\n        <table class=\"csp\">\n          <tbody>\n            <tr>\n              <td>\n                <p>\n                  <code>Content-Security-Policy-Report-Only</code> header\n                  detected. Implement an enforced policy; see\n                  <a href=\"/en-US/docs/Web/HTTP/CSP\" target=\"_blank\">\n                    MDN's Content Security Policy (CSP) documentation </a\n                  >.\n                </p>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      `;\n    }\n\n    return html`\n      <table class=\"csp\">\n        <tbody>\n          <tr>\n            <td>\n              <p>No CSP headers detected</p>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    `;\n  }\n\n  const rows = policyTests.map((pt) => {\n    if (!policy[pt]) return null;\n    /** @type {import(\"@observatory\").PolicyItem} */\n    const p = policy[pt];\n\n    return html`\n      <tr>\n        <td data-header=\"Test\" .innerHTML=${p.description}></td>\n        <td data-header=\"Pass\">\n          ${PassIcon({\n            pass: negatedPolicies.has(pt) ? !p.pass : p.pass,\n          })}\n        </td>\n        <td data-header=\"Info\" .innerHTML=${p.info}></td>\n      </tr>\n    `;\n  });\n\n  return html`\n    <div class=\"detail-header\">\n      <p class=\"arrow\">${PassIcon({ pass })}</p>\n      <div\n        class=\"detail-header-content\"\n        .innerHTML=${result.tests[\"content-security-policy\"]\n          ?.score_description ?? `<p class=\"obs-none\">None</p>`}\n      ></div>\n    </div>\n\n    <table class=\"csp\">\n      <thead>\n        <tr>\n          <th>Test</th>\n          <th>Result</th>\n          <th>Info</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n  `;\n}\n","import { Task } from \"@lit/task\";\nimport { LitElement, html } from \"lit\";\nimport { nothing } from \"lit\";\n\nimport { OBSERVATORY_API_URL } from \"../env/index.js\";\n\nimport styles from \"./element.css?lit\";\nimport printStyles from \"./print.css?lit\";\nimport { Rating } from \"./rating.js\";\nimport { Tabs } from \"./tabs.js\";\n\nimport \"../../components/progress-bar/element.js\";\nimport \"../../components/observatory-comparison-table/element.js\";\nimport \"../../components/observatory-human-duration/element.js\";\n\nexport class MDNObservatoryResults extends LitElement {\n  static styles = [styles, printStyles];\n\n  constructor() {\n    super();\n    /** @type { string | null } */\n    this.host = null;\n    /** @type { number } */\n    this.selectedTab = 0;\n    /** @type { boolean } */\n    this._usePostInApi = false;\n  }\n\n  /**\n   * @type { import(\"@lit\").PropertyDeclarations }\n   */\n  static properties = {\n    host: { type: String },\n    selectedTab: { state: true, type: Number },\n    _usePostInApi: { state: true, type: Boolean },\n  };\n\n  _apiTask = new Task(this, {\n    args: () => [this.host],\n    task: async ([host], { signal }) => {\n      if (!host) {\n        throw new Error(\"No host provided\");\n      }\n      try {\n        const res = await fetch(\n          `${OBSERVATORY_API_URL}/api/v2/analyze?host=${encodeURIComponent(\n            host,\n          )}`,\n          { signal, method: this._usePostInApi ? \"POST\" : \"GET\" },\n        );\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        throw new Error(\"Observatory API request for scan data failed\", {\n          cause: error,\n        });\n      }\n    },\n  });\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._updateSelectedTab = this._updateSelectedTab.bind(this);\n    this.selectedTab = this._getSelectedTab();\n    globalThis.addEventListener(\"hashchange\", this._updateSelectedTab);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    globalThis.removeEventListener(\"hashchange\", this._updateSelectedTab);\n  }\n\n  firstUpdated() {\n    const params = new URLSearchParams(globalThis.location.search);\n    this.host = params.get(\"host\");\n  }\n\n  _updateSelectedTab() {\n    this.selectedTab = this._getSelectedTab();\n  }\n\n  /**\n   * @returns {number}\n   */\n  _getSelectedTab() {\n    const hash = globalThis.location.hash.replace(\"#\", \"\");\n    const tabs = [\n      \"scoring\",\n      \"csp\",\n      \"cookies\",\n      \"headers\",\n      \"history\",\n      \"benchmark\",\n    ];\n    const index = tabs.indexOf(hash);\n    return index === -1 ? 0 : index;\n  }\n\n  /**\n   *\n   * @param {Event} e\n   */\n  async _rescan(e) {\n    e.preventDefault();\n    if (!this.host) {\n      return;\n    }\n    this._usePostInApi = true;\n    this._apiTask.run();\n  }\n\n  /**\n   *\n   * @param {number} index\n   * @param {string} key\n   */\n  _handleTabSelect(index, key) {\n    this.selectedTab = index;\n    globalThis.history.replaceState(\n      \"\",\n      \"\",\n      globalThis.location.pathname + globalThis.location.search + \"#\" + key,\n    );\n  }\n\n  render() {\n    if (!this.host) {\n      return nothing;\n    }\n    return this._apiTask.render({\n      pending: () =>\n        html` <label class=\"visually-hidden\" for=\"progress-bar\">\n            Rescanning ${this.host} </label\n          ><mdn-progress-bar id=\"progress-bar\"></mdn-progress-bar>`,\n\n      complete: (data) => html`\n        <section class=\"summary\">\n          ${Rating({\n            result: data,\n            host: this.host || \"\",\n            rescan: this._rescan,\n          })}\n        </section>\n        <section class=\"results\">\n          ${Tabs({\n            result: data,\n            selectedTab: this.selectedTab,\n            onTabSelect: (index, key) => this._handleTabSelect(index, key),\n          })}\n        </section>\n      </div>`,\n\n      error: (e) => html`<div class=\"error\">${e}</div>`,\n    });\n  }\n}\n\ncustomElements.define(\"mdn-observatory-results\", MDNObservatoryResults);\n","import { html } from \"lit\";\n\nimport { formatMinus, hostAsRedirectChain } from \"../observatory/utils.js\";\n\nimport { Tooltip } from \"./tooltip.js\";\nimport { Trend } from \"./trend.js\";\n\nimport \"../observatory-rescan-button/element.js\";\nimport \"../dropdown/element.js\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result, host: string, rescan: Function}} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nexport function Rating({ result, host, rescan }) {\n  return html`\n    <h2 class=\"summary\">\n      Scan summary:\n      <span class=\"host\">${hostAsRedirectChain(host, result)}</span>\n    </h2>\n    <section class=\"scan-result\">\n      <section class=\"grade-trend\">\n        <div class=\"overall\">\n          <mdn-dropdown>\n            <button\n              slot=\"button\"\n              aria-label=\"show info tooltip\"\n              class=\"info-tooltip\"\n              tabindex=\"0\"\n            >\n              <div\n                class=${`grade grade-${result.scan.grade?.[0]?.toLowerCase()}`}\n              >\n                ${formatMinus(result.scan.grade)}\n              </div>\n            </button>\n            ${Tooltip(result)}\n          </mdn-dropdown>\n        </div>\n        ${Trend({ result })}\n      </section>\n      <section class=\"data\">\n        <div>\n          <a href=\"/en-US/observatory/docs/tests_and_scoring\" target=\"_blank\">\n            <span class=\"label\">Score</span></a\n          >: ${result.scan.score}&thinsp;/&thinsp;100\n        </div>\n        <div>\n          <a href=\"#history\"> <span class=\"label\">Scan Time</span></a\n          >:\n          <mdn-observatory-human-duration\n            .date=${new Date(result.scan.scanned_at)}\n          ></mdn-observatory-human-duration>\n        </div>\n        <a href=\"/en-US/observatory/docs/tests_and_scoring\" target=\"_blank\">\n          <span class=\"label\">Tests Passed</span></a\n        >: ${result.scan.tests_passed}&thinsp;/&thinsp;\n        ${result.scan.tests_quantity}\n      </section>\n      <section class=\"actions\">\n        <mdn-observatory-rescan-button\n          .from=${new Date(result.scan.scanned_at)}\n          .duration=${60}\n          @click=${rescan}\n        ></mdn-observatory-rescan-button>\n        <div class=\"scan-another\">\n          <a href=\"/en-US/observatory\"> Scan another website </a>\n        </div>\n      </section>\n    </section>\n  `;\n}\n","import { html } from \"lit\";\n\nimport starsSvg from \"../observatory/assets/stars.svg?lit\";\nimport arrowSvg from \"../observatory/assets/tooltip-arrow.svg?lit\";\nimport { SCORING_TABLE } from \"../observatory/constants.js\";\nimport { formatMinus } from \"../observatory/utils.js\";\n\n/**\n */\n\n/**\n *\n * @param {import(\"@observatory\").Result} result\n */\nexport function Tooltip(result) {\n  const rows = SCORING_TABLE.map((st) => {\n    return html`\n      <tr class=${result.scan.grade === st.grade ? \"current\" : \"\"}>\n        <td>${formatMinus(st.grade)}</td>\n        <td>\n          ${st.scoreText}\n          ${result.scan.grade === st.grade && st.stars ? starsSvg : \"\"}\n        </td>\n      </tr>\n    `;\n  });\n\n  return html`\n    <div\n      slot=\"dropdown\"\n      id=\"grade-popover\"\n      aria-describedby=\"grade-table\"\n      class=\"tooltip-popup\"\n    >\n      ${arrowSvg}\n      <table class=\"grade-tooltip\" id=\"grades-table\" role=\"tooltip\">\n        <thead>\n          <tr>\n            <th>Grade</th>\n            <th>Score</th>\n          </tr>\n        </thead>\n        <tbody>\n          ${rows}\n        </tbody>\n      </table>\n    </div>\n  `;\n}\n","import { html, nothing } from \"lit\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns {import(\"@lit\").TemplateResult | nothing}\n */\nexport function Trend({ result }) {\n  switch (arrowState(result)) {\n    case \"up\": {\n      return html`\n        <div class=\"trend\">\n          <span class=\"arrow-up\" aria-hidden=\"true\"> ↗︎ </span>\n          since last scan\n        </div>\n      `;\n    }\n    case \"down\": {\n      return html`\n        <div class=\"trend\">\n          <span class=\"arrow-down\" aria-hidden=\"true\"> ↘︎ </span>\n          since last scan\n        </div>\n      `;\n    }\n    default: {\n      return nothing;\n    }\n  }\n}\n\n/**\n *\n * @param {import(\"@observatory\").Result} result\n * @returns {\"up\" | \"down\" | \"none\"}\n */\nfunction arrowState(result) {\n  const [oldScore, oldGrade] =\n    result.history.length > 0\n      ? [result.history.at(-2)?.score, result.history.at(-2)?.grade]\n      : [undefined, undefined];\n  const newScore = result.scan.score;\n  const newGrade = result.scan.grade;\n  if (\n    typeof newScore === \"number\" &&\n    typeof oldScore === \"number\" &&\n    newGrade !== oldGrade &&\n    newScore !== oldScore\n  ) {\n    return oldScore < newScore ? \"up\" : \"down\";\n  } else {\n    return \"none\";\n  }\n}\n","import { html } from \"lit\";\n\nimport { Comparison } from \"./comparison.js\";\nimport { Cookies } from \"./cookies.js\";\nimport { CSP } from \"./csp.js\";\nimport { History } from \"./history.js\";\nimport { RawHeaders } from \"./raw-headers.js\";\nimport { Scoring } from \"./scoring.js\";\n\n/**\n * @param {{\n *   result: import(\"@observatory\").Result,\n *   selectedTab: number,\n *   onTabSelect: (index: number, key: string) => void\n * }} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nexport function Tabs({ result, selectedTab = 0, onTabSelect }) {\n  const tabs = [\n    {\n      label: \"Scoring\",\n      key: \"scoring\",\n      element: html`${Scoring({ result })}`,\n    },\n    {\n      label: \"CSP analysis\",\n      key: \"csp\",\n      element: html`${CSP({ result })}`,\n    },\n    {\n      label: \"Cookies\",\n      key: \"cookies\",\n      element: html`${Cookies({ result })}`,\n    },\n    {\n      label: \"Raw server headers\",\n      key: \"headers\",\n      element: html`${RawHeaders({ result })}`,\n    },\n    {\n      label: \"Scan history\",\n      key: \"history\",\n      element: html`${History({ result })}`,\n    },\n    {\n      label: \"Benchmark comparison\",\n      key: \"benchmark\",\n      element: html`${Comparison({ result })}`,\n    },\n  ];\n\n  const tabElements = tabs.map((tab, i) => {\n    const onChange = () => onTabSelect(i, tab.key);\n    return html`\n      <li id=\"tabs-${i}\" class=\"tabs-list-item\">\n        <input\n          class=\"visually-hidden\"\n          id=\"tab-${i}\"\n          name=\"selected\"\n          type=\"radio\"\n          role=\"tab\"\n          .checked=${i === selectedTab}\n          aria-controls=\"tab-container-${i}\"\n          @change=${onChange}\n        />\n        <label for=\"tab-${i}\" id=\"tab-label-${i}\">${tab.label}</label>\n        <section\n          class=\"tab-content\"\n          role=\"tabpanel\"\n          aria-labelledby=\"tab-label-${i}\"\n          id=\"tab-container-${i}\"\n        >\n          <div class=\"scroll-container\">${tab.element}</div>\n        </section>\n      </li>\n    `;\n  });\n\n  return html`\n    <section class=\"scan-results\">\n      <h2 class=\"result\" id=\"scan-results-header\">Scan results</h2>\n      <ol\n        class=\"tabs-list\"\n        role=\"tablist\"\n        aria-labelledby=\"scan-results-header\"\n      >\n        ${tabElements}\n      </ol>\n    </section>\n  `;\n}\n","import { html } from \"lit\";\n\nimport { TEST_NAMES_IN_ORDER } from \"../observatory/constants.js\";\nimport { PassIcon, formatMinus } from \"../observatory/utils.js\";\n\n/**\n * @param {{overallScore: number, scoreModifier: number}} props\n * @returns {import(\"@lit\").TemplateResult}\n */\nfunction ScoreModifier({ overallScore, scoreModifier }) {\n  const bonusEligible = overallScore >= 90;\n  const formattedScoreModifier = formatMinus(\n    `${scoreModifier > 0 ? `+${scoreModifier}` : scoreModifier}`,\n  );\n\n  return html`\n    <span class=${!bonusEligible && scoreModifier > 0 ? \"not-counted\" : \"\"}>\n      ${!bonusEligible && scoreModifier > 0\n        ? html`0<sup><a href=\"#bonus-points-explanation\">*</a></sup>`\n        : formattedScoreModifier}\n    </span>\n  `;\n}\n\n/**\n *\n * @param {{ result: import(\"@observatory\").Result}} result\n * @returns {import(\"@lit\").TemplateResult}\n */\nexport function Scoring({ result }) {\n  const showFootnote =\n    (result.scan.score || 0) <= 90 &&\n    Object.entries(result.tests).find(([_n, t]) => t.score_modifier > 0);\n\n  // empty case, should not happen\n  if (Object.keys(result.tests).length === 0) {\n    return html`No tests found.`;\n  }\n\n  const rows = TEST_NAMES_IN_ORDER.map((name) => {\n    const test = result.tests[name];\n    if (!test) return null;\n\n    return html`\n      <tr>\n        <td data-header=\"Test\">\n          <a\n            href=${test.link}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            class=${test.link.startsWith(\"/\") ? \"\" : \"external\"}\n          >\n            ${test.title}\n          </a>\n        </td>\n        ${test.pass === null\n          ? html`<td data-header=\"Score\">-</td>`\n          : html` <td class=\"score\" data-header=\"Score\">\n              <span>\n                <span class=\"obs-score-value\">\n                  ${ScoreModifier({\n                    overallScore: result.scan.score || 0,\n                    scoreModifier: test.score_modifier,\n                  })}\n                </span>\n                ${PassIcon({ pass: test.pass })}\n              </span>\n            </td>`}\n        <td data-header=\"Reason\" .innerHTML=${test.score_description}></td>\n        <td\n          data-header=\"Advice\"\n          .innerHTML=${test.recommendation || `<p class=\"obs-none\">None</p>`}\n        ></td>\n      </tr>\n    `;\n  });\n\n  return html`\n    <table class=\"tests\">\n      <thead>\n        <tr>\n          <th>Test</th>\n          <th>Score</th>\n          <th>Reason</th>\n          <th>Recommendation</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n    ${showFootnote\n      ? html` <section class=\"footnote\" id=\"bonus-points-explanation\">\n          <sup>*</sup> Normally awards bonus points, however, in this case they\n          are not included in the overall score (\n          <a href=\"/en-US/observatory/docs/tests_and_scoring\" target=\"_blank\">\n            find out why\n          </a>\n          ).\n        </section>`\n      : null}\n  `;\n}\n","import { html } from \"lit\";\n\nimport {\n  CookiePrefix,\n  PassIcon,\n  Timestamp,\n  upperCaseHeaderName,\n} from \"../observatory/utils.js\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns { import(\"@lit\").TemplateResult }\n */\nexport function Cookies({ result }) {\n  const cookies = result.tests[\"cookies\"]?.data;\n  const pass = result.tests[\"cookies\"]?.pass;\n\n  if (!cookies || Object.keys(cookies).length === 0) {\n    return html`\n      <table class=\"cookies\">\n        <tbody>\n          <tr>\n            <td>No cookies detected</td>\n          </tr>\n        </tbody>\n      </table>\n    `;\n  }\n\n  const rows = Object.entries(cookies).map(\n    ([key, value]) => html`\n      <tr>\n        <td data-header=\"Name\" class=\"cookie-name\">${key}</td>\n        <td data-header=\"Expires\">\n          ${value.expires ? Timestamp({ expires: value.expires }) : \"Session\"}\n        </td>\n        <td data-header=\"Path\">\n          <code>${value.path}</code>\n        </td>\n        <td data-header=\"Secure\">${PassIcon({ pass: value.secure })}</td>\n        <td data-header=\"HttpOnly\">${PassIcon({ pass: value.httponly })}</td>\n        <td data-header=\"SameSite\">\n          ${value.samesite\n            ? html`<code>${upperCaseHeaderName(value.samesite)}</code>`\n            : \"-\"}\n        </td>\n        <td data-header=\"Prefixed\">${CookiePrefix({ cookieName: key })}</td>\n      </tr>\n    `,\n  );\n\n  return html`\n    <div class=\"detail-header\">\n      <p class=\"arrow\">\n        ${PassIcon({ pass: pass === undefined ? null : pass })}\n      </p>\n      <div\n        class=\"detail-header-content\"\n        .innerHTML=${result.tests[\"cookies\"]?.score_description ??\n        `<p class=\"obs-none\">None</p>`}\n      ></div>\n    </div>\n    <table class=\"cookies\">\n      <thead>\n        <tr>\n          <th>Name</th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#expires\"\n              >Expires</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#path\"\n              >Path</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#secure\"\n              >Secure</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#httponly\"\n              >HttpOnly</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#samesite\"\n              >SameSite</a\n            >\n          </th>\n          <th>\n            <a\n              target=\"_blank\"\n              href=\"/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name\"\n              >Prefix</a\n            >\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n  `;\n}\n","import { html } from \"lit\";\n\nimport { headerLink } from \"../observatory/utils.js\";\n\nimport \"../observatory-header-link/element.js\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns { import(\"@lit\").TemplateResult }\n */\nexport function RawHeaders({ result }) {\n  if (!result.scan.response_headers) {\n    return html`\n      <table class=\"headers\">\n        <tbody>\n          <tr>\n            <td>No headers detected</td>\n          </tr>\n        </tbody>\n      </table>\n    `;\n  }\n\n  const rows = Object.entries(result.scan.response_headers).map(\n    ([header, value]) => html`\n      <tr>\n        <td data-header=\"Header\">\n          <mdn-observatory-header-link header=${header}>\n            ${headerLink(header)}\n          </mdn-observatory-header-link>\n        </td>\n        <td data-header=\"Value\">${value}</td>\n      </tr>\n    `,\n  );\n\n  return html`\n    <table class=\"headers\">\n      <thead>\n        <tr>\n          <th>Header</th>\n          <th>Value</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n  `;\n}\n","import { html, nothing } from \"lit\";\n\nimport { formatDateTime, formatMinus } from \"../observatory/utils.js\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} props\n * @returns { import(\"@lit\").TemplateResult | nothing }\n */\nexport function History({ result }) {\n  if (result.history.length === 0) {\n    return nothing;\n  }\n\n  const rows = [...result.history].reverse().map(\n    ({ scanned_at, score, grade }) => html`\n      <tr>\n        <td data-header=\"Date\">${formatDateTime(new Date(scanned_at))}</td>\n        <td data-header=\"Score\">${score}</td>\n        <td data-header=\"Grade\">${formatMinus(grade)}</td>\n      </tr>\n    `,\n  );\n\n  return html`\n    <h2>Changes in score over time</h2>\n    <table class=\"history\">\n      <thead>\n        <tr>\n          <th>Date</th>\n          <th>Score</th>\n          <th>Grade</th>\n        </tr>\n      </thead>\n      <tbody>\n        ${rows}\n      </tbody>\n    </table>\n  `;\n}\n","import { html } from \"lit\";\n\n/**\n *\n * @param {{result: import(\"@observatory\").Result}} result\n * @returns { import(\"@lit\").TemplateResult }\n */\nexport function Comparison({ result }) {\n  return html`\n    <h2>Performance trends from the past year</h2>\n    <mdn-observatory-comparison-table\n      .result=${result}\n    ></mdn-observatory-comparison-table>\n    <p>\n      Refer to this graph to assess the website's current status. By following\n      the recommendations provided and rescanning, you can expect an improvement\n      in the website's grade.\n    </p>\n  `;\n}\n"],"names":["Set","MDNObservatoryResults","String","Number","Boolean","Error","fetch","encodeURIComponent","globalThis","URLSearchParams","Date","Object","t","customElements"],"mappings":"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"}

package/out/static/client/4920.033c028023478df5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"4920.033c028023478df5.js","sources":["webpack://@mdn/fred/./components/collection-save-button/element.css","webpack://@mdn/fred/./components/collection-save-button/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_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/bookmark.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"../icon/bookmark-check.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.collection-save-button{align-items:center;background-color:initial;border:none;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.collection-save-button:hover{background-color:var(--color-background-secondary)}.collection-save-button:before{background-color:currentcolor;content:\"\";display:inline-block;height:1.25rem;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.collection-save-button[data-state=save]:before{-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___})}.collection-save-button[data-state=remove]:before{-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___})}@media (width <= 769px){.collection-save-button span{display:none}}label{display:block}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\nimport { globalUser } from \"../user/context.js\";\n\nimport styles from \"./element.css?lit\";\n\nimport \"../modal/element.js\";\nimport \"../button/element.js\";\n\nconst ADD_VALUE = \"add\";\n\nexport class MDNCollectionSaveButton extends L10nMixin(LitElement) {\n  static ssr = false;\n  static styles = styles;\n\n  static properties = {\n    docUrl: { type: String, attribute: \"doc-url\" },\n    docTitle: { type: String, attribute: \"doc-title\" },\n    _item: { state: true },\n    _pending: { state: true },\n    _lastAction: { state: true },\n  };\n\n  constructor() {\n    super();\n    this.docUrl = \"\";\n    this.docTitle = \"\";\n    /** @type {Partial<import(\"./types.js\").NewItem> | undefined} */\n    this._item = undefined;\n    this._pending = false;\n    /** @type {string | undefined} */\n    this._lastAction = undefined;\n  }\n\n  _user = new Task(this, {\n    task: async () => {\n      const user = await globalUser();\n      if (user.isAuthenticated) {\n        this._bookmarks.run();\n      }\n      return user;\n    },\n  });\n\n  _collections = new Task(this, {\n    task: async () => {\n      const res = await fetch(\"/api/v2/collections/\");\n      if (!res.ok) {\n        throw new Error(`${res.status}: ${res.statusText}`);\n      }\n      return /** @type {import(\"./rust-types.js\").MultipleCollectionInfo[]} */ (\n        await res.json()\n      );\n    },\n  });\n\n  _bookmarks = new Task(this, {\n    autoRun: false,\n    args: () => [this.docUrl],\n    task: async ([docUrl]) => {\n      const res = await fetch(\n        `/api/v2/collections/lookup/?url=${encodeURIComponent(docUrl)}`,\n      );\n      if (!res.ok) {\n        throw new Error(`${res.status}: ${res.statusText}`);\n      }\n      const data =\n        /** @type {import(\"./rust-types.js\").MultipleCollectionLookupQueryResponse} */ (\n          await res.json()\n        );\n      const entries = data?.results;\n      const bookmarks =\n        entries &&\n        entries.map((entry) => {\n          return { ...entry.item, collection_id: entry.collection_id };\n        });\n      if (bookmarks[0]) {\n        const { collection_id, title, notes } = bookmarks[0];\n        this._item = {\n          collection_id,\n          title,\n          notes,\n        };\n      }\n      return bookmarks;\n    },\n  });\n\n  _open() {\n    this._bookmarks.run();\n    this._collections.run();\n    this.shadowRoot?.querySelector(\"mdn-modal\")?.showModal();\n  }\n\n  /** @param {Event} event */\n  _selectChange({ target }) {\n    if (target instanceof HTMLSelectElement) {\n      const { value } = target;\n      if (value === ADD_VALUE) {\n        this.shadowRoot?.querySelector(\"mdn-modal\")?.close();\n        open(\"/en-US/plus/collections\");\n      } else {\n        const item = this._bookmarks.value?.find(\n          (item) => item.collection_id === value,\n        );\n        this._item = item || {\n          collection_id: value,\n        };\n      }\n    }\n  }\n\n  _cancel() {\n    this.shadowRoot?.querySelector(\"mdn-modal\")?.close();\n  }\n\n  async _delete() {\n    const collectionId = this.shadowRoot?.querySelector(\"select\")?.value;\n    const item = this._bookmarks.value?.find(\n      (item) => item.collection_id === collectionId,\n    );\n    if (collectionId && item) {\n      this._pending = true;\n      this._lastAction = \"delete\";\n\n      const res = await fetch(\n        `/api/v2/collections/${collectionId}/items/${item.id}/`,\n        { method: \"DELETE\" },\n      );\n      if (!res.ok) {\n        console.error(`${res.status}: ${res.statusText}`);\n      }\n\n      this.shadowRoot?.querySelector(\"mdn-modal\")?.close();\n      this._pending = false;\n      this._bookmarks.run();\n    }\n  }\n\n  async _submit() {\n    const collectionId = this.shadowRoot?.querySelector(\"select\")?.value;\n    const item = this._bookmarks.value?.find(\n      (item) => item.collection_id === collectionId,\n    );\n    if (collectionId) {\n      this._pending = true;\n      this._lastAction = \"save\";\n\n      const url = `/api/v2/collections/${collectionId}/items/${item ? `${item.id}/` : \"\"}`;\n      const res = await fetch(url, {\n        body: JSON.stringify({\n          url: this.docUrl,\n          title: this.shadowRoot?.querySelector(\"input\")?.value,\n          notes: this.shadowRoot?.querySelector(\"textarea\")?.value,\n        }),\n        method: \"POST\",\n        headers: {\n          \"content-type\": \"application/json\",\n        },\n      });\n      if (!res.ok) {\n        console.error(`${res.status}: ${res.statusText}`);\n      }\n\n      this.shadowRoot?.querySelector(\"mdn-modal\")?.close();\n      this._pending = false;\n      this._bookmarks.run();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._user.run();\n  }\n\n  /**\n   * @param {import(\"lit\").PropertyValues<this>} changedProperties\n   */\n  willUpdate(changedProperties) {\n    if (changedProperties.has(\"docUrl\") || changedProperties.has(\"docTitle\")) {\n      this._item = {\n        url: this.docUrl,\n        title: this.docTitle,\n      };\n    }\n  }\n\n  render() {\n    const isCurrentInCollection =\n      this._bookmarks.value?.some(\n        (item) => item.collection_id === this._item?.collection_id,\n      ) || false;\n    return this._user.render({\n      complete: (user) =>\n        user.isAuthenticated\n          ? html`\n              <button\n                class=\"collection-save-button\"\n                data-state=${this._bookmarks.value?.length ? \"remove\" : \"save\"}\n                title=${this.l10n(\n                  \"collection-save-button-save-in-collection\",\n                )`Save in collection`}\n                @click=${this._open}\n              >\n                <span\n                  >${this._bookmarks.value?.length\n                    ? this.l10n(\"collection-save-button-remove\")`Remove`\n                    : this.l10n(\"collection-save-button-save\")`Save`}</span\n                >\n              </button>\n              <mdn-modal\n                modal-title=${this.l10n(\n                  \"collection-save-button-add-to-collection\",\n                )`Add to collection`}\n              >\n                ${this._bookmarks.render({\n                  initial: () => html`<progress></progress>`,\n                  pending: () => html`<progress></progress>`,\n                  complete: (bookmarks) =>\n                    this._collections.render({\n                      initial: () => html`<progress></progress>`,\n                      pending: () => html`<progress></progress>`,\n                      complete: (collections) => html`\n                        <label>\n                          ${this.l10n(\n                            \"collection-save-button-collection\",\n                          )`Collection:`}\n                          <select\n                            .value=${this._item?.collection_id}\n                            @change=${this._selectChange}\n                          >\n                            ${collections.map(\n                              (collection) => html`\n                                <option\n                                  value=${collection.id}\n                                  ?selected=${collection.id ===\n                                  this._item?.collection_id}\n                                >\n                                  ${bookmarks.some(\n                                    (item) =>\n                                      item.collection_id === collection.id,\n                                  )\n                                    ? \"★\"\n                                    : \"☆\"}\n                                  ${collection.name === \"Default\"\n                                    ? this.l10n(\n                                        \"collection-save-button-saved-articles\",\n                                      )`Saved articles`\n                                    : collection.name}\n                                </option>\n                              `,\n                            )}\n                            <option disabled role=\"separator\">\n                              ——————————\n                            </option>\n                            <option value=${ADD_VALUE}>\n                              +\n                              ${this.l10n(\n                                \"collection-save-button-new-collection\",\n                              )`New collection`}\n                            </option>\n                          </select>\n                        </label>\n                        <label>\n                          ${this.l10n(\"collection-save-button-name\")`Name:`}\n                          <input .value=${this._item?.title || this.docTitle} />\n                        </label>\n                        <label>\n                          ${this.l10n(\"collection-save-button-note\")`Note:`}\n                          <textarea\n                            .value=${this._item?.notes || \"\"}\n                          ></textarea>\n                        </label>\n                        <mdn-button @click=${this._submit}>\n                          ${this._pending && this._lastAction === \"save\"\n                            ? this.l10n(\n                                \"collection-save-button-saving\",\n                              )`Saving…`\n                            : this.l10n(\"collection-save-button-save\")`Save`}\n                        </mdn-button>\n                        <mdn-button\n                          @click=${this._cancel}\n                          ?disabled=${this._pending}\n                          variant=\"secondary\"\n                        >\n                          ${this.l10n(\"collection-save-button-cancel\")`Cancel`}\n                        </mdn-button>\n                        ${bookmarks?.length\n                          ? html`<mdn-button\n                              @click=${this._delete}\n                              variant=\"secondary\"\n                              action=\"negative\"\n                              id=\"bookmark-delete\"\n                              ?disabled=${this._pending ||\n                              !isCurrentInCollection}\n                            >\n                              ${this._pending && this._lastAction === \"delete\"\n                                ? this.l10n(\n                                    \"collection-save-button-deleting\",\n                                  )`Deleting…`\n                                : this.l10n(\n                                    \"collection-save-button-delete\",\n                                  )`Delete`}\n                            </mdn-button>`\n                          : nothing}\n                      `,\n                    }),\n                })}\n              </mdn-modal>\n            `\n          : nothing,\n    });\n  }\n}\n\ncustomElements.define(\"mdn-collection-save-button\", MDNCollectionSaveButton);\n"],"names":["_","MDNCollectionSaveButton","String","fetch","Error","encodeURIComponent","t","HTMLSelectElement","open","console","JSON","customElements"],"mappings":"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"}

package/out/static/client/5183.6c532a6e7b0d0bbb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"5183.6c532a6e7b0d0bbb.js","sources":["webpack://@mdn/fred/./components/scrim-inline/element.css","webpack://@mdn/fred/./components/visually-hidden/global.css?228a","webpack://@mdn/fred/./components/scrim-inline/assets/scrim-play.svg","webpack://@mdn/fred/./components/scrim-inline/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]!../visually-hidden/global.css\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/fullscreen-enter.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"../icon/cancel.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_2___ = new URL(\"../icon/external-link.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_3___ = new URL(\"assets/scrimba-logo.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_4___ = new URL(\"assets/scrim-hexagons.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_5___ = new URL(\"assets/scrim-bg.png\", import.meta.url);\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___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);\nvar ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);\nvar ___CSS_LOADER_URL_REPLACEMENT_3___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_3___);\nvar ___CSS_LOADER_URL_REPLACEMENT_4___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_4___);\nvar ___CSS_LOADER_URL_REPLACEMENT_5___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_5___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{display:block;overflow:hidden}*{box-sizing:border-box}button{appearance:none;background:none;border:none;padding:0}dialog{display:contents}dialog[open]{background-color:#0009;height:90vh;width:90vw}.inner{background-color:#000;border:1px solid #000;container-type:size;flex-direction:column;height:100%}.header,.inner{display:flex;width:100%}.header{align-items:center;background:#000;gap:.25rem;margin:0;min-height:1.75rem;padding:0 .5rem}.header span{color:#fff;font-size:var(--font-size-small);margin-right:auto}.scrim-fullscreen,.scrim-link{background-color:#fff;cursor:pointer;height:1rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:1rem}:is(.scrim-fullscreen,.scrim-link):hover{background-color:var(--curriculum-color)}.enter:is(.scrim-fullscreen,.scrim-link){-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___})}.exit:is(.scrim-fullscreen,.scrim-link){-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___})}.scrim-link:is(.scrim-fullscreen,.scrim-link){-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_2___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_2___});-webkit-mask-size:75%;mask-size:75%}.body{flex:1;font-size:4cqmin;position:relative}.background{background-color:#453c78;background-image:url(${___CSS_LOADER_URL_REPLACEMENT_3___}),url(${___CSS_LOADER_URL_REPLACEMENT_4___}),url(${___CSS_LOADER_URL_REPLACEMENT_5___});background-position:1.5em 1.5em,100%,50%;background-repeat:no-repeat;background-size:auto .6em,contain,cover;inset:0;position:absolute}.background h1{bottom:0;color:var(--color-white);font-family:BarlowCondensed-SemiBold,Inter,sans-serif;font-size:3em;font-weight:var(--font-weight-bold);left:0;line-height:var(--font-line-ui);margin:.5em;position:absolute;text-transform:uppercase;text-wrap:balance;width:60%}.background-noise{filter:url(#noise);inset:0;mix-blend-mode:soft-light;position:absolute}.open,iframe{border:none;height:100%;position:absolute;width:100%}.open{--color:#8cb4ffcc;background-image:var(--scrim-img);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;font-size:inherit}.open:hover{--color:#8cb4ffe5}.open svg{height:9em;width:auto;stroke-width:2px}:is(.open svg) circle{fill:var(--color)}:is(.open svg) path{fill:#fff}`, \"\"]);\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 { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#000\" viewBox=\"0 0 112 112\"><circle cx=\"55.764\" cy=\"55.764\" r=\"41.823\"/><path d=\"M69.011 57.428a2 2 0 0 0 0-3.328L50.903 42.027c-1.33-.886-3.11.067-3.11 1.664v24.145c0 1.598 1.78 2.55 3.11 1.664z\"/></svg>`;","import { LitElement, html, nothing } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport playSvg from \"./assets/scrim-play.svg?lit\";\nimport styles from \"./element.css?lit\";\n\nexport class MDNScrimInline extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static ssr = false;\n\n  static properties = {\n    url: { type: String },\n    img: { type: String },\n    scrimTitle: { type: String, attribute: \"scrimtitle\" },\n    _fullscreen: { state: true },\n    _scrimLoaded: { state: true },\n  };\n\n  constructor() {\n    super();\n    /** @type {string | undefined} */\n    this.url = undefined;\n    /** @type {string | undefined} */\n    this._fullUrl = undefined;\n    /** @type {string | undefined} */\n    this._scrimId = undefined;\n\n    /** @type {string | undefined} */\n    this.img = undefined;\n    /** @type {import(\"lit/directives/style-map.js\").StyleInfo} */\n    this._imgStyle = {};\n\n    /** @type {string | undefined} */\n    this.scrimTitle = undefined;\n\n    /** @type {boolean} */\n    this._fullscreen = false;\n    /** @type {boolean} */\n    this._scrimLoaded = false;\n  }\n\n  /**\n   * @param {import(\"lit\").PropertyValues<this>} changedProperties\n   */\n  willUpdate(changedProperties) {\n    if (changedProperties.has(\"url\")) {\n      if (this.url) {\n        const url = new URL(this.url);\n        url.searchParams.set(\"via\", \"mdn\");\n        url.searchParams.set(\"embed\", \"\");\n        this._fullUrl = url.toString();\n\n        this._scrimId = url.pathname.slice(1);\n      } else {\n        this._fullUrl = undefined;\n        this._scrimId = undefined;\n      }\n    }\n\n    if (changedProperties.has(\"img\")) {\n      this._imgStyle = this.img\n        ? {\n            \"--scrim-img\": `url(${this.img})`,\n          }\n        : {};\n    }\n  }\n\n  render() {\n    if (!this.url || !this._fullUrl) {\n      return nothing;\n    }\n\n    return html`\n      <dialog @close=${this.#dialogClosed} style=${styleMap(this._imgStyle)}>\n        <div class=\"inner\">\n          <div class=\"header\">\n            <span\n              >${this.l10n(\n                \"scrim-inline-clicking-will-load-content-from\",\n              )`Clicking will load content from scrimba.com`}</span\n            >\n            <button tabindex=\"0\" @click=${this.#toggle} class=\"toggle\">\n              <div\n                class=\"scrim-fullscreen ${this._fullscreen ? \"exit\" : \"enter\"}\"\n              ></div>\n              <span class=\"visually-hidden\"\n                >${this.l10n(\n                  \"scrim-inline-toggle-fullscreen\",\n                )`Toggle fullscreen`}</span\n              >\n            </button>\n            <a\n              href=${this._fullUrl}\n              target=\"_blank\"\n              rel=\"origin noreferrer\"\n              class=\"external\"\n              data-glean-id=\"curriculum: scrim link id:${this._scrimId}\"\n            >\n              <div class=\"scrim-link\"></div>\n              <span class=\"visually-hidden\"\n                >${this.l10n(\n                  \"scrim-inline-open-on-scrimba\",\n                )`Open on Scrimba`}</span\n              >\n            </a>\n          </div>\n          <div class=\"body\">\n            ${this._scrimLoaded\n              ? html`\n                  <iframe\n                    src=${this._fullUrl}\n                    title=${ifDefined(this.scrimTitle)}\n                  ></iframe>\n                `\n              : html`\n                  ${this.scrimTitle && !this.img\n                    ? html`<div class=\"background\">\n                        <div class=\"background-noise\">\n                          <svg width=\"0\" height=\"0\">\n                            <filter id=\"noise\">\n                              <feTurbulence\n                                type=\"fractalNoise\"\n                                baseFrequency=\"0.7\"\n                                numOctaves=\"4\"\n                              />\n                            </filter>\n                          </svg>\n                        </div>\n                        <h1>${this.scrimTitle}</h1>\n                      </div>`\n                    : null}\n                  <button\n                    @click=${this.#open}\n                    class=\"open\"\n                    data-glean-id=${`curriculum: scrim engage id:${this._scrimId}`}\n                  >\n                    ${playSvg}\n                    <span class=\"visually-hidden\">\n                      ${this.l10n(\n                        \"scrim-inline-load-scrim-and-open-dialog\",\n                      )`Load scrim and open dialog.`}\n                    </span>\n                  </button>\n                `}\n          </div>\n        </div>\n      </dialog>\n    `;\n  }\n\n  /**\n   * @param {MouseEvent} e\n   */\n  #toggle(e) {\n    if (e.target instanceof HTMLElement) {\n      e.target.dataset.gleanId = `curriculum: scrim fullscreen -> ${this._fullscreen ? 0 : 1} id:${this._scrimId}`;\n    }\n    if (this._fullscreen) {\n      this.#close();\n    } else {\n      this.#open();\n    }\n  }\n\n  #open() {\n    const dialog = this.renderRoot.querySelector(\"dialog\");\n    if (dialog) {\n      dialog.showModal();\n      this._scrimLoaded = true;\n      this._fullscreen = true;\n    }\n  }\n\n  #close() {\n    const dialog = this.renderRoot.querySelector(\"dialog\");\n    dialog?.close();\n  }\n\n  #dialogClosed() {\n    this._fullscreen = false;\n  }\n}\n\ncustomElements.define(\"mdn-scrim-inline\", MDNScrimInline);\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":["_","MDNScrimInline","String","URL","HTMLElement","customElements"],"mappings":"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"}

package/out/static/client/544.1ed814181b24bcc8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"544.1ed814181b24bcc8.js","sources":["webpack://@mdn/fred/./components/color-theme/element.css","webpack://@mdn/fred/./components/color-theme/element.js","webpack://@mdn/fred/./components/utils/index.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_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/contrast.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"../icon/sun.svg\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_2___ = new URL(\"../icon/moon.svg\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);\nvar ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.color-theme{--color-theme-light-dark:url(${___CSS_LOADER_URL_REPLACEMENT_0___});--color-theme-light:url(${___CSS_LOADER_URL_REPLACEMENT_1___});--color-theme-dark:url(${___CSS_LOADER_URL_REPLACEMENT_2___});position:relative}.color-theme__button{align-items:center;background-color:initial;border:none;color:inherit;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.color-theme__button:is(:hover,:focus,[aria-expanded=true]){background-color:var(--color-background-secondary)}@media (width <= 769px){.color-theme__button>span{display:none}}.color-theme__button:before{background-color:currentcolor;content:\"\";height:1.25rem;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.color-theme__button[data-mode=\"light dark\"]:before{-webkit-mask-image:var(--color-theme-light-dark);mask-image:var(--color-theme-light-dark)}.color-theme__button[data-mode=light]:before{-webkit-mask-image:var(--color-theme-light);mask-image:var(--color-theme-light)}.color-theme__button[data-mode=dark]:before{-webkit-mask-image:var(--color-theme-dark);mask-image:var(--color-theme-dark)}.color-theme__dropdown{border:1px solid var(--color-border-primary);padding:.75rem;position:absolute;right:0;z-index:1}.color-theme__dropdown,.color-theme__list{background-color:var(--color-background-primary);margin:0;width:max-content}.color-theme__list{list-style:none;padding:0}.color-theme__option{align-items:center;background-color:initial;border:none;color:var(--color-text-primary);column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:.25rem;width:100%}.color-theme__option:hover{background-color:var(--color-background-secondary)}.color-theme__option:before{background-color:currentcolor;content:\"\";height:1.25rem;-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.color-theme__option[data-mode=\"light dark\"]:before{-webkit-mask-image:var(--color-theme-light-dark);mask-image:var(--color-theme-light-dark)}.color-theme__option[data-mode=light]:before{-webkit-mask-image:var(--color-theme-light);mask-image:var(--color-theme-light)}.color-theme__option[data-mode=dark]:before{-webkit-mask-image:var(--color-theme-dark);mask-image:var(--color-theme-dark)}.color-theme__option[data-current]{background:var(--color-background-secondary)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { LitElement, html } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport styles from \"./element.css?lit\";\n\nimport \"../dropdown/element.js\";\n\nexport class MDNColorTheme extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    _mode: { state: true },\n  };\n\n  constructor() {\n    super();\n    /** @type {import(\"./types.js\").ColorScheme} */\n    this._mode = \"light dark\";\n    this._options = Object.entries({\n      \"light dark\": this.l10n(\"theme-default\")`OS default`,\n      light: this.l10n(\"color-theme-light\")`Light`,\n      dark: this.l10n(\"color-theme-dark\")`Dark`,\n    });\n  }\n\n  /** @param {MouseEvent} event */\n  _setMode({ target }) {\n    if (target instanceof HTMLElement) {\n      const mode = target.dataset.mode;\n      if (mode === \"light dark\" || mode === \"light\" || mode === \"dark\") {\n        this._mode = mode;\n        try {\n          localStorage.setItem(\"theme\", mode);\n        } catch (error) {\n          console.warn(\"Unable to write theme to localStorage\", error);\n        }\n        const dropdown = this.shadowRoot?.querySelector(\"mdn-dropdown\");\n        if (dropdown) {\n          dropdown.open = false;\n        }\n      }\n    }\n  }\n\n  /**\n   * @param {import(\"lit\").PropertyValues<this>} changedProperties\n   */\n  willUpdate(changedProperties) {\n    if (changedProperties.has(\"_mode\") && globalThis.document) {\n      document.documentElement.dataset.theme = this._mode;\n      this.dispatchEvent(\n        new CustomEvent(\"mdn-color-theme-update\", {\n          bubbles: true,\n          composed: true,\n          detail: this._mode,\n        }),\n      );\n    }\n  }\n\n  render() {\n    return html`<div class=\"color-theme\">\n      <mdn-dropdown>\n        <button\n          part=\"button\"\n          slot=\"button\"\n          class=\"color-theme__button\"\n          data-mode=${this._mode}\n          type=\"button\"\n          aria-label=${this.l10n(\n            \"color-theme-switch-color-theme\",\n          )`Switch color theme`}\n        >\n          <span>${this.l10n(\"color-theme-theme\")`Theme`}</span>\n        </button>\n        <div\n          slot=\"dropdown\"\n          class=\"color-theme__dropdown\"\n          id=\"color-theme__dropdown\"\n        >\n          <ul class=\"color-theme__list\">\n            ${this._options.map(\n              ([mode, option]) =>\n                html`<li>\n                  <button\n                    class=\"color-theme__option\"\n                    data-mode=${mode}\n                    ?data-current=${mode === this._mode}\n                    type=\"button\"\n                    @click=${this._setMode}\n                  >\n                    ${option}\n                  </button>\n                </li>`,\n            )}\n          </ul>\n        </div>\n      </mdn-dropdown>\n    </div>`;\n  }\n\n  firstUpdated() {\n    // we have to do this here and immediately cause a re-render\n    // as doing so in connectedCallback causes a hydration error:\n    // https://github.com/lit/lit/issues/1434\n\n    // this logic is also reflected in \"/entry.inline.js\"\n\n    let mode;\n    try {\n      mode = localStorage.getItem(\"theme\");\n    } catch (error) {\n      console.warn(\"Unable to read theme from localStorage\", error);\n    }\n    if (mode === \"light dark\" || mode === \"light\" || mode === \"dark\") {\n      this._mode = mode;\n    }\n  }\n}\n\ncustomElements.define(\"mdn-color-theme\", MDNColorTheme);\n","/**\n * Used to generate a random element id by combining a prefix with a random string.\n *\n * @param {string} prefix\n * @returns {string}\n */\nexport function randomIdString(prefix = \"id-\") {\n  return Math.random().toString(36).replace(\"0.\", prefix);\n}\n"],"names":["_","MDNColorTheme","Object","HTMLElement","localStorage","e","console","globalThis","document","CustomEvent","o","customElements","r","Math"],"mappings":"mNAKI,EAAgC,iBAChC,EAAgC,kBAChC,EAAgC,kBAChC,EAA0B,IAA4B,KACtDA,EAAqC,IAAgC,GACrE,EAAqC,IAAgC,GACrE,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,0CAA0C,EAAEA,EAAmC,0BAA0B,EAAE,EAAmC,yBAAyB,EAAE,EAAmC,mhEAAmhE,CAAC,CAAE,GAAG,EAE/wE,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,uRCPhD,IAAMC,cAAN,MAAMA,qBAAsB,QAAU,IAAU,EACrD,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,MAAO,CAAE,MAAO,EAAK,CACvB,CAAE,AAEF,cAAc,CACZ,KAAK,GAEL,IAAI,CAAC,KAAK,CAAG,aACb,IAAI,CAAC,QAAQ,CAAGC,OAAO,OAAO,CAAC,CAC7B,aAAc,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CACpD,MAAO,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAC5C,KAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,AAC3C,EACF,CAGA,SAAS,CAAE,QAAM,CAAE,CAAE,CACnB,GAAI,aAAkBC,YAAa,CACjC,IAAM,EAAO,EAAO,OAAO,CAAC,IAAI,CAChC,GAAI,AAAS,eAAT,GAAyB,AAAS,UAAT,GAAoB,AAAS,SAAT,EAAiB,CAChE,IAAI,CAAC,KAAK,CAAG,EACb,GAAI,CACFC,aAAa,OAAO,CAAC,QAAS,EAChC,CAAE,MAAOC,EAAO,CACdC,QAAQ,IAAI,CAAC,wCAAyCD,EACxD,CACA,IAAM,EAAW,IAAI,CAAC,UAAU,EAAE,cAAc,eAC5C,IACF,GAAS,IAAI,CAAG,EAAI,CAExB,CACF,CACF,CAKA,WAAW,CAAiB,CAAE,CACxB,EAAkB,GAAG,CAAC,UAAYE,WAAW,QAAQ,GACvDC,SAAS,eAAe,CAAC,OAAO,CAAC,KAAK,CAAG,IAAI,CAAC,KAAK,CACnD,IAAI,CAAC,aAAa,CAChB,IAAIC,YAAY,yBAA0B,CACxC,QAAS,GACT,SAAU,GACV,OAAQ,IAAI,CAAC,KAAK,AACpB,IAGN,CAEA,QAAS,CACP,MAAO,QAAI,CAAC;;;;;;oBAMI,EAAE,IAAI,CAAC,KAAK,CAAC;;qBAEZ,EAAE,IAAI,CAAC,IAAI,CACpB,iCACD,CAAC,kBAAkB,CAAC,CAAC;;gBAEhB,EAAE,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;;;;;;;;YAQ5C,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CACjB,CAAC,CAAC,EAAMC,EAAO,GACb,QAAI,CAAC;;;8BAGS,EAAE,EAAK;kCACH,EAAE,IAAS,IAAI,CAAC,KAAK,CAAC;;2BAE7B,EAAE,IAAI,CAAC,QAAQ,CAAC;;oBAEvB,EAAEA,EAAO;;qBAER,CAAC,EACR;;;;UAIJ,CAAC,AACT,CAEA,cAAe,CAOb,IAAI,EACJ,GAAI,CACF,EAAON,aAAa,OAAO,CAAC,QAC9B,CAAE,MAAOC,EAAO,CACdC,QAAQ,IAAI,CAAC,yCAA0CD,EACzD,CACI,CAAS,eAAT,GAAyB,AAAS,UAAT,GAAoB,AAAS,SAAT,CAAc,GAC7D,KAAI,CAAC,KAAK,CAAG,CAAG,CAEpB,CACF,EAEAM,eAAe,MAAM,CAAC,kBAAmBV,c,gCCnHlC,SAASW,EAAe,EAAS,KAAK,EAC3C,OAAOC,KAAK,MAAM,GAAG,QAAQ,CAAC,IAAI,OAAO,CAAC,KAAM,EAClD,C"}

package/out/static/client/5649.00f25ce181894101.js

@@ -1,2 +0,0 @@
-export const __rspack_esm_id="5649";export const __rspack_esm_ids=["5649"];export const __webpack_modules__={30776(e,i,t){t.d(i,{N:()=>c});var s=t(31011),n=t(97825),r=t(52258),o=t(23727);let h={threshold:.5};let ViewedController=class ViewedController{#e;constructor(e,i,t,s=h){this.#e=e,this.#e.addController(this),this.target=i,this.callback=t,this.intersectionObserverOptions=s,this._visible=!globalThis.document?.hidden,this._timer=null,this._hasViewed=!1,this._onVisibilityChange=this.onVisibilityChange.bind(this)}hostConnected(){document.addEventListener("visibilitychange",this._onVisibilityChange)}hostDisconnected(){this.disconnectObserver(),document.removeEventListener("visibilitychange",this._onVisibilityChange)}hostUpdated(){let e=this.target.value;e&&(this._observer=new IntersectionObserver(e=>{for(let i of e)this._checkAndSetTimer(i.isIntersecting)},this.intersectionObserverOptions),this._observer.observe(e))}disconnectObserver(){this._observer&&this._observer.disconnect()}onVisibilityChange(){this._visible=!document.hidden,this._checkAndSetTimer()}_checkAndSetTimer(e=!1){!this._hasViewed&&this._visible&&e?null===this._timer&&(this._timer=globalThis.setTimeout(()=>{this._hasViewed=!0,this.callback()},1e3)):null!==this._timer&&(clearTimeout(this._timer),this._timer=null)}};var l=t(20126);t(13755);let c=e=>class extends e{static ssr=!1;_placementRef=(0,r._)();_dataTask=new s.YZ(this,{task:async()=>await (0,l.M)()});constructor(...e){super(...e),this._viewedUrl=void 0,this._version=void 0,this.viewed=new ViewedController(this,this._placementRef,()=>{if(this._viewedUrl){navigator.sendBeacon?.(this.viewedLink(this._viewedUrl,this._version));let e=this._placementRef.value?.dataset.type??"unknown";(0,o.w)(`pong: pong->viewed ${e}`)}})}connectedCallback(){super.connectedCallback(),this._dataTask.run()}renderComplete(e){throw Error("Must be implemented by subclass")}renderFallback(){return n.s6}renderInitial(){return n.s6}render(){return this._dataTask.render({initial:()=>this.renderInitial(),pending:()=>this.renderInitial(),error:()=>this.renderFallback(),complete:e=>this.renderComplete(e)})}clickLink(e,i){return`/pong/click?code=${encodeURIComponent(e)}&version=${i}`}imgLink(e){return`/pimg/${encodeURIComponent(e||"")}`}viewedLink(e,i){return`/pong/viewed?code=${encodeURIComponent(e)}${i?`&version=${i}`:""}`}}}};
-//# sourceMappingURL=5649.00f25ce181894101.js.map

package/out/static/client/5649.00f25ce181894101.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"5649.00f25ce181894101.js","sources":["webpack://@mdn/fred/./components/viewed-controller/viewed-controller.js","webpack://@mdn/fred/./components/placement/mixin.js"],"sourcesContent":["/**\n * @import { LitElement } from \"lit\";\n * @import { Ref } from \"lit/directives/ref.js\";\n */\n\nconst OPTIONS = {\n  threshold: 0.5,\n};\n\nexport class ViewedController {\n  #host;\n\n  /**\n   * @param {LitElement} host\n   * @param {Ref<Element>} target\n   * @param {Function} callback\n   * @param {IntersectionObserverInit} [intersectionObserverOptions]\n   */\n  constructor(host, target, callback, intersectionObserverOptions = OPTIONS) {\n    this.#host = host;\n    this.#host.addController(this);\n\n    this.target = target;\n    this.callback = callback;\n    this.intersectionObserverOptions = intersectionObserverOptions;\n\n    this._visible = !globalThis.document?.hidden;\n    this._timer = null;\n    this._hasViewed = false;\n    this._onVisibilityChange = this.onVisibilityChange.bind(this);\n  }\n\n  hostConnected() {\n    document.addEventListener(\"visibilitychange\", this._onVisibilityChange);\n  }\n\n  hostDisconnected() {\n    this.disconnectObserver();\n    document.removeEventListener(\"visibilitychange\", this._onVisibilityChange);\n  }\n\n  hostUpdated() {\n    const target = this.target.value;\n    if (target) {\n      this._observer = new IntersectionObserver((entries) => {\n        for (const entry of entries) {\n          this._checkAndSetTimer(entry.isIntersecting);\n        }\n      }, this.intersectionObserverOptions);\n      this._observer.observe(target);\n    }\n  }\n\n  disconnectObserver() {\n    if (this._observer) {\n      this._observer.disconnect();\n    }\n  }\n\n  onVisibilityChange() {\n    this._visible = !document.hidden;\n    this._checkAndSetTimer();\n  }\n\n  /**\n   * If the page is visible and the element is intersecting, start a 1-second timer\n   * to dispatch the \"view\" event.\n   *\n   * If conditions are not met before the timer fires, clear the timer.\n   *\n   * @param {boolean} isIntersecting\n   */\n  _checkAndSetTimer(isIntersecting = false) {\n    if (!this._hasViewed && this._visible && isIntersecting) {\n      if (this._timer === null) {\n        this._timer = globalThis.setTimeout(() => {\n          this._hasViewed = true;\n          this.callback();\n        }, 1000);\n      }\n    } else {\n      if (this._timer !== null) {\n        clearTimeout(this._timer);\n        this._timer = null;\n      }\n    }\n  }\n}\n","import { Task } from \"@lit/task\";\nimport { nothing } from \"lit\";\nimport { createRef } from \"lit/directives/ref.js\";\n\nimport { gleanClick } from \"../../utils/glean.js\";\nimport { ViewedController } from \"../viewed-controller/viewed-controller.js\";\n\nimport { globalPlacementContext } from \"./context.js\";\n\nimport \"../placement-no/element.js\";\n\n/**\n * @import { LitElement, TemplateResult } from \"lit\";\n * @import * as Placements from \"./types.js\";\n */\n\n/**\n * @template {new (...args: any[]) => LitElement} TBase\n * @param {TBase} Base\n */\nexport const PlacementMixin = (Base) =>\n  class PlacementElement extends Base {\n    static ssr = false;\n    /** @type {import('lit/directives/ref.js').Ref<HTMLElement>} */\n    _placementRef = createRef();\n\n    _dataTask = new Task(this, {\n      task: async () => {\n        return await globalPlacementContext();\n      },\n    });\n\n    /**\n     *\n     * @param  {...any} args\n     */\n    constructor(...args) {\n      super(...args);\n      /**\n       * @type {string | undefined}\n       */\n      this._viewedUrl = undefined;\n      /**\n       * @type {number | undefined}\n       */\n      this._version = undefined;\n      /** @type {ViewedController} */\n      this.viewed = new ViewedController(this, this._placementRef, () => {\n        if (this._viewedUrl) {\n          navigator.sendBeacon?.(\n            this.viewedLink(this._viewedUrl, this._version),\n          );\n          const type = this._placementRef.value?.dataset.type ?? \"unknown\";\n          gleanClick(`pong: pong->viewed ${type}`);\n        }\n      });\n    }\n\n    connectedCallback() {\n      super.connectedCallback();\n      this._dataTask.run();\n    }\n\n    /**\n     *\n     * @abstract\n     * @param {Placements.PlacementContextData} _placementContext\n     */\n    renderComplete(_placementContext) {\n      throw new Error(\"Must be implemented by subclass\");\n    }\n\n    /**\n     *\n     * @abstract\n     * @returns {TemplateResult | nothing}\n     */\n    renderFallback() {\n      // default: nothing, subclasses can override a default\n      return nothing;\n    }\n\n    /**\n     *\n     * @returns {TemplateResult | symbol}\n     */\n    renderInitial() {\n      return nothing;\n    }\n\n    render() {\n      return this._dataTask.render({\n        initial: () => this.renderInitial(),\n        pending: () => this.renderInitial(),\n        error: () => this.renderFallback(),\n        complete: (placementContext) => {\n          return this.renderComplete(placementContext);\n        },\n      });\n    }\n\n    /**\n     *\n     * @param {string} click\n     * @param {number |undefined } version\n     * @returns\n     */\n    clickLink(click, version) {\n      return `/pong/click?code=${encodeURIComponent(click)}&version=${version}`;\n    }\n\n    /**\n     *\n     * @param {string | undefined} image\n     * @returns\n     */\n    imgLink(image) {\n      return `/pimg/${encodeURIComponent(image || \"\")}`;\n    }\n\n    /**\n     *\n     * @param {string} viewed\n     * @param {number | undefined} version\n     * @returns\n     */\n    viewedLink(viewed, version) {\n      return `/pong/viewed?code=${encodeURIComponent(viewed)}${\n        version ? `&version=${version}` : \"\"\n      }`;\n    }\n  };\n"],"names":["ViewedController","globalThis","document","IntersectionObserver","e","clearTimeout","navigator","Error","n","encodeURIComponent"],"mappings":"2LAKA,IAAM,EAAU,CACd,UAAW,EACb,EAEO,IAAMA,iBAAN,MAAMA,iBACX,EAAK,AAAC,AAQN,aAAY,CAAI,CAAE,CAAM,CAAE,CAAQ,CAAE,EAA8B,CAAO,CAAE,CACzE,IAAI,CAAC,EAAK,CAAG,EACb,IAAI,CAAC,EAAK,CAAC,aAAa,CAAC,IAAI,EAE7B,IAAI,CAAC,MAAM,CAAG,EACd,IAAI,CAAC,QAAQ,CAAG,EAChB,IAAI,CAAC,2BAA2B,CAAG,EAEnC,IAAI,CAAC,QAAQ,CAAG,CAACC,WAAW,QAAQ,EAAE,OACtC,IAAI,CAAC,MAAM,CAAG,KACd,IAAI,CAAC,UAAU,CAAG,GAClB,IAAI,CAAC,mBAAmB,CAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAC9D,CAEA,eAAgB,CACdC,SAAS,gBAAgB,CAAC,mBAAoB,IAAI,CAAC,mBAAmB,CACxE,CAEA,kBAAmB,CACjB,IAAI,CAAC,kBAAkB,GACvBA,SAAS,mBAAmB,CAAC,mBAAoB,IAAI,CAAC,mBAAmB,CAC3E,CAEA,aAAc,CACZ,IAAM,EAAS,IAAI,CAAC,MAAM,CAAC,KAAK,CAC5B,IACF,IAAI,CAAC,SAAS,CAAG,IAAIC,qBAAqB,AAACC,IACzC,IAAK,IAAM,KAASA,EAClB,IAAI,CAAC,iBAAiB,CAAC,EAAM,cAAc,CAE/C,EAAG,IAAI,CAAC,2BAA2B,EACnC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,GAE3B,CAEA,oBAAqB,CACf,IAAI,CAAC,SAAS,EAChB,IAAI,CAAC,SAAS,CAAC,UAAU,EAE7B,CAEA,oBAAqB,CACnB,IAAI,CAAC,QAAQ,CAAG,CAACF,SAAS,MAAM,CAChC,IAAI,CAAC,iBAAiB,EACxB,CAUA,kBAAkB,EAAiB,EAAK,CAAE,CACpC,CAAC,IAAI,CAAC,UAAU,EAAI,IAAI,CAAC,QAAQ,EAAI,EACnC,AAAgB,OAAhB,IAAI,CAAC,MAAM,EACb,KAAI,CAAC,MAAM,CAAGD,WAAW,UAAU,CAAC,KAClC,IAAI,CAAC,UAAU,CAAG,GAClB,IAAI,CAAC,QAAQ,EACf,EAAG,IAAI,EAGW,OAAhB,IAAI,CAAC,MAAM,GACbI,aAAa,IAAI,CAAC,MAAM,EACxB,IAAI,CAAC,MAAM,CAAG,KAGpB,CACF,E,wBCnEO,IAAM,EAAiB,AAAC,GAC7B,cAA+B,EAC7B,OAAO,IAAM,EAAM,AAEnB,eAAgB,SAAY,AAE5B,WAAY,IAAI,IAAI,CAAC,IAAI,CAAE,CACzB,KAAM,SACG,MAAM,SAEjB,EAAG,AAMH,aAAY,GAAG,CAAI,CAAE,CACnB,KAAK,IAAI,GAIT,IAAI,CAAC,UAAU,CAAG,OAIlB,IAAI,CAAC,QAAQ,CAAG,OAEhB,IAAI,CAAC,MAAM,CAAG,IAAIL,iBAAiB,IAAI,CAAE,IAAI,CAAC,aAAa,CAAE,KAC3D,GAAI,IAAI,CAAC,UAAU,CAAE,CACnBM,UAAU,UAAU,GAClB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAE,IAAI,CAAC,QAAQ,GAEhD,IAAM,EAAO,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,QAAQ,MAAQ,UACvD,QAAW,CAAC,mBAAmB,EAAE,EAAK,CAAC,CACzC,CACF,EACF,CAEA,mBAAoB,CAClB,KAAK,CAAC,oBACN,IAAI,CAAC,SAAS,CAAC,GAAG,EACpB,CAOA,eAAe,CAAiB,CAAE,CAChC,MAAM,AAAIC,MAAM,kCAClB,CAOA,gBAAiB,CAEf,OAAOC,EAAA,EAAO,AAChB,CAMA,eAAgB,CACd,OAAOA,EAAA,EAAO,AAChB,CAEA,QAAS,CACP,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAC3B,QAAS,IAAM,IAAI,CAAC,aAAa,GACjC,QAAS,IAAM,IAAI,CAAC,aAAa,GACjC,MAAO,IAAM,IAAI,CAAC,cAAc,GAChC,SAAU,AAAC,GACF,IAAI,CAAC,cAAc,CAAC,EAE/B,EACF,CAQA,UAAU,CAAK,CAAE,CAAO,CAAE,CACxB,MAAO,CAAC,iBAAiB,EAAEC,mBAAmB,GAAO,SAAS,EAAE,EAAQ,CAAC,AAC3E,CAOA,QAAQ,CAAK,CAAE,CACb,MAAO,CAAC,MAAM,EAAEA,mBAAmB,GAAS,IAAI,CAAC,AACnD,CAQA,WAAW,CAAM,CAAE,CAAO,CAAE,CAC1B,MAAO,CAAC,kBAAkB,EAAEA,mBAAmB,GAAQ,EACrD,EAAU,CAAC,SAAS,EAAE,EAAQ,CAAC,CAAG,GACnC,CAAC,AACJ,CACF,C"}

package/out/static/client/5667.332b2c6c10792ad6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"5667.332b2c6c10792ad6.js","sources":["webpack://@mdn/fred/./components/language-switcher/element.css","webpack://@mdn/fred/./components/icon/info.svg","webpack://@mdn/fred/./components/language-switcher/element.js","webpack://@mdn/fred/./components/utils/index.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_GET_URL_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"../icon/languages.svg\", import.meta.url);\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___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.language-switcher{position:relative}.language-switcher__button{align-items:center;background-color:initial;border:none;color:inherit;column-gap:.25rem;cursor:pointer;display:flex;font:inherit;margin:0;padding:0 .5rem}.language-switcher__button:is(:hover,:focus,[aria-expanded=true]){background-color:var(--color-background-secondary)}@media screen and (width <= 480px){.language-switcher__button>span{display:none}}.language-switcher__button:before{background-color:currentcolor;content:\"\";height:1.25rem;-webkit-mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});mask-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___});-webkit-mask-size:cover;mask-size:cover;width:1.25rem}.language-switcher__dropdown{background-color:var(--color-background-primary);border:1px solid var(--color-border-primary);margin:0;padding:.75rem;position:absolute;right:0;width:max-content;z-index:1}.language_switcher__remember{border-bottom:1px solid var(--color-border-primary);display:flex;font-size:var(--font-size-small);place-items:center;width:100%}.language_switcher__remember mdn-switch{padding:.25rem}:is(.language_switcher__remember mdn-switch):hover{background-color:var(--color-background-secondary)}.language-switcher__list{background-color:var(--color-background-primary);list-style:none;margin:0;padding:0;width:100%}.language-switcher__option{align-items:center;background-color:initial;border:none;color:var(--color-text-primary);column-gap:.25rem;display:flex;font:inherit;margin:0;padding:.25rem;-webkit-text-decoration:none;text-decoration:none;width:100%}.language-switcher__option:hover,.language-switcher__option[data-current]{background-color:var(--color-background-secondary)}`, \"\"]);\n// Exports\nexport default css([___CSS_LOADER_EXPORT___.toString()]);\n","import { svg } from \"lit\"; export default svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4m0-4h.01\"/></svg>`;","import { Task } from \"@lit/task\";\nimport { LitElement, html, nothing } from \"lit\";\n\nimport { L10nMixin } from \"../../l10n/mixin.js\";\n\nimport infoIcon from \"../icon/info.svg?lit\";\nimport { getEnglishDoc } from \"../not-found/utils.js\";\nimport {\n  getPreferredLocale,\n  resetPreferredLocale,\n  setPreferredLocale,\n} from \"../preferred-locale/utils.js\";\n\nimport styles from \"./element.css?lit\";\n\nimport \"../dropdown/element.js\";\nimport \"../switch/element.js\";\n\nexport class MDNLanguageSwitcher extends L10nMixin(LitElement) {\n  static styles = styles;\n\n  static properties = {\n    locale: { type: String },\n    native: { type: String },\n    translations: { type: Array },\n    url: { type: String },\n    notFound: { type: Boolean, attribute: \"not-found\" },\n    _preferredLocale: { state: true },\n  };\n\n  constructor() {\n    super();\n    /** @type {import(\"@rari\").Translation[]} */\n    this.translations = [];\n    this.native = \"\";\n    this.locale = \"en-US\";\n    this.url = \"/\";\n    this.notFound = false;\n    /** @type {string|undefined} */\n    this._preferredLocale = undefined;\n  }\n\n  _notFoundFallback = new Task(this, {\n    args: () => [this.notFound],\n    task: async ([notFound]) => {\n      if (notFound) {\n        return await getEnglishDoc(location.pathname);\n      }\n      return;\n    },\n  });\n\n  firstUpdated() {\n    this._preferredLocale = getPreferredLocale();\n    if (location.search) {\n      this.url += location.search;\n    }\n  }\n\n  get _isLocalePreferred() {\n    return this._preferredLocale == this.locale;\n  }\n\n  _togglePreferredLocale() {\n    if (this.notFound) return;\n    if (this._isLocalePreferred) {\n      resetPreferredLocale();\n      this._preferredLocale = undefined;\n    } else {\n      setPreferredLocale(this.locale);\n      this._preferredLocale = this.locale;\n    }\n  }\n\n  render() {\n    const { translations, native, locale, url, notFound } = this;\n\n    if (translations.length === 0) {\n      return nothing;\n    }\n\n    return html`<div class=\"language-switcher\">\n      <mdn-dropdown>\n        <button\n          part=\"button\"\n          slot=\"button\"\n          class=\"language-switcher__button\"\n          type=\"button\"\n          aria-labelledby=\"current-locale\"\n        >\n          <span id=\"current-locale\">${native ?? locale}</span>\n        </button>\n        <div\n          slot=\"dropdown\"\n          class=\"language-switcher__dropdown\"\n          id=\"language-switcher__dropdown\"\n        >\n          <div class=\"language_switcher__remember\">\n            <mdn-switch\n              @toggle=${this._togglePreferredLocale}\n              ?checked=${this._isLocalePreferred}\n              >${this.l10n(\n                \"language-switcher-remember-language\",\n              )`Remember language`}</mdn-switch\n            >\n            <mdn-button\n              variant=\"plain\"\n              .icon=${infoIcon}\n              icon-only\n              href=\"https://github.com/orgs/mdn/discussions/739\"\n              target=\"_blank\"\n              title=${this.l10n(\n                \"language-switcher-enable-this-setting-to-always-sw\",\n              )`Enable this setting to always switch to the current language when available. (Click to learn more.)`}\n              >${this.l10n(\n                \"language-switcher-learn-more\",\n              )`Learn more`}</mdn-button\n            >\n          </div>\n          <ul class=\"language-switcher__list\">\n            ${notFound\n              ? this._notFoundFallback.render({\n                  initial: () => this._renderCurrentLocale(),\n                  pending: () => this._renderCurrentLocale(),\n                  error: () => this._renderCurrentLocale(),\n                  complete: (doc) =>\n                    doc?.other_translations\n                      ? this._renderDropdownItems(\n                          doc.other_translations,\n                          locale,\n                          doc.mdn_url,\n                          notFound,\n                        )\n                      : this._renderCurrentLocale(),\n                })\n              : this._renderDropdownItems(translations, locale, url)}\n          </ul>\n        </div>\n      </mdn-dropdown>\n    </div>`;\n  }\n\n  /**\n   * @param {import(\"@rari\").Translation[]} translations\n   * @param {string} locale\n   * @param {string} url\n   * @param {boolean} notFound\n   */\n  _renderDropdownItems(translations, locale, url, notFound = false) {\n    return translations\n      .sort((a, b) => a.locale.localeCompare(b.locale))\n      .map(\n        (translation) => html`\n          <li>\n            <a\n              class=\"language-switcher__option\"\n              ?data-current=${locale === translation.locale}\n              @click=${resetPreferredLocale}\n              href=${url.replace(\n                `/${notFound ? \"en-US\" : locale}/`,\n                `/${translation.locale}/`,\n              )}\n              >${translation.native}</a\n            >\n          </li>\n        `,\n      );\n  }\n\n  _renderCurrentLocale() {\n    return html`\n      <li>\n        <a\n          class=\"language-switcher__option\"\n          ?data-current=${true}\n          href=${this.url}\n          >${this.native}</a\n        >\n      </li>\n    `;\n  }\n}\n\ncustomElements.define(\"mdn-language-switcher\", MDNLanguageSwitcher);\n","/**\n * Used to generate a random element id by combining a prefix with a random string.\n *\n * @param {string} prefix\n * @returns {string}\n */\nexport function randomIdString(prefix = \"id-\") {\n  return Math.random().toString(36).replace(\"0.\", prefix);\n}\n"],"names":["MDNLanguageSwitcher","String","Array","Boolean","location","s","n","i","customElements","Math"],"mappings":"gOAMI,EAAgC,kBAChC,EAA0B,IAA4B,KAC1D,EAAwB,CAAC,CAAC,GAAiC,EAC3D,IAAI,EAAqC,IAAgC,GAEzE,EAAwB,IAAI,CAAC,CAAC,EAAO,EAAE,CAAE,CAAC,ihBAAihB,EAAE,EAAmC,iBAAiB,EAAE,EAAmC,oiCAAoiC,CAAC,CAAE,GAAG,EAEhsD,MAAe,SAAI,CAAC,EAAwB,QAAQ,GAAG,C,6KCb5B,MAAe,QAAG,CAAC,wPAAwP,CAAC,C,uDCkBhS,IAAMA,oBAAN,MAAMA,2BAA4B,QAAU,IAAU,EAC3D,OAAO,OAAS,GAAM,AAAC,AAEvB,QAAO,WAAa,CAClB,OAAQ,CAAE,KAAMC,MAAO,EACvB,OAAQ,CAAE,KAAMA,MAAO,EACvB,aAAc,CAAE,KAAMC,KAAM,EAC5B,IAAK,CAAE,KAAMD,MAAO,EACpB,SAAU,CAAE,KAAME,QAAS,UAAW,WAAY,EAClD,iBAAkB,CAAE,MAAO,EAAK,CAClC,CAAE,AAEF,cAAc,CACZ,KAAK,GAEL,IAAI,CAAC,YAAY,CAAG,EAAE,CACtB,IAAI,CAAC,MAAM,CAAG,GACd,IAAI,CAAC,MAAM,CAAG,QACd,IAAI,CAAC,GAAG,CAAG,IACX,IAAI,CAAC,QAAQ,CAAG,GAEhB,IAAI,CAAC,gBAAgB,CAAG,MAC1B,CAEA,kBAAoB,IAAI,IAAI,CAAC,IAAI,CAAE,CACjC,KAAM,IAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAC3B,KAAM,MAAO,CAAC,EAAS,IACrB,GAAI,EACF,OAAO,MAAM,QAAcC,SAAS,QAAQ,CAGhD,CACF,EAAG,AAEH,eAAe,CACb,IAAI,CAAC,gBAAgB,CAAG,WACpBA,SAAS,MAAM,EACjB,KAAI,CAAC,GAAG,EAAIA,SAAS,MAAM,AAAD,CAE9B,CAEA,IAAI,oBAAqB,CACvB,OAAO,IAAI,CAAC,gBAAgB,EAAI,IAAI,CAAC,MAAM,AAC7C,CAEA,wBAAyB,CACnB,IAAI,CAAC,QAAQ,GACb,IAAI,CAAC,kBAAkB,EACzB,WACA,IAAI,CAAC,gBAAgB,CAAG,SAExB,GAAAC,EAAA,IAAmB,IAAI,CAAC,MAAM,EAC9B,IAAI,CAAC,gBAAgB,CAAG,IAAI,CAAC,MAAM,EAEvC,CAEA,QAAS,CACP,GAAM,CAAE,cAAY,CAAE,QAAM,CAAE,QAAM,CAAE,KAAG,CAAE,UAAQ,CAAE,CAAG,IAAI,QAE5D,AAAI,AAAwB,IAAxB,EAAa,MAAM,CACdC,EAAA,EAAO,CAGT,QAAI,CAAC;;;;;;;;;oCASoB,EAAE,GAAU,EAAO;;;;;;;;;sBASjC,EAAE,IAAI,CAAC,sBAAsB,CAAC;uBAC7B,EAAE,IAAI,CAAC,kBAAkB,CAAC;eAClC,EAAE,IAAI,CAAC,IAAI,CACV,sCACD,CAAC,iBAAiB,CAAC,CAAC;;;;oBAIf,EAAEC,EAAS;;;;oBAIX,EAAE,IAAI,CAAC,IAAI,CACf,qDACD,CAAC,mGAAmG,CAAC,CAAC;eACtG,EAAE,IAAI,CAAC,IAAI,CACV,+BACD,CAAC,UAAU,CAAC,CAAC;;;;YAIhB,EAAE,EACE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAC5B,QAAS,IAAM,IAAI,CAAC,oBAAoB,GACxC,QAAS,IAAM,IAAI,CAAC,oBAAoB,GACxC,MAAO,IAAM,IAAI,CAAC,oBAAoB,GACtC,SAAU,AAAC,GACT,GAAK,mBACD,IAAI,CAAC,oBAAoB,CACvB,EAAI,kBAAkB,CACtB,EACA,EAAI,OAAO,CACX,GAEF,IAAI,CAAC,oBAAoB,EACjC,GACA,IAAI,CAAC,oBAAoB,CAAC,EAAc,EAAQ,GAAK;;;;UAI3D,CAAC,AACT,CAQA,qBAAqB,CAAY,CAAE,CAAM,CAAE,CAAG,CAAE,EAAW,EAAK,CAAE,CAChE,OAAO,EACJ,IAAI,CAAC,CAAC,EAAG,IAAM,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,GAC9C,GAAG,CACF,AAAC,GAAgB,QAAI,CAAC;;;;4BAIF,EAAE,IAAW,EAAY,MAAM,CAAC;qBACvC,EAAE,IAAoB,CAAC;mBACzB,EAAE,EAAI,OAAO,CAChB,CAAC,CAAC,EAAE,EAAW,QAAU,EAAO,CAAC,CAAC,CAClC,CAAC,CAAC,EAAE,EAAY,MAAM,CAAC,CAAC,CAAC,EACzB;eACD,EAAE,EAAY,MAAM,CAAC;;;QAG5B,CAAC,CAEP,CAEA,sBAAuB,CACrB,MAAO,QAAI,CAAC;;;;wBAIQ,EAAE,GAAK;eAChB,EAAE,IAAI,CAAC,GAAG,CAAC;WACf,EAAE,IAAI,CAAC,MAAM,CAAC;;;IAGrB,CAAC,AACH,CACF,EAEAC,eAAe,MAAM,CAAC,wBAAyBR,oB,gCCjLxC,SAAS,EAAe,EAAS,KAAK,EAC3C,OAAOS,KAAK,MAAM,GAAG,QAAQ,CAAC,IAAI,OAAO,CAAC,KAAM,EAClD,C"}

package/out/static/client/5685.46c8d178d072b8ac.js

@@ -1,4 +0,0 @@
-export const __rspack_esm_id="5685";export const __rspack_esm_ids=["5685"];export const __webpack_modules__={77108(t,e,a){a.r(e),a.d(e,{MDNLanguageAlwaysRedirectButton:()=>MDNLanguageAlwaysRedirectButton});var n=a(97825),o=a(29303);let MDNLanguageAlwaysRedirectButton=class MDNLanguageAlwaysRedirectButton extends n.WF{static properties={locale:{type:String},to:{type:String}};constructor(){super(),this.locale="",this.to=""}_handleClick(){(0,o.ud)(this.to);let t=document.location.pathname.replace(`/${this.locale}/`,`/${this.to}/`);document.location.replace(t)}render(){return(0,n.qy)`<mdn-button variant="plain" @click=${this._handleClick}
-      ><slot></slot
-    ></mdn-button>`}};customElements.define("mdn-language-always-redirect-button",MDNLanguageAlwaysRedirectButton)}};
-//# sourceMappingURL=5685.46c8d178d072b8ac.js.map

package/out/static/client/5685.46c8d178d072b8ac.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"5685.46c8d178d072b8ac.js","sources":["webpack://@mdn/fred/./components/language-always-redirect-button/element.js"],"sourcesContent":["import { LitElement, html } from \"lit\";\n\nimport { setPreferredLocale } from \"../preferred-locale/utils.js\";\n\nexport class MDNLanguageAlwaysRedirectButton extends LitElement {\n  static properties = {\n    locale: { type: String },\n    to: { type: String },\n  };\n\n  constructor() {\n    super();\n    this.locale = \"\";\n    this.to = \"\";\n  }\n\n  _handleClick() {\n    setPreferredLocale(this.to);\n    const url = document.location.pathname.replace(\n      `/${this.locale}/`,\n      `/${this.to}/`,\n    );\n    document.location.replace(url);\n  }\n\n  render() {\n    return html`<mdn-button variant=\"plain\" @click=${this._handleClick}\n      ><slot></slot\n    ></mdn-button>`;\n  }\n}\n\ncustomElements.define(\n  \"mdn-language-always-redirect-button\",\n  MDNLanguageAlwaysRedirectButton,\n);\n"],"names":["MDNLanguageAlwaysRedirectButton","String","document","customElements"],"mappings":"wOAIO,IAAMA,gCAAN,MAAMA,wCAAwC,IAAU,CAC7D,OAAO,WAAa,CAClB,OAAQ,CAAE,KAAMC,MAAO,EACvB,GAAI,CAAE,KAAMA,MAAO,CACrB,CAAE,AAEF,cAAc,CACZ,KAAK,GACL,IAAI,CAAC,MAAM,CAAG,GACd,IAAI,CAAC,EAAE,CAAG,EACZ,CAEA,cAAe,CACb,SAAmB,IAAI,CAAC,EAAE,EAC1B,IAAM,EAAMC,SAAS,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAC5C,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAClB,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,EAEhBA,SAAS,QAAQ,CAAC,OAAO,CAAC,EAC5B,CAEA,QAAS,CACP,MAAO,QAAI,CAAC,mCAAmC,EAAE,IAAI,CAAC,YAAY,CAAC;;kBAErD,CAAC,AACjB,CACF,EAEAC,eAAe,MAAM,CACnB,sCACAH,gC"}