i18n(report): runtime settings and tools

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

@@ -1399,6 +1399,38 @@
     "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/report/html/renderer/util.js | dropdownCopyJSON": {
+    "message": "Copy JSON",
+    "description": "Option in a dropdown menu that copies the Lighthouse JSON object to the system clipboard."
+  },
+  "lighthouse-core/report/html/renderer/util.js | dropdownDarkTheme": {
+    "message": "Toggle Dark Theme",
+    "description": "Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes."
+  },
+  "lighthouse-core/report/html/renderer/util.js | dropdownPrintExpanded": {
+    "message": "Print Expanded",
+    "description": "Option in a dropdown menu that opens a full Lighthouse report in a print dialog."
+  },
+  "lighthouse-core/report/html/renderer/util.js | dropdownPrintSummary": {
+    "message": "Print Summary",
+    "description": "Option in a dropdown menu that opens a small, summary report in a print dialog."
+  },
+  "lighthouse-core/report/html/renderer/util.js | dropdownSaveGist": {
+    "message": "Save as Gist",
+    "description": "Option in a dropdown menu that saves the current report as a new Github Gist."
+  },
+  "lighthouse-core/report/html/renderer/util.js | dropdownSaveHTML": {
+    "message": "Save as HTML",
+    "description": "Option in a dropdown menu that saves the Lighthouse report HTML locally to the system as a '.html' file."
+  },
+  "lighthouse-core/report/html/renderer/util.js | dropdownSaveJSON": {
+    "message": "Save as JSON",
+    "description": "Option in a dropdown menu that save the Lighthouse JSON object to the local system as a '.json' file."
+  },
+  "lighthouse-core/report/html/renderer/util.js | dropdownViewer": {
+    "message": "Open in Viewer",
+    "description": "Option in a dropdown menu that opens the current report in the Lighthouse Viewer Application."
+  },
   "lighthouse-core/report/html/renderer/util.js | errorLabel": {
     "message": "Error!",
     "description": "A label, shown next to an audit title or metric title, indicating that there was an error computing it. The user can hover on the label to reveal a tooltip with the extended error message. Translation should be short (< 20 characters)."
@@ -1407,6 +1439,10 @@
     "message": "Report error: no audit information",
     "description": "An error string displayed next to a particular audit when it has errored, but not provided any specific error message."
   },
+  "lighthouse-core/report/html/renderer/util.js | footerIssue": {
+    "message": "File an issue",
+    "description": "Label for button to create an issue against the Lighthouse Github project."
+  },
   "lighthouse-core/report/html/renderer/util.js | labDataTitle": {
     "message": "Lab Data",
     "description": "Title of the lab data section of the Performance category. Within this section are various speed metrics which quantify the pageload performance into values presented in seconds and milliseconds. \"Lab\" is an abbreviated form of \"laboratory\", and refers to the fact that the data is from a controlled test of a website, not measurements from real users visiting that site."
@@ -1435,6 +1471,58 @@
     "message": "Passed audits",
     "description": "Section heading shown above a list of audits that are passing. 'Passed' here refers to a passing grade. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list."
   },
+  "lighthouse-core/report/html/renderer/util.js | runtimeDesktopEmulation": {
+    "message": "Emulated Desktop",
+    "description": "Descriptive explanation for emulation setting when emulating a generic desktop form factor, as opposed to a mobile-device like form factor."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeMobileEmulation": {
+    "message": "Emulated Nexus 5X",
+    "description": "Descriptive explanation for emulation setting when emulating a Nexus 5X mobile device."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeNoEmulation": {
+    "message": "No emulation",
+    "description": "Descriptive explanation for emulation setting when no device emulation is set."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeSettingsBenchmark": {
+    "message": "CPU/Memory Power",
+    "description": "Label for a row in a table that shows the estimated CPU power of the machine running Lighthouse. Example row values: 532, 1492, 783."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeSettingsCPUThrottling": {
+    "message": "CPU throttling",
+    "description": "Label for a row in a table that describes the CPU throttling conditions that were used during a Lighthouse run, if any."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeSettingsDevice": {
+    "message": "Device",
+    "description": "Label for a row in a table that describes the kind of physical device that was emulated for the Lighthouse run.  Example values for row elements: 'No Emulation', 'Emulated Desktop', etc."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeSettingsFetchTime": {
+    "message": "Fetch Time",
+    "description": "Label for a row in a table that shows the time that a Lighthouse run was conducted."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeSettingsNetworkThrottling": {
+    "message": "Network throttling",
+    "description": "Label for a row in a table that describes the network throttling conditions that were used during a Lighthouse run, if any."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeSettingsTitle": {
+    "message": "Runtime Settings",
+    "description": "Title of the Runtime settings table in a Lighthouse report.  Runtime settings are the environment configurations that a specific report used at auditing time."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeSettingsUA": {
+    "message": "User agent (host)",
+    "description": "Label for a row in a table that shows the User Agent that was detected on the Host machine of the Lighthouse run."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeSettingsUANet": {
+    "message": "User agent (network)",
+    "description": "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."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeSettingsUrl": {
+    "message": "URL",
+    "description": "Label for a row in a table that shows the URL that was audited during a Lighthouse run."
+  },
+  "lighthouse-core/report/html/renderer/util.js | runtimeUnknown": {
+    "message": "Unknown",
+    "description": "Descriptive explanation for a runtime setting that is set to an unknown value."
+  },
   "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"
