i18n: placeholders

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

@@ -14,8 +14,16 @@ 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: 'placeholder',
+  // 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

@@ -12,10 +12,50 @@ const computeTokenLength = require('../../lib/minification-estimator.js').comput
 
 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).',
+  title: {
+    message: 'Minify CSS like {css}',
+    placeholders: {
+      css: '`<link rel=stylesheet>`',
+    },
+  },
+  /** (Message Description goes here) 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: {
+    message: 'Minifying CSS files can reduce network payload sizes. {link_start}Learn More!!!{link_end}. This audit took {milliseconds} ms.',
+    placeholders: {
+      link_start: '[->',
+      link_end: '](https://developers.google.com/web/tools/lighthouse/audits/minify-css)',
+      /** 520 (Placeholder examples go here) */
+      milliseconds: '{timeInMs, number, milliseconds}',
+    },
+  },
+  /** [ICU Syntax] Some plural warning... */
+  warningPlural: '{itemCount, plural, ' +
+    '=1 {# error found}' +
+    'other {# errors found}}',
+  /** [ICU Syntax] Some gendered (ICU select) explanation... */
+  explanationGender: {
+    message: 'Someone minified this, {direct_replace_name}. {static_replacement} {person, select, ' +
+    'female {She minified this CSS.} ' +
+    'male {He minified this CSS.} ' +
+    'other {They minified this CSS.}}',
+    placeholders: {
+      /** Some static replacement. */
+      static_replacement: '`<link rel=>`',
+    },
+  },
+  /** [ICU Syntax] Some gendered (ICU select) explanation... */
+  explanationGender2: {
+    message: 'Someone minified this, {name}. {static_replacement} {person, select, ' +
+    'female {She minified this CSS.} ' +
+    'male {He minified this CSS.} ' +
+    'other {They minified this CSS.}}',
+    placeholders: {
+      /** Some static replacement. */
+      static_replacement: '`<link rel=>`',
+      /** This stutters, BUT we have the opportunity to tell translators an example, and give context? Example text: Karen. */
+      name: '{name}',
+    },
+  },
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -34,7 +74,7 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
     return {
       id: 'unminified-css',
       title: str_(UIStrings.title),
-      description: str_(UIStrings.description),
+      description: str_(UIStrings.description, {timeInMs: 10}),
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
       requiredArtifacts: ['CSSUsage', 'devtoolsLogs', 'traces', 'URL'],
     };
@@ -109,7 +149,7 @@ class UnminifiedCSS extends ByteEfficiencyAudit {
       {key: 'wastedBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnWastedBytes)},
     ];
 
-    return {items, headings};
+    return {items, headings, explanation: str_(UIStrings.explanationGender, {person: 'female', direct_replace_name: 'Kim'}), warnings: [str_(UIStrings.warningPlural, {itemCount: 2})]};
   }
 }
 

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

@@ -177,11 +177,11 @@
   },
   "lighthouse-core/audits/accessibility/document-title.js | failureTitle": {
     "message": "Document doesn't have 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 failing state and is shown to users when there is a failure that needs to be addressed."
+    "description": "title: {"
   },
   "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": "placeholder",
+    "description": ""
   },
   "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,12 +508,57 @@
     "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$. This audit took $milliseconds$ ms.",
