i18n: localize audits in best-practices

lighthouse-core/audits/deprecations.js

@@ -12,7 +12,28 @@
  */
 
 const Audit = require('./audit.js');
-const Util = require('../report/html/renderer/util.js');
+const i18n = require('../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the use of deprecated APIs. This descriptive title is shown to users when the site does not use deprecated APIs. */
+  title: 'Avoids deprecated APIs',
+  /** Title of a Lighthouse audit that provides detail on the use of deprecated APIs. This descriptive title is shown to users when the site uses deprecated APIs. */
+  failureTitle: 'Uses deprecated APIs',
+  /** Description of a Lighthouse audit that tells the user why they should not use deprecated APIs on their site. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Deprecated APIs will eventually be removed from the browser. ' +
+      '[Learn more](https://www.chromestatus.com/features#deprecated).',
+  /** [ICU Syntax] Label for the audit identifying the number of warnings generated by using deprecated APIs. */
+  displayValue: `{itemCount, plural,
+    =1 {1 warning found}
+    other {# warnings found}
+    }`,
+  /** Table column header for the deprecation or warning generated by the site. */
+  columnDeprecate: 'Deprecation / Warning',
+  /** Table column header for line that is using a deprecated API on the site. */
+  columnLine: 'Line',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class Deprecations extends Audit {
   /**
@@ -21,10 +42,9 @@ class Deprecations extends Audit {
   static get meta() {
     return {
       id: 'deprecations',
-      title: 'Avoids deprecated APIs',
-      failureTitle: 'Uses deprecated APIs',
-      description: 'Deprecated APIs will eventually be removed from the browser. ' +
-          '[Learn more](https://www.chromestatus.com/features#deprecated).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['ConsoleMessages'],
     };
   }
@@ -47,17 +67,15 @@ class Deprecations extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'value', itemType: 'code', text: 'Deprecation / Warning'},
-      {key: 'url', itemType: 'url', text: 'URL'},
-      {key: 'lineNumber', itemType: 'text', text: 'Line'},
+      {key: 'value', itemType: 'code', text: str_(UIStrings.columnDeprecate)},
+      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'lineNumber', itemType: 'text', text: str_(UIStrings.columnLine)},
     ];
     const details = Audit.makeTableDetails(headings, deprecations);
 
     let displayValue = '';
-    if (deprecations.length > 1) {
-      displayValue = `${Util.formatNumber(deprecations.length)} warnings found`;
-    } else if (deprecations.length === 1) {
-      displayValue = `${deprecations.length} warning found`;
+    if (deprecations.length > 0) {
+      displayValue = str_(UIStrings.displayValue, {itemCount: deprecations.length});
     }
 
     return {
@@ -72,3 +90,4 @@ class Deprecations extends Audit {
 }
 
 module.exports = Deprecations;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/dobetterweb/appcache-manifest.js

@@ -11,6 +11,21 @@
 'use strict';
 
 const Audit = require('../audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the use of the Application Cache API. This descriptive title is shown to users when they do not use the Application Cache API. */
+  title: 'Avoids Application Cache',
+  /** Title of a Lighthouse audit that provides detail on the use of the Application Cache API. This descriptive title is shown to users when they do use the Application Cache API, which is considered bad practice. */
+  failureTitle: 'Uses Application Cache',
+  /** Description of a Lighthouse audit that tells the user why they should not use the Application Cache API. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Application Cache is deprecated. ' +
+    '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/appcache).',
+  /** Label for the audit identifying uses of the Application Cache. */
+  displayValue: 'Found "{AppCacheManifest}"',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class AppCacheManifestAttr extends Audit {
   /**
@@ -19,10 +34,9 @@ class AppCacheManifestAttr extends Audit {
   static get meta() {
     return {
       id: 'appcache-manifest',
-      title: 'Avoids Application Cache',
-      failureTitle: 'Uses Application Cache',
-      description: 'Application Cache is deprecated. ' +
-          '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/appcache).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['AppCacheManifest'],
     };
   }
@@ -33,7 +47,8 @@ class AppCacheManifestAttr extends Audit {
    */
   static audit(artifacts) {
     const usingAppcache = artifacts.AppCacheManifest !== null;
-    const displayValue = usingAppcache ? `Found "${artifacts.AppCacheManifest}"` : '';
+    const displayValue = usingAppcache ?
+      str_(UIStrings.displayValue, {AppCacheManifest: artifacts.AppCacheManifest}) : '';
 
     return {
       score: usingAppcache ? 0 : 1,
@@ -43,3 +58,4 @@ class AppCacheManifestAttr extends Audit {
 }
 
 module.exports = AppCacheManifestAttr;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/dobetterweb/doctype.js

@@ -6,6 +6,28 @@
 'use strict';
 
 const Audit = require('../audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the doctype of a site. This descriptive title is shown to users when the site's doctype is set to HTML. */
+  title: 'Page has the HTML doctype',
+  /** Title of a Lighthouse audit that provides detail on the doctype of a site. This descriptive title is shown to users when the site's doctype is not set to HTML. */
+  failureTitle: 'Page is missing the HTML doctype',
+  /** Description of a Lighthouse audit that tells the user why they should set the doctype as HTML. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Specifying a doctype prevents the browser ' +
+    'from switching to quirks-mode. Read more on the ' +
+    '[MDN Web Docs page](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)',
+  /** Explanatory message stating that the document has no doctype. */
+  explanationNoDoctype: 'Document must contain a doctype',
+  /** Explanatory message stating that the publicId field is not empty. */
+  explanationPublicId: 'Expected publicId to be an empty string',
+  /** Explanatory message stating that the systemId field is not empty. */
+  explanationSystemId: 'Expected systemId to be an empty string',
+  /** Explanatory message stating that the doctype is set, but is not "html" and is therefore invalid. */
+  explanationBadDoctype: 'Doctype name must be the lowercase string `html`',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class Doctype extends Audit {
   /**
@@ -14,11 +36,9 @@ class Doctype extends Audit {
   static get meta() {
     return {
       id: 'doctype',
-      title: 'Page has the HTML doctype',
-      failureTitle: 'Page is missing the HTML doctype',
-      description: 'Specifying a doctype prevents the browser from switching to quirks-mode.' +
-                'Read more on the ' +
-                '[MDN Web Docs page](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Doctype'],
     };
   }
@@ -31,7 +51,7 @@ class Doctype extends Audit {
     if (!artifacts.Doctype) {
       return {
         score: 0,
-        explanation: 'Document must contain a doctype',
+        explanation: str_(UIStrings.explanationNoDoctype),
       };
     }
 
@@ -43,14 +63,14 @@ class Doctype extends Audit {
     if (doctypePublicId !== '') {
       return {
         score: 0,
-        explanation: 'Expected publicId to be an empty string',
+        explanation: str_(UIStrings.explanationPublicId),
       };
     }
 
     if (doctypeSystemId !== '') {
       return {
         score: 0,
-        explanation: 'Expected systemId to be an empty string',
+        explanation: str_(UIStrings.explanationSystemId),
       };
     }
 
@@ -64,10 +84,11 @@ class Doctype extends Audit {
     } else {
       return {
         score: 0,
-        explanation: 'Doctype name must be the lowercase string `html`',
+        explanation: str_(UIStrings.explanationBadDoctype),
       };
     }
   }
 }
 
 module.exports = Doctype;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js

@@ -7,6 +7,27 @@
 
 const URL = require('../../lib/url-shim.js');
 const Audit = require('../audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the cross-origin links that a site contains, and whether they can be considered safe. This descriptive title is shown to users when all links are safe. */
+  title: 'Links to cross-origin destinations are safe',
+  /** Title of a Lighthouse audit that provides detail on the cross-origin links that a site contains, and whether they can be considered safe. This descriptive title is shown to users when not all links can be considered safe. */
+  failureTitle: 'Links to cross-origin destinations are unsafe',
+  /** Description of a Lighthouse audit that tells the user why and how they should secure cross-origin links. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Add `rel="noopener"` or `rel="noreferrer"` to any external links to improve ' +
+    'performance and prevent security vulnerabilities. ' +
+    '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/noopener).',
+  /** Warning that some links' destinations cannot be determined and therefor neither can their safety. */
+  warning: 'Unable to determine the destination for anchor ({anchorHTML}). ' +
+    'If not used as a hyperlink, consider removing target=_blank.',
+  /** Table column header for the target of a URL. */
+  columnTarget: 'Target',
+  /** Table column header for the `rel=` value from the link. */
+  columnRel: 'Rel',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class ExternalAnchorsUseRelNoopenerAudit extends Audit {
   /**
@@ -15,11 +36,9 @@ class ExternalAnchorsUseRelNoopenerAudit extends Audit {
   static get meta() {
     return {
       id: 'external-anchors-use-rel-noopener',
-      title: 'Links to cross-origin destinations are safe',
-      failureTitle: 'Links to cross-origin destinations are unsafe',
-      description: 'Add `rel="noopener"` or `rel="noreferrer"` to any external links to improve ' +
-          'performance and prevent security vulnerabilities. ' +
-          '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/noopener).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['URL', 'AnchorElements'],
     };
   }
@@ -40,8 +59,7 @@ class ExternalAnchorsUseRelNoopenerAudit extends Audit {
         try {
           return new URL(anchor.href).host !== pageHost;
         } catch (err) {
-          warnings.push(`Unable to determine the destination for anchor (${anchor.outerHTML}). ` +
-            'If not used as a hyperlink, consider removing target=_blank.');
+          warnings.push(str_(UIStrings.warning, {anchorHTML: anchor.outerHTML}));
           return true;
         }
       })
@@ -59,9 +77,9 @@ class ExternalAnchorsUseRelNoopenerAudit extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'href', itemType: 'url', text: 'URL'},
-      {key: 'target', itemType: 'text', text: 'Target'},
-      {key: 'rel', itemType: 'text', text: 'Rel'},
+      {key: 'href', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'target', itemType: 'text', text: str_(UIStrings.columnTarget)},
+      {key: 'rel', itemType: 'text', text: str_(UIStrings.columnRel)},
     ];
 
     const details = Audit.makeTableDetails(headings, failingAnchors);
@@ -78,3 +96,4 @@ class ExternalAnchorsUseRelNoopenerAudit extends Audit {
 }
 
 module.exports = ExternalAnchorsUseRelNoopenerAudit;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/dobetterweb/geolocation-on-start.js

@@ -12,6 +12,20 @@
 'use strict';
 
 const ViolationAudit = require('../violation-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on geolocation permissions requests. This descriptive title is shown to users when the page does not ask for geolocation permissions on load. */
+  title: 'Avoids requesting the geolocation permission on page load',
+  /** Title of a Lighthouse audit that provides detail on geolocation permissions requests. This descriptive title is shown to users when the page does ask for geolocation permissions on load. */
+  failureTitle: 'Requests the geolocation permission on page load',
+  /** Description of a Lighthouse audit that tells the user why they should not ask for geolocation permissions on load. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Users are mistrustful of or confused by sites that request their ' +
+    'location without context. Consider tying the request to user gestures instead. ' +
+    '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/geolocation-on-load).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class GeolocationOnStart extends ViolationAudit {
   /**
@@ -20,11 +34,9 @@ class GeolocationOnStart extends ViolationAudit {
   static get meta() {
     return {
       id: 'geolocation-on-start',
-      title: 'Avoids requesting the geolocation permission on page load',
-      failureTitle: 'Requests the geolocation permission on page load',
-      description: 'Users are mistrustful of or confused by sites that request their ' +
-          'location without context. Consider tying the request to user gestures instead. ' +
-          '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/geolocation-on-load).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['ConsoleMessages'],
     };
   }
@@ -39,8 +51,8 @@ class GeolocationOnStart extends ViolationAudit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'url', itemType: 'url', text: 'URL'},
-      {key: 'label', itemType: 'text', text: 'Location'},
+      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'label', itemType: 'text', text: str_(i18n.UIStrings.columnLocation)},
     ];
     // TODO(bckenny): there should actually be a ts error here. results[0].stackTrace
     // should violate the results type. Shouldn't be removed from details items regardless.
@@ -57,3 +69,4 @@ class GeolocationOnStart extends ViolationAudit {
 }
 
 module.exports = GeolocationOnStart;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/dobetterweb/js-libraries.js

@@ -11,6 +11,20 @@
 'use strict';
 
 const Audit = require('../audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the Javascript libraries that are used on a site. */
+  title: 'Detected JavaScript libraries',
+  /** Description of a Lighthouse audit that tells the user what this audit is detecting. This is displayed after a user expands the section to see more. No character length limits. */
+  description: 'All front-end JavaScript libraries detected on the page.',
+  /** Table column header for the name of the Javascript library. */
+  columnName: 'Name',
+  /** Table column header for the version of the detected Javascript library. */
+  columnVersion: 'Version',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class JsLibrariesAudit extends Audit {
   /**
@@ -19,8 +33,8 @@ class JsLibrariesAudit extends Audit {
   static get meta() {
     return {
       id: 'js-libraries',
-      title: 'Detected JavaScript libraries',
-      description: 'All front-end JavaScript libraries detected on the page.',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Stacks'],
     };
   }
@@ -40,8 +54,8 @@ class JsLibrariesAudit extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'name', itemType: 'text', text: 'Name'},
-      {key: 'version', itemType: 'text', text: 'Version'},
+      {key: 'name', itemType: 'text', text: str_(UIStrings.columnName)},
+      {key: 'version', itemType: 'text', text: str_(UIStrings.columnVersion)},
     ];
     const details = Audit.makeTableDetails(headings, libDetails, {});
 
@@ -53,3 +67,4 @@ class JsLibrariesAudit extends Audit {
 }
 
 module.exports = JsLibrariesAudit;
+module.exports.UIStrings = UIStrings;