i18n: expand placeholder support (#9114)

.gitignore

@@ -23,6 +23,7 @@ last-run-results.html
 *.report.csv
 *.report.pretty
 *.artifacts.log
+*.ctc.json
 
 !lighthouse-core/test/results/artifacts/*.trace.json
 !lighthouse-core/test/results/artifacts/*.devtoolslog.json

lighthouse-core/audits/byte-efficiency/unminified-css.js

@@ -15,7 +15,7 @@ const UIStrings = {
   title: 'Minify CSS',
   /** Description of a Lighthouse audit that tells the user *why* they should minify (remove whitespace) the page's CSS code. 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: 'Minifying CSS files can reduce network payload sizes. ' +
-  '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css).',
+    '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

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

@@ -21,7 +21,10 @@ const UIStrings = {
   /** 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. */
+  /**
+   * @description Label for the audit identifying uses of the Application Cache.
+   * @example {clock.appcache} AppCacheManifest
+   */
   displayValue: 'Found "{AppCacheManifest}"',
 };
 

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

@@ -18,7 +18,10 @@ const UIStrings = {
   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 therefore the audit cannot evaluate the link's safety. */
+  /**
+   * @description Warning that some links' destinations cannot be determined and therefore the audit cannot evaluate the link's safety.
+   * @example {<a target="_blank">} anchorHTML
+   */
   warning: 'Unable to determine the destination for anchor ({anchorHTML}). ' +
     'If not used as a hyperlink, consider removing target=_blank.',
   /** Label for a column in a data table; entries will be the target attribute of a link. Each entry is either an empty string or a string like `_blank`.  */

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

@@ -18,8 +18,6 @@ const UIStrings = {
   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.',
-  /** Label for a column in a data table; entries will be the names of the detected Javascript libraries.  */
-  columnName: 'Name',
   /** Label for a column in a data table; entries will be the version numbers of the detected Javascript libraries.  */
   columnVersion: 'Version',
 };
@@ -54,7 +52,7 @@ class JsLibrariesAudit extends Audit {
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
-      {key: 'name', itemType: 'text', text: str_(UIStrings.columnName)},
+      {key: 'name', itemType: 'text', text: str_(i18n.UIStrings.columnName)},
       {key: 'version', itemType: 'text', text: str_(UIStrings.columnVersion)},
     ];
     const details = Audit.makeTableDetails(headings, libDetails, {});

lighthouse-core/audits/font-display.js

@@ -24,7 +24,10 @@ const UIStrings = {
     'Leverage the font-display CSS feature to ensure text is user-visible while ' +
     'webfonts are loading. ' +
     '[Learn more](https://developers.google.com/web/updates/2016/02/font-display).',
-  /** A warning message that is shown when Lighthouse couldn't automatically check some of the page's fonts and that the user will need to manually check it. */
+  /**
+   * @description A warning message that is shown when Lighthouse couldn't automatically check some of the page's fonts and that the user will need to manually check it.
+   * @example {https://font.cdn.com/} fontURL
+   */
   undeclaredFontURLWarning: 'Lighthouse was unable to automatically check the font-display value ' +
     'for the following URL: {fontURL}.',
 };

lighthouse-core/audits/image-aspect-ratio.js

@@ -23,7 +23,10 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user why they should maintain the correct aspect ratios for all images. 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: 'Image display dimensions should match natural aspect ratio. ' +
     '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/aspect-ratio).',
-  /** Warning that the size information for an image was nonsensical. `url` will be replaced with the url of that image. */
+  /**
+   * @description Warning that the size information for an image was nonsensical.
+   * @example {https://image.cdn.com/} url
+   */
   warningCompute: 'Invalid image sizing information {url}',
   /**  Label for a column in a data table; entries in the column will be the numeric aspect ratio of an image as displayed in a web page. */
   columnDisplayed: 'Aspect Ratio (Displayed)',

lighthouse-core/audits/resource-summary.js

@@ -17,7 +17,7 @@ const UIStrings = {
     ' add a budget.json file. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets).',
   /** [ICU Syntax] Label for an audit identifying the number of requests and kilobytes used to load the page. */
   displayValue: `{requestCount, plural, =1 {1 request} other {# requests}}` +
-    ` • { byteCount, number, bytes } KB`,
+    ` • {byteCount, number, bytes} KB`,
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

lighthouse-core/audits/seo/canonical.js

@@ -18,15 +18,30 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user *why* they need to have a valid rel=canonical link. 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: 'Canonical links suggest which URL to show in search results. ' +
     '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/canonical).',
-  /** Explanatory message stating that there was a failure in an audit caused by multiple URLs conflicting with each other. "urlList" will be replaced by a list of URLs (e.g. https://example.com, https://example2.com, etc ). */
+  /**
+   * @description Explanatory message stating that there was a failure in an audit caused by multiple URLs conflicting with each other.
+   * @example {https://example.com, https://example2.com} urlList
+   * */
   explanationConflict: 'Multiple conflicting URLs ({urlList})',
-  /** Explanatory message stating that there was a failure in an audit caused by a URL being invalid. "url" will be replaced by the invalid URL (e.g. https://example.com). */
+  /**
+   * @description Explanatory message stating that there was a failure in an audit caused by a URL being invalid.
+   * @example {https://example.com/} url
+   * */
   explanationInvalid: 'Invalid URL ({url})',
-  /** Explanatory message stating that there was a failure in an audit caused by a URL being relative instead of absolute. "url" will be replaced by the invalid URL (e.g. https://example.com). */
+  /**
+   * @description Explanatory message stating that there was a failure in an audit caused by a URL being relative instead of absolute.
+   * @example {https://example.com/} url
+   * */
   explanationRelative: 'Relative URL ({url})',
-  /** Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different hreflang than the current context. "url" will be replaced by the invalid URL (e.g. https://example.com). 'hreflang' is an HTML attribute and should not be translated. */
+  /**
+   * @description Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different hreflang than the current context.'hreflang' is an HTML attribute and should not be translated.
+   * @example {https://example.com/} url
+   */
   explanationPointsElsewhere: 'Points to another `hreflang` location ({url})',
-  /** Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different domain. "url" will be replaced by the invalid URL (e.g. https://example.com). */
+  /**
+   * @description Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different domain.
+   * @example {https://example.com/} url
+   * */
   explanationDifferentDomain: 'Points to a different domain ({url})',
   /** Explanatory message stating that the page's canonical URL was pointing to the domain's root URL, which is a common mistake. "points" refers to the action of the 'rel=canonical' referencing another link. "root" refers to the starting/home page of the website. "domain" refers to the registered domain name of the website. */
   explanationRoot: 'Points to the domain\'s root URL (the homepage), ' +

lighthouse-core/audits/seo/robots-txt.js

@@ -41,7 +41,10 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user *why* they need to have a valid robots.txt file. Note: "robots.txt" is a canonical filename and should not be translated. This is displayed after a user expands the section to see more. No character length limits. */
   description: 'If your robots.txt file is malformed, crawlers may not be able to understand ' +
   'how you want your website to be crawled or indexed.',
-  /** Label for the audit identifying that the robots.txt request has returned a specific HTTP status code. Note: "robots.txt" is a canonical filename and should not be translated. "statusCode" will be replaced with a 3 digit integer which represents the status of the HTTP connectiong for this page. */
+  /**
+   * @description Label for the audit identifying that the robots.txt request has returned a specific HTTP status code. Note: "robots.txt" is a canonical filename and should not be translated.
+   * @example {500} statusCode
+   * */
   displayValueHttpBadCode: 'request for robots.txt returned HTTP status: {statusCode}',
   /** [ICU Syntax] Label for the audit identifying the number of errors that occured while validating the robots.txt file. "itemCount" will be replaced by the integer count of errors encountered. */
   displayValueValidationError: `{itemCount, plural,

lighthouse-core/audits/seo/tap-targets.js

@@ -31,8 +31,6 @@ const UIStrings = {
   description: 'Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. [Learn more](https://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design).',
   /** Label of a table column that identifies tap targets (like buttons and links) that have failed the audit and aren't easy to tap on. */
   tapTargetHeader: 'Tap Target',
-  /** Label of a table column that specifies the size of tap targets like buttons and links. */
-  sizeHeader: 'Size',
   /** Label of a table column that identifies a tap target (like a link or button) that overlaps with another tap target. */
   overlappingTargetHeader: 'Overlapping Target',
   /** Explanatory message stating that there was a failure in an audit caused by the viewport meta tag not being optimized for mobile screens, which caused tap targets like buttons and links to be too small to tap on. */
@@ -303,7 +301,7 @@ class TapTargets extends Audit {
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       {key: 'tapTarget', itemType: 'node', text: str_(UIStrings.tapTargetHeader)},
-      {key: 'size', itemType: 'text', text: str_(UIStrings.sizeHeader)},
+      {key: 'size', itemType: 'text', text: str_(i18n.UIStrings.columnSize)},
       {key: 'overlappingTarget', itemType: 'node', text: str_(UIStrings.overlappingTargetHeader)},
     ];
 

lighthouse-core/audits/user-timings.js

@@ -21,8 +21,6 @@ const UIStrings = {
     =1 {1 user timing}
     other {# user timings}
     }`,
-  /** Label for the Name column in the User Timing event data table. User Timing API entries are added by the developer of the web page. An example user timing event name: 'pageload_logoimage_done' */
-  columnName: 'Name',
   /** Label for the Type column in the User Timing event data table. User Timing API entries are added by the developer of the web page. The only possible types are 'Mark' and Measure'. */
   columnType: 'Type',
   /** Label for the Start Time column in the User Timing event data table. User Timing API entries are added by the developer of the web page. Start Times are the number of milliseconds since the page started loading, e.g. '380.26 ms' */
@@ -96,7 +94,7 @@ class UserTimings extends Audit {
 
       /** @type {LH.Audit.Details.Table['headings']} */
       const headings = [
-        {key: 'name', itemType: 'text', text: str_(UIStrings.columnName)},
+        {key: 'name', itemType: 'text', text: str_(i18n.UIStrings.columnName)},
         {key: 'timingType', itemType: 'text', text: str_(UIStrings.columnType)},
         {key: 'startTime', itemType: 'ms', granularity: 0.01,
           text: str_(UIStrings.columnStartTime)},

lighthouse-core/audits/uses-rel-preconnect.js

@@ -29,7 +29,10 @@ const UIStrings = {
   description:
     'Consider adding preconnect or dns-prefetch resource hints to establish early ' +
     `connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).`,
-  /** A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links. */
+  /**
+   * @description A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preconnect links.
+   * @example {https://example.com} securityOrigin
+   * */
   crossoriginWarning: 'A preconnect <link> was found for "{securityOrigin}" but was not used ' +
     'by the browser. Check that you are using the `crossorigin` attribute properly.',
 };

lighthouse-core/audits/uses-rel-preload.js

@@ -18,9 +18,12 @@ const UIStrings = {
   /** Imperative title of a Lighthouse audit that tells the user to use <link rel=preload> to initiate important network requests earlier during page load. This is displayed in a list of audit titles that Lighthouse generates. */
   title: 'Preload key requests',
   /** Description of a Lighthouse audit that tells the user *why* they should preload important network requests. The associated network requests are started halfway through pageload (or later) but should be started at the beginning. This is displayed after a user expands the section to see more. No character length limits. '<link rel=preload>' is the html code the user would include in their page and shouldn't be translated. 'Learn More' becomes link text to additional documentation. */
-  description: 'Consider using <link rel=preload> to prioritize fetching resources that are ' +
+  description: 'Consider using `<link rel=preload>` to prioritize fetching resources that are ' +
     'currently requested later in page load. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/preload).',
-  /** A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preload links. */
+  /**
+   * @description A warning message that is shown when the user tried to follow the advice of the audit, but it's not working as expected. Forgetting to set the `crossorigin` HTML attribute, or setting it to an incorrect value, on the link is a common mistake when adding preload links.
+   * @example {https://example.com} preloadURL
+   * */
   crossoriginWarning: 'A preload <link> was found for "{preloadURL}" but was not used ' +
     'by the browser. Check that you are using the `crossorigin` attribute properly.',
 };