lighthouse 10.4.0 → 11.0.0

package/flow-report/src/i18n/i18n.d.ts

@@ -74,7 +74,6 @@ declare function useI18n(): {
         thirdPartyResourcesLabel: string;
         viewTreemapLabel: string;
         viewTraceLabel: string;
-        viewOriginalTraceLabel: string;
         dropdownPrintSummary: string;
         dropdownPrintExpanded: string;
         dropdownCopyJSON: string;
@@ -83,6 +82,7 @@ declare function useI18n(): {
         dropdownViewer: string;
         dropdownSaveGist: string;
         dropdownDarkTheme: string;
+        dropdownViewUnthrottledTrace: string;
         runtimeSettingsDevice: string;
         runtimeSettingsNetworkThrottling: string;
         runtimeSettingsCPUThrottling: string;
@@ -177,7 +177,6 @@ declare function useLocalizedStrings(): {
     thirdPartyResourcesLabel: string;
     viewTreemapLabel: string;
     viewTraceLabel: string;
-    viewOriginalTraceLabel: string;
     dropdownPrintSummary: string;
     dropdownPrintExpanded: string;
     dropdownCopyJSON: string;
@@ -186,6 +185,7 @@ declare function useLocalizedStrings(): {
     dropdownViewer: string;
     dropdownSaveGist: string;
     dropdownDarkTheme: string;
+    dropdownViewUnthrottledTrace: string;
     runtimeSettingsDevice: string;
     runtimeSettingsNetworkThrottling: string;
     runtimeSettingsCPUThrottling: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "10.4.0",
+  "version": "11.0.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -10,7 +10,7 @@
     "smokehouse": "./cli/test/smokehouse/frontends/smokehouse-bin.js"
   },
   "engines": {
-    "node": ">=16.16"
+    "node": ">=18.16"
   },
   "scripts": {
     "prepack": "yarn build-report --standalone --flow --esm && yarn build-types",
@@ -41,7 +41,7 @@
     "start": "yarn build-report --standalone && node ./cli/index.js",
     "mocha": "node --loader=testdouble core/test/scripts/run-mocha-tests.js",
     "test": "yarn diff:sample-json && yarn lint --quiet && yarn unit && yarn type-check",
-    "test-bundle": "yarn smoke --runner bundle --retries=2",
+    "test-bundle": "yarn smoke --runner bundle",
     "test-clients": "yarn mocha --testMatch clients/**/*-test.js && yarn mocha --testMatch clients/**/*-test-pptr.js",
     "test-viewer": "yarn unit-viewer && yarn mocha --testMatch viewer/**/*-test-pptr.js --timeout 35000",
     "test-treemap": "yarn unit-treemap && yarn mocha --testMatch treemap/**/*-test-pptr.js --timeout 35000",
@@ -99,14 +99,8 @@
   "devDependencies": {
     "@build-tracker/cli": "^1.0.0-beta.15",
     "@esbuild-kit/esm-loader": "^2.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@jest/fake-timers": "^28.1.0",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-dynamic-import-vars": "^1.1.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@stadtlandnetz/rollup-plugin-postprocess": "^1.1.0",
     "@testing-library/preact": "^3.1.1",
     "@testing-library/preact-hooks": "^1.1.0",
     "@types/archiver": "^2.1.2",
@@ -125,6 +119,7 @@
     "@types/node": "*",
     "@types/pako": "^1.0.1",
     "@types/resize-observer-browser": "^0.1.1",
+    "@types/resolve": "^1.20.2",
     "@types/semver": "^5.5.0",
     "@types/tabulator-tables": "^4.9.1",
     "@types/ws": "^7.0.0",
@@ -135,6 +130,7 @@
     "acorn": "^8.5.0",
     "angular": "^1.7.4",
     "archiver": "^3.0.0",
+    "builtin-modules": "^3.3.0",
     "c8": "^7.11.3",
     "chalk": "^2.4.1",
     "chrome-devtools-frontend": "1.0.1153166",
@@ -144,6 +140,7 @@
     "cross-env": "^7.0.2",
     "csv-validator": "^0.0.3",
     "es-main": "^1.2.0",
+    "esbuild": "^0.18.11",
     "eslint": "^8.4.1",
     "eslint-config-google": "^0.14.0",
     "eslint-formatter-codeframe": "^7.32.1",
@@ -169,17 +166,13 @@
     "pako": "^2.0.3",
     "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^20.8.0",
-    "resolve": "^1.20.0",
+    "puppeteer": "^21.0.1",
+    "resolve": "^1.22.1",
     "rollup": "^2.52.7",
-    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-polyfill-node": "^0.12.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-shim": "^1.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "tabulator-tables": "^4.9.3",
-    "terser": "^5.3.8",
-    "testdouble": "^3.17.2",
+    "terser": "^5.18.2",
+    "testdouble": "^3.18.0",
     "typed-query-selector": "^2.6.1",
     "typescript": "^5.0.4",
     "wait-for-expect": "^3.0.2",
@@ -188,7 +181,7 @@
   "dependencies": {
     "@sentry/node": "^6.17.4",
     "axe-core": "4.7.2",
-    "chrome-launcher": "^0.15.2",
+    "chrome-launcher": "^1.0.0",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
     "devtools-protocol": "0.0.1155343",
@@ -196,17 +189,17 @@
     "http-link-header": "^1.1.1",
     "intl-messageformat": "^4.4.0",
     "jpeg-js": "^0.4.4",
-    "js-library-detector": "^6.6.0",
-    "lighthouse-logger": "^1.4.1",
-    "lighthouse-stack-packs": "1.11.0",
+    "js-library-detector": "^6.7.0",
+    "lighthouse-logger": "^2.0.1",
+    "lighthouse-stack-packs": "1.12.0",
     "lodash": "^4.17.21",
     "lookup-closest-locale": "6.2.0",
     "metaviewport-parser": "0.3.0",
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
     "ps-list": "^8.0.0",
-    "puppeteer-core": "^20.8.0",
-    "robots-parser": "^3.0.0",
+    "puppeteer-core": "^21.0.1",
+    "robots-parser": "^3.0.1",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",
     "third-party-web": "^0.23.3",

package/readme.md

@@ -52,7 +52,7 @@ The Chrome extension was available prior to Lighthouse being available in Chrome
 
 The Node CLI provides the most flexibility in how Lighthouse runs can be configured and reported. Users who want more advanced usage, or want to run Lighthouse in an automated fashion should use the Node CLI.
 
-_Lighthouse requires Node 16 LTS (16.x) or later._
+_Lighthouse requires Node 18 LTS (18.x) or later._
 
 **Installation**:
 
@@ -337,6 +337,8 @@ This section details services that have integrated Lighthouse data. If you're wo
 
 * **[Treo](https://treo.sh)** - Treo is Lighthouse as a Service. It provides regression testing, geographical regions, custom networks, and integrations with GitHub & Slack. Treo is a paid product with plans for solo-developers and teams.
 
+* **[PageVitals](https://pagevitals.com)** - PageVitals combines Lighthouse, CrUX and real-user monitoring data to monitor the performance of websites. See how your website performs over time and get alerted if it gets too slow. Drill down and find the real cause of any performance issue. PageVitals is a paid product with a free 14-day trial.
+
 * **[Alertdesk](https://www.alertdesk.com/)** - Alertdesk is based on Lighthouse and helps you to keep track of your site’s quality & performance. Run daily quality & performance tests from both Mobile and Desktop and dive into the powerful & intuitive reports. You can also monitor your uptime (every minute - 24/7) & domain health. Alertdesk is a paid product with a free 14-day trial.
 
 * **[Screpy](https://screpy.com)** - Screpy is a web analysis tool that can analyze all pages of your websites in one dashboard and monitor them with your team. It's powered by Lighthouse and it also includes some different analysis tools (SERP, W3C, Uptime, etc). Screpy has free and paid plans.

package/report/assets/templates.html

@@ -282,7 +282,7 @@ limitations under the License.
     }
     .lh-tools__button.lh-active + .lh-tools__dropdown {
       opacity: 1;
-      clip: rect(-1px, 194px, 242px, -3px);
+      clip: rect(-1px, 194px, 270px, -3px);
       visibility: visible;
     }
     .lh-tools__dropdown {
@@ -399,6 +399,8 @@ limitations under the License.
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download" data-i18n="dropdownSaveJSON" data-action="save-json"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownViewer" data-action="open-viewer"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownSaveGist" data-action="save-gist"></a>
+        <!-- Only enabled if Options.onViewTrace is set and we are on simulated throttling. -->
+        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open lh-hidden" data-i18n="dropdownViewUnthrottledTrace" data-action="view-unthrottled-trace"></a>
         <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--dark" data-i18n="dropdownDarkTheme" data-action="toggle-dark"></a>
       </div>
     </div>

package/report/renderer/category-renderer.d.ts

@@ -87,12 +87,13 @@ export class CategoryRenderer {
      * Take a set of audits and render in a top-level, expandable clump that starts
      * in a collapsed state.
      * @param {Exclude<TopLevelClumpId, 'failed'>} clumpId
-     * @param {{auditRefs: Array<LH.ReportResult.AuditRef>, description?: string}} clumpOpts
+     * @param {{auditRefs: Array<LH.ReportResult.AuditRef>, description?: string, openByDefault?: boolean}} clumpOpts
      * @return {!Element}
      */
-    renderClump(clumpId: Exclude<TopLevelClumpId, 'failed'>, { auditRefs, description }: {
+    renderClump(clumpId: Exclude<TopLevelClumpId, 'failed'>, { auditRefs, description, openByDefault }: {
         auditRefs: Array<LH.ReportResult.AuditRef>;
         description?: string;
+        openByDefault?: boolean;
     }): Element;
     /**
      * @param {LH.ReportResult.Category} category

package/report/renderer/category-renderer.js

@@ -309,14 +309,14 @@ export class CategoryRenderer {
    * Take a set of audits and render in a top-level, expandable clump that starts
    * in a collapsed state.
    * @param {Exclude<TopLevelClumpId, 'failed'>} clumpId
-   * @param {{auditRefs: Array<LH.ReportResult.AuditRef>, description?: string}} clumpOpts
+   * @param {{auditRefs: Array<LH.ReportResult.AuditRef>, description?: string, openByDefault?: boolean}} clumpOpts
    * @return {!Element}
    */
-  renderClump(clumpId, {auditRefs, description}) {
+  renderClump(clumpId, {auditRefs, description, openByDefault}) {
     const clumpComponent = this.dom.createComponent('clump');
     const clumpElement = this.dom.find('.lh-clump', clumpComponent);
 
-    if (clumpId === 'warning') {
+    if (openByDefault) {
       clumpElement.setAttribute('open', '');
     }
 
@@ -559,6 +559,7 @@ export class CategoryRenderer {
       });
     }
 
+    const numFailingAudits = clumps.get('failed')?.length;
     // Render each clump.
     for (const [clumpId, auditRefs] of clumps) {
       if (auditRefs.length === 0) continue;
@@ -571,7 +572,10 @@ export class CategoryRenderer {
       }
 
       const description = clumpId === 'manual' ? category.manualDescription : undefined;
-      const clumpElem = this.renderClump(clumpId, {auditRefs, description});
+      // Expand on warning, or manual audits when there are no failing audits.
+      const openByDefault =
+        clumpId === 'warning' || (clumpId === 'manual' && numFailingAudits === 0);
+      const clumpElem = this.renderClump(clumpId, {auditRefs, description, openByDefault});
       element.append(clumpElem);
     }
 

package/report/renderer/components.js

@@ -531,7 +531,7 @@ function createStylesComponent(dom) {
 function createTopbarComponent(dom) {
   const el0 = dom.createFragment();
   const el1 = dom.createElement("style");
-  el1.append("\n    .lh-topbar {\n      position: sticky;\n      top: 0;\n      left: 0;\n      right: 0;\n      z-index: 1000;\n      display: flex;\n      align-items: center;\n      height: var(--topbar-height);\n      padding: var(--topbar-padding);\n      font-size: var(--report-font-size-secondary);\n      background-color: var(--topbar-background-color);\n      border-bottom: 1px solid var(--color-gray-200);\n    }\n\n    .lh-topbar__logo {\n      width: var(--topbar-logo-size);\n      height: var(--topbar-logo-size);\n      user-select: none;\n      flex: none;\n    }\n\n    .lh-topbar__url {\n      margin: var(--topbar-padding);\n      text-decoration: none;\n      color: var(--report-text-color);\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n    }\n\n    .lh-tools {\n      display: flex;\n      align-items: center;\n      margin-left: auto;\n      will-change: transform;\n      min-width: var(--report-icon-size);\n    }\n    .lh-tools__button {\n      width: var(--report-icon-size);\n      min-width: 24px;\n      height: var(--report-icon-size);\n      cursor: pointer;\n      margin-right: 5px;\n      /* This is actually a button element, but we want to style it like a transparent div. */\n      display: flex;\n      background: none;\n      color: inherit;\n      border: none;\n      padding: 0;\n      font: inherit;\n      outline: inherit;\n    }\n    .lh-tools__button svg {\n      fill: var(--tools-icon-color);\n    }\n    .lh-dark .lh-tools__button svg {\n      filter: invert(1);\n    }\n    .lh-tools__button.lh-active + .lh-tools__dropdown {\n      opacity: 1;\n      clip: rect(-1px, 194px, 242px, -3px);\n      visibility: visible;\n    }\n    .lh-tools__dropdown {\n      position: absolute;\n      background-color: var(--report-background-color);\n      border: 1px solid var(--report-border-color);\n      border-radius: 3px;\n      padding: calc(var(--default-padding) / 2) 0;\n      cursor: pointer;\n      top: 36px;\n      right: 0;\n      box-shadow: 1px 1px 3px #ccc;\n      min-width: 125px;\n      clip: rect(0, 164px, 0, 0);\n      visibility: hidden;\n      opacity: 0;\n      transition: all 200ms cubic-bezier(0,0,0.2,1);\n    }\n    .lh-tools__dropdown a {\n      color: currentColor;\n      text-decoration: none;\n      white-space: nowrap;\n      padding: 0 6px;\n      line-height: 2;\n    }\n    .lh-tools__dropdown a:hover,\n    .lh-tools__dropdown a:focus {\n      background-color: var(--color-gray-200);\n      outline: none;\n    }\n    /* save-gist option hidden in report. */\n    .lh-tools__dropdown a[data-action='save-gist'] {\n      display: none;\n    }\n\n    .lh-locale-selector {\n      width: 100%;\n      color: var(--report-text-color);\n      background-color: var(--locale-selector-background-color);\n      padding: 2px;\n    }\n    .lh-tools-locale {\n      display: flex;\n      align-items: center;\n      flex-direction: row-reverse;\n    }\n    .lh-tools-locale__selector-wrapper {\n      transition: opacity 0.15s;\n      opacity: 0;\n      max-width: 200px;\n    }\n    .lh-button.lh-tool-locale__button {\n      height: var(--topbar-height);\n      color: var(--tools-icon-color);\n      padding: calc(var(--default-padding) / 2);\n    }\n    .lh-tool-locale__button.lh-active + .lh-tools-locale__selector-wrapper {\n      opacity: 1;\n      clip: rect(-1px, 194px, 242px, -3px);\n      visibility: visible;\n      margin: 0 4px;\n    }\n\n    @media screen and (max-width: 964px) {\n      .lh-tools__dropdown {\n        right: 0;\n        left: initial;\n      }\n    }\n    @media print {\n      .lh-topbar {\n        position: static;\n        margin-left: 0;\n      }\n\n      .lh-tools__dropdown {\n        display: none;\n      }\n    }\n  ");
+  el1.append("\n    .lh-topbar {\n      position: sticky;\n      top: 0;\n      left: 0;\n      right: 0;\n      z-index: 1000;\n      display: flex;\n      align-items: center;\n      height: var(--topbar-height);\n      padding: var(--topbar-padding);\n      font-size: var(--report-font-size-secondary);\n      background-color: var(--topbar-background-color);\n      border-bottom: 1px solid var(--color-gray-200);\n    }\n\n    .lh-topbar__logo {\n      width: var(--topbar-logo-size);\n      height: var(--topbar-logo-size);\n      user-select: none;\n      flex: none;\n    }\n\n    .lh-topbar__url {\n      margin: var(--topbar-padding);\n      text-decoration: none;\n      color: var(--report-text-color);\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n    }\n\n    .lh-tools {\n      display: flex;\n      align-items: center;\n      margin-left: auto;\n      will-change: transform;\n      min-width: var(--report-icon-size);\n    }\n    .lh-tools__button {\n      width: var(--report-icon-size);\n      min-width: 24px;\n      height: var(--report-icon-size);\n      cursor: pointer;\n      margin-right: 5px;\n      /* This is actually a button element, but we want to style it like a transparent div. */\n      display: flex;\n      background: none;\n      color: inherit;\n      border: none;\n      padding: 0;\n      font: inherit;\n      outline: inherit;\n    }\n    .lh-tools__button svg {\n      fill: var(--tools-icon-color);\n    }\n    .lh-dark .lh-tools__button svg {\n      filter: invert(1);\n    }\n    .lh-tools__button.lh-active + .lh-tools__dropdown {\n      opacity: 1;\n      clip: rect(-1px, 194px, 270px, -3px);\n      visibility: visible;\n    }\n    .lh-tools__dropdown {\n      position: absolute;\n      background-color: var(--report-background-color);\n      border: 1px solid var(--report-border-color);\n      border-radius: 3px;\n      padding: calc(var(--default-padding) / 2) 0;\n      cursor: pointer;\n      top: 36px;\n      right: 0;\n      box-shadow: 1px 1px 3px #ccc;\n      min-width: 125px;\n      clip: rect(0, 164px, 0, 0);\n      visibility: hidden;\n      opacity: 0;\n      transition: all 200ms cubic-bezier(0,0,0.2,1);\n    }\n    .lh-tools__dropdown a {\n      color: currentColor;\n      text-decoration: none;\n      white-space: nowrap;\n      padding: 0 6px;\n      line-height: 2;\n    }\n    .lh-tools__dropdown a:hover,\n    .lh-tools__dropdown a:focus {\n      background-color: var(--color-gray-200);\n      outline: none;\n    }\n    /* save-gist option hidden in report. */\n    .lh-tools__dropdown a[data-action='save-gist'] {\n      display: none;\n    }\n\n    .lh-locale-selector {\n      width: 100%;\n      color: var(--report-text-color);\n      background-color: var(--locale-selector-background-color);\n      padding: 2px;\n    }\n    .lh-tools-locale {\n      display: flex;\n      align-items: center;\n      flex-direction: row-reverse;\n    }\n    .lh-tools-locale__selector-wrapper {\n      transition: opacity 0.15s;\n      opacity: 0;\n      max-width: 200px;\n    }\n    .lh-button.lh-tool-locale__button {\n      height: var(--topbar-height);\n      color: var(--tools-icon-color);\n      padding: calc(var(--default-padding) / 2);\n    }\n    .lh-tool-locale__button.lh-active + .lh-tools-locale__selector-wrapper {\n      opacity: 1;\n      clip: rect(-1px, 194px, 242px, -3px);\n      visibility: visible;\n      margin: 0 4px;\n    }\n\n    @media screen and (max-width: 964px) {\n      .lh-tools__dropdown {\n        right: 0;\n        left: initial;\n      }\n    }\n    @media print {\n      .lh-topbar {\n        position: static;\n        margin-left: 0;\n      }\n\n      .lh-tools__dropdown {\n        display: none;\n      }\n    }\n  ");
   el0.append(el1);
   const el2 = dom.createElement("div", "lh-topbar");
   const el3 = dom.createElementNS("http://www.w3.org/2000/svg", "svg", "lh-topbar__logo");
@@ -646,13 +646,19 @@ function createTopbarComponent(dom) {
   el26.setAttribute('href', '#');
   el26.setAttribute('data-i18n', 'dropdownSaveGist');
   el26.setAttribute('data-action', 'save-gist');
-  const el27 = dom.createElement("a", "lh-report-icon lh-report-icon--dark");
+  const el27 = dom.createElement("a", "lh-report-icon lh-report-icon--open lh-hidden");
   el27.setAttribute('role', 'menuitem');
   el27.setAttribute('tabindex', '-1');
   el27.setAttribute('href', '#');
-  el27.setAttribute('data-i18n', 'dropdownDarkTheme');
-  el27.setAttribute('data-action', 'toggle-dark');
-  el19.append(" ",el20," ",el21," ",el22," "," ",el23," ",el24," ",el25," ",el26," ",el27," ");
+  el27.setAttribute('data-i18n', 'dropdownViewUnthrottledTrace');
+  el27.setAttribute('data-action', 'view-unthrottled-trace');
+  const el28 = dom.createElement("a", "lh-report-icon lh-report-icon--dark");
+  el28.setAttribute('role', 'menuitem');
+  el28.setAttribute('tabindex', '-1');
+  el28.setAttribute('href', '#');
+  el28.setAttribute('data-i18n', 'dropdownDarkTheme');
+  el28.setAttribute('data-action', 'toggle-dark');
+  el19.append(" ",el20," ",el21," ",el22," "," ",el23," ",el24," ",el25," ",el26," "," ",el27," ",el28," ");
   el8.append(" ",el9," ",el15," ",el19," ");
   el2.append(" "," ",el3," ",el7," ",el8," ");
   el0.append(el2);

package/report/renderer/pwa-category-renderer.js

@@ -41,7 +41,7 @@ export class PwaCategoryRenderer extends CategoryRenderer {
     // Manual audits are still in a manual clump.
     const manualAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode === 'manual');
     const manualElem = this.renderClump('manual',
-      {auditRefs: manualAuditRefs, description: category.manualDescription});
+      {auditRefs: manualAuditRefs, description: category.manualDescription, openByDefault: true});
     categoryElem.append(manualElem);
 
     return categoryElem;

package/report/renderer/report-ui-features.js

@@ -114,12 +114,15 @@ export class ReportUIFeatures {
     }
 
     if (this._opts.onViewTrace) {
-      this.addButton({
-        text: lhr.configSettings.throttlingMethod === 'simulate' ?
-          Globals.strings.viewOriginalTraceLabel :
-          Globals.strings.viewTraceLabel,
-        onClick: () => this._opts.onViewTrace?.(),
-      });
+      if (lhr.configSettings.throttlingMethod === 'simulate') {
+        // eslint-disable-next-line max-len
+        this._dom.find('a[data-action="view-unthrottled-trace"]', this._dom.rootEl).classList.remove('lh-hidden');
+      } else {
+        this.addButton({
+          text: Globals.strings.viewTraceLabel,
+          onClick: () => this._opts.onViewTrace?.(),
+        });
+      }
     }
 
     if (this._opts.getStandaloneReportHTML) {

package/report/renderer/report-utils.d.ts

@@ -100,7 +100,6 @@ export namespace UIStrings {
     const thirdPartyResourcesLabel: string;
     const viewTreemapLabel: string;
     const viewTraceLabel: string;
-    const viewOriginalTraceLabel: string;
     const dropdownPrintSummary: string;
     const dropdownPrintExpanded: string;
     const dropdownCopyJSON: string;
@@ -109,6 +108,7 @@ export namespace UIStrings {
     const dropdownViewer: string;
     const dropdownSaveGist: string;
     const dropdownDarkTheme: string;
+    const dropdownViewUnthrottledTrace: string;
     const runtimeSettingsDevice: string;
     const runtimeSettingsNetworkThrottling: string;
     const runtimeSettingsCPUThrottling: string;

package/report/renderer/report-utils.js

@@ -398,8 +398,6 @@ const UIStrings = {
   viewTreemapLabel: 'View Treemap',
   /** This label is for a button that will show the user a trace of the page. */
   viewTraceLabel: 'View Trace',
-  /** This label is for a button that will show the user a trace of the page. */
-  viewOriginalTraceLabel: 'View Original Trace',
 
   /** Option in a dropdown menu that opens a small, summary report in a print dialog.  */
   dropdownPrintSummary: 'Print Summary',
@@ -417,6 +415,8 @@ const UIStrings = {
   dropdownSaveGist: 'Save as Gist',
   /** Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes. */
   dropdownDarkTheme: 'Toggle Dark Theme',
+  /** Option in a dropdown menu that opens the trace of the page without throttling. "Unthrottled" can be replaced with "Original". */
+  dropdownViewUnthrottledTrace: 'View Unthrottled Trace',
 
   /** Label for a row in a table that describes the kind of device that was emulated for the Lighthouse run.  Example values for row elements: 'No Emulation', 'Emulated Desktop', etc. */
   runtimeSettingsDevice: 'Device',

package/report/renderer/topbar-features.js

@@ -114,6 +114,9 @@ export class TopbarFeatures {
         toggleDarkTheme(this._dom);
         break;
       }
+      case 'view-unthrottled-trace': {
+        this._reportUIFeatures._opts.onViewTrace?.();
+      }
     }
 
     this._dropDownMenu.close();