diff --git a/lighthouse-core/lib/locales/en-US.json b/lighthouse-core/lib/locales/en-US.json index 5b20f79a58a1..cc37da30c301 100644 --- a/lighthouse-core/lib/locales/en-US.json +++ b/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" } } diff --git a/lighthouse-core/lib/locales/en-XA.json b/lighthouse-core/lib/locales/en-XA.json index 8777020f09a5..ecb4f1ed7e5d 100644 --- a/lighthouse-core/lib/locales/en-XA.json +++ b/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]" } } diff --git a/lighthouse-core/report/html/renderer/crc-details-renderer.js b/lighthouse-core/report/html/renderer/crc-details-renderer.js index 5c5fe7957421..9e8811728b45 100644 --- a/lighthouse-core/report/html/renderer/crc-details-renderer.js +++ b/lighthouse-core/report/html/renderer/crc-details-renderer.js @@ -115,11 +115,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); @@ -157,11 +157,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); diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index cb1f8f9839ea..03abdbd67590 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -296,15 +296,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}>} @@ -405,6 +396,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) { diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index de905ae65e9e..7e752cdf3875 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -607,15 +607,17 @@ color: #595959; font-style: italic; } + .lh-crc__summary-value { + margin-bottom: 10px; + }
- - Longest chain: - over requests, totalling - +
+ +
-
Initial Navigation
+