core(details-renderer): snippet details renderer type

lighthouse-core/audits/audit.js

@@ -125,6 +125,72 @@ class Audit {
     };
   }
 
+  /**
+   * @param {LH.Audit.Details.List['items']} items
+   * @returns {LH.Audit.Details.List}
+   */
+  static makeListDetails(items) {
+    return {
+      type: 'list',
+      items: items,
+    };
+  }
+
+  /** @typedef {{
+   * content: string;
+   * title: string;
+   * lineMessages: LH.Audit.Details.SnippetValue['lineMessages'];
+   * generalMessages: LH.Audit.Details.SnippetValue['generalMessages'];
+   * node?: LH.Audit.Details.NodeValue;
+   * maxLineLength?: number;
+   * maxLinesAroundMessage?: number;
+   * }} SnippetInfo */
+  /**
+   * @param {SnippetInfo} snippetInfo
+   * @return {LH.Audit.Details.SnippetValue}
+   */
+  static makeSnippetDetails({
+    content,
+    title,
+    lineMessages,
+    generalMessages,
+    node,
+    maxLineLength = 200,
+    maxLinesAroundMessage = 20,
+  }) {
+    const allLines = Audit._makeSnippetLinesArray(content, maxLineLength);
+    const lines = Util.filterRelevantLines(allLines, lineMessages, maxLinesAroundMessage);
+    return {
+      type: 'snippet',
+      lines,
+      title,
+      lineMessages,
+      generalMessages,
+      lineCount: allLines.length,
+      node,
+    };
+  }
+
+  /**
+   * @param {string} content
+   * @param {number} maxLineLength
+   * @returns {LH.Audit.Details.SnippetValue['lines']}
+   */
+  static _makeSnippetLinesArray(content, maxLineLength) {
+    return content.split('\n').map((line, lineIndex) => {
+      const lineNumber = lineIndex + 1;
+      /** @type LH.Audit.Details.SnippetValue['lines'][0] */
+      const lineDetail = {
+        content: line.slice(0, maxLineLength),
+        lineNumber,
+      };
+      if (line.length > maxLineLength) {
+        lineDetail.truncated = true;
+      }
+      return lineDetail;
+    });
+  }
+
   /**
    * @param {LH.Audit.Details.Opportunity['headings']} headings
    * @param {LH.Audit.Details.Opportunity['items']} items

lighthouse-core/lib/i18n/en-US.json

@@ -1135,6 +1135,14 @@
     "message": "Score scale:",
     "description": "Label preceding a pictorial explanation of the scoring scale: 0-50 is red (bad), 50-90 is orange (ok), 90-100 is green (good). These colors are used throughout the report to provide context for how good/bad a particular result is."
   },
+  "lighthouse-core/report/html/renderer/util.js | snippetCollapseButtonLabel": {
+    "message": "Collapse snippet",
+    "description": "Label for button that only shows a few lines of the snippet when clicked"
+  },
+  "lighthouse-core/report/html/renderer/util.js | snippetExpandButtonLabel": {
+    "message": "Expand snippet",
+    "description": "Label for button that shows all lines of the snippet when clicked"
+  },
   "lighthouse-core/report/html/renderer/util.js | toplevelWarningsMessage": {
     "message": "There were issues affecting this run of Lighthouse:",
     "description": "Label shown preceding any important warnings that may have invalidated the entire report. For example, if the user has Chrome extensions installed, they may add enough performance overhead that Lighthouse's performance metrics are unreliable. If shown, this will be displayed at the top of the report UI."

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

@@ -16,6 +16,7 @@ const REPORT_JAVASCRIPT = [
   fs.readFileSync(require.resolve('details-element-polyfill'), 'utf8'),
   fs.readFileSync(__dirname + '/renderer/details-renderer.js', 'utf8'),
   fs.readFileSync(__dirname + '/renderer/crc-details-renderer.js', 'utf8'),
+  fs.readFileSync(__dirname + '/renderer/snippet-renderer.js', 'utf8'),
   fs.readFileSync(__dirname + '/../../lib/file-namer.js', 'utf8'),
   fs.readFileSync(__dirname + '/renderer/logger.js', 'utf8'),
   fs.readFileSync(__dirname + '/renderer/report-ui-features.js', 'utf8'),

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

@@ -16,7 +16,7 @@
  */
 'use strict';
 
-/* globals self CriticalRequestChainRenderer Util URL */
+/* globals self CriticalRequestChainRenderer SnippetRenderer Util URL */
 
 /** @typedef {import('./dom.js')} DOM */
 /** @typedef {LH.Audit.Details.Opportunity} OpportunityDetails */
@@ -43,7 +43,7 @@ class DetailsRenderer {
   }
 
   /**
-   * @param {DetailsJSON|OpportunityDetails} details
+   * @param {DetailsJSON|OpportunityDetails|LH.Audit.Details.SnippetValue} details
    * @return {Element|null}
    */
   render(details) {
@@ -68,6 +68,11 @@ class DetailsRenderer {
       case 'table':
         // @ts-ignore - TODO(bckenny): Fix type hierarchy
         return this._renderTable(/** @type {TableDetailsJSON} */ (details));
+      case 'list':
+        return this._renderList(
+          // @ts-ignore - TODO(bckenny): Fix type hierarchy
+          /** @type {LH.Audit.Details.List} */ (details)
+        );
       case 'code':
         return this._renderCode(/** @type {DetailsJSON} */ (details));
       case 'node':
@@ -210,6 +215,21 @@ class DetailsRenderer {
     return element;
   }
 
+  /**
+   * @param {LH.Audit.Details.List} details
+   * @returns {Element}
+   */
+  _renderList(details) {
+    const listContainer = this._dom.createElement('div', 'lh-list');
+
+    details.items.forEach(item => {
+      const snippetEl = SnippetRenderer.render(this._dom, this._templateContext, item, this);
+      listContainer.appendChild(snippetEl);
+    });
+
+    return listContainer;
+  }
+
   /**
    * @param {TableDetailsJSON} details
    * @return {Element}