report(i18n): localize CRC renderer strings (#5730)

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

@@ -438,5 +438,13 @@
   "lighthouse-core/report/html/renderer/util.js | scorescaleLabel": {
     "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 | crcInitialNavigation": {
+    "message": "Initial Navigation",
+    "description": "String of text shown in a graphical representation of the flow of network requests for the web page. This label represents the initial network request that fetches an HTML page. This navigation may be redirected (eg. Initial navigation to http://example.com redirects to https://www.example.com)."
+  },
+  "lighthouse-core/report/html/renderer/util.js | crcLongestDurationLabel": {
+    "message": "Maximum critical path latency:",
+    "description": "Label of value shown in the summary of critical request chains. Refers to the total amount of time (milliseconds) of the longest critical path chain/sequence of network requests. Example value: 2310 ms"
   }
 }

lighthouse-core/lib/locales/en-XA.json

@@ -307,11 +307,5 @@
   },
   "lighthouse-core/report/html/renderer/util.js | toplevelWarningsMessage": {
     "message": "[Ţĥéŕé ŵéŕé îššûéš åƒƒéçţîñĝ ţĥîš ŕûñ öƒ Ļîĝĥţĥöûšé: one two three four five six seven eight nine ten eleven]"
-  },
-  "lighthouse-core/report/html/renderer/util.js | varianceDisclaimer": {
-    "message": "[Våļûéš åŕé éšţîmåţéð åñð måý våŕý. one two three four five six seven]"
-  },
-  "lighthouse-core/report/html/renderer/util.js | warningHeader": {
-    "message": "[Ŵåŕñîñĝš:  one two]"
   }
 }

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

@@ -126,11 +126,11 @@ class CriticalRequestChainRenderer {
     dom.find('.crc-node__tree-hostname', treevalEl).textContent = hostname ? `(${hostname})` : '';
 
     if (!segment.hasChildren) {
+      const {startTime, endTime, transferSize} = segment.node.request;
       const span = dom.createElement('span', 'crc-node__chain-duration');
-      span.textContent = ' - ' + Util.chainDuration(
-          segment.node.request.startTime, segment.node.request.endTime) + 'ms, ';
+      span.textContent = ' - ' + Util.formatMilliseconds((endTime - startTime) * 1000) + ', ';
       const span2 = dom.createElement('span', 'crc-node__chain-duration');
-      span2.textContent = Util.formatBytesToKB(segment.node.request.transferSize, 0.01);
+      span2.textContent = Util.formatBytesToKB(transferSize, 0.01);
 
       treevalEl.appendChild(span);
       treevalEl.appendChild(span2);
@@ -168,11 +168,11 @@ class CriticalRequestChainRenderer {
     const containerEl = dom.find('.lh-crc', tmpl);
 
     // Fill in top summary.
+    dom.find('.crc-initial-nav', tmpl).textContent = Util.UIStrings.crcInitialNavigation;
+    dom.find('.lh-crc__longest_duration_label', tmpl).textContent =
+        Util.UIStrings.crcLongestDurationLabel;
     dom.find('.lh-crc__longest_duration', tmpl).textContent =
-        Util.formatNumber(details.longestChain.duration) + 'ms';
-    dom.find('.lh-crc__longest_length', tmpl).textContent = details.longestChain.length.toString();
-    dom.find('.lh-crc__longest_transfersize', tmpl).textContent =
-        Util.formatBytesToKB(details.longestChain.transferSize);
+        Util.formatMilliseconds(details.longestChain.duration);
 
     // Construct visual tree.
     const root = CriticalRequestChainRenderer.initTree(details.chains);

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

@@ -308,15 +308,6 @@ class Util {
     };
   }
 
-  /**
-   * @param {number} startTime
-   * @param {number} endTime
-   * @return {string}
-   */
-  static chainDuration(startTime, endTime) {
-    return Util.formatNumber((endTime - startTime) * 1000);
-  }
-
   /**
    * @param {LH.Config.Settings} settings
    * @return {Array<{name: string, description: string}>}
@@ -447,6 +438,11 @@ Util.UIStrings = {
   toplevelWarningsMessage: 'There were issues affecting this run of Lighthouse:',
   /** 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. */
   scorescaleLabel: 'Score scale:',
+
+  /** String of text shown in a graphical representation of the flow of network requests for the web page. This label represents the initial network request that fetches an HTML page. This navigation may be redirected (eg. Initial navigation to http://example.com redirects to https://www.example.com). */
+  crcInitialNavigation: 'Initial Navigation',
+  /** Label of value shown in the summary of critical request chains. Refers to the total amount of time (milliseconds) of the longest critical path chain/sequence of network requests. Example value: 2310 ms */
+  crcLongestDurationLabel: 'Maximum critical path latency:',
 };
 
 if (typeof module !== 'undefined' && module.exports) {

lighthouse-core/report/html/templates.html

@@ -618,15 +618,17 @@
         color: #595959;
         font-style: italic;
       }
+      .lh-crc__summary-value {
+        margin-bottom: 10px;
+      }
     </style>
     <div>
-      <!-- TODO(i18n): remove CRC sentences or localize -->
-      Longest chain: <b class="lh-crc__longest_duration"><!-- fill me: longestChain.duration --></b>
-      over <b class="lh-crc__longest_length"><!-- fill me: longestChain.length --></b> requests, totalling
-      <b class="lh-crc__longest_transfersize"><!-- fill me: longestChain.length --></b>
+      <div class="lh-crc__summary-value">
+        <span class="lh-crc__longest_duration_label"></span> <b class="lh-crc__longest_duration"></b>
+      </div>
     </div>
     <div class="lh-crc">
-      <div class="crc-initial-nav">Initial Navigation</div>
+      <div class="crc-initial-nav"></div>
       <!-- stamp for each chain -->
       <template id="tmpl-lh-crc__chains">
         <div class="crc-node">

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

@@ -103,7 +103,7 @@ describe('DetailsRenderer', () => {
     assert.equal(chains[1].querySelector('.crc-node__tree-file').textContent, '/b.js');
     assert.equal(chains[1].querySelector('.crc-node__tree-hostname').textContent, '(example.com)');
     const durationNodes = chains[1].querySelectorAll('.crc-node__chain-duration');
-    assert.equal(durationNodes[0].textContent, ' - 5,000ms, ');
+    assert.equal(durationNodes[0].textContent, ' - 5,000\xa0ms, ');
     // Note: actual transferSize is 2000 bytes but formatter formats to KBs.
     assert.equal(durationNodes[1].textContent, '1.95\xa0KB');
   });

lighthouse-core/test/results/sample_v2.json

@@ -3415,7 +3415,9 @@
       "notApplicableAuditsGroupTitle": "Not applicable",
       "manualAuditsGroupTitle": "Additional items to manually check",
       "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:",
-      "scorescaleLabel": "Score scale:"
+      "scorescaleLabel": "Score scale:",
+      "crcInitialNavigation": "Initial Navigation",
+      "crcLongestDurationLabel": "Maximum critical path latency:"
     },
     "icuMessagePaths": {
       "lighthouse-core/audits/metrics/first-contentful-paint.js | title": [