core(lhr): audit id, title, description (#5190)

lighthouse-core/audits/audit.js

@@ -184,18 +184,19 @@ class Audit {
     }
 
     return {
+      id: audit.meta.name,
+      title: auditDescription,
+      description: audit.meta.helpText,
+
       score,
+      scoreDisplayMode,
       rawValue: result.rawValue,
 
       displayValue: result.displayValue,
       explanation: result.explanation,
       errorMessage: result.errorMessage,
       warnings: result.warnings,
 
-      scoreDisplayMode,
-      name: audit.meta.name,
-      description: auditDescription,
-      helpText: audit.meta.helpText,
       details: result.details,
     };
   }

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

@@ -31,7 +31,7 @@ class CategoryRenderer {
   renderAudit(audit, index) {
     const tmpl = this.dom.cloneTemplate('#tmpl-lh-audit', this.templateContext);
     const auditEl = this.dom.find('.lh-audit', tmpl);
-    auditEl.id = audit.result.name;
+    auditEl.id = audit.result.id;
     const scoreDisplayMode = audit.result.scoreDisplayMode;
 
     if (audit.result.displayValue) {
@@ -40,9 +40,9 @@ class CategoryRenderer {
     }
 
     const titleEl = this.dom.find('.lh-audit__title', auditEl);
-    titleEl.appendChild(this.dom.convertMarkdownCodeSnippets(audit.result.description));
+    titleEl.appendChild(this.dom.convertMarkdownCodeSnippets(audit.result.title));
     this.dom.find('.lh-audit__description', auditEl)
-      .appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));
+      .appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
 
     // Append audit details to header section so the entire audit is within a <details>.
     const header = /** @type {!HTMLDetailsElement} */ (this.dom.find('details', auditEl));

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

@@ -15,18 +15,18 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
   _renderMetric(audit) {
     const tmpl = this.dom.cloneTemplate('#tmpl-lh-metric', this.templateContext);
     const element = this.dom.find('.lh-metric', tmpl);
-    element.id = audit.result.name;
+    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.description;
+    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.helpText));
+    descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
 
     if (audit.result.scoreDisplayMode === 'error') {
       descriptionEl.textContent = '';
@@ -48,10 +48,10 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     const tmpl = this.dom.cloneTemplate('#tmpl-lh-opportunity', this.templateContext);
     const element = this.dom.find('.lh-load-opportunity', tmpl);
     element.classList.add(`lh-load-opportunity--${Util.calculateRating(audit.result.score)}`);
-    element.id = audit.result.name;
+    element.id = audit.result.id;
 
     const titleEl = this.dom.find('.lh-load-opportunity__title', tmpl);
-    titleEl.textContent = audit.result.description;
+    titleEl.textContent = audit.result.title;
     this.dom.find('.lh-audit__index', element).textContent = `${index + 1}`;
 
     if (audit.result.errorMessage || audit.result.explanation) {
@@ -70,7 +70,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     const displayValue = Util.formatDisplayValue(audit.result.displayValue);
     const sparklineWidthPct = `${summaryInfo.wastedMs / scale * 100}%`;
     const wastedMs = Util.formatSeconds(summaryInfo.wastedMs, 0.01);
-    const auditDescription = this.dom.convertMarkdownLinkSnippets(audit.result.helpText);
+    const auditDescription = this.dom.convertMarkdownLinkSnippets(audit.result.description);
     this.dom.find('.lh-load-opportunity__sparkline', tmpl).title = displayValue;
     this.dom.find('.lh-load-opportunity__wasted-stat', tmpl).title = displayValue;
     this.dom.find('.lh-sparkline__bar', tmpl).style.width = sparklineWidthPct;
@@ -144,7 +144,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     const thumbnailAudit = category.auditRefs.find(audit => audit.id === 'screenshot-thumbnails');
     const thumbnailResult = thumbnailAudit && thumbnailAudit.result;
     if (thumbnailResult && thumbnailResult.details) {
-      timelineEl.id = thumbnailResult.name;
+      timelineEl.id = thumbnailResult.id;
       const thumbnailDetails = /** @type {!DetailsRenderer.FilmstripDetails} */
           (thumbnailResult.details);
       const filmstripEl = this.detailsRenderer.render(thumbnailDetails);

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

@@ -194,12 +194,12 @@ if (typeof module !== 'undefined' && module.exports) {
 /**
  * @typedef {{
  *     rawValue: (number|boolean|undefined),
- *     name: string,
+ *     id: string,
+ *     title: string,
  *     description: string,
  *     explanation: (string|undefined),
  *     errorMessage: (string|undefined),
  *     displayValue: (string|Array<string|number>|undefined),
- *     helpText: string,
  *     scoreDisplayMode: string,
  *     error: boolean,
  *     score: (number|null),

lighthouse-core/report/report-generator.js

@@ -74,7 +74,7 @@ class ReportGenerator {
         const audit = lhr.audits[auditRef.id];
         // CSV validator wants all scores to be numeric, use -1 for now
         const numericScore = audit.score === null ? -1 : audit.score;
-        return [category.title, audit.name, audit.description, audit.scoreDisplayMode, numericScore]
+        return [category.title, audit.id, audit.title, audit.scoreDisplayMode, numericScore]
           .map(value => value.toString())
           .map(escape);
       });

lighthouse-core/runner.js

@@ -111,10 +111,10 @@ class Runner {
       /** @type {Object<string, LH.Audit.Result>} */
       const resultsById = {};
       for (const audit of auditResults) {
-        resultsById[audit.name] = audit;
+        resultsById[audit.id] = audit;
 
         if (audit.warnings && audit.warnings.length) {
-          const prefixedWarnings = audit.warnings.map(msg => `${audit.description}: ${msg}`);
+          const prefixedWarnings = audit.warnings.map(msg => `${audit.title}: ${msg}`);
           lighthouseRunWarnings.push(...prefixedWarnings);
         }
       }

lighthouse-core/test/audits/audit-test.js

@@ -82,7 +82,7 @@ describe('Audit', () => {
       const auditResult = Audit.generateAuditResult(FailingAudit, {rawValue: false});
       assert.ok(Number.isFinite(auditResult.score));
       assert.equal(auditResult.score, 0);
-      assert.equal(auditResult.description, 'Failing');
+      assert.equal(auditResult.title, 'Failing');
     });
   });
 

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

@@ -58,7 +58,7 @@ describe('CategoryRenderer', () => {
     const title = auditDOM.querySelector('.lh-audit__title');
     const description = auditDOM.querySelector('.lh-audit__description');
 
-    assert.equal(title.textContent, auditRef.result.description);
+    assert.equal(title.textContent, auditRef.result.title);
     assert.ok(description.querySelector('a'), 'audit help text contains coverted markdown links');
     assert.ok(auditDOM.classList.contains('lh-audit--fail'));
     assert.ok(auditDOM.classList.contains(`lh-audit--${auditRef.result.scoreDisplayMode}`));
@@ -67,21 +67,21 @@ describe('CategoryRenderer', () => {
   it('renders an audit explanation when appropriate', () => {
     const audit1 = renderer.renderAudit({
       scoreDisplayMode: 'binary', score: 0,
-      result: {helpText: 'help text', explanation: 'A reason', description: 'Audit title'},
+      result: {description: 'help text', explanation: 'A reason', title: 'Audit title'},
     });
     assert.ok(audit1.querySelector('.lh-debug'));
 
     const audit2 = renderer.renderAudit({
       scoreDisplayMode: 'binary', score: 0,
-      result: {helpText: 'help text', description: 'Audit title'},
+      result: {description: 'help text', title: 'Audit title'},
     });
     assert.ok(!audit2.querySelector('.lh-debug'));
   });
 
   it('renders an informative audit', () => {
     const auditDOM = renderer.renderAudit({
       id: 'informative', score: 0,
-      result: {description: 'It informs', helpText: 'help text', scoreDisplayMode: 'informative'},
+      result: {title: 'It informs', description: 'help text', scoreDisplayMode: 'informative'},
     });
 
     assert.ok(auditDOM.matches('.lh-audit--informative'));
@@ -117,8 +117,8 @@ describe('CategoryRenderer', () => {
   // TODO(phulce): revisit if top-level warnings approach is too noisy
   it.skip('renders audits with warnings as failed', () => {
     const auditResult = {
-      description: 'Audit',
-      helpText: 'Learn more',
+      title: 'Audit',
+      description: 'Learn more',
       warnings: ['It may not have worked!'],
       score: 1,
     };