Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

report(i18n): localize CRC renderer strings #5730

Merged
merged 5 commits into from
Aug 2, 2018
Merged

report(i18n): localize CRC renderer strings #5730

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a42aa21
report(i18n): localize CRC renderer strings
patrickhulce Jul 26, 2018
93192fb
golden lhr
patrickhulce Jul 27, 2018
01c3261
test update
patrickhulce Jul 27, 2018
aa43d3b
add descriptions. remove longestChainCount from UI
paulirish Jul 30, 2018
8ac31ee
remove the XA locale for these new strings. we get those from TC
paulirish Aug 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions lighthouse-core/lib/locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
6 changes: 0 additions & 6 deletions lighthouse-core/lib/locales/en-XA.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]"
}
}
14 changes: 7 additions & 7 deletions lighthouse-core/report/html/renderer/crc-details-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
14 changes: 5 additions & 9 deletions lighthouse-core/report/html/renderer/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>}
Expand Down Expand Up @@ -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). */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the redirected explanation may be overkill but w/e

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) {
Expand Down
12 changes: 7 additions & 5 deletions lighthouse-core/report/html/templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -607,15 +607,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">
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/test/report/html/renderer/crc-details-renderer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
4 changes: 3 additions & 1 deletion lighthouse-core/test/results/sample_v2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3386,7 +3386,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": [
Expand Down