@@ -1447,6 +1535,10 @@
     "message": "Show 3rd-party resources",
     "description": "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."
   },
+  "lighthouse-core/report/html/renderer/util.js | throttlingProvided": {
+    "message": "Provided by environment",
+    "description": "Descriptive explanation for environment throttling that was provided by the runtime environment instead of provided by Lighthouse throttling."
+  },
   "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/renderer/report-renderer.js

@@ -100,15 +100,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.UIStrings.runtimeSettingsTitle;
+
     const envValues = Util.getEnvironmentDisplayValues(report.configSettings || {});
     [
-      {name: 'URL', description: report.finalUrl},
-      {name: 'Fetch time', description: Util.formatDateTime(report.fetchTime)},
+      {name: Util.UIStrings.runtimeSettingsUrl, description: report.finalUrl},
+      {name: Util.UIStrings.runtimeSettingsFetchTime,
+        description: Util.formatDateTime(report.fetchTime)},
       ...envValues,
-      {name: 'User agent (host)', description: report.userAgent},
-      {name: 'User agent (network)', description: report.environment &&
+      {name: Util.UIStrings.runtimeSettingsUA, description: report.userAgent},
+      {name: Util.UIStrings.runtimeSettingsUANet, description: report.environment &&
         report.environment.networkUserAgent},
-      {name: 'CPU/Memory Power', description: report.environment &&
+      {name: Util.UIStrings.runtimeSettingsBenchmark, description: report.environment &&
         report.environment.benchmarkIndex.toFixed(0)},
     ].forEach(runtime => {
       if (!runtime.description) return;
@@ -119,6 +122,7 @@ class ReportRenderer {
       env.appendChild(item);
     });
 
+    this._dom.find('.lh-footer__version_issue', footer).textContent = Util.UIStrings.footerIssue;
     this._dom.find('.lh-footer__version', footer).textContent = report.lighthouseVersion;
     return footer;
   }

lighthouse-core/report/html/renderer/report-ui-features.js

@@ -80,6 +80,14 @@ class ReportUIFeatures {
   initFeatures(report) {
     this.json = report;
 
+    // TODO(i18n): Modifying Util singleton is not the best way to i18n this.
+    // Related TODO: https://github.com/GoogleChrome/lighthouse/pull/5713/files#r204948699
+    // Update util UIStrings, just like in report-renderer, we need to do it again b/c they have been reset.
+    const originalUIStrings = JSON.parse(JSON.stringify(Util.UIStrings));
+    if (report.i18n && report.i18n.rendererFormattedStrings) {
+      Util.updateAllUIStrings(report.i18n.rendererFormattedStrings);
+    }
+
     this._setupMediaQueryListeners();
     this._setupToolsButton();
     this._setupThirdPartyFilter();
@@ -139,6 +147,9 @@ class ReportUIFeatures {
         this._dom.find('.lh-metrics-toggle__input', this._document));
       toggleInputEl.checked = true;
     }
+
+    // Reset Util UIStrings.
+    Util.updateAllUIStrings(originalUIStrings);
   }
 
   /**
@@ -211,6 +222,24 @@ class ReportUIFeatures {
 
     const dropdown = this._dom.find('.lh-tools__dropdown', this._document);
     dropdown.addEventListener('click', this.onToolAction);
+
+    // i18n the dropdown text
+    this._dom.find('#lh-dropdown_print_summary', dropdown).textContent =
+      Util.UIStrings.dropdownPrintSummary;
+    this._dom.find('#lh-dropdown_print_expanded', dropdown).textContent =
+      Util.UIStrings.dropdownPrintExpanded;
+    this._dom.find('#lh-dropdown_json', dropdown).textContent =
+      Util.UIStrings.dropdownCopyJSON;
+    this._dom.find('#lh-dropdown_save_html', dropdown).textContent =
+      Util.UIStrings.dropdownSaveHTML;
+    this._dom.find('#lh-dropdown_save_json', dropdown).textContent =
+      Util.UIStrings.dropdownSaveJSON;
+    this._dom.find('#lh-dropdown_open_viewer', dropdown).textContent =
+      Util.UIStrings.dropdownViewer;
+    this._dom.find('#lh-dropdown_save_gist', dropdown).textContent =
+      Util.UIStrings.dropdownSaveGist;
+    this._dom.find('#lh-dropdown_dark_theme', dropdown).textContent =
+      Util.UIStrings.dropdownDarkTheme;
   }
 
   _setupThirdPartyFilter() {

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

@@ -418,69 +418,67 @@ class Util {
 
     return [
       {
-        name: 'Device',
+        name: this.UIStrings.runtimeSettingsDevice,
         description: emulationDesc.deviceEmulation,
       },
       {
-        name: 'Network throttling',
+        name: this.UIStrings.runtimeSettingsNetworkThrottling,
         description: emulationDesc.networkThrottling,
       },
       {
-        name: 'CPU throttling',
+        name: this.UIStrings.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 = this.UIStrings.throttlingProvided;
+        networkThrottling = this.UIStrings.throttlingProvided;
         break;
       case 'devtools': {
         const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
+        // TODO(i18n): ICU replacement syntax/formal i18n.js usage
         cpuThrottling = `${Util.formatNumber(cpuSlowdownMultiplier)}x slowdown (DevTools)`;
         networkThrottling = `${Util.formatNumber(requestLatencyMs)}${NBSP}ms HTTP RTT, ` +
           `${Util.formatNumber(throttling.downloadThroughputKbps)}${NBSP}Kbps down, ` +
           `${Util.formatNumber(throttling.uploadThroughputKbps)}${NBSP}Kbps up (DevTools)`;
-        summary = 'Throttled Slow 4G network';
         break;
       }
       case 'simulate': {
         const {cpuSlowdownMultiplier, rttMs, throughputKbps} = throttling;
         cpuThrottling = `${Util.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
         networkThrottling = `${Util.formatNumber(rttMs)}${NBSP}ms TCP RTT, ` +
           `${Util.formatNumber(throughputKbps)}${NBSP}Kbps throughput (Simulated)`;
-        summary = 'Simulated Slow 4G network';
         break;
       }
       default:
-        cpuThrottling = 'Unknown';
-        networkThrottling = 'Unknown';
-        summary = 'Unknown';
+        cpuThrottling = this.UIStrings.runtimeUnknown;
+        networkThrottling = this.UIStrings.runtimeUnknown;
     }
 
-    let deviceEmulation = 'No emulation';
-    if (settings.emulatedFormFactor === 'mobile') deviceEmulation = 'Emulated Nexus 5X';
-    if (settings.emulatedFormFactor === 'desktop') deviceEmulation = 'Emulated Desktop';
+    let deviceEmulation = this.UIStrings.runtimeNoEmulation;
+    if (settings.emulatedFormFactor === 'mobile') {
+      deviceEmulation = this.UIStrings.runtimeMobileEmulation;
+    } else if (settings.emulatedFormFactor === 'desktop') {
+      deviceEmulation = this.UIStrings.runtimeDesktopEmulation;
+    }
 
     return {
       deviceEmulation,
       cpuThrottling,
       networkThrottling,
-      summary: `${deviceEmulation}, ${summary}`,
     };
   }
 
@@ -600,6 +598,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 save 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. */
+  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 that a Lighthouse run was conducted. */
+  runtimeSettingsFetchTime: 'Fetch Time',
+  /** Label for a row in a table that describes the kind of physical 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 of the Lighthouse run. */
+  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. */
+  runtimeSettingsUANet: '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',
+  /** 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) {