lighthouse 8.0.0-dev.20210709 → 8.0.0

package/lighthouse-core/lib/tracehouse/trace-processor.js

@@ -16,8 +16,10 @@
  * 4. Return all those items in one handy bundle.
  */
 
-/** @typedef {Omit<LH.Artifacts.NavigationTraceTimes, 'firstContentfulPaintAllFrames'|'traceEnd'>} TraceNavigationTimesForFrame */
-/** @typedef {'lastNavigationStart'|'firstResourceSendRequest'|'lighthouseMarker'|'auto'} TimeOriginDeterminationMethod */
+/** @typedef {Omit<LH.Artifacts.TraceTimes, 'firstContentfulPaint'|'firstContentfulPaintAllFrames'> & {firstContentfulPaint?: number, firstContentfulPaintAllFrames?: number}} TraceTimesWithoutFCP */
+/** @typedef {Omit<TraceTimesWithoutFCP, 'traceEnd'>} TraceTimesWithoutFCPAndTraceEnd */
+/** @typedef {Omit<LH.Artifacts.TraceOfTab, 'firstContentfulPaintEvt'|'firstContentfulPaintAllFramesEvt'|'timings'|'timestamps'> & {timings: TraceTimesWithoutFCP, timestamps: TraceTimesWithoutFCP, firstContentfulPaintEvt?: LH.Artifacts.TraceOfTab['firstContentfulPaintEvt'], firstContentfulPaintAllFramesEvt?: LH.Artifacts.TraceOfTab['largestContentfulPaintAllFramesEvt']}} TraceOfTabWithoutFCP */
+/** @typedef {'lastNavigationStart'|'firstResourceSendRequest'} TimeOriginDeterminationMethod */
 /** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'FrameCommittedInBrowser', args: {data: {frame: string, url: string, parent?: string}}}} FrameCommittedEvent */
 /** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'largestContentfulPaint::Invalidate'|'largestContentfulPaint::Candidate', args: {data?: {size?: number}, frame: string}}} LCPEvent */
 /** @typedef {Omit<LH.TraceEvent, 'name'|'args'> & {name: 'largestContentfulPaint::Candidate', args: {data: {size: number}, frame: string}}} LCPCandidateEvent */
