call renderAudit from renderOpportunity

lighthouse-core/report/html/renderer/category-renderer.js

@@ -26,25 +26,26 @@ class CategoryRenderer {
   /**
    * @param {!ReportRenderer.AuditJSON} audit
    * @param {number} index
+   * @param {DocumentFragment=} providedTmpl
    * @return {!Element}
    */
-  renderAudit(audit, index) {
-    const tmpl = this.dom.cloneTemplate('#tmpl-lh-audit', this.templateContext);
+  renderAudit(audit, index, providedTmpl) {
+    const tmpl = providedTmpl || this.dom.cloneTemplate('#tmpl-lh-audit', this.templateContext);
     const auditEl = this.dom.find('.lh-audit', tmpl);
     auditEl.id = audit.result.name;
+    const displayTextEl = this.dom.find('.lh-audit__display-text, .lh-audit__display-text', auditEl);
     const scoreDisplayMode = audit.result.scoreDisplayMode;
 
     if (audit.result.displayValue) {
       const displayValue = Util.formatDisplayValue(audit.result.displayValue);
-      this.dom.find('.lh-audit__display-text', auditEl).textContent = displayValue;
+      displayTextEl.textContent = displayValue;
     }
 
     const titleEl = this.dom.find('.lh-audit__title', auditEl);
     titleEl.appendChild(this.dom.convertMarkdownCodeSnippets(audit.result.description));
     this.dom.find('.lh-audit__description', auditEl)
       .appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));
 
-    // Append audit details to header section so the entire audit is within a <details>.
     const header = /** @type {!HTMLDetailsElement} */ (this.dom.find('details', auditEl));
     if (audit.result.details && audit.result.details.type) {
       header.appendChild(this.detailsRenderer.render(audit.result.details));
@@ -58,10 +59,9 @@ class CategoryRenderer {
 
     if (audit.result.error) {
       auditEl.classList.add(`lh-audit--error`);
-      const textEl = this.dom.find('.lh-audit__display-text', auditEl);
-      textEl.textContent = 'Error!';
-      textEl.classList.add('tooltip-boundary');
-      const tooltip = this.dom.createChildOf(textEl, 'div', 'lh-error-tooltip-content tooltip');
+      displayTextEl.textContent = 'Error!';
+      displayTextEl.classList.add('tooltip-boundary');
+      const tooltip = this.dom.createChildOf(displayTextEl, 'div', 'tooltip');
       tooltip.textContent = audit.result.debugString || 'Report error: no audit information';
     } else if (audit.result.debugString) {
       const debugStrEl = this.dom.createChildOf(titleEl, 'div', 'lh-debug');

lighthouse-core/report/html/renderer/performance-category-renderer.js

@@ -33,7 +33,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       element.classList.add(`lh-metric--error`);
       descriptionEl.textContent = '';
       valueEl.textContent = 'Error!';
-      const tooltip = this.dom.createChildOf(descriptionEl, 'span', 'lh-error-tooltip-content');
+      const tooltip = this.dom.createChildOf(descriptionEl, 'span');
       tooltip.textContent = audit.result.debugString || 'Report error: no metric information';
     }
 
@@ -47,42 +47,27 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
    * @return {!Element}
    */
   _renderOpportunity(audit, index, scale) {
-    const tmpl = this.dom.cloneTemplate('#tmpl-lh-opportunity', this.templateContext);
-    const element = this.dom.find('.lh-audit--load-opportunity', tmpl);
+    const oppTmpl = this.dom.cloneTemplate('#tmpl-lh-opportunity', this.templateContext);
+    const element = this.renderAudit(audit, index, oppTmpl);
     element.classList.add(`lh-audit--${Util.calculateRating(audit.result.score)}`);
     element.id = audit.result.name;
 
-    const titleEl = this.dom.find('.lh-audit__title', tmpl);
-    titleEl.textContent = audit.result.description;
-    this.dom.find('.lh-audit__index', element).textContent = `${index + 1}`;
-
-    if (audit.result.debugString || audit.result.error) {
-      const debugStrEl = this.dom.createChildOf(titleEl, 'div', 'lh-debug');
-      debugStrEl.textContent = audit.result.debugString || 'Audit error';
-    }
-    if (audit.result.error) return element;
-
     const details = audit.result.details;
     const summaryInfo = /** @type {!DetailsRenderer.OpportunitySummary}
     */ (details && details.summary);
     if (!summaryInfo || !summaryInfo.wastedMs) {
       return element;
     }
 
-    const displayValue = Util.formatDisplayValue(audit.result.displayValue);
+    const wastedEl = this.dom.find('.lh-audit__display-text', element);
     const sparklineWidthPct = `${summaryInfo.wastedMs / scale * 100}%`;
-    const wastedMs = Util.formatSeconds(summaryInfo.wastedMs, 0.01);
-    const wastedEl = this.dom.find('.lh-load-opportunity__wasted-stat', tmpl);
-    const auditDescription = this.dom.convertMarkdownLinkSnippets(audit.result.helpText);
-    this.dom.find('.lh-load-opportunity__sparkline', tmpl).title = displayValue;
-    this.dom.find('.lh-sparkline__bar', tmpl).style.width = sparklineWidthPct;
-    this.dom.find('.lh-audit__description', tmpl).appendChild(auditDescription);
-    wastedEl.title = displayValue;
-    wastedEl.textContent = wastedMs;
-
-    // If there's no `type`, then we only used details for `summary`
-    if (details.type) {
-      this.dom.find('details', tmpl).appendChild(this.detailsRenderer.render(details));
+    this.dom.find('.lh-sparkline__bar', element).style.width = sparklineWidthPct;
+    wastedEl.textContent = Util.formatSeconds(summaryInfo.wastedMs, 0.01);
+
+    if (audit.result.displayValue) {
+      const displayValue = Util.formatDisplayValue(audit.result.displayValue);
+      this.dom.find('.lh-load-opportunity__sparkline', element).title = displayValue;
+      wastedEl.title = displayValue;
     }
 
     return element;

lighthouse-core/report/html/renderer/util.js

@@ -35,9 +35,11 @@ class Util {
    * @return {string}
    */
   static formatDisplayValue(displayValue) {
-    if (typeof displayValue === 'undefined') return '';
     if (typeof displayValue === 'string') return displayValue;
+    if (!displayValue) return '';
 
+    // Don't mutate the value
+    displayValue = [...displayValue];
     const replacementRegex = /%([0-9]*(\.[0-9]+)?d|s)/;
     const template = /** @type {string} */ (displayValue.shift());
     if (typeof template !== 'string') {

lighthouse-core/report/html/templates.html

@@ -66,7 +66,7 @@
             <div class="lh-load-opportunity__sparkline">
               <div class="lh-sparkline"><div class="lh-sparkline__bar"></div></div>
             </div>
-            <div class="lh-load-opportunity__wasted-stat"></div>
+            <div class="lh-audit__display-text"></div>
             <div class="lh-toggle-arrow" title="See resources"></div>
           </div>
         </div>

lighthouse-core/test/report/html/renderer/performance-category-renderer-test.js

@@ -92,7 +92,7 @@ describe('PerfCategoryRenderer', () => {
     const oppSparklineBarElement = oppElement.querySelector('.lh-sparkline__bar');
     const oppSparklineElement = oppElement.querySelector('.lh-load-opportunity__sparkline');
     const oppTitleElement = oppElement.querySelector('.lh-load-opportunity__title');
-    const oppWastedElement = oppElement.querySelector('.lh-load-opportunity__wasted-stat');
+    const oppWastedElement = oppElement.querySelector('.lh-audit__display-text');
     assert.ok(oppTitleElement.textContent, 'did not render title');
     assert.ok(oppSparklineBarElement.style.width, 'did not set sparkline width');
     assert.ok(oppWastedElement.textContent, 'did not render stats');