+    "description": "(Message Description goes here) 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.",
+    "placeholders": {
+      "link_start": {
+        "content": "[->"
+      },
+      "link_end": {
+        "content": "](https://developers.google.com/web/tools/lighthouse/audits/minify-css)"
+      },
+      "milliseconds": {
+        "content": "{timeInMs, number, milliseconds}",
+        "example": "520 (Placeholder examples go here)"
+      }
+    }
+  },
+  "lighthouse-core/audits/byte-efficiency/unminified-css.js | explanationGender": {
+    "message": "Someone minified this, {direct_replace_name}. $static_replacement$ {person, select, female {She minified this CSS.} male {He minified this CSS.} other {They minified this CSS.}}",
+    "description": "[ICU Syntax] Some gendered (ICU select) explanation...",
+    "placeholders": {
+      "static_replacement": {
+        "content": "`<link rel=>`",
+        "example": "Some static replacement."
+      }
+    }
+  },
+  "lighthouse-core/audits/byte-efficiency/unminified-css.js | explanationGender2": {
+    "message": "Someone minified this, $name$. $static_replacement$ {person, select, female {She minified this CSS.} male {He minified this CSS.} other {They minified this CSS.}}",
+    "description": "[ICU Syntax] Some gendered (ICU select) explanation...",
+    "placeholders": {
+      "static_replacement": {
+        "content": "`<link rel=>`",
+        "example": "Some static replacement."
+      },
+      "name": {
+        "content": "{name}",
+        "example": "This stutters, BUT we have the opportunity to tell translators an example, and give context? Example text: Karen."
+      }
+    }
   },
   "lighthouse-core/audits/byte-efficiency/unminified-css.js | title": {
-    "message": "Minify CSS",
-    "description": "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."
+    "message": "Minify CSS like $css$",
+    "description": "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.",
+    "placeholders": {
+      "css": {
+        "content": "`<link rel=stylesheet>`"
+      }
+    }
+  },
+  "lighthouse-core/audits/byte-efficiency/unminified-css.js | warningPlural": {
+    "message": "{itemCount, plural, =1 {# error found}other {# errors found}}",
+    "description": "[ICU Syntax] Some plural warning..."
   },
   "lighthouse-core/audits/byte-efficiency/unminified-javascript.js | description": {
     "message": "Minifying JavaScript files can reduce payload sizes and script parse time. [Learn more](https://developers.google.com/speed/docs/insights/MinifyResources).",

lighthouse-core/lib/i18n/i18n.js

@@ -121,7 +121,7 @@ function lookupLocale(locale) {
  */
 function _preprocessMessageValues(icuMessage, values) {
   if (!values) return;
-
+  // console.log(icuMessage, values);
   const clonedValues = JSON.parse(JSON.stringify(values));
   const parsed = MessageParser.parse(icuMessage);
   // Throw an error if a message's value isn't provided
@@ -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) {
+    // 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);
+    });
+    icuMessage = 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/lib/i18n/locales/de.json

@@ -369,10 +369,52 @@
     "message": "Vermeidet sehr große Netzwerknutzlasten"
   },
   "lighthouse-core/audits/byte-efficiency/unminified-css.js | description": {
-    "message": "Durch die Komprimierung von CSS-Dateien kann die Größe von Netzwerknutzlasten reduziert werden. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/minify-css)."
+    "message": "Durch die Komprimierung von CSS-Dateien kann die Größe von Netzwerknutzlasten reduziert werden. $link_start$Weitere Informationen$link_end$. This audit took $milliseconds$ ms.",
+    "placeholders": {
+      "link_start": {
+        "content": "[->"
+      },
+      "link_end": {
+        "content": "](https://developers.google.com/web/tools/lighthouse/audits/minify-css)"
+      },
+      "milliseconds": {
+        "content": "{timeInMs, number, milliseconds}",
+        "example": "520"
+      }
+    }
   },
   "lighthouse-core/audits/byte-efficiency/unminified-css.js | title": {
-    "message": "CSS komprimieren"
+    "message": "CSS komprimieren $css$",
+    "placeholders": {
+      "css": {
+        "content": "`<link rel=stylesheet>`"
+      }
+    }
+  },
+  "lighthouse-core/audits/byte-efficiency/unminified-css.js | explanationGender": {
+    "message": "<GERMAN> Someone minified this, {direct_replace_name}. $static_replacement$ {person, select, female {<GERMAN> She minified this CSS.} male {<GERMAN> He minified this CSS.} other {<GERMAN> They minified this CSS.}}",
+    "placeholders": {
+      "static_replacement": {
+        "content": "`<link rel=>`",
+        "example": "Some static replacement."
+      }
+    }
+  },
+  "lighthouse-core/audits/byte-efficiency/unminified-css.js | explanationGender2": {
+    "message": "Someone minified this, $name$. $static_replacement$ {person, select, female {She minified this CSS.} male {He minified this CSS.} other {They minified this CSS.}}",
+    "placeholders": {
+      "static_replacement": {
+        "content": "`<link rel=>`",
+        "example": "Some static replacement."
+      },
+      "name": {
+        "content": "{name}",
+        "example": "This stutters, BUT we have the opportunity to tell translators an example, and give context? Example text: Karen."
+      }
+    }
+  },
+  "lighthouse-core/audits/byte-efficiency/unminified-css.js | warningPlural": {
+    "message": "{itemCount, plural, =1 {<GERMAN> # error found}other {<GERMAN> # errors found}}"
   },
   "lighthouse-core/audits/byte-efficiency/unminified-javascript.js | description": {
     "message": "Durch die Komprimierung von JavaScript-Dateien können Nutzlastgrößen und die Zeit zum Parsen von Skripts reduziert werden. [Weitere Informationen](https://developers.google.com/speed/docs/insights/MinifyResources)."

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

@@ -84,10 +84,60 @@ 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 {
+              // console.log(property.value.properties[0].range[1]);
+              // console.log(property.value.properties[1].value.properties);
+              let message = val.message;
+              // const prevProp = property.value.properties[1].value.properties[1];
+              // const thisProp = property.value.properties[1].value.properties[2];
+
+              const description = computeDescription(ast, property, lastPropertyEndIndex);
+              /**
+               *  Transform: 
+               *  placeholders: {
+               *    /** example val *\/
+               *    key: value,
+               *    ...
+               *  },
+               *  Into:
+               *  placeholders: {
+               *    key: {
+               *      content: value,
+               *      example: example val,
+               *    },
+               *    ...
+               *  }
+               */
+              // init last prop to the 'messages' end range
+              let lastPropEndIndex = property.value.properties[0].range[1];
+              let idx = 0;
+              const placeholdersMini = val.placeholders;
+              const placeholders = {};
+              Object.entries(placeholdersMini).forEach(entry => {
+                const key = entry[0];
+                const value = entry[1];
+                const thisProp = property.value.properties[1].value.properties[idx];
+                const thisDesc = computeDescription(ast, thisProp, lastPropEndIndex);
+                placeholders[key] = {
+                  content: value,
+                };
+                if (thisDesc) {
+                  placeholders[key].example = thisDesc;
+                }
+
+                // replace {.*} with $.*$
+                message = message.replace(`{${key}}`, `\$${key}\$`);
+                idx++;
+                lastPropEndIndex = thisProp.range[1];
+              });
+              strings[`${relativePath} | ${key}`] = {message, description, placeholders};
+              lastPropertyEndIndex = property.range[1];
+            }
           }
         }
       }