[Loc] Migrate components to Localization V2

Bug: 1136655
Change-Id: I69678b0f06027cd0b4b3715d959a41fa592a60bb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2585954
Commit-Queue: Christy Chen <chrche@microsoft.com>
Reviewed-by: Simon Zünd <szuend@chromium.org>

front_end/components/BUILD.gn

@@ -18,6 +18,7 @@ devtools_module("components") {
     "../bindings:bundle",
     "../common:bundle",
     "../host:bundle",
+    "../i18n:bundle",
     "../platform:bundle",
     "../sdk:bundle",
     "../text_utils:bundle",

front_end/components/ImagePreview.js

@@ -3,10 +3,38 @@
 // found in the LICENSE file.
 
 import * as Common from '../common/common.js';
+import * as i18n from '../i18n/i18n.js';
 import * as Platform from '../platform/platform.js';
 import * as SDK from '../sdk/sdk.js';
 import * as UI from '../ui/ui.js';
 
+export const UIStrings = {
+  /**
+  *@description Description in Image Preview
+  *@example {500} PH1
+  *@example {300} PH2
+  *@example {200} PH3
+  *@example {100} PH4
+  */
+  sSPxIntrinsicSSPx: '{PH1} × {PH2} px (intrinsic: {PH3} × {PH4} px)',
+  /**
+  *@description Description in Image Preview
+  *@example {500} PH1
+  *@example {500} PH2
+  */
+  sSPx: '{PH1} × {PH2} px',
+  /**
+  *@description Alt text description of an image's source
+  */
+  unknownSource: 'unknown source',
+  /**
+  *@description Text to indicate the source of an image
+  *@example {example.com} PH1
+  */
+  imageFromS: 'Image from {PH1}',
+};
+const str_ = i18n.i18n.registerUIStrings('components/ImagePreview.js', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /** @typedef {{
  * renderedWidth: number,
  * renderedHeight: number,
@@ -74,10 +102,11 @@ export class ImagePreview {
       let description;
       if (showDimensions) {
         if (renderedHeight !== intrinsicHeight || renderedWidth !== intrinsicWidth) {
-          description =
-              ls`${renderedWidth} × ${renderedHeight} px (intrinsic: ${intrinsicWidth} × ${intrinsicHeight} px)`;
+          description = i18nString(
+              UIStrings.sSPxIntrinsicSSPx,
+              {PH1: renderedWidth, PH2: renderedHeight, PH3: intrinsicWidth, PH4: intrinsicHeight});
         } else {
-          description = ls`${renderedWidth} × ${renderedHeight} px`;
+          description = i18nString(UIStrings.sSPx, {PH1: renderedWidth, PH2: renderedHeight});
         }
       }
 
@@ -127,7 +156,7 @@ export class ImagePreview {
    */
   static defaultAltTextForImageURL(url) {
     const parsedImageURL = new Common.ParsedURL.ParsedURL(url);
-    const imageSourceText = parsedImageURL.isValid ? parsedImageURL.displayName : ls`unknown source`;
-    return ls`Image from ${imageSourceText}`;
+    const imageSourceText = parsedImageURL.isValid ? parsedImageURL.displayName : i18nString(UIStrings.unknownSource);
+    return i18nString(UIStrings.imageFromS, {PH1: imageSourceText});
   }
 }

front_end/components/JSPresentationUtils.js

@@ -30,11 +30,33 @@
  */
 
 import * as Bindings from '../bindings/bindings.js';
+import * as i18n from '../i18n/i18n.js';
 import * as SDK from '../sdk/sdk.js';  // eslint-disable-line no-unused-vars
 import * as UI from '../ui/ui.js';
 
 import {Linkifier} from './Linkifier.js';
 
+export const UIStrings = {
+  /**
+  *@description Text to stop preventing the debugger from stepping into library code
+  */
+  removeFromIgnore: 'Remove from ignore list',
+  /**
+  *@description Text for scripts that should not be stepped into when debugging
+  */
+  addToIgnore: 'Add script to ignore list',
+  /**
+  *@description Show all link text content in JSPresentation Utils
+  */
+  showMoreFrame: 'Show 1 more frame',
+  /**
+  *@description Show all link text content in JSPresentation Utils
+  *@example {2} PH1
+  */
+  showSMoreFrames: 'Show {PH1} more frames',
+};
+const str_ = i18n.i18n.registerUIStrings('components/JSPresentationUtils.js', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /**
  * @param {?SDK.SDKModel.Target} target
  * @param {!Linkifier} linkifier
@@ -105,11 +127,11 @@ export function buildStackTracePreviewContents(target, linkifier, options = {
         Bindings.BlackboxManager.BlackboxManager.instance().canBlackboxUISourceCode(uiLocation.uiSourceCode)) {
       if (Bindings.BlackboxManager.BlackboxManager.instance().isBlackboxedUISourceCode(uiLocation.uiSourceCode)) {
         contextMenu.debugSection().appendItem(
-            ls`Remove from ignore list`,
+            i18nString(UIStrings.removeFromIgnore),
             () => Bindings.BlackboxManager.BlackboxManager.instance().unblackboxUISourceCode(uiLocation.uiSourceCode));
       } else {
         contextMenu.debugSection().appendItem(
-            ls`Add script to ignore list`,
+            i18nString(UIStrings.addToIgnore),
             () => Bindings.BlackboxManager.BlackboxManager.instance().blackboxUISourceCode(uiLocation.uiSourceCode));
       }
     }
@@ -148,9 +170,9 @@ export function buildStackTracePreviewContents(target, linkifier, options = {
     cell.colSpan = 4;
     const showAllLink = cell.createChild('span', 'link');
     if (totalHiddenCallFramesCount === 1) {
-      showAllLink.textContent = ls`Show 1 more frame`;
+      showAllLink.textContent = i18nString(UIStrings.showMoreFrame);
     } else {
-      showAllLink.textContent = ls`Show ${totalHiddenCallFramesCount} more frames`;
+      showAllLink.textContent = i18nString(UIStrings.showSMoreFrames, {PH1: totalHiddenCallFramesCount});
     }
     showAllLink.addEventListener('click', () => {
       contentElement.classList.add('show-blackboxed');

front_end/components/Linkifier.js

@@ -31,11 +31,42 @@
 import * as Bindings from '../bindings/bindings.js';
 import * as Common from '../common/common.js';
 import * as Host from '../host/host.js';
+import * as i18n from '../i18n/i18n.js';
 import * as SDK from '../sdk/sdk.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as UI from '../ui/ui.js';
 import * as Workspace from '../workspace/workspace.js';  // eslint-disable-line no-unused-vars
 
+export const UIStrings = {
+  /**
+  *@description Text in Linkifier
+  */
+  unknown: '(unknown)',
+  /**
+  *@description Text short for automatic
+  */
+  auto: 'auto',
+  /**
+  *@description Text in Linkifier
+  *@example {Sources panel} PH1
+  */
+  revealInS: 'Reveal in {PH1}',
+  /**
+  *@description Text for revealing an item in its destination
+  */
+  reveal: 'Reveal',
+  /**
+  *@description A context menu item in the Linkifier
+  *@example {Extension} PH1
+  */
+  openUsingS: 'Open using {PH1}',
+  /**
+  *@description Text in Linkifier
+  */
+  linkHandling: 'Link handling:',
+};
+const str_ = i18n.i18n.registerUIStrings('components/Linkifier.js', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /** @type {!Set<!Linkifier>} */
 const instances = new Set();
 
@@ -534,7 +565,7 @@ export class Linkifier {
       if (className) {
         element.className = className;
       }
-      element.textContent = text || url || Common.UIString.UIString('(unknown)');
+      element.textContent = text || url || i18nString(UIStrings.unknown);
       return element;
     }
 
@@ -777,7 +808,8 @@ export class Linkifier {
    */
   static _linkHandlerSetting() {
     if (!linkHandlerSettingInstance) {
-      linkHandlerSettingInstance = Common.Settings.Settings.instance().createSetting('openLinkHandler', ls`auto`);
+      linkHandlerSettingInstance =
+          Common.Settings.Settings.instance().createSetting('openLinkHandler', i18nString(UIStrings.auto));
     }
     return linkHandlerSettingInstance;
   }
@@ -840,7 +872,7 @@ export class Linkifier {
       const destination = Common.Revealer.revealDestination(revealable);
       result.push({
         section: 'reveal',
-        title: destination ? ls`Reveal in ${destination}` : ls`Reveal`,
+        title: destination ? i18nString(UIStrings.revealInS, {PH1: destination}) : i18nString(UIStrings.reveal),
         handler: () => Common.Revealer.reveal(revealable)
       });
     }
@@ -853,7 +885,7 @@ export class Linkifier {
         }
         const action = {
           section: 'reveal',
-          title: Common.UIString.UIString('Open using %s', title),
+          title: i18nString(UIStrings.openUsingS, {PH1: title}),
           handler: handler.bind(null, contentProvider, lineNumber)
         };
         if (title === Linkifier._linkHandlerSetting().get()) {
@@ -967,7 +999,7 @@ export class LinkHandlerSettingUI {
   _update() {
     this._element.removeChildren();
     const names = [...linkHandlers.keys()];
-    names.unshift(Common.UIString.UIString('auto'));
+    names.unshift(i18nString(UIStrings.auto));
     for (const name of names) {
       const option = document.createElement('option');
       option.textContent = name;
@@ -993,7 +1025,7 @@ export class LinkHandlerSettingUI {
    * @return {?Element}
    */
   settingElement() {
-    return UI.SettingsUI.createCustomSetting(Common.UIString.UIString('Link handling:'), this._element);
+    return UI.SettingsUI.createCustomSetting(i18nString(UIStrings.linkHandling), this._element);
   }
 }
 
@@ -1045,7 +1077,7 @@ export class ContentProviderContextMenuProvider {
         continue;
       }
       contextMenu.revealSection().appendItem(
-          Common.UIString.UIString('Open using %s', title), handler.bind(null, contentProvider, 0));
+          i18nString(UIStrings.openUsingS, {PH1: title}), handler.bind(null, contentProvider, 0));
     }
     if (contentProvider instanceof SDK.NetworkRequest.NetworkRequest) {
       return;

front_end/components/TargetDetachedDialog.js

@@ -2,9 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../i18n/i18n.js';
 import * as SDK from '../sdk/sdk.js';
 import * as UI from '../ui/ui.js';
 
+export const UIStrings = {
+  /**
+  *@description Text on the remote debugging window to indicate the connection is lost
+  */
+  websocketDisconnected: 'WebSocket disconnected',
+};
+const str_ = i18n.i18n.registerUIStrings('components/TargetDetachedDialog.js', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /**
  * @implements {ProtocolProxyApi.InspectorDispatcher}
  */
@@ -28,7 +37,8 @@ export class TargetDetachedDialog extends SDK.SDKModel.SDKModel {
   }
 
   static webSocketConnectionLost() {
-    UI.RemoteDebuggingTerminatedScreen.RemoteDebuggingTerminatedScreen.show(ls`WebSocket disconnected`);
+    UI.RemoteDebuggingTerminatedScreen.RemoteDebuggingTerminatedScreen.show(
+        i18nString(UIStrings.websocketDisconnected));
   }
 
   /**

front_end/components/components_strings.grdp

@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<grit-part>
-  <message name="IDS_DEVTOOLS_013cf261f9ccf5d4f027bc001d0d1d0c" desc="Text in Linkifier">
-    (unknown)
-  </message>
-  <message name="IDS_DEVTOOLS_131c97f8ba5bc0277386d660a18f13b6" desc="Text in Linkifier">
-    Reveal in <ph name="DESTINATION">$1s<ex>Sources panel</ex></ph>
-  </message>
-  <message name="IDS_DEVTOOLS_3b9e0551f1ed4b83f205b7f1d26dde5c" desc="Alt text description of an image's source">
-    unknown source
-  </message>
-  <message name="IDS_DEVTOOLS_7f52f5f786eb8d9bf9e56ce89fb3db3a" desc="Show all link text content in JSPresentation Utils">
-    Show 1 more frame
-  </message>
-  <message name="IDS_DEVTOOLS_acc50bfd5b2d8673bdb49c34cba197ef" desc="Description in Image Preview">
-    <ph name="RENDEREDWIDTH">$1s<ex>500</ex></ph> × <ph name="RENDEREDHEIGHT">$2s<ex>300</ex></ph> px (intrinsic: <ph name="INTRINSICWIDTH">$3s<ex>200</ex></ph> × <ph name="INTRINSICHEIGHT">$4s<ex>100</ex></ph> px)
-  </message>
-  <message name="IDS_DEVTOOLS_f14cf301c201f45889722193e8c31f55" desc="Description in Image Preview">
-    <ph name="RENDEREDWIDTH">$1s<ex>500</ex></ph> × <ph name="RENDEREDHEIGHT">$2s<ex>500</ex></ph> px
-  </message>
-  <message name="IDS_DEVTOOLS_c850ae12703fa2b00eeaf8445ecf00ef" desc="Show all link text content in JSPresentation Utils">
-    Show <ph name="TOTALHIDDENCALLFRAMESCOUNT">$1s<ex>2</ex></ph> more frames
-  </message>
-  <message name="IDS_DEVTOOLS_e3de40c656e1189770049db9846b69df" desc="Text on the remote debugging window to indicate the connection is lost">
-    WebSocket disconnected
-  </message>
-  <message name="IDS_DEVTOOLS_e48081c5f0698efee665fbf8e9d123f9" desc="A context menu item in the Linkifier">
-    Open using <ph name="TITLE">$1s<ex>Extension</ex></ph>
-  </message>
-  <message name="IDS_DEVTOOLS_e6cd0f8a4fe4fb9e08505b784e48caa2" desc="Text in Linkifier">
-    Link handling:
-  </message>
-</grit-part>

front_end/components/module.json

@@ -1,5 +1,6 @@
 {
   "dependencies": [
+    "i18n",
     "bindings",
     "platform",
     "ui"

front_end/i18n/locales/en-US.json

@@ -95,6 +95,51 @@
   "changes/ModuleUIStrings.js | changesDrawer": {
     "message": "Changes drawer"
   },
+  "components/ImagePreview.js | imageFromS": {
+    "message": "Image from {PH1}"
+  },
+  "components/ImagePreview.js | sSPx": {
+    "message": "{PH1} × {PH2} px"
+  },
+  "components/ImagePreview.js | sSPxIntrinsicSSPx": {
+    "message": "{PH1} × {PH2} px (intrinsic: {PH3} × {PH4} px)"
+  },
+  "components/ImagePreview.js | unknownSource": {
+    "message": "unknown source"
+  },
+  "components/JSPresentationUtils.js | addToIgnore": {
+    "message": "Add script to ignore list"
+  },
+  "components/JSPresentationUtils.js | removeFromIgnore": {
+    "message": "Remove from ignore list"
+  },
+  "components/JSPresentationUtils.js | showMoreFrame": {
+    "message": "Show 1 more frame"
+  },
+  "components/JSPresentationUtils.js | showSMoreFrames": {
+    "message": "Show {PH1} more frames"
+  },
+  "components/Linkifier.js | auto": {
+    "message": "auto"
+  },
+  "components/Linkifier.js | linkHandling": {
+    "message": "Link handling:"
+  },
+  "components/Linkifier.js | openUsingS": {
+    "message": "Open using {PH1}"
+  },
+  "components/Linkifier.js | reveal": {
+    "message": "Reveal"
+  },
+  "components/Linkifier.js | revealInS": {
+    "message": "Reveal in {PH1}"
+  },
+  "components/Linkifier.js | unknown": {
+    "message": "(unknown)"
+  },
+  "components/TargetDetachedDialog.js | websocketDisconnected": {
+    "message": "WebSocket disconnected"
+  },
   "cookie_table/CookiesTable.js | cookies": {
     "message": "Cookies"
   },

front_end/langpacks/devtools_ui_strings.grd

@@ -17,7 +17,6 @@
       <part file="../browser_sdk/browser_sdk_strings.grdp" />
       <part file="../color_picker/color_picker_strings.grdp" />
       <part file="../common/common_strings.grdp" />
-      <part file="../components/components_strings.grdp" />
       <part file="../console/console_strings.grdp" />
       <part file="../console_counters/console_counters_strings.grdp" />
       <part file="../css_overview/css_overview_strings.grdp" />

front_end/langpacks/shared_strings.grdp

@@ -106,9 +106,6 @@
   <message name="IDS_DEVTOOLS_3793ea52a7be2d7deafd858fda50775c" desc="Text exposed to screen readers on checked items.">
     checked
   </message>
-  <message name="IDS_DEVTOOLS_393c3f5ea8ad35c02691d507bdbb31b0" desc="Text for revealing an item in its destination">
-    Reveal
-  </message>
   <message name="IDS_DEVTOOLS_3afbd9828e011526955ca93b48b57524" desc="Text for one or a group of screenshots">
     Screenshot
   </message>
@@ -182,9 +179,6 @@
   <message name="IDS_DEVTOOLS_59cc7cb8dfb2491cc5dfe8ebc546d797" desc="Text to pretty print a file">
     Pretty print
   </message>
-  <message name="IDS_DEVTOOLS_5a8e8e5a965aaa4368065686b4629b4f" desc="Text to stop preventing the debugger from stepping into library code">
-    Remove from ignore list
-  </message>
   <message name="IDS_DEVTOOLS_5de39fa1bce4bbf9232597a2120bc4d4" desc="Text to open the cubic bezier editor">
     Open cubic bezier editor.
   </message>
@@ -317,9 +311,6 @@
   <message name="IDS_DEVTOOLS_9d8c209e49e328528c39c273798e98c9" desc="Text to save content as a specific file type">
     Save as...
   </message>
-  <message name="IDS_DEVTOOLS_9df22f196a33acd0b372fe502de51211" desc="Text short for automatic">
-    auto
-  </message>
   <message name="IDS_DEVTOOLS_9e65b51e82f2a9b9f72ebe3e083582bb" desc="Text to show an item is empty">
     (empty)
   </message>
@@ -434,9 +425,6 @@
   <message name="IDS_DEVTOOLS_d3d2e617335f08df83599665eef8a418" desc="Text to close something">
     Close
   </message>
-  <message name="IDS_DEVTOOLS_d48a0b796559f82f7dad6167c77ae40c" desc="Text for scripts that should not be stepped into when debugging">
-    Add script to ignore list
-  </message>
   <message name="IDS_DEVTOOLS_d59048f21fd887ad520398ce677be586" desc="Text that is usually a hyperlink to more documentation">
     Learn more
   </message>

front_end/main/main_strings.grdp

@@ -93,6 +93,9 @@
   <message name="IDS_DEVTOOLS_9b1ed2cbe56f7a315f0a365d2b97cb59" desc="A title of the 'Drawer' @UI.ViewLocationResolver category">
     Drawer
   </message>
+  <message name="IDS_DEVTOOLS_9df22f196a33acd0b372fe502de51211" desc="Text short for automatic">
+    auto
+  </message>
   <message name="IDS_DEVTOOLS_a18366b217ebf811ad1886e4f4f865b2" desc="A drop-down menu option to switch to dark theme">
     Dark
   </message>

front_end/sources/sources_strings.grdp

@@ -225,6 +225,9 @@
   <message name="IDS_DEVTOOLS_5a0a64ecca63ba9a006b6397cbdc2b8c" desc="Text to go to a given line">
     Go to line
   </message>
+  <message name="IDS_DEVTOOLS_5a8e8e5a965aaa4368065686b4629b4f" desc="Text to stop preventing the debugger from stepping into library code">
+    Remove from ignore list
+  </message>
   <message name="IDS_DEVTOOLS_5bcc1f50ed61246502d37ce93368dda8" desc="Text in Debugger Paused Message of the Sources panel">
     Paused on XHR or fetch
   </message>
@@ -534,6 +537,9 @@
   <message name="IDS_DEVTOOLS_d25d5fb3cea58ed75394702df42ee1e1" desc="Text in Debugger Plugin of the Sources panel">
     Source map found, but ignored for file on ignore list.
   </message>
+  <message name="IDS_DEVTOOLS_d48a0b796559f82f7dad6167c77ae40c" desc="Text for scripts that should not be stepped into when debugging">
+    Add script to ignore list
+  </message>
   <message name="IDS_DEVTOOLS_dbd92f0d69c038a1dba721deba3b7d90" desc="Label for the button to add a new recording">
     Add recording
   </message>

front_end/timeline/timeline_strings.grdp

@@ -271,6 +271,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_390afae8f87b5024e0c32c4e6ce3e2da" desc="Text in Timeline UIUtils of the Performance panel">
     Run Microtasks
   </message>
+  <message name="IDS_DEVTOOLS_393c3f5ea8ad35c02691d507bdbb31b0" desc="Text for revealing an item in its destination">
+    Reveal
+  </message>
   <message name="IDS_DEVTOOLS_3b419ceb25fddb807ea9483f65fded06" desc="Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in timeline panel of the performance panel">
     Capture settings
   </message>

scripts/localization/utils/check_localized_strings.js

@@ -109,6 +109,7 @@ let devtoolsFrontendDirs;
 const migratedDirsSet = new Set([
   'animation',
   'changes',
+  'components',
   'cookie_table',
   'coverage',
   'developer_resources',