report: rework the DOM of audits (#5045)

* driveby: update nodeTimings types
GoogleChrome · Apr 27, 2018 · 440155c · 440155c
1 parent 63c9997
commit 440155c
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 127 deletions.
diff --git a/lighthouse-core/gather/computed/metrics/lantern-consistently-interactive.js b/lighthouse-core/gather/computed/metrics/lantern-consistently-interactive.js
@@ -94,7 +94,7 @@ class ConsistentlyInteractive extends MetricArtifact {
   }
 
   /**
-   * @param {Map<Node, LH.Gatherer.Simulation.NodeTiming>} nodeTimings
+   * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
    * @return {number}
    */
   static getLastLongTaskEndTime(nodeTimings, duration = 50) {

diff --git a/lighthouse-core/gather/computed/metrics/lantern-first-cpu-idle.js b/lighthouse-core/gather/computed/metrics/lantern-first-cpu-idle.js
@@ -35,7 +35,7 @@ class LanternFirstCPUIdle extends LanternConsistentlyInteractive {
 
   /**
    *
-   * @param {Map<Node, LH.Gatherer.Simulation.NodeTiming>} nodeTimings
+   * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
    * @param {number} fmpTimeInMs
    */
   static getFirstCPUIdleWindowStart(nodeTimings, fmpTimeInMs, longTaskLength = 50) {

diff --git a/lighthouse-core/gather/computed/metrics/lantern-speed-index.js b/lighthouse-core/gather/computed/metrics/lantern-speed-index.js
@@ -84,7 +84,7 @@ class SpeedIndex extends MetricArtifact {
    * different methods. Read more in the evaluation doc.
    *
    * @see https://docs.google.com/document/d/1qJWXwxoyVLVadezIp_Tgdk867G3tDNkkVRvUJSH3K1E/edit#
-   * @param {Map<Node, LH.Gatherer.Simulation.NodeTiming>} nodeTimings
+   * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings
    * @param {number} fcpTimeInMs
    * @return {number}
    */

diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js
@@ -27,8 +27,9 @@ class CategoryRenderer {
    * @param {!ReportRenderer.AuditJSON} audit
    * @return {!Element}
    */
-  _renderAuditScore(audit) {
-    const tmpl = this.dom.cloneTemplate('#tmpl-lh-audit-score', this.templateContext);
+  renderAudit(audit) {
+    const tmpl = this.dom.cloneTemplate('#tmpl-lh-audit', this.templateContext);
+    const auditEl = this.dom.find('.lh-audit', tmpl);
 
     const scoreDisplayMode = audit.result.scoreDisplayMode;
     const description = audit.result.helpText;
@@ -39,25 +40,24 @@ class CategoryRenderer {
     }
 
     if (audit.result.debugString) {
-      const debugStrEl = tmpl.appendChild(this.dom.createElement('div', 'lh-debug'));
+      const debugStrEl = auditEl.appendChild(this.dom.createElement('div', 'lh-debug'));
       debugStrEl.textContent = audit.result.debugString;
     }
 
     // Append audit details to header section so the entire audit is within a <details>.
-    const header = /** @type {!HTMLDetailsElement} */ (this.dom.find('.lh-score__header', tmpl));
+    const header = /** @type {!HTMLDetailsElement} */ (this.dom.find('.lh-audit__header', auditEl));
     if (audit.result.details && audit.result.details.type) {
       header.appendChild(this.detailsRenderer.render(audit.result.details));
     }
 
-    const scoreEl = this.dom.find('.lh-score', tmpl);
     if (audit.result.informative) {
-      scoreEl.classList.add('lh-score--informative');
+      auditEl.classList.add('lh-audit--informative');
     }
     if (audit.result.manual) {
-      scoreEl.classList.add('lh-score--manual');
+      auditEl.classList.add('lh-audit--manual');
     }
 
-    return this._populateScore(tmpl, audit.result.score, scoreDisplayMode, title, description);
+    return this._populateScore(auditEl, audit.result.score, scoreDisplayMode, title, description);
   }
 
   /**
@@ -76,9 +76,9 @@ class CategoryRenderer {
     valueEl.classList.add(`lh-score__value--${Util.calculateRating(score)}`,
         `lh-score__value--${scoreDisplayMode}`);
 
-    this.dom.find('.lh-score__title', element).appendChild(
+    this.dom.find('.lh-audit__title, .lh-category-header__title', element).appendChild(
         this.dom.convertMarkdownCodeSnippets(title));
-    this.dom.find('.lh-score__description', element)
+    this.dom.find('.lh-audit__description, .lh-category-header__description', element)
         .appendChild(this.dom.convertMarkdownLinkSnippets(description));
 
     return /** @type {!Element} **/ (element);
@@ -89,7 +89,7 @@ class CategoryRenderer {
    * @return {!Element}
    */
   renderCategoryScore(category) {
-    const tmpl = this.dom.cloneTemplate('#tmpl-lh-category-score', this.templateContext);
+    const tmpl = this.dom.cloneTemplate('#tmpl-lh-category-header', this.templateContext);
 
     const gaugeContainerEl = this.dom.find('.lh-score__gauge', tmpl);
     const gaugeEl = this.renderScoreGauge(category);
@@ -99,16 +99,6 @@ class CategoryRenderer {
     return this._populateScore(tmpl, score, 'numeric', name, description);
   }
 
-  /**
-   * @param {!ReportRenderer.AuditJSON} audit
-   * @return {!Element}
-   */
-  renderAudit(audit) {
-    const element = this.dom.createElement('div', 'lh-audit');
-    element.appendChild(this._renderAuditScore(audit));
-    return element;
-  }
-
   /**
    * Renders the group container for a group of audits. Individual audit elements can be added
    * directly to the returned element.

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
diff --git a/lighthouse-core/report/html/report-template.html b/lighthouse-core/report/html/report-template.html
@@ -20,7 +20,9 @@
 
   <div id="lh-log"></div>
 
-  <script>%%LIGHTHOUSE_JAVASCRIPT%%</script>
+  <script>%%LIGHTHOUSE_JAVASCRIPT%%
+  //# sourceURL=compiled-reportrenderer.js
+  </script>
   <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
   <script>
     window.addEventListener('DOMContentLoaded', _ => {