@@ -39,10 +41,6 @@ const SCHEDULABLE_TASK_TITLE_ALT2 = 'ThreadControllerImpl::DoWork';
 const SCHEDULABLE_TASK_TITLE_ALT3 = 'TaskQueueManager::ProcessTaskFromWorkQueue';
 
 class TraceProcessor {
-  static get TIMESPAN_MARKER_ID() {
-    return '__lighthouseTimespanStart__';
-  }
-
   /**
    * @return {Error}
    */
@@ -64,20 +62,6 @@ class TraceProcessor {
     return new Error('No tracingStartedInBrowser event found');
   }
 
-  /**
-   * @return {Error}
-   */
-  static createNoFirstContentfulPaintError() {
-    return new Error('No FirstContentfulPaint event found');
-  }
-
-  /**
-   * @return {Error}
-   */
-  static createNoLighthouseMarkerError() {
-    return new Error('No Lighthouse timespan marker event found');
-  }
-
   /**
    * Returns true if the event is a navigation start event of a document whose URL seems valid.
    *
@@ -391,21 +375,21 @@ class TraceProcessor {
   }
 
   /**
-   * Provides the top level events on the main thread with timestamps in ms relative to timeOrigin.
+   * Provides the top level events on the main thread with timestamps in ms relative to navigation
    * start.
-   * @param {LH.Artifacts.ProcessedTrace} trace
+   * @param {LH.Artifacts.TraceOfTab} tabTrace
    * @param {number=} startTime Optional start time (in ms relative to timeOrigin) of range of interest. Defaults to 0.
    * @param {number=} endTime Optional end time (in ms relative to timeOrigin) of range of interest. Defaults to trace end.
    * @return {Array<ToplevelEvent>}
    */
-  static getMainThreadTopLevelEvents(trace, startTime = 0, endTime = Infinity) {
+  static getMainThreadTopLevelEvents(tabTrace, startTime = 0, endTime = Infinity) {
     const topLevelEvents = [];
     // note: mainThreadEvents is already sorted by event start
-    for (const event of trace.mainThreadEvents) {
+    for (const event of tabTrace.mainThreadEvents) {
       if (!this.isScheduleableTask(event) || !event.dur) continue;
 
-      const start = (event.ts - trace.timeOriginEvt.ts) / 1000;
-      const end = (event.ts + event.dur - trace.timeOriginEvt.ts) / 1000;
+      const start = (event.ts - tabTrace.timeOriginEvt.ts) / 1000;
+      const end = (event.ts + event.dur - tabTrace.timeOriginEvt.ts) / 1000;
       if (start > endTime || end < startTime) continue;
 
       topLevelEvents.push({
@@ -592,10 +576,10 @@ class TraceProcessor {
    * in milliseconds since the time origin in addition to the standard microsecond monotonic timestamps.
    * @param {LH.Trace} trace
    * @param {{timeOriginDeterminationMethod?: TimeOriginDeterminationMethod}} [options]
-   * @return {LH.Artifacts.ProcessedTrace}
+   * @return {TraceOfTabWithoutFCP}
   */
-  static processTrace(trace, options) {
-    const {timeOriginDeterminationMethod = 'auto'} = options || {};
+  static computeTraceOfTab(trace, options) {
+    const {timeOriginDeterminationMethod = 'lastNavigationStart'} = options || {};
 
     // Parse the trace for our key events and sort them by timestamp. Note: sort
     // *must* be stable to keep events correctly nested.
@@ -654,6 +638,17 @@ class TraceProcessor {
       timeOriginDeterminationMethod
     );
 
+    // Compute the key frame timings for the main frame.
+    const frameTimings = this.computeKeyTimingsForFrame(frameEvents, {timeOriginEvt});
+
+    // Compute FCP for all frames.
+    const fcpAllFramesEvt = frameTreeEvents.find(
+      e => e.name === 'firstContentfulPaint' && e.ts > timeOriginEvt.ts
+    );
+
+    // Compute LCP for all frames.
+    const lcpAllFramesEvt = this.computeValidLCPAllFrames(frameTreeEvents, timeOriginEvt).lcp;
+
     // Subset all trace events to just our tab's process (incl threads other than main)
     // stable-sort events to keep them correctly nested.
     const processEvents = TraceProcessor
@@ -665,81 +660,41 @@ class TraceProcessor {
     // Ensure our traceEnd reflects all page activity.
     const traceEnd = this.computeTraceEnd(trace.traceEvents, timeOriginEvt);
 
+    /** @param {number|undefined} ts */
+    const maybeGetTiming = (ts) => ts === undefined ? undefined : (ts - timeOriginEvt.ts) / 1000;
     // This could be much more concise with object spread, but the consensus is that explicitness is
     // preferred over brevity here.
     return {
       frames,
       mainThreadEvents,
-      frameEvents,
       frameTreeEvents,
       processEvents,
       mainFrameIds,
-      timeOriginEvt,
-      timings: {
-        timeOrigin: 0,
-        traceEnd: traceEnd.timing,
-      },
-      timestamps: {
-        timeOrigin: timeOriginEvt.ts,
-        traceEnd: traceEnd.timestamp,
-      },
-    };
-  }
-
-  /**
-   * Finds key navigation trace events and computes timings of events in milliseconds since the time
-   * origin in addition to the standard microsecond monotonic timestamps.
-   * @param {LH.Artifacts.ProcessedTrace} processedTrace
-   * @return {LH.Artifacts.ProcessedNavigation}
-  */
-  static processNavigation(processedTrace) {
-    const {frameEvents, frameTreeEvents, timeOriginEvt, timings, timestamps} = processedTrace;
-
-    // Compute the key frame timings for the main frame.
-    const frameTimings = this.computeNavigationTimingsForFrame(frameEvents, {timeOriginEvt});
-
-    // Compute FCP for all frames.
-    const fcpAllFramesEvt = frameTreeEvents.find(
-      e => e.name === 'firstContentfulPaint' && e.ts > timeOriginEvt.ts
-    );
-
-    if (!fcpAllFramesEvt) {
-      throw this.createNoFirstContentfulPaintError();
-    }
-
-    // Compute LCP for all frames.
-    const lcpAllFramesEvt = this.computeValidLCPAllFrames(frameTreeEvents, timeOriginEvt).lcp;
-
-    /** @param {number} ts */
-    const getTiming = ts => (ts - timeOriginEvt.ts) / 1000;
-    /** @param {number=} ts */
-    const maybeGetTiming = (ts) => ts === undefined ? undefined : getTiming(ts);
-
-    return {
       timings: {
-        timeOrigin: timings.timeOrigin,
+        timeOrigin: frameTimings.timings.timeOrigin,
         firstPaint: frameTimings.timings.firstPaint,
         firstContentfulPaint: frameTimings.timings.firstContentfulPaint,
-        firstContentfulPaintAllFrames: getTiming(fcpAllFramesEvt.ts),
+        firstContentfulPaintAllFrames: maybeGetTiming(fcpAllFramesEvt && fcpAllFramesEvt.ts),
         firstMeaningfulPaint: frameTimings.timings.firstMeaningfulPaint,
         largestContentfulPaint: frameTimings.timings.largestContentfulPaint,
         largestContentfulPaintAllFrames: maybeGetTiming(lcpAllFramesEvt && lcpAllFramesEvt.ts),
+        traceEnd: traceEnd.timing,
         load: frameTimings.timings.load,
         domContentLoaded: frameTimings.timings.domContentLoaded,
-        traceEnd: timings.traceEnd,
       },
       timestamps: {
-        timeOrigin: timestamps.timeOrigin,
+        timeOrigin: frameTimings.timestamps.timeOrigin,
         firstPaint: frameTimings.timestamps.firstPaint,
         firstContentfulPaint: frameTimings.timestamps.firstContentfulPaint,
-        firstContentfulPaintAllFrames: fcpAllFramesEvt.ts,
+        firstContentfulPaintAllFrames: fcpAllFramesEvt && fcpAllFramesEvt.ts,
         firstMeaningfulPaint: frameTimings.timestamps.firstMeaningfulPaint,
         largestContentfulPaint: frameTimings.timestamps.largestContentfulPaint,
         largestContentfulPaintAllFrames: lcpAllFramesEvt && lcpAllFramesEvt.ts,
+        traceEnd: traceEnd.timestamp,
         load: frameTimings.timestamps.load,
         domContentLoaded: frameTimings.timestamps.domContentLoaded,
-        traceEnd: timestamps.traceEnd,
       },
+      timeOriginEvt: frameTimings.timeOriginEvt,
       firstPaintEvt: frameTimings.firstPaintEvt,
       firstContentfulPaintEvt: frameTimings.firstContentfulPaintEvt,
       firstContentfulPaintAllFramesEvt: fcpAllFramesEvt,
@@ -791,21 +746,6 @@ class TraceProcessor {
    * @return {LH.TraceEvent}
    */
   static computeTimeOrigin(traceEventSubsets, method) {
-    const lastNavigationStart = () => {
-      // Our time origin will be the last frame navigation in the trace
-      const frameEvents = traceEventSubsets.frameEvents;
-      return frameEvents.filter(this._isNavigationStartOfInterest).pop();
-    };
-
-    const lighthouseMarker = () => {
-      const frameEvents = traceEventSubsets.keyEvents;
-      return frameEvents.find(
-        evt =>
-          evt.name === 'clock_sync' &&
-          evt.args.sync_id === TraceProcessor.TIMESPAN_MARKER_ID
-      );
-    };
-
     switch (method) {
       case 'firstResourceSendRequest': {
         // Our time origin will be the timestamp of the first request that's sent in the frame.
@@ -818,20 +758,12 @@ class TraceProcessor {
         return fetchStart;
       }
       case 'lastNavigationStart': {
-        const navigationStart = lastNavigationStart();
+        // Our time origin will be the last frame navigation in the trace
+        const frameEvents = traceEventSubsets.frameEvents;
+        const navigationStart = frameEvents.filter(this._isNavigationStartOfInterest).pop();
         if (!navigationStart) throw this.createNoNavstartError();
         return navigationStart;
       }
-      case 'lighthouseMarker': {
-        const marker = lighthouseMarker();
-        if (!marker) throw this.createNoLighthouseMarkerError();
-        return marker;
-      }
-      case 'auto': {
-        const marker = lighthouseMarker() || lastNavigationStart();
-        if (!marker) throw this.createNoNavstartError();
-        return marker;
-      }
     }
   }
 
@@ -841,7 +773,7 @@ class TraceProcessor {
    * @param {Array<LH.TraceEvent>} frameEvents
    * @param {{timeOriginEvt: LH.TraceEvent}} options
   */
-  static computeNavigationTimingsForFrame(frameEvents, options) {
+  static computeKeyTimingsForFrame(frameEvents, options) {
     const {timeOriginEvt} = options;
 
     // Find our first paint of this frame
@@ -852,10 +784,6 @@ class TraceProcessor {
       e => e.name === 'firstContentfulPaint' && e.ts > timeOriginEvt.ts
     );
 
-    if (!firstContentfulPaint) {
-      throw this.createNoFirstContentfulPaintError();
-    }
-
     // fMP will follow at/after the FP
     let firstMeaningfulPaint = frameEvents.find(
       e => e.name === 'firstMeaningfulPaint' && e.ts > timeOriginEvt.ts
@@ -887,26 +815,24 @@ class TraceProcessor {
 
     /** @param {{ts: number}=} event */
     const getTimestamp = (event) => event && event.ts;
-    /** @type {TraceNavigationTimesForFrame} */
+    /** @type {TraceTimesWithoutFCPAndTraceEnd} */
     const timestamps = {
       timeOrigin: timeOriginEvt.ts,
       firstPaint: getTimestamp(firstPaint),
-      firstContentfulPaint: firstContentfulPaint.ts,
+      firstContentfulPaint: getTimestamp(firstContentfulPaint),
       firstMeaningfulPaint: getTimestamp(firstMeaningfulPaint),
       largestContentfulPaint: getTimestamp(lcpResult.lcp),
       load: getTimestamp(load),
       domContentLoaded: getTimestamp(domContentLoaded),
     };
 
-    /** @param {number} ts */
-    const getTiming = ts => (ts - timeOriginEvt.ts) / 1000;
     /** @param {number=} ts */
-    const maybeGetTiming = (ts) => ts === undefined ? undefined : getTiming(ts);
-    /** @type {TraceNavigationTimesForFrame} */
+    const maybeGetTiming = (ts) => ts === undefined ? undefined : (ts - timeOriginEvt.ts) / 1000;
+    /** @type {TraceTimesWithoutFCPAndTraceEnd} */
     const timings = {
       timeOrigin: 0,
       firstPaint: maybeGetTiming(timestamps.firstPaint),
-      firstContentfulPaint: getTiming(timestamps.firstContentfulPaint),
+      firstContentfulPaint: maybeGetTiming(timestamps.firstContentfulPaint),
       firstMeaningfulPaint: maybeGetTiming(timestamps.firstMeaningfulPaint),
       largestContentfulPaint: maybeGetTiming(timestamps.largestContentfulPaint),
       load: maybeGetTiming(timestamps.load),

package/lighthouse-core/lib/url-shim.js

@@ -9,7 +9,7 @@
  * URL shim so we keep our code DRY
  */
 
-const Util = require('../../report/renderer/util.js');
+const Util = require('../report/html/renderer/util.js');
 
 /** @typedef {import('./network-request.js')} NetworkRequest */
 
@@ -202,7 +202,7 @@ class URLShim extends URL {
   /**
    * Use `NetworkRequest.isNonNetworkRequest(req)` if working with a request.
    * Note: the `protocol` field from CDP can be 'h2', 'http', (not 'https'!) or it'll be url's scheme.
-   *   https://source.chromium.org/chromium/chromium/src/+/main:content/browser/devtools/protocol/network_handler.cc;l=598-611;drc=56d4a9a9deb30be73adcee8737c73bcb2a5ab64f
+   *   https://source.chromium.org/chromium/chromium/src/+/master:content/browser/devtools/protocol/network_handler.cc;l=598-611;drc=56d4a9a9deb30be73adcee8737c73bcb2a5ab64f
    * However, a `new URL(href).protocol` has a colon suffix.
    *   https://url.spec.whatwg.org/#dom-url-protocol
    * A URL's `scheme` is specced as the `protocol` sans-colon, but isn't exposed on a URL object.
@@ -215,33 +215,6 @@ class URLShim extends URL {
     const urlScheme = protocol.includes(':') ? protocol.slice(0, protocol.indexOf(':')) : protocol;
     return NON_NETWORK_SCHEMES.includes(urlScheme);
   }
-
-  /**
-   * @param {string} src
-   * @return {string|undefined}
-   */
-  static guessMimeType(src) {
-    let url;
-    try {
-      url = new URL(src);
-    } catch {
-      return undefined;
-    }
-
-    if (url.protocol === 'data:') {
-      const match = url.pathname.match(/image\/(png|jpeg|svg\+xml|webp|gif|avif)(?=;)/);
-      if (!match) return undefined;
-      return match[0];
-    }
-
-    const match = url.pathname.toLowerCase().match(/\.(png|jpeg|jpg|svg|webp|gif|avif)$/);
-    if (!match) return undefined;
-
-    const ext = match[1];
-    if (ext === 'svg') return 'image/svg+xml';
-    if (ext === 'jpg') return 'image/jpeg';
-    return `image/${ext}`;
-  }
 }
 
 URLShim.URL = URL;

package/lighthouse-core/report/html/html-report-assets.js

@@ -0,0 +1,38 @@
+/**
+ * @license Copyright 2018 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const fs = require('fs');
+
+const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/report-template.html', 'utf8');
+const REPORT_JAVASCRIPT = [
+  fs.readFileSync(__dirname + '/renderer/util.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/dom.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/details-renderer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/crc-details-renderer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/snippet-renderer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/element-screenshot-renderer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/../../lib/file-namer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/logger.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/report-ui-features.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/category-renderer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/performance-category-renderer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/pwa-category-renderer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/report-renderer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/i18n.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/text-encoding.js', 'utf8'),
+].join(';\n');
+const REPORT_CSS = fs.readFileSync(__dirname + '/report-styles.css', 'utf8');
+const REPORT_TEMPLATES = fs.readFileSync(__dirname + '/templates.html', '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_TEMPLATES,
+  REPORT_JAVASCRIPT,
+  REPORT_CSS,
+};

package/{report/README.md → lighthouse-core/report/html/readme.md}

@@ -1,17 +1,21 @@
 # Lighthouse HTML Report Renderer
 
+[Source on Github](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html)
+
+
 ## Overview
 
-Lighthouse has an independent report renderer that takes the **LHR** (Lighthouse Result object) and creates a DOM tree of the report. It's all done client-side.
+Lighthouse has an indepedent report renderer that takes the **LHR** (Lighthouse Result object) and creates a DOM tree of the report. It's all done client-side.
 
 Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.3.html`](https://googlechrome.github.io/lighthouse/reports/dbwtest-3.0.3.html) _(View the source! 📖)_
 
 ### Report Renderer components
 
-1. [`report/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/report/report-generator.js) is the entry point for generating the HTML from Node. It compiles together the HTML string with everything required within it.
+1. [`lighthouse-core/report/report-generator.js`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/report-generator.js) is the current entry point. It compiles together the HTML string with everything required within it.
    - It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses a browserify transform that takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
-1. [`report/renderer`](https://github.com/GoogleChrome/lighthouse/tree/master/report/renderer) are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.
-1. [`report/assets/standalone-template.html`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/report-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities.
+1. [`lighthouse-core/report/html/`](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html) has everything required to create the HTML report.
+1. [`lighthouse-core/report/html/renderer`](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/report/html/renderer) are all client-side JS files. They transform an LHR object into a report DOM tree. They are all executed within the browser.
+1. [`lighthouse-core/report/html/report-template.html`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/report-template.html) is where the client-side build of the DOM report is typically kicked off ([with these four lines](https://github.com/GoogleChrome/lighthouse/blob/eda3a3e2e271249f261655f9504fd542d6acf0f8/lighthouse-core/report/html/report-template.html#L29-L33)) However, see _Current Uses.._ below for more possibilities.
 
 
 ### Data Hydration
@@ -19,8 +23,8 @@ Example standalone HTML report, delivered by the CLI: [`dbwtest-3.0.3.html`](htt
 
 Examples:
 
-* [`templates.html`](https://github.com/GoogleChrome/lighthouse/blob/master/report/assets/templates.html)
-* [`performance-category-renderer.js`](https://github.com/GoogleChrome/lighthouse/blob/master/report/renderer/performance-category-renderer.js)
+* [`templates.html`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/templates.html)
+* [`performance-category-renderer.js`](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/renderer/performance-category-renderer.js)
 
 ### Current uses of report renderer
 
@@ -29,4 +33,4 @@ The renderer was designed to be portable across various environments.
 1. _LH Chrome Extension_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and transforms it [into a blob url in the background page](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-extension/app/src/lighthouse-ext-background.js#L129-L143).
 1. _LH CLI_: It [creates the HTML as the runner finishes up](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-core/runner.js#L137-L138) and [saves it to disk](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-cli/printer.js#L71-L92).
 1. _Chrome DevTools Audits Panel_: The `renderer` files are rolled into the Chromium repo, and they execute within the DevTools context. The audits panel [receives the LHR object from a WebWorker](https://github.com/ChromeDevTools/devtools-frontend/blob/aa1532c2f8bdc37c9886255644ed90ad01c61c77/front_end/audits/AuditsProtocolService.js#L27-L35), through a `postMessage` and then runs [the renderer within DevTools UI](https://github.com/ChromeDevTools/devtools-frontend/blob/aa1532c2f8bdc37c9886255644ed90ad01c61c77/front_end/audits/AuditsPanel.js#L123-L157), making a few [simplifications](https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/audits/AuditsReportRenderer.js).
-1. _Hosted [Lighthouse Viewer](https://googlechrome.github.io/lighthouse/viewer/)_: It's a webapp that has the renderer (along with some [additional features](https://github.com/GoogleChrome/lighthouse/blob/master/report/renderer/report-ui-features.js)) all compiled into a [`viewer.js`](https://googlechrome.github.io/lighthouse/viewer/src/viewer.js) file. Same [basic approach](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-viewer/app/src/lighthouse-report-viewer.js#L116-L117) there.
+1. _Hosted [Lighthouse Viewer](https://googlechrome.github.io/lighthouse/viewer/)_: It's a webapp that has the renderer (along with some [additional features](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/report/html/renderer/report-ui-features.js)) all compiled into a [`viewer.js`](https://googlechrome.github.io/lighthouse/viewer/src/viewer.js) file. Same [basic approach](https://github.com/GoogleChrome/lighthouse/blob/440155cdda377c458c0efce006bc3a69ce2a351c/lighthouse-viewer/app/src/lighthouse-report-viewer.js#L116-L117) there.

package/{report → lighthouse-core/report/html}/renderer/details-renderer.js

@@ -355,7 +355,7 @@ class DetailsRenderer {
    * @return {LH.Audit.Details.OpportunityColumnHeading['subItemsHeading']}
    */
   _getCanonicalizedsubItemsHeading(subItemsHeading, parentHeading) {
-    // Low-friction way to prevent committing a falsy key (which is never allowed for
+    // Low-friction way to prevent commiting a falsy key (which is never allowed for
     // a subItemsHeading) from passing in CI.
     if (!subItemsHeading.key) {
       // eslint-disable-next-line no-console

package/{report → lighthouse-core/report/html}/renderer/i18n.js

@@ -99,7 +99,7 @@ class I18n {
   }
 
   /**
-   * Format bytes with a constant number of fractional digits, i.e. for a granularity of 0.1, 10 becomes '10.0'
+   * Format bytes with a constant number of fractional digits, i.e for a granularity of 0.1, 10 becomes '10.0'
    * @param {number} granularity Controls how coarse the displayed value is
    * @return {Intl.NumberFormat}
    */

package/{report → lighthouse-core/report/html}/renderer/report-ui-features.js

@@ -911,7 +911,7 @@ class DropDown {
   /**
    * @param {Array<Node>} allNodes
    * @param {?HTMLElement=} startNode
-   * @return {HTMLElement}
+   * @returns {HTMLElement}
    */
   _getNextSelectableNode(allNodes, startNode) {
     const nodes = allNodes.filter(/** @return {node is HTMLElement} */ (node) => {
@@ -942,7 +942,7 @@ class DropDown {
 
   /**
    * @param {?HTMLElement=} startEl
-   * @return {HTMLElement}
+   * @returns {HTMLElement}
    */
   _getNextMenuItem(startEl) {
     const nodes = Array.from(this._menuEl.childNodes);
@@ -951,7 +951,7 @@ class DropDown {
 
   /**
    * @param {?HTMLElement=} startEl
-   * @return {HTMLElement}
+   * @returns {HTMLElement}
    */
   _getPreviousMenuItem(startEl) {
     const nodes = Array.from(this._menuEl.childNodes).reverse();

package/{report → lighthouse-core/report/html}/renderer/util.js

@@ -375,7 +375,7 @@ class Util {
   /**
    * Returns a primary domain for provided hostname (e.g. www.example.com -> example.com).
    * @param {string|URL} url hostname or URL object
-   * @return {string}
+   * @returns {string}
    */
   static getRootDomain(url) {
     const hostname = Util.createOrReturnURL(url).hostname;
@@ -581,7 +581,7 @@ Util.UIStrings = {
 
   /** This label is for a checkbox above a table of items loaded by a web page. The checkbox is used to show or hide third-party (or "3rd-party") resources in the table, where "third-party resources" refers to items loaded by a web page from URLs that aren't controlled by the owner of the web page. */
   thirdPartyResourcesLabel: 'Show 3rd-party resources',
-  /** This label is for a button that opens a new tab to a webapp called "Treemap", which is a nested visual representation of a heierarchy of data related to the reports (script bytes and coverage, resource breakdown, etc.) */
+  /** This label is for a button that opens a new tab to a webapp called "Treemap", which is a nested visual representation of a heierarchy of data releated to the reports (script bytes and coverage, resource breakdown, etc.) */
   viewTreemapLabel: 'View Treemap',
 
   /** Option in a dropdown menu that opens a small, summary report in a print dialog.  */
@@ -596,7 +596,7 @@ Util.UIStrings = {
   dropdownSaveJSON: 'Save as JSON',
   /** Option in a dropdown menu that opens the current report in the Lighthouse Viewer Application. */
   dropdownViewer: 'Open in Viewer',
-  /** Option in a dropdown menu that saves the current report as a new GitHub Gist. */
+  /** Option in a dropdown menu that saves the current report as a new Github Gist. */
   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',
@@ -624,7 +624,7 @@ Util.UIStrings = {
   /** Label for a row in a table that shows the version of the Axe library used. Example row values: 2.1.0, 3.2.3 */
   runtimeSettingsAxeVersion: 'Axe version',
 
-  /** Label for button to create an issue against the Lighthouse GitHub project. */
+  /** Label for button to create an issue against the Lighthouse Github project. */
   footerIssue: 'File an issue',
 
   /** Descriptive explanation for emulation setting when no device emulation is set. */
@@ -645,6 +645,3 @@ if (typeof module !== 'undefined' && module.exports) {
 } else {
   self.Util = Util;
 }
-
-// TODO(esmodules): export these strings too, then collect-strings will work when this file is esm.
-// export const UIStrings = Util.UIStrings;

package/{report/assets/standalone-template.html → lighthouse-core/report/html/report-template.html}

@@ -31,10 +31,50 @@ limitations under the License.
 
   <div id="lh-log"></div>
 
-  <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
   <script>%%LIGHTHOUSE_JAVASCRIPT%%
   //# sourceURL=compiled-reportrenderer.js
   </script>
+  <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
   <script>console.log('window.__LIGHTHOUSE_JSON__', __LIGHTHOUSE_JSON__);</script>
+  <script>
+    function __initLighthouseReport__() {
+      const dom = new DOM(document);
+      const renderer = new ReportRenderer(dom);
+
+      const container = document.querySelector('main');
+      renderer.renderReport(window.__LIGHTHOUSE_JSON__, container);
+
+      // Hook in JS features and page-level event listeners after the report
+      // is in the document.
+      const features = new ReportUIFeatures(dom);
+      features.initFeatures(window.__LIGHTHOUSE_JSON__);
+    }
+    window.addEventListener('DOMContentLoaded', __initLighthouseReport__);
+
+    document.addEventListener('lh-analytics', e => {
+      if (window.ga) {
+        ga(e.detail.cmd, e.detail.fields);
+      }
+    });
+
+    document.addEventListener('lh-log', e => {
+      const logger = new Logger(document.querySelector('#lh-log'));
+
+      switch (e.detail.cmd) {
+        case 'log':
+          logger.log(e.detail.msg);
+          break;
+        case 'warn':
+          logger.warn(e.detail.msg);
+          break;
+        case 'error':
+          logger.error(e.detail.msg);
+          break;
+        case 'hide':
+          logger.hide();
+          break;
+      }
+    });
+  </script>
 </body>
 </html>

package/{report → lighthouse-core/report}/report-generator.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const htmlReportAssets = require('./report-assets.js');
+const htmlReportAssets = require('./html/html-report-assets.js');
 
 class ReportGenerator {
   /**

package/lighthouse-core/runner.js

@@ -18,7 +18,7 @@ const fs = require('fs');
 const path = require('path');
 const URL = require('./lib/url-shim.js');
 const Sentry = require('./lib/sentry.js');
-const generateReport = require('../report/report-generator.js').generateReport;
+const generateReport = require('./report/report-generator.js').generateReport;
 const LHError = require('./lib/lh-error.js');
 
 /** @typedef {import('./gather/connections/connection.js')} Connection */