report(category): enable all categories to show audit groups, refacto…

…r CategoryRenderer (#4278)
GoogleChrome · Feb 21, 2018 · 3f944d0 · 3f944d0
1 parent 16da670
commit 3f944d0
Show file tree

Hide file tree

Showing 10 changed files with 498 additions and 424 deletions.
diff --git a/lighthouse-core/report/v2/renderer/category-renderer.js b/lighthouse-core/report/v2/renderer/category-renderer.js
diff --git a/lighthouse-core/report/v2/renderer/performance-category-renderer.js b/lighthouse-core/report/v2/renderer/performance-category-renderer.js
@@ -0,0 +1,191 @@
+/**
+ * @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 */
+
+class PerformanceCategoryRenderer extends CategoryRenderer {
+  /**
+   * @param {!ReportRenderer.AuditJSON} audit
+   * @param {number} scale
+   * @return {!Element}
+   */
+  _renderTimelineMetricAudit(audit, scale) {
+    const tmpl = this.dom.cloneTemplate('#tmpl-lh-timeline-metric', this.templateContext);
+    const element = this.dom.find('.lh-timeline-metric', tmpl);
+    element.classList.add(`lh-timeline-metric--${Util.calculateRating(audit.score)}`);
+
+    const titleEl = this.dom.find('.lh-timeline-metric__title', tmpl);
+    titleEl.textContent = audit.result.description;
+
+    const valueEl = this.dom.find('.lh-timeline-metric__value', tmpl);
+    valueEl.textContent = audit.result.displayValue;
+
+    const descriptionEl = this.dom.find('.lh-timeline-metric__description', tmpl);
+    descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));
+
+    if (typeof audit.result.rawValue !== 'number') {
+      const debugStrEl = this.dom.createChildOf(element, 'div', 'lh-debug');
+      debugStrEl.textContent = audit.result.debugString || 'Report error: no metric information';
+      return element;
+    }
+
+    const sparklineBarEl = this.dom.find('.lh-sparkline__bar', tmpl);
+    sparklineBarEl.style.width = `${audit.result.rawValue / scale * 100}%`;
+
+    return element;
+  }
+
+  /**
+   * @param {!ReportRenderer.AuditJSON} audit
+   * @param {number} scale
+   * @return {!Element}
+   */
+  _renderPerfHintAudit(audit, scale) {
+    const extendedInfo = /** @type {!PerformanceCategoryRenderer.PerfHintExtendedInfo}
+        */ (audit.result.extendedInfo);
+    const tooltipAttrs = {title: audit.result.displayValue};
+
+    const element = this.dom.createElement('details', [
+      'lh-perf-hint',
+      `lh-perf-hint--${Util.calculateRating(audit.score)}`,
+      'lh-expandable-details',
+    ].join(' '));
+
+    const summary = this.dom.createChildOf(element, 'summary', 'lh-perf-hint__summary ' +
+      'lh-expandable-details__summary');
+    const titleEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__title');
+    titleEl.textContent = audit.result.description;
+
+    this.dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'});
+
+    if (!extendedInfo || typeof audit.result.rawValue !== 'number') {
+      const debugStrEl = this.dom.createChildOf(summary, 'div', 'lh-debug');
+      debugStrEl.textContent = audit.result.debugString || 'Report error: no extended information';
+      return element;
+    }
+
+    const sparklineContainerEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__sparkline',
+        tooltipAttrs);
+    const sparklineEl = this.dom.createChildOf(sparklineContainerEl, 'div', 'lh-sparkline');
+    const sparklineBarEl = this.dom.createChildOf(sparklineEl, 'div', 'lh-sparkline__bar');
+    sparklineBarEl.style.width = audit.result.rawValue / scale * 100 + '%';
+
+    const statsEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__stats', tooltipAttrs);
+    const statsMsEl = this.dom.createChildOf(statsEl, 'div', 'lh-perf-hint__primary-stat');
+    statsMsEl.textContent = Util.formatMilliseconds(audit.result.rawValue);
+
+    if (extendedInfo.value.wastedKb) {
+      const statsKbEl = this.dom.createChildOf(statsEl, 'div', 'lh-perf-hint__secondary-stat');
+      statsKbEl.textContent = Util.formatNumber(extendedInfo.value.wastedKb) + ' KB';
+    }
+
+    const descriptionEl = this.dom.createChildOf(element, 'div', 'lh-perf-hint__description');
+    descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));
+
+    if (audit.result.debugString) {
+      const debugStrEl = this.dom.createChildOf(summary, 'div', 'lh-debug');
+      debugStrEl.textContent = audit.result.debugString;
+    }
+
+    if (audit.result.details) {
+      element.appendChild(this.detailsRenderer.render(audit.result.details));
+    }
+
+    return element;
+  }
+
+  /**
+   * @override
+   */
+  render(category, groups) {
+    const element = this.dom.createElement('div', 'lh-category');
+    this.createPermalinkSpan(element, category.id);
+    element.appendChild(this.renderCategoryScore(category));
+
+    const metricAudits = category.audits.filter(audit => audit.group === 'perf-metric');
+    const metricAuditsEl = this.renderAuditGroup(groups['perf-metric'], {expandable: false});
+    const timelineContainerEl = this.dom.createChildOf(metricAuditsEl, 'div',
+        'lh-timeline-container');
+    const timelineEl = this.dom.createChildOf(timelineContainerEl, 'div', 'lh-timeline');
+
+    let perfTimelineScale = 0;
+    metricAudits.forEach(audit => {
+      if (typeof audit.result.rawValue === 'number' && audit.result.rawValue) {
+        perfTimelineScale = Math.max(perfTimelineScale, audit.result.rawValue);
+      }
+    });
+
+    const thumbnailAudit = category.audits.find(audit => audit.id === 'screenshot-thumbnails');
+    const thumbnailResult = thumbnailAudit && thumbnailAudit.result;
+    if (thumbnailResult && thumbnailResult.details) {
+      const thumbnailDetails = /** @type {!DetailsRenderer.FilmstripDetails} */
+          (thumbnailResult.details);
+      perfTimelineScale = Math.max(perfTimelineScale, thumbnailDetails.scale);
+      const filmstripEl = this.detailsRenderer.render(thumbnailDetails);
+      timelineEl.appendChild(filmstripEl);
+    }
+
+    metricAudits.forEach(item => {
+      if (item.id === 'speed-index-metric' || item.id === 'estimated-input-latency') {
+        return metricAuditsEl.appendChild(this.renderAudit(item));
+      }
+
+      timelineEl.appendChild(this._renderTimelineMetricAudit(item, perfTimelineScale));
+    });
+
+    metricAuditsEl.open = true;
+    element.appendChild(metricAuditsEl);
+
+    const hintAudits = category.audits
+        .filter(audit => audit.group === 'perf-hint' && audit.score < 100)
+        .sort((auditA, auditB) => auditB.result.rawValue - auditA.result.rawValue);
+    if (hintAudits.length) {
+      const maxWaste = Math.max(...hintAudits.map(audit => audit.result.rawValue));
+      const scale = Math.ceil(maxWaste / 1000) * 1000;
+      const hintAuditsEl = this.renderAuditGroup(groups['perf-hint'], {expandable: false});
+      hintAudits.forEach(item => hintAuditsEl.appendChild(this._renderPerfHintAudit(item, scale)));
+      hintAuditsEl.open = true;
+      element.appendChild(hintAuditsEl);
+    }
+
+    const infoAudits = category.audits
+        .filter(audit => audit.group === 'perf-info' && audit.score < 100);
+    if (infoAudits.length) {
+      const infoAuditsEl = this.renderAuditGroup(groups['perf-info'], {expandable: false});
+      infoAudits.forEach(item => infoAuditsEl.appendChild(this.renderAudit(item)));
+      infoAuditsEl.open = true;
+      element.appendChild(infoAuditsEl);
+    }
+
+    const passedElements = category.audits
+        .filter(audit => (audit.group === 'perf-hint' || audit.group === 'perf-info') &&
+            audit.score === 100)
+        .map(audit => this.renderAudit(audit));
+
+    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;
+}
+
+/**
+ * @typedef {{
+ *     value: {
+ *       wastedMs: (number|undefined),
+ *       wastedKb: (number|undefined),
+ *     }
+ * }}
+ */
+PerformanceCategoryRenderer.PerfHintExtendedInfo; // eslint-disable-line no-unused-expressions
diff --git a/lighthouse-core/report/v2/renderer/report-renderer.js b/lighthouse-core/report/v2/renderer/report-renderer.js
@@ -12,18 +12,15 @@
  * Dummy text for ensuring report robustness: </script> pre$`post %%LIGHTHOUSE_JSON%%
  */
 
-/* globals self, Util */
+/* globals self, Util, DetailsRenderer, CategoryRenderer, PerformanceCategoryRenderer */
 
 class ReportRenderer {
   /**
    * @param {!DOM} dom
-   * @param {!CategoryRenderer} categoryRenderer
    */
-  constructor(dom, categoryRenderer) {
+  constructor(dom) {
     /** @private {!DOM} */
     this._dom = dom;
-    /** @private {!CategoryRenderer} */
-    this._categoryRenderer = categoryRenderer;
     /** @private {!Document|!Element} */
     this._templateContext = this._dom.document();
   }
@@ -46,7 +43,6 @@ class ReportRenderer {
    */
   setTemplateContext(context) {
     this._templateContext = context;
-    this._categoryRenderer.setTemplateContext(context);
   }
 
   /**
@@ -152,12 +148,25 @@ class ReportRenderer {
       scoreHeader = reportSection.appendChild(this._dom.createElement('div', 'lh-scores-header'));
     }
 
+    const detailsRenderer = new DetailsRenderer(this._dom);
+    const categoryRenderer = new CategoryRenderer(this._dom, detailsRenderer);
+    categoryRenderer.setTemplateContext(this._templateContext);
+    const perfCategoryRenderer = new PerformanceCategoryRenderer(this._dom, detailsRenderer);
+    perfCategoryRenderer.setTemplateContext(this._templateContext);
+
     const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
     for (const category of report.reportCategories) {
       if (scoreHeader) {
-        scoreHeader.appendChild(this._categoryRenderer.renderScoreGauge(category));
+        scoreHeader.appendChild(categoryRenderer.renderScoreGauge(category));
       }
-      categories.appendChild(this._categoryRenderer.render(category, report.reportGroups));
+
+      let renderer = categoryRenderer;
+
+      if (category.id === 'performance') {
+        renderer = perfCategoryRenderer;
+      }
+
+      categories.appendChild(renderer.render(category, report.reportGroups));
     }
 
     reportSection.appendChild(this._renderReportFooter(report));

diff --git a/lighthouse-core/report/v2/report-generator.js b/lighthouse-core/report/v2/report-generator.js
@@ -17,6 +17,7 @@ const REPORT_JAVASCRIPT = [
   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/report-renderer.js', 'utf8'),
 ].join(';\n');
 const REPORT_CSS = fs.readFileSync(__dirname + '/report-styles.css', 'utf8');

diff --git a/lighthouse-core/report/v2/report-template.html b/lighthouse-core/report/v2/report-template.html
@@ -25,9 +25,7 @@
   <script>
     window.addEventListener('DOMContentLoaded', _ => {
       const dom = new DOM(document);
-      const detailsRenderer = new DetailsRenderer(dom);
-      const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
-      const renderer = new ReportRenderer(dom, categoryRenderer);
+      const renderer = new ReportRenderer(dom);
 
       const container = document.querySelector('main');
       renderer.renderReport(window.__LIGHTHOUSE_JSON__, container);

diff --git a/lighthouse-core/scripts/compile-against-devtools.sh b/lighthouse-core/scripts/compile-against-devtools.sh
@@ -8,14 +8,14 @@
 
 
 # usage
-#    yarn compdevtools
+#    yarn compile-devtools
 
 
 # This the text here will override the renderer/ files in in the scripts[] array:
 #     https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/audits2/module.json#L20
 
 # (Currently this doesnt include logger or report-features)
-files_to_include="\"lighthouse\/renderer\/util.js\", \"lighthouse\/renderer\/dom.js\", \"lighthouse\/renderer\/category-renderer.js\", \"lighthouse\/renderer\/crc-details-renderer.js\", \"lighthouse\/renderer\/details-renderer.js\", \"lighthouse\/renderer\/report-renderer.js\","
+files_to_include="\"lighthouse\/renderer\/util.js\", \"lighthouse\/renderer\/dom.js\", \"lighthouse\/renderer\/category-renderer.js\", \"lighthouse\/renderer\/performance-category-renderer.js\", \"lighthouse\/renderer\/crc-details-renderer.js\", \"lighthouse\/renderer\/details-renderer.js\", \"lighthouse\/renderer\/report-renderer.js\","
 
 # -----------------------------