Revert "DevTools: [Audits] Roll Lighthouse to v3.0-beta"

This reverts commit a745fe44.

Bug: 846551

Reason for revert: Suspected for failures in


* http/tests/devtools/audits2/audits2-limited-run.js
* http/tests/devtools/audits2/audits2-successful-run.js

since

https://ci.chromium.org/buildbot/chromium.webkit/WebKit%20Mac10.11%20%28dbg%29/16181

Original change's description:
> DevTools: [Audits] Roll Lighthouse to v3.0-beta
> 
> Bug: 772558, 846211
> Change-Id: I4f74ea0d4a84908d2e7c4ccfe7035ee421bdf023
> Reviewed-on: https://chromium-review.googlesource.com/1070532
> Commit-Queue: Paul Irish <paulirish@chromium.org>
> Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#561412}

TBR=pfeldman@chromium.org,paulirish@chromium.org,phulce@chromium.org

Change-Id: I71f125736ac908f37c3d90988b85de51f4fb283c
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 772558, 846211
Reviewed-on: https://chromium-review.googlesource.com/1073008Reviewed-by: Trent Apted <tapted@chromium.org>
Commit-Queue: Trent Apted <tapted@chromium.org>
Cr-Commit-Position: refs/heads/master@{#561735}

third_party/WebKit/LayoutTests/TestExpectations

@@ -2351,9 +2351,6 @@ crbug.com/467477 virtual/disable-spv175/fast/multicol/vertical-rl/nested-columns
 
 crbug.com/674225 [ Mac ] fast/replaced/input-radio-height-inside-auto-container.html [ Failure ]
 
-crbug.com/846211 [ Linux ] http/tests/devtools/audits2/audits2-limited-run.js [ Skip ]
-crbug.com/846211 [ Linux ] http/tests/devtools/audits2/audits2-successful-run.js [ Skip ]
-
 crbug.com/400841 media/video-canvas-draw.html [ Failure ]
 crbug.com/400841 virtual/video-surface-layer/media/video-canvas-draw.html [ Failure ]
 crbug.com/400829 media/video-object-fit.html [ Failure ]

third_party/WebKit/LayoutTests/http/tests/devtools/audits2/audits2-limited-run-expected.txt

@@ -12,23 +12,20 @@ Run audits: enabled visible
 
 =============== Lighthouse Results ===============
 bootup-time: true
+consistently-interactive: false
 critical-request-chains: true
 dom-size: true
-efficient-animated-content: false
-estimated-input-latency: true
-first-contentful-paint: true
-first-cpu-idle: true
-first-meaningful-paint: true
+estimated-input-latency: false
+first-interactive: false
+first-meaningful-paint: false
 font-display: true
-interactive: true
+link-blocking-first-paint: false
 mainthread-work-breakdown: true
-metrics: false
-network-requests: true
 offscreen-images: false
 redirects: false
-render-blocking-resources: false
 screenshot-thumbnails: false
-speed-index: false
+script-blocking-first-paint: false
+speed-index-metric: false
 time-to-first-byte: true
 total-byte-weight: true
 unminified-css: false
@@ -37,9 +34,8 @@ unused-css-rules: false
 user-timings: true
 uses-long-cache-ttl: false
 uses-optimized-images: false
-uses-rel-preconnect: false
 uses-rel-preload: false
+uses-request-compression: false
 uses-responsive-images: false
-uses-text-compression: false
 uses-webp-images: false
 

third_party/WebKit/LayoutTests/http/tests/devtools/audits2/audits2-limited-run.js

@@ -26,7 +26,7 @@
 
   Object.keys(results.audits).sort().forEach(auditName => {
     var audit = results.audits[auditName];
-    TestRunner.addResult(`${audit.id}: ${Boolean(audit.rawValue)}`);
+    TestRunner.addResult(`${audit.name}: ${Boolean(audit.rawValue)}`);
   });
 
   TestRunner.completeTest();

third_party/WebKit/LayoutTests/http/tests/devtools/audits2/audits2-successful-run-expected.txt

@@ -16,6 +16,7 @@ Initializing…
 Loading page & waiting for onload
 Retrieving trace
 Retrieving devtoolsLog and network records
+Retrieving: URL
 Retrieving: Scripts
 Retrieving: CSSUsage
 Retrieving: Viewport
@@ -43,7 +44,6 @@ Retrieving: MetaRobots
 Retrieving: Hreflang
 Retrieving: EmbeddedContent
 Retrieving: Canonical
-Retrieving: RobotsTxt
 Retrieving: Fonts
 Loading page & waiting for onload
 Retrieving devtoolsLog and network records
@@ -62,19 +62,18 @@ Evaluating: Registers a service worker
 Evaluating: Responds with a 200 when offline
 Evaluating: Has a `<meta name="viewport">` tag with `width` or `initial-scale`
 Evaluating: Contains some content when JavaScript is not available
-Evaluating: First Contentful Paint
-Evaluating: First Meaningful Paint
+Evaluating: First meaningful paint
 Evaluating: Page load is fast enough on 3G
-Evaluating: Speed Index
+Evaluating: Perceptual Speed Index
 Evaluating: Screenshot Thumbnails
 Evaluating: Estimated Input Latency
 Evaluating: No browser errors logged to the console
 Evaluating: Keep server response times low (TTFB)
-Evaluating: First CPU Idle
-Evaluating: Time to Interactive
+Evaluating: First Interactive (beta)
+Evaluating: Consistently Interactive (beta)
 Evaluating: User Timing marks and measures
 Evaluating: Critical Request Chains
-Evaluating: Avoid multiple page redirects
+Evaluating: Avoids page redirects
 Evaluating: User can be prompted to Install the Web App
 Evaluating: Configured for a custom splash screen
 Evaluating: Address bar matches brand colors
@@ -82,13 +81,10 @@ Evaluating: Manifest's `short_name` won't be truncated when displayed on homescr
 Evaluating: Content is sized correctly for the viewport
 Evaluating: Displays images with correct aspect ratio
 Evaluating: Avoids deprecated APIs
-Evaluating: Minimizes main thread work
+Evaluating: Main thread work breakdown
 Evaluating: JavaScript boot-up time
 Evaluating: Preload key requests
-Evaluating: Avoid multiple, costly round trips to any origin
 Evaluating: All text remains visible during webfont loads
-Evaluating: Network Requests
-Evaluating: Metrics
 Evaluating: Site works cross-browser
 Evaluating: Page transitions don't feel like they block on the network
 Evaluating: Each page has a URL
@@ -139,26 +135,26 @@ Evaluating: HTML5 landmark elements are used to improve navigation
 Evaluating: Visual order on the page follows DOM order
 Evaluating: Uses efficient cache policy on static assets
 Evaluating: Avoids enormous network payloads
-Evaluating: Defer offscreen images
-Evaluating: Eliminate render-blocking resources
+Evaluating: Offscreen images
 Evaluating: Minify CSS
 Evaluating: Minify JavaScript
-Evaluating: Defer unused CSS
+Evaluating: Unused CSS rules
 Evaluating: Serve images in next-gen formats
-Evaluating: Efficiently encode images
+Evaluating: Optimize images
 Evaluating: Enable text compression
 Evaluating: Properly size images
-Evaluating: Use video formats for animated content
 Evaluating: Avoids Application Cache
 Evaluating: Avoids an excessive DOM size
-Evaluating: Links to cross-origin destinations are safe
+Evaluating: Opens external anchors using `rel="noopener"`
 Evaluating: Avoids requesting the geolocation permission on page load
+Evaluating: Reduce render-blocking stylesheets
 Evaluating: Avoids `document.write()`
 Evaluating: Avoids Mutation Events in its own scripts
 Evaluating: Avoids front-end JavaScript libraries with known security vulnerabilities
 Evaluating: Avoids WebSQL DB
 Evaluating: Avoids requesting the notification permission on page load
 Evaluating: Allows users to paste into password fields
+Evaluating: Reduce render-blocking scripts
 Evaluating: Uses HTTP/2 for its own resources
 Evaluating: Uses passive listeners to improve scrolling performance
 Evaluating: Document has a meta description
@@ -166,7 +162,6 @@ Evaluating: Page has successful HTTP status code
 Evaluating: Document uses legible font sizes
 Evaluating: Links have descriptive text
 Evaluating: Page isn’t blocked from indexing
-Evaluating: robots.txt is valid
 Evaluating: Document has a valid `hreflang`
 Evaluating: Document avoids plugins
 Evaluating: Document has a valid `rel=canonical`
@@ -176,81 +171,78 @@ Generating results...
 
 =============== Lighthouse Results ===============
 URL: http://127.0.0.1:8000/devtools/resources/inspected-page.html
-Version: 3.0.0-beta.0
+Version: 2.9.1
 
 
-accesskeys: true
+accesskeys: false
 appcache-manifest: true
-aria-allowed-attr: true
-aria-required-attr: true
-aria-required-children: true
-aria-required-parent: true
-aria-roles: true
-aria-valid-attr: true
-aria-valid-attr-value: true
-audio-caption: true
+aria-allowed-attr: false
+aria-required-attr: false
+aria-required-children: false
+aria-required-parent: false
+aria-roles: false
+aria-valid-attr: false
+aria-valid-attr-value: false
+audio-caption: false
 bootup-time: true
-button-name: true
-bypass: true
+button-name: false
+bypass: false
 canonical: true
-color-contrast: true
+color-contrast: false
+consistently-interactive: false
 content-width: false
 critical-request-chains: true
 custom-controls-labels: false
 custom-controls-roles: false
-definition-list: true
+definition-list: false
 deprecations: true
-dlitem: true
+dlitem: false
 document-title: false
 dom-size: true
-duplicate-id: true
-efficient-animated-content: false
+duplicate-id: false
 errors-in-console: false
-estimated-input-latency: true
+estimated-input-latency: false
 external-anchors-use-rel-noopener: true
-first-contentful-paint: true
-first-cpu-idle: true
-first-meaningful-paint: true
+first-interactive: false
+first-meaningful-paint: false
 focus-traps: false
 focusable-controls: false
 font-display: true
 font-size: false
-frame-title: true
+frame-title: false
 geolocation-on-start: true
 heading-levels: false
 hreflang: true
 html-has-lang: false
-html-lang-valid: true
+html-lang-valid: false
 http-status-code: true
-image-alt: true
+image-alt: false
 image-aspect-ratio: true
-input-image-alt: true
-interactive: true
+input-image-alt: false
 is-crawlable: true
 is-on-https: true
-label: true
-layout-table: true
-link-name: true
+label: false
+layout-table: false
+link-blocking-first-paint: false
+link-name: false
 link-text: true
-list: true
-listitem: true
-load-fast-enough-for-pwa: true
+list: false
+listitem: false
+load-fast-enough-for-pwa: false
 logical-tab-order: false
 mainthread-work-breakdown: true
 managed-focus: false
 manifest-short-name-length: false
 meta-description: false
-meta-refresh: true
-meta-viewport: true
-metrics: false
+meta-refresh: false
+meta-viewport: false
 mobile-friendly: false
-network-requests: true
 no-document-write: true
 no-mutation-events: true
 no-vulnerable-libraries: true
 no-websql: true
 notification-on-start: true
-object-alt: true
+object-alt: false
 offscreen-content-hidden: false
 offscreen-images: false
 password-inputs-can-be-pasted-into: true
@@ -260,16 +252,15 @@ pwa-each-page-has-url: false
 pwa-page-transitions: false
 redirects: false
 redirects-http: false
-render-blocking-resources: false
-robots-txt: true
 screenshot-thumbnails: false
+script-blocking-first-paint: false
 service-worker: false
-speed-index: false
+speed-index-metric: false
 splash-screen: false
 structured-data: false
-tabindex: true
-td-headers-attr: true
-th-has-data-cells: true
+tabindex: false
+td-headers-attr: false
+th-has-data-cells: false
 themed-omnibox: false
 time-to-first-byte: true
 total-byte-weight: true
@@ -282,19 +273,18 @@ uses-http2: false
 uses-long-cache-ttl: false
 uses-optimized-images: false
 uses-passive-event-listeners: true
-uses-rel-preconnect: false
 uses-rel-preload: false
+uses-request-compression: false
 uses-responsive-images: false
-uses-text-compression: false
 uses-webp-images: false
-valid-lang: true
-video-caption: true
-video-description: true
+valid-lang: false
+video-caption: false
+video-description: false
 viewport: false
 visual-order-follows-dom: false
 webapp-install-banner: false
 without-javascript: false
 works-offline: false
 
-# of .lh-audit divs: 110
+# of .lh-audit divs: 109
 

third_party/WebKit/LayoutTests/http/tests/devtools/audits2/audits2-successful-run.js

@@ -16,13 +16,13 @@
 
   var results = await Audits2TestRunner.waitForResults();
   TestRunner.addResult(`\n=============== Lighthouse Results ===============`);
-  TestRunner.addResult(`URL: ${results.finalUrl}`);
+  TestRunner.addResult(`URL: ${results.url}`);
   TestRunner.addResult(`Version: ${results.lighthouseVersion}`);
   TestRunner.addResult('\n');
 
   Object.keys(results.audits).sort().forEach(auditName => {
     var audit = results.audits[auditName];
-    TestRunner.addResult(`${audit.id}: ${Boolean(audit.rawValue)}`);
+    TestRunner.addResult(`${audit.name}: ${Boolean(audit.rawValue)}`);
   });
 
   const resultsElement = Audits2TestRunner.getResultsElement();

third_party/blink/renderer/devtools/BUILD.gn

@@ -54,7 +54,6 @@ all_devtools_files = [
   "front_end/audits2/lighthouse/renderer/dom.js",
   "front_end/audits2/lighthouse/renderer/details-renderer.js",
   "front_end/audits2/lighthouse/renderer/category-renderer.js",
-  "front_end/audits2/lighthouse/renderer/performance-category-renderer.js",
   "front_end/audits2/lighthouse/renderer/crc-details-renderer.js",
   "front_end/audits2/lighthouse/renderer/report-renderer.js",
   "front_end/audits2/lighthouse/renderer/util.js",

third_party/blink/renderer/devtools/front_end/audits2/Audits2Controller.js

@@ -254,50 +254,29 @@ Audits2.RuntimeSettings = [
   },
   {
     setting: Common.settings.createSetting('audits2.throttling', 'default'),
+    description: ls`Apply network and CPU throttling during performance auditing`,
     setFlags: (flags, value) => {
-  switch (value) {
-    case 'devtools':
-      flags.throttlingMethod = 'devtools';
-      break;
-    case 'off':
-      flags.throttlingMethod = 'provided';
-      break;
-    default:
-      flags.throttlingMethod = 'simulate';
-  }
+      flags.disableNetworkThrottling = value === 'off';
+      flags.disableCpuThrottling = value === 'off';
     },
     options: [
-      {
-        label: ls`Simulated Fast 3G, 4x CPU Slowdown`,
-        value: 'default',
-        title: 'Throttling is simulated, resulting in faster audit runs with similar measurement accuracy'
-      },
-      {
-        label: ls`Applied Fast 3G, 4x CPU Slowdown`,
-        value: 'devtools',
-        title: 'Typical DevTools throttling, with actual traffic shaping and CPU slowdown applied'
-      },
-      {
-        label: ls`No throttling`,
-        value: 'off',
-        title: 'No network or CPU throttling used. (Useful when not evaluating performance)'
-      },
+      {label: ls`Fast 3G with 4x CPU Slowdown`, value: 'default'},
+      {label: ls`No throttling`, value: 'off'},
     ],
   },
   {
     setting: Common.settings.createSetting('audits2.clear_storage', true),
     title: ls`Clear storage`,
-    description: ls
-    `Reset storage (localStorage, IndexedDB, etc) before auditing. (Recommended for performance & PWA testing)`,
+    description: ls`Reset storage (localStorage, IndexedDB, etc) to a clean baseline before auditing`,
     setFlags: (flags, value) => {
       flags.disableStorageReset = !value;
     },
   },
 ];
 
-    Audits2.Events = {
-      PageAuditabilityChanged: Symbol('PageAuditabilityChanged'),
-      AuditProgressChanged: Symbol('AuditProgressChanged'),
-      RequestAuditStart: Symbol('RequestAuditStart'),
-      RequestAuditCancel: Symbol('RequestAuditCancel'),
-    };
+Audits2.Events = {
+  PageAuditabilityChanged: Symbol('PageAuditabilityChanged'),
+  AuditProgressChanged: Symbol('AuditProgressChanged'),
+  RequestAuditStart: Symbol('RequestAuditStart'),
+  RequestAuditCancel: Symbol('RequestAuditCancel'),
+};
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/audits2/Audits2Panel.js

@@ -116,9 +116,8 @@ Audits2.Audits2Panel = class extends UI.Panel {
 
   /**
    * @param {!ReportRenderer.ReportJSON} lighthouseResult
-   * @param {!ReportRenderer.RunnerResultArtifacts=} artifacts
    */
-  _renderReport(lighthouseResult, artifacts) {
+  _renderReport(lighthouseResult) {
     this.contentElement.classList.toggle('in-progress', false);
     this._startView.hideWidget();
     this._statusView.hide();
@@ -136,7 +135,8 @@ Audits2.Audits2Panel = class extends UI.Panel {
 
     const dom = new DOM(/** @type {!Document} */ (this._auditResultsElement.ownerDocument));
     const detailsRenderer = new Audits2.DetailsRenderer(dom);
-    const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
+    const categoryRenderer = new Audits2.CategoryRenderer(dom, detailsRenderer);
+    categoryRenderer.setTraceArtifact(lighthouseResult);
     const renderer = new Audits2.ReportRenderer(dom, categoryRenderer);
 
     const templatesHTML = Runtime.cachedResources['audits2/lighthouse/templates.html'];
@@ -145,22 +145,20 @@ Audits2.Audits2Panel = class extends UI.Panel {
       return;
 
     renderer.setTemplateContext(templatesDOM);
-    const el = renderer.renderReport(lighthouseResult, reportContainer);
-    Audits2.ReportRenderer.addViewTraceButton(el, artifacts);
+    renderer.renderReport(lighthouseResult, reportContainer);
 
     this._cachedRenderedReports.set(lighthouseResult, reportContainer);
   }
 
   /**
    * @param {!ReportRenderer.ReportJSON} lighthouseResult
-   * @param {!ReportRenderer.RunnerResultArtifacts=} artifacts
    */
-  _buildReportUI(lighthouseResult, artifacts) {
+  _buildReportUI(lighthouseResult) {
     if (lighthouseResult === null)
       return;
 
     const optionElement = new Audits2.ReportSelector.Item(
-        lighthouseResult, () => this._renderReport(lighthouseResult, artifacts), this._renderStartView.bind(this));
+        lighthouseResult, () => this._renderReport(lighthouseResult), this._renderStartView.bind(this));
     this._reportSelector.prepend(optionElement);
     this._refreshToolbarUI();
     this._renderReport(lighthouseResult);
@@ -208,21 +206,21 @@ Audits2.Audits2Panel = class extends UI.Panel {
 
       this._renderStatusView(inspectedURL);
 
-      const lighthouseResponse = await this._protocolService.startLighthouse(inspectedURL, categoryIDs, flags);
+      const lighthouseResult = await this._protocolService.startLighthouse(inspectedURL, categoryIDs, flags);
 
-      if (lighthouseResponse && lighthouseResponse.fatal) {
-        const error = new Error(lighthouseResponse.message);
-        error.stack = lighthouseResponse.stack;
+      if (lighthouseResult && lighthouseResult.fatal) {
+        const error = new Error(lighthouseResult.message);
+        error.stack = lighthouseResult.stack;
         throw error;
       }
 
-      if (!lighthouseResponse)
+      if (!lighthouseResult)
         throw new Error('Auditing failed to produce a result');
 
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.Audits2Finished);
 
       await this._resetEmulationAndProtocolConnection();
-      this._buildReportUI(lighthouseResponse.lhr, lighthouseResponse.artifacts);
+      this._buildReportUI(lighthouseResult);
     } catch (err) {
       if (err instanceof Error)
         this._statusView.renderBugReport(err);

third_party/blink/renderer/devtools/front_end/audits2/Audits2ProtocolService.js

@@ -28,7 +28,7 @@ Audits2.ProtocolService = class extends Common.Object {
    * @param {string} auditURL
    * @param {!Array<string>} categoryIDs
    * @param {!Object} flags
-   * @return {!Promise<!ReportRenderer.RunnerResult>}
+   * @return {!Promise<!ReportRenderer.ReportJSON>}
    */
   startLighthouse(auditURL, categoryIDs, flags) {
     return this._send('start', {url: auditURL, categoryIDs, flags});
@@ -80,7 +80,7 @@ Audits2.ProtocolService = class extends Common.Object {
   /**
    * @param {string} method
    * @param {!Object=} params
-   * @return {!Promise<!ReportRenderer.RunnerResult>}
+   * @return {!Promise<!ReportRenderer.ReportJSON>}
    */
   _send(method, params) {
     if (!this._backendPromise)

third_party/blink/renderer/devtools/front_end/audits2/Audits2ReportRenderer.js

@@ -7,22 +7,21 @@
  */
 Audits2.ReportRenderer = class extends ReportRenderer {
   /**
-   * @param {!Element} el Parent element to render the report into.
-   * @param {!ReportRenderer.RunnerResultArtifacts=} artifacts
+   * Provides empty element for left nav
+   * @override
+   * @returns {!DocumentFragment}
    */
-  static addViewTraceButton(el, artifacts) {
-    if (!artifacts || !artifacts.traces || !artifacts.traces.defaultPass)
-      return;
-
-    const defaultPassTrace = artifacts.traces.defaultPass;
-    const timelineButton = UI.createTextButton(Common.UIString('View Trace'), onViewTraceClick, 'view-trace');
-    el.querySelector('.lh-metric-column').appendChild(timelineButton);
-    return el;
+  _renderReportNav() {
+    return createDocumentFragment();
+  }
 
-    async function onViewTraceClick() {
-      await UI.inspectorView.showPanel('timeline');
-      Timeline.TimelinePanel.instance().loadFromEvents(defaultPassTrace.traceEvents);
-    }
+  /**
+   * @param {!ReportRenderer.ReportJSON} report
+   * @override
+   * @return {!DocumentFragment}
+   */
+  _renderReportHeader(report) {
+    return createDocumentFragment();
   }
 };
 
@@ -34,6 +33,48 @@ class ReportUIFeatures {
   }
 }
 
+Audits2.CategoryRenderer = class extends CategoryRenderer {
+  /**
+   * @override
+   * @param {!DOM} dom
+   * @param {!DetailsRenderer} detailsRenderer
+   */
+  constructor(dom, detailsRenderer) {
+    super(dom, detailsRenderer);
+    this._defaultPassTrace = null;
+  }
+
+  /**
+   * @param {!ReportRenderer.ReportJSON} lhr
+   */
+  setTraceArtifact(lhr) {
+    if (!lhr.artifacts || !lhr.artifacts.traces || !lhr.artifacts.traces.defaultPass)
+      return;
+    this._defaultPassTrace = lhr.artifacts.traces.defaultPass;
+  }
+
+  /**
+   * @override
+   * @param {!ReportRenderer.CategoryJSON} category
+   * @param {!Object<string, !ReportRenderer.GroupJSON>} groups
+   * @return {!Element}
+   */
+  renderPerformanceCategory(category, groups) {
+    const defaultPassTrace = this._defaultPassTrace;
+    const element = super.renderPerformanceCategory(category, groups);
+    if (!defaultPassTrace)
+      return element;
+
+    const timelineButton = UI.createTextButton(Common.UIString('View Trace'), onViewTraceClick, 'view-trace');
+    element.querySelector('.lh-audit-group').prepend(timelineButton);
+    return element;
+
+    async function onViewTraceClick() {
+      await UI.inspectorView.showPanel('timeline');
+      Timeline.TimelinePanel.instance().loadFromEvents(defaultPassTrace.traceEvents);
+    }
+  }
+};
 
 Audits2.DetailsRenderer = class extends DetailsRenderer {
   /**

third_party/blink/renderer/devtools/front_end/audits2/Audits2ReportSelector.js

@@ -111,8 +111,8 @@ Audits2.ReportSelector.Item = class {
     this._renderReport = renderReport;
     this._showLandingCallback = showLandingCallback;
 
-    const url = new Common.ParsedURL(lighthouseResult.finalUrl);
-    const timestamp = lighthouseResult.fetchTime;
+    const url = new Common.ParsedURL(lighthouseResult.url);
+    const timestamp = lighthouseResult.generatedTime;
     this._element = createElement('option');
     this._element.label = `${new Date(timestamp).toLocaleTimeString()} - ${url.domain()}`;
   }
@@ -135,9 +135,9 @@ Audits2.ReportSelector.Item = class {
   }
 
   download() {
-    const url = new Common.ParsedURL(this._lighthouseResult.finalUrl).domain();
-    const timestamp = this._lighthouseResult.fetchTime;
+    const url = new Common.ParsedURL(this._lighthouseResult.url).domain();
+    const timestamp = this._lighthouseResult.generatedTime;
     const fileName = `${url}-${new Date(timestamp).toISO8601Compact()}.json`;
     Workspace.fileManager.save(fileName, JSON.stringify(this._lighthouseResult), true);
   }
-};
+};
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/audits2/RadioSetting.js

@@ -16,15 +16,13 @@ Audits2.RadioSetting = class {
     this._radioElements = [];
     for (const option of this._options) {
       const fragment = UI.Fragment.build`
-        <label $="label" class="audits2-radio">
+        <label class="audits2-radio">
           <input $="input" type="radio" value=${option.value} name=${setting.name}>
           ${option.label}
         </label>
       `;
 
       this.element.appendChild(fragment.element());
-      if (option.title)
-        UI.Tooltip.install(fragment.$('label'), option.title);
       const radioElement = fragment.$('input');
       radioElement.addEventListener('change', this._valueChanged.bind(this));
       this._radioElements.push(radioElement);
@@ -59,4 +57,4 @@ Audits2.RadioSetting = class {
     const selectedRadio = this._radioElements.find(radio => radio.checked);
     this._setting.set(selectedRadio.value);
   }
-};
+};
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/audits2/audits2Panel.css

@@ -40,7 +40,8 @@
   position: relative;
 }
 button.view-trace {
-  margin: 10px;
+  position: absolute;
+  right: 0;
 }
 
 .audits2-results-container {

third_party/blink/renderer/devtools/front_end/audits2/lighthouse/renderer/crc-details-renderer.js

@@ -12,13 +12,11 @@
 
 /* globals self Util */
 
-/** @typedef {import('./dom.js')} DOM */
-
 class CriticalRequestChainRenderer {
   /**
    * Create render context for critical-request-chain tree display.
-   * @param {LH.Audit.SimpleCriticalRequestNode} tree
-   * @return {{tree: LH.Audit.SimpleCriticalRequestNode, startTime: number, transferSize: number}}
+   * @param {!Object<string, !CriticalRequestChainRenderer.CRCNode>} tree
+   * @return {{tree: !Object<string, !CriticalRequestChainRenderer.CRCNode>, startTime: number, transferSize: number}}
    */
   static initTree(tree) {
     let startTime = 0;
@@ -36,13 +34,13 @@ class CriticalRequestChainRenderer {
    * parent. Calculates if this node is the last child, whether it has any
    * children itself and what the tree looks like all the way back up to the root,
    * so the tree markers can be drawn correctly.
-   * @param {LH.Audit.SimpleCriticalRequestNode} parent
+   * @param {!Object<string, !CriticalRequestChainRenderer.CRCNode>} parent
    * @param {string} id
    * @param {number} startTime
    * @param {number} transferSize
-   * @param {Array<boolean>=} treeMarkers
+   * @param {!Array<boolean>=} treeMarkers
    * @param {boolean=} parentIsLastChild
-   * @return {CRCSegment}
+   * @return {!CriticalRequestChainRenderer.CRCSegment}
    */
   static createSegment(parent, id, startTime, transferSize, treeMarkers, parentIsLastChild) {
     const node = parent[id];
@@ -70,10 +68,10 @@ class CriticalRequestChainRenderer {
 
   /**
    * Creates the DOM for a tree segment.
-   * @param {DOM} dom
-   * @param {DocumentFragment} tmpl
-   * @param {CRCSegment} segment
-   * @return {Node}
+   * @param {!DOM} dom
+   * @param {!DocumentFragment} tmpl
+   * @param {!CriticalRequestChainRenderer.CRCSegment} segment
+   * @return {!Node}
    */
   static createChainNode(dom, tmpl, segment) {
     const chainsEl = dom.cloneTemplate('#tmpl-lh-crc__chains', tmpl);
@@ -112,14 +110,14 @@ class CriticalRequestChainRenderer {
     const {file, hostname} = Util.parseURL(segment.node.request.url);
     const treevalEl = dom.find('.crc-node__tree-value', chainsEl);
     dom.find('.crc-node__tree-file', treevalEl).textContent = `${file}`;
-    dom.find('.crc-node__tree-hostname', treevalEl).textContent = hostname ? `(${hostname})` : '';
+    dom.find('.crc-node__tree-hostname', treevalEl).textContent = `(${hostname})`;
 
     if (!segment.hasChildren) {
       const span = dom.createElement('span', 'crc-node__chain-duration');
       span.textContent = ' - ' + Util.chainDuration(
           segment.node.request.startTime, segment.node.request.endTime) + 'ms, ';
       const span2 = dom.createElement('span', 'crc-node__chain-duration');
-      span2.textContent = Util.formatBytesToKB(segment.node.request.transferSize, 0.01);
+      span2.textContent = Util.formatBytesToKB(segment.node.request.transferSize);
 
       treevalEl.appendChild(span);
       treevalEl.appendChild(span2);
@@ -130,48 +128,52 @@ class CriticalRequestChainRenderer {
 
   /**
    * Recursively builds a tree from segments.
-   * @param {DOM} dom
-   * @param {DocumentFragment} tmpl
-   * @param {CRCSegment} segment
-   * @param {Element} elem Parent element.
-   * @param {CRCDetailsJSON} details
+   * @param {!DOM} dom
+   * @param {!DocumentFragment} tmpl
+   * @param {!CriticalRequestChainRenderer.CRCSegment} segment
+   * @param {!Element} detailsEl Parent details element.
+   * @param {!CriticalRequestChainRenderer.CRCDetailsJSON} details
    */
-  static buildTree(dom, tmpl, segment, elem, details) {
-    elem.appendChild(CriticalRequestChainRenderer.createChainNode(dom, tmpl, segment));
+  static buildTree(dom, tmpl, segment, detailsEl, details) {
+    detailsEl.appendChild(CriticalRequestChainRenderer.createChainNode(dom, tmpl, segment));
 
     for (const key of Object.keys(segment.node.children)) {
       const childSegment = CriticalRequestChainRenderer.createSegment(segment.node.children, key,
          segment.startTime, segment.transferSize, segment.treeMarkers, segment.isLastChild);
-      CriticalRequestChainRenderer.buildTree(dom, tmpl, childSegment, elem, details);
+      CriticalRequestChainRenderer.buildTree(dom, tmpl, childSegment, detailsEl, details);
     }
   }
 
   /**
-   * @param {DOM} dom
-   * @param {ParentNode} templateContext
-   * @param {CRCDetailsJSON} details
-   * @return {Element}
+   * @param {!DOM} dom
+   * @param {!Node} templateContext
+   * @param {!CriticalRequestChainRenderer.CRCDetailsJSON} details
+   * @return {!Node}
    */
   static render(dom, templateContext, details) {
     const tmpl = dom.cloneTemplate('#tmpl-lh-crc', templateContext);
-    const containerEl = dom.find('.lh-crc', tmpl);
 
     // Fill in top summary.
     dom.find('.lh-crc__longest_duration', tmpl).textContent =
         Util.formatNumber(details.longestChain.duration) + 'ms';
-    dom.find('.lh-crc__longest_length', tmpl).textContent = details.longestChain.length.toString();
+    dom.find('.lh-crc__longest_length', tmpl).textContent = details.longestChain.length;
     dom.find('.lh-crc__longest_transfersize', tmpl).textContent =
         Util.formatBytesToKB(details.longestChain.transferSize);
 
+    const detailsEl = dom.find('.lh-details', tmpl);
+    detailsEl.open = true;
+
+    dom.find('.lh-details > summary', tmpl).textContent = details.header.text;
+
     // Construct visual tree.
     const root = CriticalRequestChainRenderer.initTree(details.chains);
     for (const key of Object.keys(root.tree)) {
       const segment = CriticalRequestChainRenderer.createSegment(root.tree, key,
           root.startTime, root.transferSize);
-      CriticalRequestChainRenderer.buildTree(dom, tmpl, segment, containerEl, details);
+      CriticalRequestChainRenderer.buildTree(dom, tmpl, segment, detailsEl, details);
     }
 
-    return dom.find('.lh-crc-container', tmpl);
+    return tmpl;
   }
 }
 
@@ -183,19 +185,44 @@ if (typeof module !== 'undefined' && module.exports) {
 }
 
 /** @typedef {{
-      type: string,
-      header: {text: string},
-      longestChain: {duration: number, length: number, transferSize: number},
-      chains: LH.Audit.SimpleCriticalRequestNode
-  }} CRCDetailsJSON
+ *     type: string,
+ *     header: {text: string},
+ *     longestChain: {duration: number, length: number, transferSize: number},
+ *     chains: !Object<string, !CriticalRequestChainRenderer.CRCNode>
+ * }}
+ */
+CriticalRequestChainRenderer.CRCDetailsJSON; // eslint-disable-line no-unused-expressions
+
+/** @typedef {{
+ *     endTime: number,
+ *     responseReceivedTime: number,
+ *     startTime: number,
+ *     transferSize: number,
+ *     url: string
+ * }}
  */
+CriticalRequestChainRenderer.CRCRequest; // eslint-disable-line no-unused-expressions
+
+/**
+ * Record type so children can circularly have CRCNode values.
+ * @struct
+ * @record
+ */
+CriticalRequestChainRenderer.CRCNode = function() {};
+
+/** @type {!Object<string, !CriticalRequestChainRenderer.CRCNode>} */
+CriticalRequestChainRenderer.CRCNode.prototype.children; // eslint-disable-line no-unused-expressions
+
+/** @type {!CriticalRequestChainRenderer.CRCRequest} */
+CriticalRequestChainRenderer.CRCNode.prototype.request; // eslint-disable-line no-unused-expressions
 
 /** @typedef {{
-      node: LH.Audit.SimpleCriticalRequestNode[string],
-      isLastChild: boolean,
-      hasChildren: boolean,
-      startTime: number,
-      transferSize: number,
-      treeMarkers: Array<boolean>
-  }} CRCSegment
+ *     node: !CriticalRequestChainRenderer.CRCNode,
+ *     isLastChild: boolean,
+ *     hasChildren: boolean,
+ *     startTime: number,
+ *     transferSize: number,
+ *     treeMarkers: !Array<boolean>
+ * }}
  */
+CriticalRequestChainRenderer.CRCSegment; // eslint-disable-line no-unused-expressions

third_party/blink/renderer/devtools/front_end/audits2/lighthouse/renderer/dom.js

@@ -9,21 +9,20 @@
 
 class DOM {
   /**
-   * @param {Document} document
+   * @param {!Document} document
    */
   constructor(document) {
-    /** @type {Document} */
+    /** @private {!Document} */
     this._document = document;
   }
 
-  // TODO(bckenny): can pass along `createElement`'s inferred type
   /**
    * @param {string} name
    * @param {string=} className
-   * @param {Object<string, (string|undefined)>=} attrs Attribute key/val pairs.
+   * @param {!Object<string, (string|undefined)>=} attrs Attribute key/val pairs.
    *     Note: if an attribute key has an undefined value, this method does not
    *     set the attribute on the node.
-   * @return {Element}
+   * @return {!Element}
    */
   createElement(name, className, attrs = {}) {
     const element = this._document.createElement(name);
@@ -40,20 +39,13 @@ class DOM {
   }
 
   /**
-   * @return {DocumentFragment}
-   */
-  createFragment() {
-    return this._document.createDocumentFragment();
-  }
-
-  /**
-   * @param {Element} parentElem
+   * @param {!Element} parentElem
    * @param {string} elementName
    * @param {string=} className
-   * @param {Object<string, (string|undefined)>=} attrs Attribute key/val pairs.
+   * @param {!Object<string, (string|undefined)>=} attrs Attribute key/val pairs.
    *     Note: if an attribute key has an undefined value, this method does not
    *     set the attribute on the node.
-   * @return {Element}
+   * @return {!Element}
    */
   createChildOf(parentElem, elementName, className, attrs) {
     const element = this.createElement(elementName, className, attrs);
@@ -63,8 +55,8 @@ class DOM {
 
   /**
    * @param {string} selector
-   * @param {ParentNode} context
-   * @return {DocumentFragment} A clone of the template content.
+   * @param {!Node} context
+   * @return {!DocumentFragment} A clone of the template content.
    * @throws {Error}
    */
   cloneTemplate(selector, context) {
@@ -73,14 +65,15 @@ class DOM {
       throw new Error(`Template not found: template${selector}`);
     }
 
-    const clone = this._document.importNode(template.content, true);
+    const clone = /** @type {!DocumentFragment} */ (this._document.importNode(
+        template.content, true));
 
     // Prevent duplicate styles in the DOM. After a template has been stamped
     // for the first time, remove the clone's styles so they're not re-added.
     if (template.hasAttribute('data-stamped')) {
       this.findAll('style', clone).forEach(style => style.remove());
     }
-    template.setAttribute('data-stamped', 'true');
+    template.setAttribute('data-stamped', true);
 
     return clone;
   }
@@ -96,7 +89,7 @@ class DOM {
 
   /**
    * @param {string} text
-   * @return {Element}
+   * @return {!Element}
    */
   convertMarkdownLinkSnippets(text) {
     const element = this.createElement('span');
@@ -111,7 +104,7 @@ class DOM {
 
       // Append link if there are any.
       if (linkText && linkHref) {
-        const a = /** @type {HTMLAnchorElement} */ (this.createElement('a'));
+        const a = /** @type {!HTMLAnchorElement} */ (this.createElement('a'));
         a.rel = 'noopener';
         a.target = '_blank';
         a.textContent = linkText;
@@ -125,7 +118,7 @@ class DOM {
 
   /**
    * @param {string} text
-   * @return {Element}
+   * @return {!Element}
    */
   convertMarkdownCodeSnippets(text) {
     const element = this.createElement('span');
@@ -136,7 +129,7 @@ class DOM {
       const [preambleText, codeText] = parts.splice(0, 2);
       element.appendChild(this._document.createTextNode(preambleText));
       if (codeText) {
-        const pre = /** @type {HTMLPreElement} */ (this.createElement('code'));
+        const pre = /** @type {!HTMLPreElement} */ (this.createElement('code'));
         pre.textContent = codeText;
         element.appendChild(pre);
       }
@@ -146,29 +139,20 @@ class DOM {
   }
 
   /**
-   * @return {Document}
+   * @return {!Document}
    */
   document() {
     return this._document;
   }
 
-  /**
-   * TODO(paulirish): import and conditionally apply the DevTools frontend subclasses instead of this
-   * @return {boolean}
-   */
-  isDevTools() {
-    return !!this._document.querySelector('.lh-devtools');
-  }
-
   /**
    * Guaranteed context.querySelector. Always returns an element or throws if
    * nothing matches query.
    * @param {string} query
-   * @param {ParentNode} context
-   * @return {HTMLElement}
+   * @param {!Node} context
+   * @return {!Element}
    */
   find(query, context) {
-    /** @type {?HTMLElement} */
     const result = context.querySelector(query);
     if (result === null) {
       throw new Error(`query ${query} not found`);
@@ -179,8 +163,8 @@ class DOM {
   /**
    * Helper for context.querySelectorAll. Returns an Array instead of a NodeList.
    * @param {string} query
-   * @param {ParentNode} context
-   * @return {Array<HTMLElement>}
+   * @param {!Node} context
+   * @return {!Array<!Element>}
    */
   findAll(query, context) {
     return Array.from(context.querySelectorAll(query));

third_party/blink/renderer/devtools/front_end/audits2/lighthouse/renderer/performance-category-renderer.js

-/**
- * @license Copyright 2018 Google Inc. 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';
-
-/* globals self, Util, CategoryRenderer */
-
-/** @typedef {import('./dom.js')} DOM */
-/** @typedef {import('./report-renderer.js').CategoryJSON} CategoryJSON */
-/** @typedef {import('./report-renderer.js').GroupJSON} GroupJSON */
-/** @typedef {import('./report-renderer.js').AuditJSON} AuditJSON */
-/** @typedef {import('./details-renderer.js').OpportunitySummary} OpportunitySummary */
-/** @typedef {import('./details-renderer.js').FilmstripDetails} FilmstripDetails */
-
-class PerformanceCategoryRenderer extends CategoryRenderer {
-  /**
-   * @param {AuditJSON} audit
-   * @return {Element}
-   */
-  _renderMetric(audit) {
-    const tmpl = this.dom.cloneTemplate('#tmpl-lh-metric', this.templateContext);
-    const element = this.dom.find('.lh-metric', tmpl);
-    element.id = audit.result.id;
-    const rating = Util.calculateRating(audit.result.score, audit.result.scoreDisplayMode);
-    element.classList.add(`lh-metric--${rating}`);
-
-    const titleEl = this.dom.find('.lh-metric__title', tmpl);
-    titleEl.textContent = audit.result.title;
-
-    const valueEl = this.dom.find('.lh-metric__value', tmpl);
-    valueEl.textContent = Util.formatDisplayValue(audit.result.displayValue);
-
-    const descriptionEl = this.dom.find('.lh-metric__description', tmpl);
-    descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
-
-    if (audit.result.scoreDisplayMode === 'error') {
-      descriptionEl.textContent = '';
-      valueEl.textContent = 'Error!';
-      const tooltip = this.dom.createChildOf(descriptionEl, 'span');
-      tooltip.textContent = audit.result.errorMessage || 'Report error: no metric information';
-    }
-
-    return element;
-  }
-
-  /**
-   * @param {AuditJSON} audit
-   * @param {number} index
-   * @param {number} scale
-   * @return {Element}
-   */
-  _renderOpportunity(audit, index, scale) {
-    const oppTmpl = this.dom.cloneTemplate('#tmpl-lh-opportunity', this.templateContext);
-    const element = this.populateAuditValues(audit, index, oppTmpl);
-    element.id = audit.result.id;
-
-    const details = audit.result.details;
-    if (!details) {
-      return element;
-    }
-    const summaryInfo = /** @type {OpportunitySummary} */ (details.summary);
-    if (!summaryInfo || !summaryInfo.wastedMs || audit.result.scoreDisplayMode === 'error') {
-      return element;
-    }
-
-    // Overwrite the displayValue with opportunity's wastedMs
-    const displayEl = this.dom.find('.lh-audit__display-text', element);
-    const sparklineWidthPct = `${summaryInfo.wastedMs / scale * 100}%`;
-    this.dom.find('.lh-sparkline__bar', element).style.width = sparklineWidthPct;
-    displayEl.textContent = Util.formatSeconds(summaryInfo.wastedMs, 0.01);
-
-    // Set [title] tooltips
-    if (audit.result.displayValue) {
-      const displayValue = Util.formatDisplayValue(audit.result.displayValue);
-      this.dom.find('.lh-load-opportunity__sparkline', element).title = displayValue;
-      displayEl.title = displayValue;
-    }
-
-    return element;
-  }
-
-  /**
-   * Get an audit's wastedMs to sort the opportunity by, and scale the sparkline width
-   * Opportunties with an error won't have a summary object, so MIN_VALUE is returned to keep any
-   * erroring opportunities last in sort order.
-   * @param {AuditJSON} audit
-   * @return {number}
-   */
-  _getWastedMs(audit) {
-    if (
-      audit.result.details &&
-      audit.result.details.summary &&
-      typeof audit.result.details.summary.wastedMs === 'number'
-    ) {
-      return audit.result.details.summary.wastedMs;
-    } else {
-      return Number.MIN_VALUE;
-    }
-  }
-
-  /**
-   * @param {CategoryJSON} category
-   * @param {Object<string, GroupJSON>} groups
-   * @return {Element}
-   * @override
-   */
-  render(category, groups) {
-    const element = this.dom.createElement('div', 'lh-category');
-    this.createPermalinkSpan(element, category.id);
-    element.appendChild(this.renderCategoryHeader(category));
-
-    // Metrics
-    const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
-    const metricAuditsEl = this.renderAuditGroup(groups['metrics'], {expandable: false});
-
-    const keyMetrics = metricAudits.filter(a => a.weight >= 3);
-    const otherMetrics = metricAudits.filter(a => a.weight < 3);
-
-    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metric-container');
-    const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');
-    const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');
-
-    keyMetrics.forEach(item => {
-      metricsColumn1El.appendChild(this._renderMetric(item));
-    });
-    otherMetrics.forEach(item => {
-      metricsColumn2El.appendChild(this._renderMetric(item));
-    });
-    const estValuesEl = this.dom.createChildOf(metricsColumn2El, 'div',
-        'lh-metrics__disclaimer lh-metrics__disclaimer');
-    estValuesEl.textContent = 'Values are estimated and may vary.';
-
-    metricAuditsEl.classList.add('lh-audit-group--metrics');
-    element.appendChild(metricAuditsEl);
-
-    // Filmstrip
-    const timelineEl = this.dom.createChildOf(element, 'div', 'lh-filmstrip-container');
-    const thumbnailAudit = category.auditRefs.find(audit => audit.id === 'screenshot-thumbnails');
-    const thumbnailResult = thumbnailAudit && thumbnailAudit.result;
-    if (thumbnailResult && thumbnailResult.details) {
-      timelineEl.id = thumbnailResult.id;
-      const filmstripEl = this.detailsRenderer.render(thumbnailResult.details);
-      timelineEl.appendChild(filmstripEl);
-    }
-
-    // Opportunities
-    const opportunityAudits = category.auditRefs
-        .filter(audit => audit.group === 'load-opportunities' && !Util.showAsPassed(audit.result))
-        .sort((auditA, auditB) => this._getWastedMs(auditB) - this._getWastedMs(auditA));
-
-    if (opportunityAudits.length) {
-      // Scale the sparklines relative to savings, minimum 2s to not overstate small savings
-      const minimumScale = 2000;
-      const wastedMsValues = opportunityAudits.map(audit => this._getWastedMs(audit));
-      const maxWaste = Math.max(...wastedMsValues);
-      const scale = Math.max(Math.ceil(maxWaste / 1000) * 1000, minimumScale);
-      const groupEl = this.renderAuditGroup(groups['load-opportunities'], {expandable: false});
-      const tmpl = this.dom.cloneTemplate('#tmpl-lh-opportunity-header', this.templateContext);
-      const headerEl = this.dom.find('.lh-load-opportunity__header', tmpl);
-      groupEl.appendChild(headerEl);
-      opportunityAudits.forEach((item, i) =>
-          groupEl.appendChild(this._renderOpportunity(item, i, scale)));
-      groupEl.classList.add('lh-audit-group--opportunities');
-      element.appendChild(groupEl);
-    }
-
-    // Diagnostics
-    const diagnosticAudits = category.auditRefs
-        .filter(audit => audit.group === 'diagnostics' && !Util.showAsPassed(audit.result))
-        .sort((a, b) => {
-          const scoreA = a.result.scoreDisplayMode === 'informative' ? 100 : Number(a.result.score);
-          const scoreB = b.result.scoreDisplayMode === 'informative' ? 100 : Number(b.result.score);
-          return scoreA - scoreB;
-        });
-
-    if (diagnosticAudits.length) {
-      const groupEl = this.renderAuditGroup(groups['diagnostics'], {expandable: false});
-      diagnosticAudits.forEach((item, i) => groupEl.appendChild(this.renderAudit(item, i)));
-      groupEl.classList.add('lh-audit-group--diagnostics');
-      element.appendChild(groupEl);
-    }
-
-    // Passed audits
-    const passedElements = category.auditRefs
-        .filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') &&
-            Util.showAsPassed(audit.result))
-        .map((audit, i) => this.renderAudit(audit, i));
-
-    if (!passedElements.length) return element;
-
-    const passedElem = this.renderPassedAuditsSection(passedElements);
-    element.appendChild(passedElem);
-    return element;
-  }
-}
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = PerformanceCategoryRenderer;
-} else {
-  self.PerformanceCategoryRenderer = PerformanceCategoryRenderer;
-}

third_party/blink/renderer/devtools/front_end/audits2/module.json

@@ -22,7 +22,6 @@
         "lighthouse/renderer/util.js",
         "lighthouse/renderer/dom.js",
         "lighthouse/renderer/category-renderer.js",
-        "lighthouse/renderer/performance-category-renderer.js",
         "lighthouse/renderer/details-renderer.js",
         "lighthouse/renderer/crc-details-renderer.js",
         "lighthouse/renderer/report-renderer.js",
@@ -41,14 +40,5 @@
         "audits2Panel.css",
         "lighthouse/report-styles.css",
         "lighthouse/templates.html"
-    ],
-    "skip_compilation": [
-      "lighthouse/renderer/util.js",
-      "lighthouse/renderer/dom.js",
-      "lighthouse/renderer/category-renderer.js",
-      "lighthouse/renderer/performance-category-renderer.js",
-      "lighthouse/renderer/details-renderer.js",
-      "lighthouse/renderer/crc-details-renderer.js",
-      "lighthouse/renderer/report-renderer.js"
-  ]
+    ]
 }

third_party/blink/renderer/devtools/front_end/audits2_worker/Audits2Service.js

@@ -37,7 +37,7 @@ var Audits2Service = class {  // eslint-disable-line
   }
 
   /**
-   * @return {!Promise<!ReportRenderer.RunnerResult>}
+   * @return {!Promise<!ReportRenderer.ReportJSON>}
    */
   start(params) {
     if (Runtime.queryParam('isUnderTest'))
@@ -49,7 +49,7 @@ var Audits2Service = class {  // eslint-disable-line
 
     return Promise.resolve()
         .then(_ => self.runLighthouseInWorker(this, params.url, {flags: params.flags}, params.categoryIDs))
-        .then(/** @type {!ReportRenderer.RunnerResult} */ result => {
+        .then(/** @type {!ReportRenderer.ReportJSON} */ result => {
           // Keep all artifacts on the result, no trimming
           return result;
         })

third_party/blink/renderer/devtools/front_end/bindings/FileUtils.js

@@ -143,7 +143,7 @@ Bindings.ChunkedFileReader = class {
     if (event.target.readyState !== FileReader.DONE)
       return;
 
-    const buffer = this._reader.result;
+    const buffer = event.target.result;
     this._loadedSize += buffer.byteLength;
     const endOfFile = this._loadedSize === this._fileSize;
     const decodedString = this._decoder.decode(buffer, {stream: !endOfFile});

third_party/blink/renderer/devtools/front_end/externs.js

@@ -836,164 +836,3 @@ const ls = function(strings, vararg) {};
  * @param {function(!Array<*>)} callback
  */
 const ResizeObserver = function(callback) {};
-
-
-// Lighthouse Report Renderer
-
-/**
- * @constructor
- * @param {!Document} document
- */
-const DOM = function(document) {};
-
-/**
- * @constructor
- * @param {!DOM} dom
- */
-const ReportRenderer = function(dom) {};
-
-ReportRenderer.prototype = {
-  /**
-   * @param {!ReportRenderer.ReportJSON} report
-   * @param {!Element} container Parent element to render the report into.
-   */
-  renderReport: function(report, container) {},
-
-  /**
-   * @param {!Document|!Element} context
-   */
-  setTemplateContext: function(context) {},
-
-};
-
-/**
- * @typedef {{
- *     rawValue: (number|boolean|undefined),
- *     id: string,
- *     title: string,
- *     description: string,
- *     explanation: (string|undefined),
- *     errorMessage: (string|undefined),
- *     displayValue: (string|Array<string|number>|undefined),
- *     scoreDisplayMode: string,
- *     error: boolean,
- *     score: (number|null),
- *     details: (!DetailsRenderer.DetailsJSON|undefined),
- * }}
- */
-ReportRenderer.AuditResultJSON;
-
-/**
- * @typedef {{
- *     id: string,
- *     score: (number|null),
- *     weight: number,
- *     group: (string|undefined),
- *     result: ReportRenderer.AuditResultJSON
- * }}
- */
-ReportRenderer.AuditJSON;
-
-/**
- * @typedef {{
- *     title: string,
- *     id: string,
- *     score: (number|null),
- *     description: (string|undefined),
- *     manualDescription: string,
- *     auditRefs: !Array<!ReportRenderer.AuditJSON>
- * }}
- */
-ReportRenderer.CategoryJSON;
-
-/**
- * @typedef {{
- *     title: string,
- *     description: (string|undefined),
- * }}
- */
-ReportRenderer.GroupJSON;
-
-/**
- * @typedef {{
- *     lighthouseVersion: string,
- *     userAgent: string,
- *     fetchTime: string,
- *     timing: {total: number},
- *     requestedUrl: string,
- *     finalUrl: string,
- *     runWarnings: (!Array<string>|undefined),
- *     artifacts: {traces: {defaultPass: {traceEvents: !Array}}},
- *     audits: !Object<string, !ReportRenderer.AuditResultJSON>,
- *     categories: !Object<string, !ReportRenderer.CategoryJSON>,
- *     categoryGroups: !Object<string, !ReportRenderer.GroupJSON>,
- * }}
- */
-ReportRenderer.ReportJSON;
-
-/**
- * @typedef {{
- *     traces: {defaultPass: {traceEvents: !Array}},
- * }}
- */
-ReportRenderer.RunnerResultArtifacts;
-
-/**
- * @typedef {{
- *     lhr: !ReportRenderer.ReportJSON,
- *     artifacts: ReportRenderer.RunnerResultArtifacts,
- *     report: string
- * }}
- */
-ReportRenderer.RunnerResult;
-
-
-/**
- * @constructor
- * @param {!DOM} dom
- * @param {!DetailsRenderer} detailsRenderer
- */
-const CategoryRenderer = function(dom, detailsRenderer) {};
-
-
-/**
- * @constructor
- * @param {!DOM} dom
- */
-const DetailsRenderer = function(dom) {};
-
-DetailsRenderer.prototype = {
-  /**
-   * @param {!DetailsRenderer.NodeDetailsJSON} item
-   * @return {!Element}
-   */
-  renderNode: function(item) {},
-};
-
-/**
- * @typedef {{
- *     type: string,
- *     value: (string|number|undefined),
- *     summary: (DetailsRenderer.OpportunitySummary|undefined),
- *     granularity: (number|undefined),
- *     displayUnit: (string|undefined)
- * }}
- */
-DetailsRenderer.DetailsJSON;
-
-/**
- * @typedef {{
- *     type: string,
- *     path: (string|undefined),
- *     selector: (string|undefined),
- *     snippet:(string|undefined)
- * }}
- */
-DetailsRenderer.NodeDetailsJSON;
-
-/** @typedef {{
- *     wastedMs: (number|undefined),
- *     wastedBytes: (number|undefined),
- * }}
- */
-DetailsRenderer.OpportunitySummary;