i18n: placeholders

lighthouse-core/audits/accessibility/document-title.js

@@ -14,8 +14,15 @@ const AxeAudit = require('./axe-audit.js');
 const i18n = require('../../lib/i18n/i18n.js');
 
 const UIStrings = {
-  /** Title of an accesibility audit that evaluates if the page has a <title> element that describes the page. This title is descriptive of the successful state and is shown to users when no user action is required. */
-  title: 'Document has a `<title>` element',
+  title: {
+    message: 'Document has a $html_title$ element',
+    description: 'Title of an accesibility audit that evaluates if the page has a <title> element that describes the page. This title is descriptive of the successful state and is shown to users when no user action is required.',
+    placeholders: {
+      html_title: {
+        content: '`<title>`',
+      },
+    },
+  },
   /** Title of an accesibility audit that evaluates if the page has a <title> element that describes the page. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed. */
   failureTitle: 'Document doesn\'t have a `<title>` element',
   /** Description of a Lighthouse audit that tells the user *why* they should try to pass. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */

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

@@ -14,8 +14,21 @@ const UIStrings = {
   /** Imperative title of a Lighthouse audit that tells the user to minify (remove whitespace) the page's CSS code. This is displayed in a list of audit titles that Lighthouse generates. */
   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).',
+  description: {
+    message: 'Minifying CSS files can reduce network payload sizes.' +
+      ' $link_start$Learn More$link_end$',
+    description: '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.',
+    placeholders: {
+      link_start: {
+        content: '[',
+      },
+      link_end: {
+        content: '](https://developers.google.com/web/tools/lighthouse/audits/minify-css)',
+      },
+    },
+  },
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

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

@@ -180,8 +180,13 @@
     "description": "Title of an accesibility audit that evaluates if the page has a <title> element that describes the page. This title is descriptive of the failing state and is shown to users when there is a failure that needs to be addressed."
   },
   "lighthouse-core/audits/accessibility/document-title.js | title": {
-    "message": "Document has a `<title>` element",
-    "description": "Title of an accesibility audit that evaluates if the page has a <title> element that describes the page. This title is descriptive of the successful state and is shown to users when no user action is required."
+    "message": "Document has a $html_title$ element",
+    "description": "Title of an accesibility audit that evaluates if the page has a <title> element that describes the page. This title is descriptive of the successful state and is shown to users when no user action is required.",
+    "placeholders": {
+      "html_title": {
+        "content": "`<title>`"
+      }
+    }
   },
   "lighthouse-core/audits/accessibility/duplicate-id.js | description": {
     "message": "The value of an id attribute must be unique to prevent other instances from being overlooked by assistive technologies. [Learn more](https://dequeuniversity.com/rules/axe/3.1/duplicate-id?application=lighthouse).",
@@ -508,8 +513,16 @@
     "description": "Title of a diagnostic audit that provides detail on large network resources required during page load. 'Payloads' is roughly equivalent to 'resources'. This descriptive title is shown to users when the amount is acceptable and no user action is required."
   },
   "lighthouse-core/audits/byte-efficiency/unminified-css.js | description": {
-    "message": "Minifying CSS files can reduce network payload sizes. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/minify-css).",
-    "description": "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."
+    "message": "Minifying CSS files can reduce network payload sizes. $link_start$Learn More$link_end$",
+    "description": "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.",
+    "placeholders": {
+      "link_start": {
+        "content": "["
+      },
+      "link_end": {
+        "content": "](https://developers.google.com/web/tools/lighthouse/audits/minify-css)"
+      }
+    }
   },
   "lighthouse-core/audits/byte-efficiency/unminified-css.js | title": {
     "message": "Minify CSS",

lighthouse-core/lib/i18n/i18n.js

@@ -174,7 +174,23 @@ const _icuMessageInstanceMap = new Map();
  */
 function _formatIcuMessage(locale, icuMessageId, icuMessage, values) {
   const localeMessages = LOCALES[locale];
-  const localeMessage = localeMessages[icuMessageId] && localeMessages[icuMessageId].message;
+  let localeMessage = localeMessages[icuMessageId] && localeMessages[icuMessageId].message;
+  // lets try to replace some things :o
+  const placeholders = localeMessages[icuMessageId] && localeMessages[icuMessageId].placeholders;
+  if (placeholders) {
+    console.log('placeholders!');
+    // do some regex
+    Object.entries(placeholders).forEach(entry => {
+      const key = entry[0];
+      const value = entry[1];
+      //use key and value here
+      let regexStr = `\$${key}\$`;
+      console.log(key, value, regexStr);
+      localeMessage = localeMessage.replace(regexStr, value.content);
+      console.log(localeMessage);
+    });
+  }
+
   // fallback to the original english message if we couldn't find a message in the specified locale
   // better to have an english message than no message at all, in some number cases it won't even matter
   const messageForMessageFormat = localeMessage || icuMessage;

lighthouse-core/scripts/i18n/collect-strings.js

@@ -84,10 +84,18 @@ function collectAllStringsInDir(dir, strings = {}) {
           let lastPropertyEndIndex = 0;
           for (const property of stmt.declarations[0].init.properties) {
             const key = property.key.name;
-            const message = exportVars.UIStrings[key];
-            const description = computeDescription(ast, property, lastPropertyEndIndex);
-            strings[`${relativePath} | ${key}`] = {message, description};
-            lastPropertyEndIndex = property.range[1];
+            const val = exportVars.UIStrings[key];
+            if (typeof val === 'string') {
+              const description = computeDescription(ast, property, lastPropertyEndIndex);
+              strings[`${relativePath} | ${key}`] = {message: val, description};
+              lastPropertyEndIndex = property.range[1];
+            } else {
+              const message = val.message;
+              const description = val.description;
+              const placeholders = val.placeholders;
+              strings[`${relativePath} | ${key}`] = {message, description, placeholders};
+              lastPropertyEndIndex = property.range[1];
+            }
           }
         }
       }