core(deprecations): use translated strings from devtools repo

build/build-cdt-strings.js

@@ -0,0 +1,82 @@
+/**
+ * @license Copyright 2022 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import fs from 'fs';
+
+import {LH_ROOT} from '../root.js';
+
+// eslint-disable-next-line max-len
+const inFile = `${LH_ROOT}/node_modules/chrome-devtools-frontend/front_end/models/issues_manager/DeprecationIssue.ts`;
+const outFile = `${LH_ROOT}/lighthouse-core/lib/deprecations-strings.js`;
+
+const code = fs.readFileSync(inFile, 'utf-8');
+
+/**
+ * @param {string} text
+ * @param {string|RegExp} searchValue
+ * @param {string} replaceValue
+ */
+function doReplacement(text, searchValue, replaceValue) {
+  const newValue = text.replace(searchValue, replaceValue);
+  if (newValue === text) throw new Error(`could not find: ${searchValue}`);
+  return newValue;
+}
+
+/**
+ * @param {string} text
+ * @param {string} startPattern
+ * @param {string} endPattern
+ * @param {[string|RegExp, string][]} replacements
+ */
+function extract(text, startPattern, endPattern, replacements = []) {
+  const startIndex = text.indexOf(startPattern);
+  if (startIndex === -1) throw new Error(`could not find: ${startPattern}`);
+  const endIndex = text.indexOf(endPattern, startIndex);
+  if (endIndex === -1) throw new Error(`could not find: ${endPattern}`);
+
+  let subText = text.substring(startIndex, endIndex + endPattern.length);
+  for (const replacement of replacements) {
+    subText = doReplacement(subText, replacement[0], replacement[1]);
+  }
+  return subText;
+}
+
+const uiStringsDeclare = extract(code, 'const UIStrings', '};', [
+  // Some patterns are supported in DevTools UIStrings, but not ours.
+  [/\\\\/g, ''],
+  [`\\'plan-b\\'`, 'plan-b'],
+]);
+const getDescriptionDeclare =
+  extract(code, 'getDescription(): MarkdownIssueDescription', '});\n  }', [
+    ['getDescription(): MarkdownIssueDescription', 'function getDescription(issueDetails)'],
+    ['this.#issueDetails', 'issueDetails'],
+    [`let messageFunction = (): string => '';`, `let message;`],
+    [/messageFunction/g, 'message'],
+    [/i18nLazyString/g, 'str_'],
+    ['resolveLazyDescription', ''],
+    ['links,', 'links, message,'],
+    [/Protocol\.Audits\.DeprecationIssueType\.(\w+)/g, `'$1'`],
+  ]);
+
+fs.writeFileSync(outFile, `// auto-generated by build/build-cdt-strings.js
+/* eslint-disable */
+
+import * as i18n from '../lib/i18n/i18n.js';
+
+${uiStringsDeclare}
+
+const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);
+
+/**
+ * @param {LH.Crdp.Audits.DeprecationIssueDetails} issueDetails
+ */
+${getDescriptionDeclare}
+
+export {
+  getDescription as getIssueDetailDescription,
+  UIStrings,
+};
+`);

docs/releasing.md

@@ -47,6 +47,8 @@ In general, Lighthouse should be using the latest version of all of these depend
 1. `axe-core`
 1. `js-library-detector`
 1. `chrome-launcher`
+1. `chrome-devtools-frontend`
+1. `devtools-protocol`
 
 ### On the scheduled release date
 

lighthouse-cli/test/smokehouse/test-definitions/dobetterweb.js

@@ -306,30 +306,31 @@ const expectations = {
         },
       },
       'deprecations': {
-        _maxChromiumVersion: '103.0.5017.0', // TODO: deprecation strings need to be translated
         // see https://github.com/GoogleChrome/lighthouse/issues/13895
         score: 0,
         details: {
           items: [
             {
-              value: /'window.webkitStorageInfo' is deprecated/,
+              value: /`window.webkitStorageInfo` is deprecated/,
               source: {
                 type: 'source-location',
                 url: 'http://localhost:10200/dobetterweb/dbw_tester.js',
                 urlProvider: 'network',
                 line: '>0',
                 column: 9,
               },
+              subItems: undefined,
             },
             {
-              value: /Synchronous XMLHttpRequest on the main thread is deprecated/,
+              value: /Synchronous `XMLHttpRequest` on the main thread is deprecated/,
               source: {
                 type: 'source-location',
                 url: 'http://localhost:10200/dobetterweb/dbw_tester.html',
                 urlProvider: 'network',
                 line: '>0',
                 column: 6,
               },
+              subItems: undefined,
             },
           ],
         },

lighthouse-core/audits/deprecations.js

@@ -13,7 +13,9 @@ import {Audit} from './audit.js';
 
 import JsBundles from '../computed/js-bundles.js';
 import * as i18n from '../lib/i18n/i18n.js';
+import {getIssueDetailDescription} from '../lib/deprecations-strings.js';
 
+/* eslint-disable max-len */
 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 page does not use deprecated APIs. */
   title: 'Avoids deprecated APIs',
@@ -32,6 +34,7 @@ const UIStrings = {
   /** Table column header for line of code (eg. 432) that is using a deprecated API. */
   columnLine: 'Line',
 };
+/* eslint-enable max-len */
 
 const str_ = i18n.createMessageInstanceIdFn(import.meta.url, UIStrings);
 
@@ -58,17 +61,35 @@ class Deprecations extends Audit {
     const bundles = await JsBundles.request(artifacts, context);
 
     const deprecations = artifacts.InspectorIssues.deprecationIssue
-      // TODO: translate these strings.
-      // see https://github.com/GoogleChrome/lighthouse/issues/13895
-      .filter(deprecation => !deprecation.type || deprecation.type === 'Untranslated')
       .map(deprecation => {
         const {scriptId, url, lineNumber, columnNumber} = deprecation.sourceCodeLocation;
         const bundle = bundles.find(bundle => bundle.script.scriptId === scriptId);
-        return {
-          value: deprecation.message || '',
+        const deprecationMeta = getIssueDetailDescription(deprecation);
+
+        /** @type {LH.Audit.Details.TableSubItems=} */
+        let subItems = undefined;
+        if (deprecationMeta.links.length) {
+          subItems = {
+            type: 'subitems',
+            items: deprecationMeta.links.map(link => ({
+              type: 'link',
+              url: link.link,
+              text: link.linkTitle,
+            })),
+          };
+        }
+
+        // @ts-expect-error: The english string used to be included on the protocol, but no longer is.
+        const legacyMessage = deprecation.message;
+
+        /** @type {LH.Audit.Details.TableItem} */
+        const item = {
+          value: deprecationMeta.message || legacyMessage || deprecation.type,
           // Protocol.Audits.SourceCodeLocation.columnNumber is 1-indexed, but we use 0-indexed.
           source: Audit.makeSourceLocation(url, lineNumber, columnNumber - 1, bundle),
+          subItems,
         };
+        return item;
       });
 
     /** @type {LH.Audit.Details.Table['headings']} */