i18n: localize column headers of budget audits (#9127)

GoogleChrome · Jun 7, 2019 · 5aeef23 · 5aeef23
1 parent aef01e9
commit 5aeef23
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 8 deletions.
diff --git a/lighthouse-core/audits/network-requests.js b/lighthouse-core/audits/network-requests.js
@@ -72,7 +72,7 @@ class NetworkRequests extends Audit {
           itemType: 'bytes',
           displayUnit: 'kb',
           granularity: 1,
-          text: 'Transfer Size',
+          text: 'Transfer Size', // TODO(exterkamp): i18n this when i18n'ing this file
         },
         {
           key: 'resourceSize',

diff --git a/lighthouse-core/audits/performance-budget.js b/lighthouse-core/audits/performance-budget.js
@@ -20,6 +20,8 @@ const UIStrings = {
     =1 {1 request}
     other {# requests}
    }`,
+  /** Label for a column in a data table; entries will be how much the quantity or size of network requests exceeded a predetermined budget.*/
+  columnOverBudget: 'Over Budget',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -130,11 +132,11 @@ class ResourceBudget extends Audit {
 
     /** @type { LH.Audit.Details.Table['headings'] } */
     const headers = [
-      {key: 'label', itemType: 'text', text: 'Resource Type'},
-      {key: 'requestCount', itemType: 'numeric', text: 'Requests'},
-      {key: 'size', itemType: 'bytes', text: 'Transfer Size'},
+      {key: 'label', itemType: 'text', text: str_(i18n.UIStrings.columnResourceType)},
+      {key: 'requestCount', itemType: 'numeric', text: str_(i18n.UIStrings.columnRequests)},
+      {key: 'size', itemType: 'bytes', text: str_(i18n.UIStrings.columnTransferSize)},
       {key: 'countOverBudget', itemType: 'text', text: ''},
-      {key: 'sizeOverBudget', itemType: 'bytes', text: 'Over Budget'},
+      {key: 'sizeOverBudget', itemType: 'bytes', text: str_(UIStrings.columnOverBudget)},
     ];
 
     return {

diff --git a/lighthouse-core/audits/resource-summary.js b/lighthouse-core/audits/resource-summary.js
@@ -48,9 +48,9 @@ class ResourceSummary extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'label', itemType: 'text', text: 'Resource Type'},
-      {key: 'requestCount', itemType: 'numeric', text: 'Requests'},
-      {key: 'size', itemType: 'bytes', text: 'Transfer Size'},
+      {key: 'label', itemType: 'text', text: str_(i18n.UIStrings.columnResourceType)},
+      {key: 'requestCount', itemType: 'numeric', text: str_(i18n.UIStrings.columnRequests)},
+      {key: 'size', itemType: 'bytes', text: str_(i18n.UIStrings.columnTransferSize)},
     ];
 
 

diff --git a/lighthouse-core/lib/i18n/en-US.json b/lighthouse-core/lib/i18n/en-US.json
@@ -759,6 +759,10 @@
     "message": "Server Backend Latencies",
     "description": "Descriptive title of a Lighthouse audit that tells the user the server latencies observed from each origin the page connected to. This is displayed in a list of audit titles that Lighthouse generates."
   },
+  "lighthouse-core/audits/performance-budget.js | columnOverBudget": {
+    "message": "Over Budget",
+    "description": "Label for a column in a data table; entries will be how much the quantity or size of network requests exceeded a predetermined budget."
+  },
   "lighthouse-core/audits/performance-budget.js | description": {
     "message": "Keep the quantity and size of network requests under the targets set by the provided performance budget. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets).",
     "description": "Description of a Lighthouse audit where a user sets budgets for the quantity and size of page resources. No character length limits. 'Learn More' becomes link text to additional documentation."
@@ -1243,6 +1247,14 @@
     "message": "Cache TTL",
     "description": "Label for the TTL column in data tables, entries will be the time to live value of the cache header on a web resource"
   },
+  "lighthouse-core/lib/i18n/i18n.js | columnRequests": {
+    "message": "Requests",
+    "description": "Label for a column in a data table; entries will be the number of network requests done by a webpage."
+  },
+  "lighthouse-core/lib/i18n/i18n.js | columnResourceType": {
+    "message": "Resource Type",
+    "description": "Label for a column in a data table; entries will be types of resources loaded over the network, e.g. \"Scripts\", \"Third-Party\", \"Stylesheet\"."
+  },
   "lighthouse-core/lib/i18n/i18n.js | columnSize": {
     "message": "Size",
     "description": "Label for the size column in data tables, entries will be the size of a web resource in kilobytes"
@@ -1251,6 +1263,10 @@
     "message": "Time Spent",
     "description": "Label for the time spent column in data tables, entries will be the number of milliseconds spent during a particular activity"
   },
+  "lighthouse-core/lib/i18n/i18n.js | columnTransferSize": {
+    "message": "Transfer Size",
+    "description": "Label for a column in a data table; entries will be the number of kilobytes transferred to load a set of files."
+  },
   "lighthouse-core/lib/i18n/i18n.js | columnURL": {
     "message": "URL",
     "description": "Label for the URL column in data tables, entries will be the URL of a web resource"

diff --git a/lighthouse-core/lib/i18n/i18n.js b/lighthouse-core/lib/i18n/i18n.js
@@ -56,6 +56,12 @@ const UIStrings = {
   columnWastedMs: 'Potential Savings',
   /** Label for the time spent column in data tables, entries will be the number of milliseconds spent during a particular activity */
   columnTimeSpent: 'Time Spent',
+  /** Label for a column in a data table; entries will be types of resources loaded over the network, e.g. "Scripts", "Third-Party", "Stylesheet". */
+  columnResourceType: 'Resource Type',
+  /** Label for a column in a data table; entries will be the number of network requests done by a webpage.*/
+  columnRequests: 'Requests',
+  /** Label for a column in a data table; entries will be the number of kilobytes transferred to load a set of files.*/
+  columnTransferSize: 'Transfer Size',
   /** Label for a row in a data table; entries will be the total number and byte size of all resources loaded by a web page. */
   totalResourceType: 'Total',
   /** Label for a row in a data table; entries will be the total number and byte size of all 'Document' resources loaded by a web page. */

diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
@@ -5300,6 +5300,21 @@
       "lighthouse-core/audits/performance-budget.js | description": [
         "audits[performance-budget].description"
       ],
+      "lighthouse-core/lib/i18n/i18n.js | columnResourceType": [
+        "audits[performance-budget].details.headings[0].text",
+        "audits[resource-summary].details.headings[0].text"
+      ],
+      "lighthouse-core/lib/i18n/i18n.js | columnRequests": [
+        "audits[performance-budget].details.headings[1].text",
+        "audits[resource-summary].details.headings[1].text"
+      ],
+      "lighthouse-core/lib/i18n/i18n.js | columnTransferSize": [
+        "audits[performance-budget].details.headings[2].text",
+        "audits[resource-summary].details.headings[2].text"
+      ],
+      "lighthouse-core/audits/performance-budget.js | columnOverBudget": [
+        "audits[performance-budget].details.headings[4].text"
+      ],
       "lighthouse-core/lib/i18n/i18n.js | scriptResourceType": [
         "audits[performance-budget].details.items[0].label",
         "audits[resource-summary].details.items[1].label"