core(i18n): extract performance category strings to UIStrings (#5716)

GoogleChrome · Jul 25, 2018 · e99673b · e99673b
1 parent 13fe26f
commit e99673b
Show file tree

Hide file tree

Showing 45 changed files with 1,337 additions and 336 deletions.
diff --git a/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js b/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js
@@ -94,10 +94,7 @@ module.exports = [
         },
       },
       'uses-responsive-images': {
-        displayValue: [
-          'Potential savings of %d\xa0KB',
-          75,
-        ],
+        displayValue: 'Potential savings of 75\xa0KB',
         details: {
           overallSavingsBytes: '>75000',
           items: [

diff --git a/lighthouse-core/audits/bootup-time.js b/lighthouse-core/audits/bootup-time.js
@@ -6,9 +6,24 @@
 'use strict';
 
 const Audit = require('./audit');
-const Util = require('../report/html/renderer/util');
 const NetworkRequest = require('../lib/network-request');
 const {taskGroups} = require('../lib/task-groups');
+const i18n = require('../lib/i18n');
+
+const UIStrings = {
+  title: 'JavaScript boot-up time',
+  failureTitle: 'JavaScript boot-up time is too high',
+  description: 'Consider reducing the time spent parsing, compiling, and executing JS. ' +
+    'You may find delivering smaller JS payloads helps with this. [Learn ' +
+    'more](https://developers.google.com/web/tools/lighthouse/audits/bootup).',
+  columnTotal: 'Total',
+  columnScriptEval: 'Script Evaluation',
+  columnScriptParse: 'Script Parse',
+  chromeExtensionsWarning: 'Chrome extensions negatively affected this page\'s load' +
+    ' performance. Try auditing the page in incognito mode or from a clean Chrome profile.',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class BootupTime extends Audit {
   /**
@@ -17,12 +32,10 @@ class BootupTime extends Audit {
   static get meta() {
     return {
       id: 'bootup-time',
-      title: 'JavaScript boot-up time',
-      failureTitle: 'JavaScript boot-up time is too high',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
-      description: 'Consider reducing the time spent parsing, compiling, and executing JS. ' +
-        'You may find delivering smaller JS payloads helps with this. [Learn ' +
-        'more](https://developers.google.com/web/tools/lighthouse/audits/bootup).',
       requiredArtifacts: ['traces'],
     };
   }
@@ -132,18 +145,17 @@ class BootupTime extends Audit {
 
     // TODO: consider moving this to core gathering so you don't need to run the audit for warning
     if (hadExcessiveChromeExtension) {
-      context.LighthouseRunWarnings.push('Chrome extensions negatively affected this page\'s load' +
-        ' performance. Try auditing the page in incognito mode or from a clean Chrome profile.');
+      context.LighthouseRunWarnings.push(str_(UIStrings.chromeExtensionsWarning));
     }
 
     const summary = {wastedMs: totalBootupTime};
 
     const headings = [
-      {key: 'url', itemType: 'url', text: 'URL'},
-      {key: 'total', granularity: 1, itemType: 'ms', text: 'Total'},
-      {key: 'scripting', granularity: 1, itemType: 'ms', text: taskGroups.scriptEvaluation.label},
+      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'total', granularity: 1, itemType: 'ms', text: str_(UIStrings.columnTotal)},
+      {key: 'scripting', granularity: 1, itemType: 'ms', text: str_(UIStrings.columnScriptEval)},
       {key: 'scriptParseCompile', granularity: 1, itemType: 'ms',
-        text: taskGroups.scriptParseCompile.label},
+        text: str_(UIStrings.columnScriptParse)},
     ];
 
     const details = BootupTime.makeTableDetails(headings, results, summary);
@@ -157,10 +169,11 @@ class BootupTime extends Audit {
     return {
       score,
       rawValue: totalBootupTime,
-      displayValue: [Util.MS_DISPLAY_VALUE, totalBootupTime],
+      displayValue: totalBootupTime > 0 ? str_(i18n.UIStrings.ms, {timeInMs: totalBootupTime}) : '',
       details,
     };
   }
 }
 
 module.exports = BootupTime;
+module.exports.UIStrings = UIStrings;
diff --git a/lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js b/lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js
@@ -8,6 +8,9 @@
 const Audit = require('../audit');
 const linearInterpolation = require('../../lib/statistics').linearInterpolation;
 const Interactive = require('../../gather/computed/metrics/lantern-interactive');
+const i18n = require('../../lib/i18n');
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, {});
 
 /** @typedef {import('../../lib/dependency-graph/simulator/simulator')} Simulator */
 /** @typedef {import('../../lib/dependency-graph/base-node.js').Node} Node */
@@ -193,8 +196,8 @@ class UnusedBytes extends Audit {
 
     /** @type {LH.Audit.DisplayValue} */
     let displayValue = result.displayValue || '';
-    if (typeof result.displayValue === 'undefined' && wastedKb) {
-      displayValue = ['Potential savings of %d\xa0KB', wastedKb];
+    if (typeof result.displayValue === 'undefined' && wastedBytes) {
+      displayValue = str_(i18n.UIStrings.displayValueByteSavings, {wastedBytes});
     }
 
     const details = Audit.makeOpportunityDetails(result.headings, results, wastedMs, wastedBytes);

diff --git a/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js b/lighthouse-core/audits/byte-efficiency/efficient-animated-content.js
@@ -10,6 +10,16 @@
 
 const NetworkRequest = require('../../lib/network-request');
 const ByteEfficiencyAudit = require('./byte-efficiency-audit');
+const i18n = require('../../lib/i18n');
+
+const UIStrings = {
+  title: 'Use video formats for animated content',
+  description: 'Large GIFs are inefficient for delivering animated content. Consider using ' +
+    'MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save ' +
+    'network bytes. [Learn more](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/)',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 // If GIFs are above this size, we'll flag them
 // See https://github.com/GoogleChrome/lighthouse/pull/4885#discussion_r178406623 and https://github.com/GoogleChrome/lighthouse/issues/4696#issuecomment-370979920
@@ -22,11 +32,9 @@ class EfficientAnimatedContent extends ByteEfficiencyAudit {
   static get meta() {
     return {
       id: 'efficient-animated-content',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      title: 'Use video formats for animated content',
-      description: 'Large GIFs are inefficient for delivering animated content. Consider using ' +
-        'MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save ' +
-        'network bytes. [Learn more](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/)',
       requiredArtifacts: ['devtoolsLogs'],
     };
   }
@@ -66,9 +74,9 @@ class EfficientAnimatedContent extends ByteEfficiencyAudit {
 
     /** @type {LH.Result.Audit.OpportunityDetails['headings']} */
     const headings = [
-      {key: 'url', valueType: 'url', label: 'URL'},
-      {key: 'totalBytes', valueType: 'bytes', label: 'Transfer Size'},
-      {key: 'wastedBytes', valueType: 'bytes', label: 'Byte Savings'},
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+      {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnSize)},
+      {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},
     ];
 
     return {
@@ -79,3 +87,4 @@ class EfficientAnimatedContent extends ByteEfficiencyAudit {
 }
 
 module.exports = EfficientAnimatedContent;
+module.exports.UIStrings = UIStrings;
diff --git a/lighthouse-core/audits/byte-efficiency/offscreen-images.js b/lighthouse-core/audits/byte-efficiency/offscreen-images.js
@@ -12,6 +12,17 @@
 const ByteEfficiencyAudit = require('./byte-efficiency-audit');
 const Sentry = require('../../lib/sentry');
 const URL = require('../../lib/url-shim');
+const i18n = require('../../lib/i18n');
+
+const UIStrings = {
+  title: 'Defer offscreen images',
+  description:
+    'Consider lazy-loading offscreen and hidden images after all critical resources have ' +
+    'finished loading to lower time to interactive. ' +
+    '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 const ALLOWABLE_OFFSCREEN_X = 100;
 const ALLOWABLE_OFFSCREEN_Y = 200;
@@ -29,12 +40,9 @@ class OffscreenImages extends ByteEfficiencyAudit {
   static get meta() {
     return {
       id: 'offscreen-images',
-      title: 'Defer offscreen images',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      description:
-        'Consider lazy-loading offscreen and hidden images after all critical resources have ' +
-        'finished loading to lower time to interactive. ' +
-        '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images).',
       requiredArtifacts: ['ImageUsage', 'ViewportDimensions', 'traces', 'devtoolsLogs'],
     };
   }
@@ -198,9 +206,9 @@ class OffscreenImages extends ByteEfficiencyAudit {
       /** @type {LH.Result.Audit.OpportunityDetails['headings']} */
       const headings = [
         {key: 'url', valueType: 'thumbnail', label: ''},
-        {key: 'url', valueType: 'url', label: 'URL'},
-        {key: 'totalBytes', valueType: 'bytes', label: 'Original'},
-        {key: 'wastedBytes', valueType: 'bytes', label: 'Potential Savings'},
+        {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+        {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnSize)},
+        {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},
       ];
 
       return {
@@ -213,3 +221,4 @@ class OffscreenImages extends ByteEfficiencyAudit {
 }
 
 module.exports = OffscreenImages;
+module.exports.UIStrings = UIStrings;
diff --git a/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js b/lighthouse-core/audits/byte-efficiency/render-blocking-resources.js
@@ -206,7 +206,7 @@ class RenderBlockingResources extends Audit {
 
     let displayValue = '';
     if (results.length > 0) {
-      displayValue = str_(i18n.UIStrings.displayValueWastedMs, {wastedMs});
+      displayValue = str_(i18n.UIStrings.displayValueMsSavings, {wastedMs});
     }
 
     /** @type {LH.Result.Audit.OpportunityDetails['headings']} */

diff --git a/lighthouse-core/audits/byte-efficiency/total-byte-weight.js b/lighthouse-core/audits/byte-efficiency/total-byte-weight.js
@@ -6,6 +6,19 @@
 'use strict';
 
 const ByteEfficiencyAudit = require('./byte-efficiency-audit');
+const i18n = require('../../lib/i18n');
+
+const UIStrings = {
+  title: 'Avoids enormous network payloads',
+  failureTitle: 'Has enormous network payloads',
+  description:
+  'Large network payloads cost users real money and are highly correlated with ' +
+  'long load times. [Learn ' +
+  'more](https://developers.google.com/web/tools/lighthouse/audits/network-payloads).',
+  displayValue: 'Total size was {totalBytes, number, bytes}\xa0KB',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class TotalByteWeight extends ByteEfficiencyAudit {
   /**
@@ -14,13 +27,10 @@ class TotalByteWeight extends ByteEfficiencyAudit {
   static get meta() {
     return {
       id: 'total-byte-weight',
-      title: 'Avoids enormous network payloads',
-      failureTitle: 'Has enormous network payloads',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      description:
-        'Large network payloads cost users real money and are highly correlated with ' +
-        'long load times. [Learn ' +
-        'more](https://developers.google.com/web/tools/lighthouse/audits/network-payloads).',
       requiredArtifacts: ['devtoolsLogs'],
     };
   }
@@ -76,26 +86,16 @@ class TotalByteWeight extends ByteEfficiencyAudit {
     );
 
     const headings = [
-      {key: 'url', itemType: 'url', text: 'URL'},
-      {
-        key: 'totalBytes',
-        itemType: 'bytes',
-        displayUnit: 'kb',
-        granularity: 1,
-        text: 'Total Size',
-      },
-      {key: 'totalMs', itemType: 'ms', text: 'Transfer Time'},
+      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'totalBytes', itemType: 'bytes', text: str_(i18n.UIStrings.columnSize)},
     ];
 
     const tableDetails = ByteEfficiencyAudit.makeTableDetails(headings, results);
 
     return {
       score,
       rawValue: totalBytes,
-      displayValue: [
-        'Total size was %d\xa0KB',
-        totalBytes / 1024,
-      ],
+      displayValue: str_(UIStrings.displayValue, {totalBytes}),
       extendedInfo: {
         value: {
           results,
@@ -108,3 +108,4 @@ class TotalByteWeight extends ByteEfficiencyAudit {
 }
 
 module.exports = TotalByteWeight;
+module.exports.UIStrings = UIStrings;
diff --git a/lighthouse-core/audits/byte-efficiency/unminified-css.js b/lighthouse-core/audits/byte-efficiency/unminified-css.js
@@ -7,6 +7,15 @@
 
 const ByteEfficiencyAudit = require('./byte-efficiency-audit');
 const UnusedCSSRules = require('./unused-css-rules');
+const i18n = require('../../lib/i18n');
+
+const UIStrings = {
+  title: 'Minify CSS',
+  description: 'Minifying CSS files can reduce network payload sizes. ' +
+  '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 const IGNORE_THRESHOLD_IN_PERCENT = 5;
 const IGNORE_THRESHOLD_IN_BYTES = 2048;
@@ -21,10 +30,9 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
   static get meta() {
     return {
       id: 'unminified-css',
-      title: 'Minify CSS',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
-      description: 'Minifying CSS files can reduce network payload sizes. ' +
-        '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css).',
       requiredArtifacts: ['CSSUsage', 'devtoolsLogs'],
     };
   }
@@ -142,15 +150,16 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
       items.push(result);
     }
 
-    return {
-      items,
-      headings: [
-        {key: 'url', valueType: 'url', label: 'URL'},
-        {key: 'totalBytes', valueType: 'bytes', label: 'Original'},
-        {key: 'wastedBytes', valueType: 'bytes', label: 'Potential Savings'},
-      ],
-    };
+    /** @type {LH.Result.Audit.OpportunityDetails['headings']} */
+    const headings = [
+      {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
+      {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnSize)},
+      {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},
+    ];
+
+    return {items, headings};
   }
 }
 
 module.exports = UnminifiedCSS;
+module.exports.UIStrings = UIStrings;