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.

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

i18n(report): runtime settings and tools #9166

Merged
merged 32 commits into from
Jan 14, 2020
Merged
Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
52030ca
i18n runtime settings & dropdown. Modify ui-feat for i18n.
exterkamp Jun 10, 2019
ab5b189
Wrongly added this localeString mod
exterkamp Jun 10, 2019
df92054
Messed up some HTML while editing the strings.
exterkamp Jun 10, 2019
e6a7d32
Ignore report-ui-feat from collect-strings. Update proto, update sam…
exterkamp Jun 10, 2019
5a5f2c0
stringback
exterkamp Jun 10, 2019
e469d64
this -> Util
exterkamp Jun 10, 2019
670ef5e
Add proto comments.
exterkamp Jun 13, 2019
341b858
convert \t to _ because regex is hard
exterkamp Jun 13, 2019
4664a5f
Merge branch 'master' into i18n-report
exterkamp Jun 26, 2019
5f1ec69
collected en-XL
exterkamp Jun 26, 2019
03afb96
Merge branch 'master' into i18n-report
exterkamp Jul 10, 2019
78444a7
Merge branch 'master' into i18n-report
exterkamp Jul 26, 2019
62b3ba1
let -> const
exterkamp Jul 26, 2019
e683ebd
updated id's
exterkamp Aug 1, 2019
d5135a0
Merge branch 'master' into i18n-report
exterkamp Aug 14, 2019
1676f8a
Added caching/hydration to Util
exterkamp Aug 14, 2019
a785482
hm, not sure how that worked, but okay
exterkamp Aug 16, 2019
a0c7c91
Merge branch 'master' into i18n-report
exterkamp Aug 16, 2019
d8916e7
Merge branch 'master' into i18n-report
exterkamp Jan 8, 2020
eff2c46
net -> network
exterkamp Jan 8, 2020
37732a6
data-i18n attr
exterkamp Jan 8, 2020
c7b5083
update sample json
exterkamp Jan 8, 2020
ef3549d
keyof!
exterkamp Jan 8, 2020
52abf75
forEach -> for of
exterkamp Jan 9, 2020
0bac2c4
add test
exterkamp Jan 9, 2020
d4d35a3
Connor's nits
exterkamp Jan 10, 2020
ccdba60
Remove backup English from html, remove useless ignorePaths
exterkamp Jan 13, 2020
3301b18
Merge branch 'i18n-report' of github.com:GoogleChrome/lighthouse into…
exterkamp Jan 13, 2020
4c89c0f
fix tests
exterkamp Jan 14, 2020
ee5bab0
Merge remote-tracking branch 'origin/master' into i18n-report
exterkamp Jan 14, 2020
d5aa83c
Revert "fix tests"
exterkamp Jan 14, 2020
551886b
ignore axe link-name
exterkamp Jan 14, 2020
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
69 changes: 69 additions & 0 deletions lighthouse-core/lib/i18n/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -1532,12 +1532,39 @@
"lighthouse-core/report/html/renderer/util.js | crcLongestDurationLabel": {
"message": "Maximum critical path latency:"
},
"lighthouse-core/report/html/renderer/util.js | dropdownCopyJSON": {
"message": "Copy JSON"
},
"lighthouse-core/report/html/renderer/util.js | dropdownDarkTheme": {
"message": "Toggle Dark Theme"
},
"lighthouse-core/report/html/renderer/util.js | dropdownPrintExpanded": {
"message": "Print Expanded"
},
"lighthouse-core/report/html/renderer/util.js | dropdownPrintSummary": {
"message": "Print Summary"
},
"lighthouse-core/report/html/renderer/util.js | dropdownSaveGist": {
"message": "Save as Gist"
},
"lighthouse-core/report/html/renderer/util.js | dropdownSaveHTML": {
"message": "Save as HTML"
},
"lighthouse-core/report/html/renderer/util.js | dropdownSaveJSON": {
"message": "Save as JSON"
},
"lighthouse-core/report/html/renderer/util.js | dropdownViewer": {
"message": "Open in Viewer"
},
"lighthouse-core/report/html/renderer/util.js | errorLabel": {
"message": "Error!"
},
"lighthouse-core/report/html/renderer/util.js | errorMissingAuditInfo": {
"message": "Report error: no audit information"
},
"lighthouse-core/report/html/renderer/util.js | footerIssue": {
"message": "File an issue"
},
"lighthouse-core/report/html/renderer/util.js | labDataTitle": {
"message": "Lab Data"
},
Expand All @@ -1559,6 +1586,45 @@
"lighthouse-core/report/html/renderer/util.js | passedAuditsGroupTitle": {
"message": "Passed audits"
},
"lighthouse-core/report/html/renderer/util.js | runtimeDesktopEmulation": {
"message": "Emulated Desktop"
},
"lighthouse-core/report/html/renderer/util.js | runtimeMobileEmulation": {
"message": "Emulated Nexus 5X"
},
"lighthouse-core/report/html/renderer/util.js | runtimeNoEmulation": {
"message": "No emulation"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsBenchmark": {
"message": "CPU/Memory Power"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsCPUThrottling": {
"message": "CPU throttling"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsDevice": {
"message": "Device"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsFetchTime": {
"message": "Fetch Time"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsNetworkThrottling": {
"message": "Network throttling"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsTitle": {
"message": "Runtime Settings"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsUA": {
"message": "User agent (host)"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsUANetwork": {
"message": "User agent (network)"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsUrl": {
"message": "URL"
},
"lighthouse-core/report/html/renderer/util.js | runtimeUnknown": {
"message": "Unknown"
},
"lighthouse-core/report/html/renderer/util.js | snippetCollapseButtonLabel": {
"message": "Collapse snippet"
},
Expand All @@ -1568,6 +1634,9 @@
"lighthouse-core/report/html/renderer/util.js | thirdPartyResourcesLabel": {
"message": "Show 3rd-party resources"
},
"lighthouse-core/report/html/renderer/util.js | throttlingProvided": {
"message": "Provided by environment"
},
"lighthouse-core/report/html/renderer/util.js | toplevelWarningsMessage": {
"message": "There were issues affecting this run of Lighthouse:"
},
Expand Down
69 changes: 69 additions & 0 deletions lighthouse-core/lib/i18n/locales/en-XL.json
Original file line number Diff line number Diff line change
Expand Up @@ -1532,12 +1532,39 @@
"lighthouse-core/report/html/renderer/util.js | crcLongestDurationLabel": {
"message": "M̂áx̂ím̂úm̂ ćr̂ít̂íĉál̂ ṕât́ĥ ĺât́êńĉý:"
},
"lighthouse-core/report/html/renderer/util.js | dropdownCopyJSON": {
"message": "Ĉóp̂ý ĴŚÔŃ"
},
"lighthouse-core/report/html/renderer/util.js | dropdownDarkTheme": {
"message": "T̂óĝǵl̂é D̂ár̂ḱ T̂h́êḿê"
},
"lighthouse-core/report/html/renderer/util.js | dropdownPrintExpanded": {
"message": "P̂ŕîńt̂ Éx̂ṕâńd̂éd̂"
},
"lighthouse-core/report/html/renderer/util.js | dropdownPrintSummary": {
"message": "P̂ŕîńt̂ Śûḿm̂ár̂ý"
},
"lighthouse-core/report/html/renderer/util.js | dropdownSaveGist": {
"message": "Ŝáv̂é âś Ĝíŝt́"
},
"lighthouse-core/report/html/renderer/util.js | dropdownSaveHTML": {
"message": "Ŝáv̂é âś ĤT́M̂Ĺ"
},
"lighthouse-core/report/html/renderer/util.js | dropdownSaveJSON": {
"message": "Ŝáv̂é âś ĴŚÔŃ"
},
"lighthouse-core/report/html/renderer/util.js | dropdownViewer": {
"message": "Ôṕêń îń V̂íêẃêŕ"
},
"lighthouse-core/report/html/renderer/util.js | errorLabel": {
"message": "Êŕr̂ór̂!"
},
"lighthouse-core/report/html/renderer/util.js | errorMissingAuditInfo": {
"message": "R̂ép̂ór̂t́ êŕr̂ór̂: ńô áûd́ît́ îńf̂ór̂ḿât́îón̂"
},
"lighthouse-core/report/html/renderer/util.js | footerIssue": {
"message": "F̂íl̂é âń îśŝúê"
},
"lighthouse-core/report/html/renderer/util.js | labDataTitle": {
"message": "L̂áb̂ D́ât́â"
},
Expand All @@ -1559,6 +1586,45 @@
"lighthouse-core/report/html/renderer/util.js | passedAuditsGroupTitle": {
"message": "P̂áŝśêd́ âúd̂ít̂ś"
},
"lighthouse-core/report/html/renderer/util.js | runtimeDesktopEmulation": {
"message": "Êḿûĺât́êd́ D̂éŝḱt̂óp̂"
},
"lighthouse-core/report/html/renderer/util.js | runtimeMobileEmulation": {
"message": "Êḿûĺât́êd́ N̂éx̂úŝ 5X́"
},
"lighthouse-core/report/html/renderer/util.js | runtimeNoEmulation": {
"message": "N̂ó êḿûĺât́îón̂"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsBenchmark": {
"message": "ĈṔÛ/Ḿêḿôŕŷ Ṕôẃêŕ"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsCPUThrottling": {
"message": "ĈṔÛ t́ĥŕôt́t̂ĺîńĝ"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsDevice": {
"message": "D̂év̂íĉé"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsFetchTime": {
"message": "F̂ét̂ćĥ T́îḿê"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsNetworkThrottling": {
"message": "N̂ét̂ẃôŕk̂ t́ĥŕôt́t̂ĺîńĝ"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsTitle": {
"message": "R̂ún̂t́îḿê Śêt́t̂ín̂ǵŝ"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsUA": {
"message": "Ûśêŕ âǵêńt̂ (h́ôśt̂)"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsUANetwork": {
"message": "Ûśêŕ âǵêńt̂ (ńêt́ŵór̂ḱ)"
},
"lighthouse-core/report/html/renderer/util.js | runtimeSettingsUrl": {
"message": "ÛŔL̂"
},
"lighthouse-core/report/html/renderer/util.js | runtimeUnknown": {
"message": "Ûńk̂ńôẃn̂"
},
"lighthouse-core/report/html/renderer/util.js | snippetCollapseButtonLabel": {
"message": "Ĉól̂ĺâṕŝé ŝńîṕp̂ét̂"
},
Expand All @@ -1568,6 +1634,9 @@
"lighthouse-core/report/html/renderer/util.js | thirdPartyResourcesLabel": {
"message": "Ŝh́ôẃ 3r̂d́-p̂ár̂t́ŷ ŕêśôúr̂ćêś"
},
"lighthouse-core/report/html/renderer/util.js | throttlingProvided": {
"message": "P̂ŕôv́îd́êd́ b̂ý êńv̂ír̂ón̂ḿêńt̂"
},
"lighthouse-core/report/html/renderer/util.js | toplevelWarningsMessage": {
"message": "T̂h́êŕê ẃêŕê íŝśûéŝ áf̂f́êćt̂ín̂ǵ t̂h́îś r̂ún̂ óf̂ Ĺîǵĥt́ĥóûśê:"
},
Expand Down
14 changes: 9 additions & 5 deletions lighthouse-core/report/html/renderer/report-renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,15 +95,18 @@ class ReportRenderer {

const env = this._dom.find('.lh-env__items', footer);
env.id = 'runtime-settings';
this._dom.find('.lh-env__title', footer).textContent = Util.i18n.strings.runtimeSettingsTitle;

const envValues = Util.getEnvironmentDisplayValues(report.configSettings || {});
[
{name: 'URL', description: report.finalUrl},
{name: 'Fetch time', description: Util.i18n.formatDateTime(report.fetchTime)},
{name: Util.i18n.strings.runtimeSettingsUrl, description: report.finalUrl},
{name: Util.i18n.strings.runtimeSettingsFetchTime,
description: Util.i18n.formatDateTime(report.fetchTime)},
...envValues,
{name: 'User agent (host)', description: report.userAgent},
{name: 'User agent (network)', description: report.environment &&
{name: Util.i18n.strings.runtimeSettingsUA, description: report.userAgent},
{name: Util.i18n.strings.runtimeSettingsUANetwork, description: report.environment &&
report.environment.networkUserAgent},
{name: 'CPU/Memory Power', description: report.environment &&
{name: Util.i18n.strings.runtimeSettingsBenchmark, description: report.environment &&
report.environment.benchmarkIndex.toFixed(0)},
].forEach(runtime => {
if (!runtime.description) return;
Expand All @@ -114,6 +117,7 @@ class ReportRenderer {
env.appendChild(item);
});

this._dom.find('.lh-footer__version_issue', footer).textContent = Util.i18n.strings.footerIssue;
this._dom.find('.lh-footer__version', footer).textContent = report.lighthouseVersion;
return footer;
}
Expand Down
8 changes: 8 additions & 0 deletions lighthouse-core/report/html/renderer/report-ui-features.js
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,14 @@ class ReportUIFeatures {
this._dom.find('.lh-metrics-toggle__input', this._document));
toggleInputEl.checked = true;
}

// Fill in all i18n data.
for (const node of this._dom.findAll('[data-i18n]', this._dom.document())) {
// These strings are guaranteed to (at least) have a default English string in Util.UIStrings,
// so this cannot be undefined as long as `report-ui-features.data-i18n` test passes.
const i18nAttr = /** @type {keyof LH.I18NRendererStrings} */ (node.getAttribute('data-i18n'));
node.textContent = Util.i18n.strings[i18nAttr];
}
}

/**
Expand Down
82 changes: 65 additions & 17 deletions lighthouse-core/report/html/renderer/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -372,69 +372,66 @@ class Util {

return [
{
name: 'Device',
name: Util.i18n.strings.runtimeSettingsDevice,
description: emulationDesc.deviceEmulation,
},
{
name: 'Network throttling',
name: Util.i18n.strings.runtimeSettingsNetworkThrottling,
description: emulationDesc.networkThrottling,
},
{
name: 'CPU throttling',
name: Util.i18n.strings.runtimeSettingsCPUThrottling,
description: emulationDesc.cpuThrottling,
},
];
}

/**
* @param {LH.Config.Settings} settings
* @return {{deviceEmulation: string, networkThrottling: string, cpuThrottling: string, summary: string}}
* @return {{deviceEmulation: string, networkThrottling: string, cpuThrottling: string}}
*/
static getEmulationDescriptions(settings) {
let cpuThrottling;
let networkThrottling;
let summary;

const throttling = settings.throttling;

switch (settings.throttlingMethod) {
case 'provided':
cpuThrottling = 'Provided by environment';
networkThrottling = 'Provided by environment';
summary = 'No throttling applied';
cpuThrottling = Util.i18n.strings.throttlingProvided;
networkThrottling = Util.i18n.strings.throttlingProvided;
break;
case 'devtools': {
const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (DevTools)`;
networkThrottling = `${Util.i18n.formatNumber(requestLatencyMs)}${NBSP}ms HTTP RTT, ` +
`${Util.i18n.formatNumber(throttling.downloadThroughputKbps)}${NBSP}Kbps down, ` +
`${Util.i18n.formatNumber(throttling.uploadThroughputKbps)}${NBSP}Kbps up (DevTools)`;
summary = 'Throttled Slow 4G network';
break;
}
case 'simulate': {
const {cpuSlowdownMultiplier, rttMs, throughputKbps} = throttling;
cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
networkThrottling = `${Util.i18n.formatNumber(rttMs)}${NBSP}ms TCP RTT, ` +
`${Util.i18n.formatNumber(throughputKbps)}${NBSP}Kbps throughput (Simulated)`;
summary = 'Simulated Slow 4G network';
break;
}
default:
cpuThrottling = 'Unknown';
networkThrottling = 'Unknown';
summary = 'Unknown';
cpuThrottling = Util.i18n.strings.runtimeUnknown;
networkThrottling = Util.i18n.strings.runtimeUnknown;
}

let deviceEmulation = 'No emulation';
if (settings.emulatedFormFactor === 'mobile') deviceEmulation = 'Emulated Nexus 5X';
if (settings.emulatedFormFactor === 'desktop') deviceEmulation = 'Emulated Desktop';
let deviceEmulation = Util.i18n.strings.runtimeNoEmulation;
if (settings.emulatedFormFactor === 'mobile') {
deviceEmulation = Util.i18n.strings.runtimeMobileEmulation;
} else if (settings.emulatedFormFactor === 'desktop') {
deviceEmulation = Util.i18n.strings.runtimeDesktopEmulation;
}

return {
deviceEmulation,
cpuThrottling,
networkThrottling,
summary: `${deviceEmulation}, ${summary}`,
Copy link
Collaborator

Choose a reason for hiding this comment

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

did we just not use this? 😆

Copy link
Member Author

Choose a reason for hiding this comment

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

Oh yeah forgot to mention, we removed this in the new report redesign. It was on the top header, but no more!

};
}

Expand Down Expand Up @@ -540,6 +537,57 @@ Util.UIStrings = {

/** This label is for a checkbox above a table of items loaded by a web page. The checkbox is used to show or hide third-party (or "3rd-party") resources in the table, where "third-party resources" refers to items loaded by a web page from URLs that aren't controlled by the owner of the web page. */
thirdPartyResourcesLabel: 'Show 3rd-party resources',

/** Option in a dropdown menu that opens a small, summary report in a print dialog. */
dropdownPrintSummary: 'Print Summary',
/** Option in a dropdown menu that opens a full Lighthouse report in a print dialog. */
dropdownPrintExpanded: 'Print Expanded',
/** Option in a dropdown menu that copies the Lighthouse JSON object to the system clipboard. */
dropdownCopyJSON: 'Copy JSON',
/** Option in a dropdown menu that saves the Lighthouse report HTML locally to the system as a '.html' file. */
dropdownSaveHTML: 'Save as HTML',
/** Option in a dropdown menu that saves the Lighthouse JSON object to the local system as a '.json' file. */
dropdownSaveJSON: 'Save as JSON',
/** Option in a dropdown menu that opens the current report in the Lighthouse Viewer Application. */
Copy link
Collaborator

Choose a reason for hiding this comment

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

LVA, I like it 😎

dropdownViewer: 'Open in Viewer',
/** Option in a dropdown menu that saves the current report as a new Github Gist. */
dropdownSaveGist: 'Save as Gist',
/** Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes. */
dropdownDarkTheme: 'Toggle Dark Theme',

/** Title of the Runtime settings table in a Lighthouse report. Runtime settings are the environment configurations that a specific report used at auditing time. */
runtimeSettingsTitle: 'Runtime Settings',
/** Label for a row in a table that shows the URL that was audited during a Lighthouse run. */
runtimeSettingsUrl: 'URL',
/** Label for a row in a table that shows the time at which a Lighthouse run was conducted; formatted as a timestamp, e.g. Jan 1, 1970 12:00 AM UTC. */
runtimeSettingsFetchTime: 'Fetch Time',
/** Label for a row in a table that describes the kind of device that was emulated for the Lighthouse run. Example values for row elements: 'No Emulation', 'Emulated Desktop', etc. */
runtimeSettingsDevice: 'Device',
/** Label for a row in a table that describes the network throttling conditions that were used during a Lighthouse run, if any. */
runtimeSettingsNetworkThrottling: 'Network throttling',
/** Label for a row in a table that describes the CPU throttling conditions that were used during a Lighthouse run, if any.*/
runtimeSettingsCPUThrottling: 'CPU throttling',
/** Label for a row in a table that shows the User Agent that was detected on the Host machine that ran Lighthouse. */
runtimeSettingsUA: 'User agent (host)',
/** Label for a row in a table that shows the User Agent that was used to send out all network requests during the Lighthouse run. */
runtimeSettingsUANetwork: 'User agent (network)',
/** Label for a row in a table that shows the estimated CPU power of the machine running Lighthouse. Example row values: 532, 1492, 783. */
runtimeSettingsBenchmark: 'CPU/Memory Power',

/** Label for button to create an issue against the Lighthouse Github project. */
footerIssue: 'File an issue',

/** Descriptive explanation for emulation setting when no device emulation is set. */
runtimeNoEmulation: 'No emulation',
/** Descriptive explanation for emulation setting when emulating a Nexus 5X mobile device. */
runtimeMobileEmulation: 'Emulated Nexus 5X',
Copy link
Collaborator

Choose a reason for hiding this comment

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

heads up Moto G4 conflict ahead :) #10191

/** Descriptive explanation for emulation setting when emulating a generic desktop form factor, as opposed to a mobile-device like form factor. */
runtimeDesktopEmulation: 'Emulated Desktop',
/** Descriptive explanation for a runtime setting that is set to an unknown value. */
runtimeUnknown: 'Unknown',

/** Descriptive explanation for environment throttling that was provided by the runtime environment instead of provided by Lighthouse throttling. */
throttlingProvided: 'Provided by environment',
};

if (typeof module !== 'undefined' && module.exports) {
Expand Down
Loading