lighthouse 9.0.0-dev.20211121 → 9.1.0

package/lighthouse-core/audits/dobetterweb/notification-on-start.js

@@ -38,16 +38,18 @@ class NotificationOnStart extends ViolationAudit {
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
       supportedModes: ['navigation'],
-      requiredArtifacts: ['ConsoleMessages'],
+      requiredArtifacts: ['ConsoleMessages', 'SourceMaps', 'ScriptElements'],
     };
   }
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
-    const results = ViolationAudit.getViolationResults(artifacts, /notification permission/);
+  static async audit(artifacts, context) {
+    const results =
+      await ViolationAudit.getViolationResults(artifacts, context, /notification permission/);
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [

package/lighthouse-core/audits/dobetterweb/uses-passive-event-listeners.js

@@ -37,16 +37,18 @@ class PassiveEventsAudit extends ViolationAudit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['ConsoleMessages'],
+      requiredArtifacts: ['ConsoleMessages', 'SourceMaps', 'ScriptElements'],
     };
   }
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
-    const results = ViolationAudit.getViolationResults(artifacts, /passive event listener/);
+  static async audit(artifacts, context) {
+    const results =
+      await ViolationAudit.getViolationResults(artifacts, context, /passive event listener/);
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [

package/lighthouse-core/audits/errors-in-console.js

@@ -12,6 +12,7 @@
 
 const log = require('lighthouse-logger');
 const Audit = require('./audit.js');
+const JsBundles = require('../computed/js-bundles.js');
 const i18n = require('../lib/i18n/i18n.js');
 
 const UIStrings = {
@@ -39,7 +40,7 @@ class ErrorLogs extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['ConsoleMessages'],
+      requiredArtifacts: ['ConsoleMessages', 'SourceMaps', 'ScriptElements'],
     };
   }
 
@@ -75,20 +76,22 @@ class ErrorLogs extends Audit {
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
-   * @return {LH.Audit.Product}
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts, context) {
+  static async audit(artifacts, context) {
     /** @type {AuditOptions} */
     const auditOptions = context.options;
+    const bundles = await JsBundles.request(artifacts, context);
 
     /** @type {Array<{source: string, description: string|undefined, sourceLocation: LH.Audit.Details.SourceLocationValue|undefined}>} */
     const consoleRows = artifacts.ConsoleMessages
       .filter(item => item.level === 'error')
       .map(item => {
+        const bundle = bundles.find(bundle => bundle.script.src === item.url);
         return {
           source: item.source,
           description: item.text,
-          sourceLocation: Audit.makeSourceLocationFromConsoleMessage(item),
+          sourceLocation: Audit.makeSourceLocationFromConsoleMessage(item, bundle),
         };
       });
 

package/lighthouse-core/audits/no-unload-listeners.js

@@ -6,6 +6,7 @@
 'use strict';
 
 const Audit = require('./audit.js');
+const JsBundles = require('../computed/js-bundles.js');
 const i18n = require('./../lib/i18n/i18n.js');
 
 const UIStrings = {
@@ -29,15 +30,16 @@ class NoUnloadListeners extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['GlobalListeners', 'JsUsage'],
+      requiredArtifacts: ['GlobalListeners', 'JsUsage', 'SourceMaps', 'ScriptElements'],
     };
   }
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
+  static async audit(artifacts, context) {
     const unloadListeners = artifacts.GlobalListeners.filter(l => l.type === 'unload');
     if (!unloadListeners.length) {
       return {
@@ -45,6 +47,8 @@ class NoUnloadListeners extends Audit {
       };
     }
 
+    const bundles = await JsBundles.request(artifacts, context);
+
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       {key: 'source', itemType: 'source-location', text: str_(i18n.UIStrings.columnSource)},
@@ -74,14 +78,9 @@ class NoUnloadListeners extends Audit {
         };
       }
 
+      const bundle = bundles.find(bundle => bundle.script.src === url);
       return {
-        source: {
-          type: 'source-location',
-          url,
-          urlProvider: 'network',
-          line: listener.lineNumber,
-          column: listener.columnNumber,
-        },
+        source: Audit.makeSourceLocation(url, listener.lineNumber, listener.columnNumber, bundle),
       };
     });
 

package/lighthouse-core/audits/seo/canonical.js

@@ -38,11 +38,6 @@ const UIStrings = {
    * @example {https://example.com/} url
    */
   explanationPointsElsewhere: 'Points to another `hreflang` location ({url})',
-  /**
-   * @description Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different domain.
-   * @example {https://example.com/} url
-   * */
-  explanationDifferentDomain: 'Points to a different domain ({url})',
   /** Explanatory message stating that the page's canonical URL was pointing to the domain's root URL, which is a common mistake. "points" refers to the action of the 'rel=canonical' referencing another link. "root" refers to the starting/home page of the website. "domain" refers to the registered domain name of the website. */
   explanationRoot: 'Points to the domain\'s root URL (the homepage), ' +
     'instead of an equivalent page of content',
@@ -174,15 +169,6 @@ class Canonical extends Audit {
       };
     }
 
-    // bing and yahoo don't allow canonical URLs pointing to different domains, it's also
-    // a common mistake to publish a page with canonical pointing to e.g. a test domain or localhost
-    if (!URL.rootDomainsMatch(canonicalURL, baseURL)) {
-      return {
-        score: 0,
-        explanation: str_(UIStrings.explanationDifferentDomain, {url: canonicalURL.href}),
-      };
-    }
-
     // another common mistake is to have canonical pointing from all pages of the website to its root
     if (
       canonicalURL.origin === baseURL.origin &&

package/lighthouse-core/audits/seo/font-size.js

@@ -196,9 +196,11 @@ function findStyleRuleSource(baseURL, styleDeclaration, parentNode) {
       }
     }
 
-    const url = stylesheet.sourceURL;
+    const source = Audit.makeSourceLocation(stylesheet.sourceURL, line, column);
+    source.urlProvider = urlProvider;
+
     return {
-      source: {type: 'source-location', url, urlProvider, line, column},
+      source,
       selector,
     };
   }

package/lighthouse-core/audits/seo/is-crawlable.js

@@ -126,9 +126,9 @@ class IsCrawlable extends Audit {
             const line = robotsTxt.getMatchingLineNumber(mainResource.url) || 1;
             blockingDirectives.push({
               source: {
-                type: /** @type {'source-location'} */ ('source-location'),
+                type: /** @type {const} */ ('source-location'),
                 url: robotsFileUrl.href,
-                urlProvider: /** @type {'network'} */ ('network'),
+                urlProvider: /** @type {const} */ ('network'),
                 line: line - 1,
                 column: 0,
               },

package/lighthouse-core/audits/third-party-summary.js

@@ -216,12 +216,12 @@ class ThirdPartySummary extends Audit {
         return {
           ...stats,
           entity: {
-            type: /** @type {'link'} */ ('link'),
+            type: /** @type {const} */ ('link'),
             text: entity.name,
             url: entity.homepage || '',
           },
           subItems: {
-            type: /** @type {'subitems'} */ ('subitems'),
+            type: /** @type {const} */ ('subitems'),
             items: ThirdPartySummary.makeSubItems(entity, summaries, stats),
           },
         };

package/lighthouse-core/audits/valid-source-maps.js

@@ -110,7 +110,7 @@ class ValidSourceMaps extends Audit {
           scriptUrl: scriptElement.src,
           sourceMapUrl: sourceMap && sourceMap.sourceMapUrl,
           subItems: {
-            type: /** @type {'subitems'} */ ('subitems'),
+            type: /** @type {const} */ ('subitems'),
             items: errors,
           },
         });

package/lighthouse-core/audits/violation-audit.js

@@ -6,14 +6,18 @@
 'use strict';
 
 const Audit = require('./audit.js');
+const JsBundles = require('../computed/js-bundles.js');
 
 class ViolationAudit extends Audit {
   /**
    * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
    * @param {RegExp} pattern
-   * @return {Array<{source: LH.Audit.Details.SourceLocationValue}>}
+   * @return {Promise<Array<{source: LH.Audit.Details.SourceLocationValue}>>}
    */
-  static getViolationResults(artifacts, pattern) {
+  static async getViolationResults(artifacts, context, pattern) {
+    const bundles = await JsBundles.request(artifacts, context);
+
     /**
      * @template T
      * @param {T} value
@@ -26,7 +30,10 @@ class ViolationAudit extends Audit {
     const seen = new Set();
     return artifacts.ConsoleMessages
         .filter(entry => entry.url && entry.source === 'violation' && pattern.test(entry.text))
-        .map(Audit.makeSourceLocationFromConsoleMessage)
+        .map(entry => {
+          const bundle = bundles.find(bundle => bundle.script.src === entry.url);
+          return Audit.makeSourceLocationFromConsoleMessage(entry, bundle);
+        })
         .filter(filterUndefined)
         .filter(source => {
           // Filter out duplicate entries since they are not differentiable to the user

package/lighthouse-core/computed/js-bundles.js

@@ -98,9 +98,7 @@ class JSBundles {
 
       const compiledUrl = SourceMap.scriptUrl || 'compiled.js';
       const mapUrl = SourceMap.sourceMapUrl || 'compiled.js.map';
-      // Hack: CDT expects undefined properties to be explicit.
-      const rawMapForCdt = /** @type {any} */ (rawMap);
-      const map = new SDK.TextSourceMap(compiledUrl, mapUrl, rawMapForCdt);
+      const map = new SDK.TextSourceMap(compiledUrl, mapUrl, rawMap);
 
       const content = scriptElement && scriptElement.content ? scriptElement.content : '';
       const sizes = computeGeneratedFileSizes(map, content);

package/lighthouse-core/fraggle-rock/gather/navigation-runner.js

@@ -142,8 +142,8 @@ async function _collectDebugData(navigationContext, phaseState) {
 /**
  * @param {NavigationContext} navigationContext
  * @param {PhaseState} phaseState
- * @param {UnPromise<ReturnType<typeof _setupNavigation>>} setupResult
- * @param {UnPromise<ReturnType<typeof _navigate>>} navigateResult
+ * @param {Awaited<ReturnType<typeof _setupNavigation>>} setupResult
+ * @param {Awaited<ReturnType<typeof _navigate>>} navigateResult
  * @return {Promise<{finalUrl: string, artifacts: Partial<LH.GathererArtifacts>, warnings: Array<LH.IcuMessage>, pageLoadError: LH.LighthouseError | undefined}>}
  */
 async function _computeNavigationResult(
@@ -195,7 +195,7 @@ async function _computeNavigationResult(
 async function _navigation(navigationContext) {
   const artifactState = getEmptyArtifactState();
   const phaseState = {
-    gatherMode: /** @type {'navigation'} */ ('navigation'),
+    gatherMode: /** @type {const} */ ('navigation'),
     driver: navigationContext.driver,
     computedCache: navigationContext.computedCache,
     artifactDefinitions: navigationContext.navigation.artifacts,

package/lighthouse-core/gather/driver/execution-context.js

@@ -166,7 +166,7 @@ class ExecutionContext {
    * @param {{args: T, useIsolation?: boolean, deps?: Array<Function|string>}} options `args` should
    *   match the args of `mainFn`, and can be any serializable value. `deps` are functions that must be
    *   defined for `mainFn` to work.
-   * @return {FlattenedPromise<R>}
+   * @return {Promise<Awaited<R>>}
    */
   evaluate(mainFn, options) {
     const argsSerialized = ExecutionContext.serializeArguments(options.args);

package/lighthouse-core/gather/gatherers/full-page-screenshot.js

@@ -16,19 +16,19 @@ const pageFunctions = require('../../lib/page-functions.js');
 const FULL_PAGE_SCREENSHOT_QUALITY = 30;
 
 /**
- * @param {string} str
+ * @template {string} S
+ * @param {S} str
  */
-function snakeCaseToCamelCase(str) {
-  return str.replace(/(-\w)/g, m => m[1].toUpperCase());
+function kebabCaseToCamelCase(str) {
+  return /** @type {KebabToCamelCase<S>} */ (str.replace(/(-\w)/g, m => m[1].toUpperCase()));
 }
 
 /* c8 ignore start */
 
 // eslint-disable-next-line no-inner-declarations
 function getObservedDeviceMetrics() {
-  // Convert the Web API's snake case (landscape-primary) to camel case (landscapePrimary).
-  const screenOrientationType = /** @type {LH.Crdp.Emulation.ScreenOrientationType} */ (
-    snakeCaseToCamelCase(window.screen.orientation.type));
+  // Convert the Web API's kebab case (landscape-primary) to camel case (landscapePrimary).
+  const screenOrientationType = kebabCaseToCamelCase(window.screen.orientation.type);
   return {
     width: document.documentElement.clientWidth,
     height: document.documentElement.clientHeight,
@@ -168,7 +168,7 @@ class FullPageScreenshot extends FRGatherer {
       observedDeviceMetrics = await executionContext.evaluate(getObservedDeviceMetrics, {
         args: [],
         useIsolation: true,
-        deps: [snakeCaseToCamelCase],
+        deps: [kebabCaseToCamelCase],
       });
     }
 

package/lighthouse-core/gather/gatherers/stacks.js

@@ -82,9 +82,6 @@ class Stacks extends FRGatherer {
   constructor() {
     super();
 
-    // Because this file uses `fs.readFile` it gets parsed by a different branch of the browserify internals
-    // that cannot handle the latest ECMAScript features.
-    // See https://github.com/GoogleChrome/lighthouse/issues/12134
     /** @type {LH.Gatherer.GathererMeta} */
     this.meta = {
       supportedModes: ['snapshot', 'navigation'],

package/lighthouse-core/lib/stack-packs.js

@@ -23,14 +23,6 @@ const stackPacksToInclude = [
     packId: 'drupal',
     requiredStacks: ['js:drupal'],
   },
-  {
-    packId: 'react',
-    requiredStacks: ['js:react'],
-  },
-  {
-    packId: 'angular',
-    requiredStacks: ['js:@angular/core'],
-  },
   {
     packId: 'amp',
     requiredStacks: ['js:amp'],
@@ -47,6 +39,18 @@ const stackPacksToInclude = [
     packId: 'joomla',
     requiredStacks: ['js:joomla'],
   },
+  {
+    packId: 'next.js',
+    requiredStacks: ['js:next'],
+  },
+  {
+    packId: 'angular',
+    requiredStacks: ['js:@angular/core'],
+  },
+  {
+    packId: 'react',
+    requiredStacks: ['js:react'],
+  },
 ];
 
 /**

package/lighthouse-core/runner.js

@@ -132,7 +132,13 @@ class Runner {
 
       /** @type {LH.RawIcu<LH.Result>} */
       const i18nLhr = {
+        lighthouseVersion,
+        requestedUrl,
+        finalUrl: artifacts.URL.finalUrl,
+        fetchTime: artifacts.fetchTime,
         gatherMode: artifacts.GatherContext.gatherMode,
+        runtimeError: Runner.getArtifactRuntimeError(artifacts),
+        runWarnings: lighthouseRunWarnings,
         userAgent: artifacts.HostUserAgent,
         environment: {
           networkUserAgent: artifacts.NetworkUserAgent,
@@ -140,22 +146,16 @@ class Runner {
           benchmarkIndex: artifacts.BenchmarkIndex,
           credits,
         },
-        lighthouseVersion,
-        fetchTime: artifacts.fetchTime,
-        requestedUrl: requestedUrl,
-        finalUrl: artifacts.URL.finalUrl,
-        runWarnings: lighthouseRunWarnings,
-        runtimeError: Runner.getArtifactRuntimeError(artifacts),
         audits: auditResultsById,
         configSettings: settings,
         categories,
         categoryGroups: runOpts.config.groups || undefined,
+        stackPacks: stackPacks.getStackPacks(artifacts.Stacks),
         timing: this._getTiming(artifacts),
         i18n: {
           rendererFormattedStrings: format.getRendererFormattedStrings(settings.locale),
           icuMessagePaths: {},
         },
-        stackPacks: stackPacks.getStackPacks(artifacts.Stacks),
       };
 
       // Replace ICU message references with localized strings; save replaced paths in lhr.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.0.0-dev.20211121",
+  "version": "9.1.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -108,7 +108,6 @@
     "@testing-library/preact": "^2.0.1",
     "@testing-library/preact-hooks": "^1.1.0",
     "@types/archiver": "^2.1.2",
-    "@types/browserify": "^12.0.36",
     "@types/chrome": "^0.0.154",
     "@types/configstore": "^4.0.0",
     "@types/cpy": "^5.1.0",
@@ -138,7 +137,6 @@
     "acorn": "^8.5.0",
     "angular": "^1.7.4",
     "archiver": "^3.0.0",
-    "browserify": "^17.0.0",
     "c8": "^7.4.0",
     "chalk": "^2.4.1",
     "chrome-devtools-frontend": "1.0.922924",
@@ -181,8 +179,8 @@
     "tabulator-tables": "^4.9.3",
     "terser": "^5.3.8",
     "ts-jest": "^27.0.4",
-    "typed-query-selector": "^2.4.0",
-    "typescript": "4.4.3",
+    "typed-query-selector": "^2.6.1",
+    "typescript": "^4.5.2",
     "wait-for-expect": "^3.0.2",
     "webtreemap-cdt": "^3.2.1"
   },
@@ -198,7 +196,7 @@
     "jpeg-js": "^0.4.1",
     "js-library-detector": "^6.4.0",
     "lighthouse-logger": "^1.3.0",
-    "lighthouse-stack-packs": "^1.5.0",
+    "lighthouse-stack-packs": "^1.6.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",

package/report/generator/file-namer.js

@@ -43,4 +43,15 @@ function getLhrFilenamePrefix(lhr) {
   return getFilenamePrefix(hostname, lhr.fetchTime);
 }
 
-module.exports = {getLhrFilenamePrefix, getFilenamePrefix};
+/**
+ * Generate a filenamePrefix of name_YYYY-MM-DD_HH-MM-SS.
+ * @param {{name: string, steps: Array<{lhr: {fetchTime: string}}>}} flowResult
+ * @return {string}
+ */
+function getFlowResultFilenamePrefix(flowResult) {
+  const lhr = flowResult.steps[0].lhr;
+  const name = flowResult.name.replace(/\s/g, '-');
+  return getFilenamePrefix(name, lhr.fetchTime);
+}
+
+module.exports = {getLhrFilenamePrefix, getFilenamePrefix, getFlowResultFilenamePrefix};

package/report/generator/flow-report-assets.js

@@ -9,12 +9,13 @@ const fs = require('fs');
 
 /* eslint-disable max-len */
 const FLOW_REPORT_TEMPLATE = fs.readFileSync(`${__dirname}/../../flow-report/assets/standalone-flow-template.html`, 'utf8');
+const REGULAR_REPORT_CSS = fs.readFileSync(__dirname + '/../assets/styles.css', 'utf8');
 const FLOW_REPORT_CSS = fs.readFileSync(`${__dirname}/../../flow-report/assets/styles.css`, 'utf8');
 const FLOW_REPORT_JAVASCRIPT = fs.readFileSync(`${__dirname}/../../dist/report/flow.js`, 'utf8');
 /* eslint-enable max-len */
 
 module.exports = {
   FLOW_REPORT_TEMPLATE,
-  FLOW_REPORT_CSS,
+  FLOW_REPORT_CSS: [REGULAR_REPORT_CSS, FLOW_REPORT_CSS].join('\n'),
   FLOW_REPORT_JAVASCRIPT,
 };

package/report/generator/report-assets.js

@@ -12,15 +12,12 @@ const flowReportAssets = require('./flow-report-assets.js');
 const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/../assets/standalone-template.html',
     'utf8');
 const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../../dist/report/standalone.js', 'utf8');
-const REPORT_CSS = fs.readFileSync(__dirname + '/../assets/styles.css', 'utf8');
 
-// Changes to this export interface should be reflected in build/build-dt-report-resources.js
-// and clients/devtools-report-assets.js
 module.exports = {
   REPORT_TEMPLATE,
   REPORT_JAVASCRIPT,
-  REPORT_CSS,
   // Flow report assets are not needed for every bundle.
-  // Ignoring flow-report-assets.js (e.g. `browserify.ignore`) will remove the flow assets from the bundle.
+  // Replacing/ignoring flow-report-assets.js (e.g. `rollupPlugins.shim`) will
+  // remove the flow assets from the bundle.
   ...flowReportAssets,
 };

package/report/generator/report-generator.js

@@ -70,7 +70,6 @@ class ReportGenerator {
       {search: '%%LIGHTHOUSE_FLOW_JSON%%', replacement: sanitizedJson},
       {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: htmlReportAssets.FLOW_REPORT_JAVASCRIPT},
       {search: '/*%%LIGHTHOUSE_FLOW_CSS%%*/', replacement: htmlReportAssets.FLOW_REPORT_CSS},
-      {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: htmlReportAssets.REPORT_CSS},
       /* eslint-enable max-len */
     ]);
   }

package/report/renderer/api.js

@@ -63,4 +63,18 @@ function convertMarkdownCodeSnippets(markdownText) {
   return dom.convertMarkdownCodeSnippets(markdownText);
 }
 
-export {renderReport, renderCategoryScore, saveFile, convertMarkdownCodeSnippets};
+/**
+ * @return {DocumentFragment}
+ */
+function createStylesElement() {
+  const dom = new DOM(document, document.documentElement);
+  return dom.createComponent('styles');
+}
+
+export {
+  renderReport,
+  renderCategoryScore,
+  saveFile,
+  convertMarkdownCodeSnippets,
+  createStylesElement,
+};

package/report/renderer/report-renderer.js

@@ -29,6 +29,7 @@ import {PerformanceCategoryRenderer} from './performance-category-renderer.js';
 import {PwaCategoryRenderer} from './pwa-category-renderer.js';
 import {Util} from './util.js';
 
+
 export class ReportRenderer {
   /**
    * @param {DOM} dom
@@ -322,7 +323,9 @@ export class ReportRenderer {
     categoryRenderer.injectFinalScreenshot(categories, report.audits, scoreScale);
 
     const reportFragment = this._dom.createFragment();
-    reportFragment.append(this._dom.createComponent('styles'));
+    if (!this._opts.omitGlobalStyles) {
+      reportFragment.append(this._dom.createComponent('styles'));
+    }
 
     if (!this._opts.omitTopbar) {
       reportFragment.appendChild(this._renderReportTopbar(report));

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

@@ -154,7 +154,7 @@ export class ReportUIFeatures {
     if (this._topbar) {
       this._topbar.resetUIState();
     }
-    return `<!doctype html><body>${this._dom.rootEl.outerHTML}`;
+    return `<!doctype html><body style="margin: 0">${this._dom.rootEl.outerHTML}`;
   }
 
   /**

package/report/renderer/swap-locale-feature.js

@@ -53,13 +53,8 @@ export class SwapLocaleFeature {
       optionEl.value = locale;
       if (locale === currentLocale) optionEl.selected = true;
 
-      // @ts-expect-error: waiting for typescript 4.5. Might need to add "ES2020.Intl"
-      // to tsconfig libs.
-      // https://github.com/microsoft/TypeScript/pull/44022#issuecomment-915087098
       if (window.Intl && Intl.DisplayNames) {
-        // @ts-expect-error
         const currentLocaleDisplay = new Intl.DisplayNames([currentLocale], {type: 'language'});
-        // @ts-expect-error
         const optionLocaleDisplay = new Intl.DisplayNames([locale], {type: 'language'});
 
         const optionLocaleName = optionLocaleDisplay.of(locale);

package/report/test/clients/bundle-test.js

@@ -30,6 +30,7 @@ describe('lighthouseRenderer bundle', () => {
 
     global.window = global.self = window;
     global.window.requestAnimationFrame = fn => fn();
+    global.HTMLInputElement = window.HTMLInputElement;
     // Stub out matchMedia for Node.
     global.self.matchMedia = function() {
       return {
@@ -44,9 +45,9 @@ describe('lighthouseRenderer bundle', () => {
 
   afterAll(() => {
     global.window = global.self = undefined;
+    global.HTMLInputElement = undefined;
   });
 
-
   it('renders an LHR to DOM', () => {
     const lhr = /** @type {LH.Result} */ JSON.parse(sampleResultsStr);
     const reportContainer = document.body;
@@ -58,7 +59,6 @@ describe('lighthouseRenderer bundle', () => {
     const features = new lighthouseRenderer.ReportUIFeatures(renderer._dom);
     features.initFeatures(lhr);
 
-
     // Check that the report exists and has some content.
     expect(reportContainer instanceof document.defaultView.Element).toBeTruthy();
     expect(reportContainer.outerHTML.length).toBeGreaterThan(50000);

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

@@ -60,7 +60,6 @@ describe('ReportUIFeatures', () => {
 
     global.HTMLElement = document.window.HTMLElement;
     global.HTMLInputElement = document.window.HTMLInputElement;
-    global.HTMLInputElement = document.window.HTMLInputElement;
 
     global.window = document.window;
     global.window.requestAnimationFrame = fn => fn();

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

@@ -17,6 +17,8 @@ declare module Renderer {
 
     /** Disable the topbar UI component */
     omitTopbar?: boolean;
+    /** Prevent injection of report styles. Set to true if these styles are already included by the environment. */
+    omitGlobalStyles?: boolean;
     /**
      * Convert report anchor links to a different format.
      * Flow report uses this to convert `#seo` to `#index=0&anchor=seo`.

package/shared/localization/locales/ar-XB.json

@@ -1292,9 +1292,6 @@
   "lighthouse-core/audits/seo/canonical.js | explanationConflict": {
     "message": "‏‮Multiple‬‏ ‏‮conflicting‬‏ ‏‮URLs‬‏ ({urlList})"
   },
-  "lighthouse-core/audits/seo/canonical.js | explanationDifferentDomain": {
-    "message": "‏‮Points‬‏ ‏‮to‬‏ ‏‮a‬‏ ‏‮different‬‏ ‏‮domain‬‏ ({url})"
-  },
   "lighthouse-core/audits/seo/canonical.js | explanationInvalid": {
     "message": "‏‮Invalid‬‏ ‏‮URL‬‏ ({url})"
   },