Revert "[Loc] Migrate changes tool to localization V2"

This reverts commit abcb8f7aa8.

Reason for revert: Consistently causing autoroll issues when rolling devtools-frontend into Chromium - see https://chromium-review.googlesource.com/c/chromium/src/+/2554521 for an example.

To recreate this, do a debug build of Chromium with this patch applied to DevTools. It's causing an issue with duplicate keys in the pak files. No DevTools Frontend builds do a debug build of Chromium with the DevTools frontend patch applied so our CQ will be green despite causing an issue.

You can run this locally in Chromium to reproduce via:

autoninja -C out/Default chrome:packed_resources_extra

Which will show the error. 

Original change's description:
> [Loc] Migrate changes tool to localization V2
>
> Migrate changes tool
> Tested with en-XL: https://imgur.com/a/hFDBjQV
>
>
> Bug: 1136655
> Change-Id: Ic434c3085b9e2f2cf44583cca7ee1ce8f1d412f2
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2548688
> Commit-Queue: Christy Chen <chrche@microsoft.com>
> Reviewed-by: Simon Zünd <szuend@chromium.org>

TBR=szuend@chromium.org,chrche@microsoft.com

Change-Id: I94b27434562f6a6bff3be381ab8a5802bd8b03f9
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 1136655
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2557044
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

all_devtools_modules.gni

@@ -53,7 +53,6 @@ all_typescript_module_sources = [
   "changes/ChangesSidebar.js",
   "changes/ChangesTextEditor.js",
   "changes/ChangesView.js",
-  "changes/ModuleUIStrings.js",
   "cm_modes/DefaultCodeMirrorMimeMode.js",
   "color_picker/ContrastDetails.js",
   "color_picker/ContrastInfo.js",

devtools_grd_files.gni

@@ -436,7 +436,6 @@ grd_files_debug_sources = [
   "front_end/changes/ChangesSidebar.js",
   "front_end/changes/ChangesTextEditor.js",
   "front_end/changes/ChangesView.js",
-  "front_end/changes/ModuleUIStrings.js",
   "front_end/cm_modes/DefaultCodeMirrorMimeMode.js",
   "front_end/color_picker/ContrastDetails.js",
   "front_end/color_picker/ContrastInfo.js",

front_end/changes/BUILD.gn

@@ -11,13 +11,11 @@ devtools_module("changes") {
     "ChangesSidebar.js",
     "ChangesTextEditor.js",
     "ChangesView.js",
-    "ModuleUIStrings.js",
   ]
 
   deps = [
     "../common:bundle",
     "../diff:bundle",
-    "../i18n:bundle",
     "../snippets:bundle",
     "../text_editor:bundle",
     "../ui:bundle",

front_end/changes/ChangesSidebar.js

@@ -3,22 +3,11 @@
 // found in the LICENSE file.
 
 import * as Common from '../common/common.js';
-import * as i18n from '../i18n/i18n.js';
 import * as Snippets from '../snippets/snippets.js';
 import * as UI from '../ui/ui.js';
 import * as Workspace from '../workspace/workspace.js';
 import * as WorkspaceDiff from '../workspace_diff/workspace_diff.js';
 
-export const UIStrings = {
-  /**
-  *@description Name of an item from source map
-  *@example {compile.html} PH1
-  */
-  sFromSourceMap: '{PH1} (from source map)',
-};
-const str_ = i18n.i18n.registerUIStrings('changes/ChangesSidebar.js', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
 export class ChangesSidebar extends UI.Widget.Widget {
   /**
    * @param {!WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl} workspaceDiff
@@ -157,7 +146,7 @@ export class UISourceCodeTreeElement extends UI.TreeOutline.TreeElement {
 
     let tooltip = this.uiSourceCode.url();
     if (this.uiSourceCode.contentType().isFromSourceMap()) {
-      tooltip = i18nString(UIStrings.sFromSourceMap, {PH1: this.uiSourceCode.displayName()});
+      tooltip = Common.UIString.UIString('%s (from source map)', this.uiSourceCode.displayName());
     }
     this.tooltip = tooltip;
   }

front_end/changes/ChangesTextEditor.js

@@ -2,27 +2,11 @@
 // 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 TextEditor from '../text_editor/text_editor.js';
 import * as UI from '../ui/ui.js';  // eslint-disable-line no-unused-vars
 
 import {Row, RowType} from './ChangesView.js';  // eslint-disable-line no-unused-vars
 
-export const UIStrings = {
-  /**
-  *@description Text prepended to a removed line in a diff in the Changes tool, viewable only by screen reader.
-  *@example {function log () } PH1
-  */
-  deletions: 'Deletion:{PH1}',
-  /**
-  *@description Text prepended to a new line in a diff in the Changes tool, viewable only by screen reader.
-  *@example {function log () } PH1
-  */
-  additions: 'Addition:{PH1}',
-};
-const str_ = i18n.i18n.registerUIStrings('changes/ChangesTextEditor.js', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
 /**
  * @extends {TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditor}
  */
@@ -102,10 +86,10 @@ export class DevToolsAccessibleDiffTextArea extends TextEditor.CodeMirrorTextEdi
     const rowType = diffRows[lineNumber].type;
 
     if (rowType === RowType.Deletion) {
-      this.textarea.value = i18nString(UIStrings.deletions, {PH1: this.textarea.value});
+      this.textarea.value = ls`Deletion:${this.textarea.value}`;
     }
     if (rowType === RowType.Addition) {
-      this.textarea.value = i18nString(UIStrings.additions, {PH1: this.textarea.value});
+      this.textarea.value = ls`Addition:${this.textarea.value}`;
     }
     this.prevInput = this.textarea.value;
   }

front_end/changes/ChangesView.js

@@ -4,7 +4,6 @@
 
 import * as Common from '../common/common.js';
 import * as Diff from '../diff/diff.js';
-import * as i18n from '../i18n/i18n.js';
 import * as UI from '../ui/ui.js';
 import * as Workspace from '../workspace/workspace.js';  // eslint-disable-line no-unused-vars
 import * as WorkspaceDiff from '../workspace_diff/workspace_diff.js';
@@ -12,52 +11,6 @@ import * as WorkspaceDiff from '../workspace_diff/workspace_diff.js';
 import {ChangesSidebar, Events} from './ChangesSidebar.js';
 import {ChangesTextEditor} from './ChangesTextEditor.js';
 
-export const UIStrings = {
-  /**
-  *@description Screen-reader accessible name for the code editor in the Changes tool showing the user's changes.
-  */
-  changesDiffViewer: 'Changes diff viewer',
-  /**
-  *@description Screen reader/tooltip label for a button in the Changes tool that reverts all changes to the currently open file.
-  */
-  revertAllChangesToCurrentFile: 'Revert all changes to current file',
-  /**
-  *@description Text in Changes View of the Changes tab
-  */
-  noChanges: 'No changes',
-  /**
-  *@description Text in Changes View of the Changes tab
-  */
-  binaryData: 'Binary data',
-  /**
-  *@description Insertion text in Changes View of the Changes tab
-  *@example {1} PH1
-  */
-  sInsertion: '{PH1} insertion (+),',
-  /**
-  *@description Insertion text in Changes View of the Changes tab
-  *@example {2} PH1
-  */
-  sInsertions: '{PH1} insertions (+),',
-  /**
-  *@description Deletion text in Changes View of the Changes tab
-  *@example {1} PH1
-  */
-  sDeletion: '{PH1} deletion (-)',
-  /**
-  *@description Deletion text in Changes View of the Changes tab
-  *@example {2} PH1
-  */
-  sDeletions: '{PH1} deletions (-)',
-  /**
-  *@description Text in Changes View of the Changes tab
-  *@example {2} PH1
-  */
-  SkippingDMatchingLines: '( … Skipping {PH1} matching lines … )',
-};
-const str_ = i18n.i18n.registerUIStrings('changes/ChangesView.js', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
 /** @type {!ChangesView} */
 let changesViewInstance;
 
@@ -91,7 +44,7 @@ export class ChangesView extends UI.Widget.VBox {
 
     this._editor = new ChangesTextEditor({
       bracketMatchingSetting: undefined,
-      devtoolsAccessibleName: i18nString(UIStrings.changesDiffViewer),
+      devtoolsAccessibleName: ls`Changes diff viewer`,
       lineNumbers: true,
       lineWrapping: false,
       mimeType: undefined,
@@ -111,15 +64,14 @@ export class ChangesView extends UI.Widget.VBox {
     self.onInvokeElement(this._editor.element, this._click.bind(this));
 
     this._toolbar = new UI.Toolbar.Toolbar('changes-toolbar', mainWidget.element);
-    const revertButton =
-        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.revertAllChangesToCurrentFile), 'largeicon-undo');
+    const revertButton = new UI.Toolbar.ToolbarButton(ls`Revert all changes to current file`, 'largeicon-undo');
     revertButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this._revert.bind(this));
     this._toolbar.appendToolbarItem(revertButton);
     this._diffStats = new UI.Toolbar.ToolbarText('');
     this._toolbar.appendToolbarItem(this._diffStats);
     this._toolbar.setEnabled(false);
 
-    this._hideDiff(i18nString(UIStrings.noChanges));
+    this._hideDiff(ls`No changes`);
     this._selectedUISourceCodeChanged();
   }
 
@@ -198,7 +150,7 @@ export class ChangesView extends UI.Widget.VBox {
     }
     const uiSourceCode = this._selectedUISourceCode;
     if (!uiSourceCode.contentType().isTextType()) {
-      this._hideDiff(i18nString(UIStrings.binaryData));
+      this._hideDiff(ls`Binary data`);
       return;
     }
     this._workspaceDiff.requestDiff(uiSourceCode).then(diff => {
@@ -227,7 +179,7 @@ export class ChangesView extends UI.Widget.VBox {
     this._diffRows = [];
 
     if (!diff || (diff.length === 1 && diff[0][0] === Diff.Diff.Operation.Equal)) {
-      this._hideDiff(i18nString(UIStrings.noChanges));
+      this._hideDiff(ls`No changes`);
       return;
     }
 
@@ -278,16 +230,16 @@ export class ChangesView extends UI.Widget.VBox {
 
     let insertionText = '';
     if (insertions === 1) {
-      insertionText = i18nString(UIStrings.sInsertion, {PH1: insertions});
+      insertionText = ls`${insertions} insertion (+),`;
     } else {
-      insertionText = i18nString(UIStrings.sInsertions, {PH1: insertions});
+      insertionText = ls`${insertions} insertions (+),`;
     }
 
     let deletionText = '';
     if (deletions === 1) {
-      deletionText = i18nString(UIStrings.sDeletion, {PH1: deletions});
+      deletionText = ls`${deletions} deletion (-)`;
     } else {
-      deletionText = i18nString(UIStrings.sDeletions, {PH1: deletions});
+      deletionText = ls`${deletions} deletions (-)`;
     }
 
     this._diffStats.setText(`${insertionText} ${deletionText}`);
@@ -322,7 +274,8 @@ export class ChangesView extends UI.Widget.VBox {
         }
         if (lines.length > paddingLines * 2 + 1 && !atEnd) {
           equalRows.push(createRow(
-              i18nString(UIStrings.SkippingDMatchingLines, {PH1: (lines.length - paddingLines * 2)}), RowType.Spacer));
+              Common.UIString.UIString('( … Skipping %d matching lines … )', lines.length - paddingLines * 2),
+              RowType.Spacer));
         }
       }
       if (!atEnd) {

front_end/changes/ModuleUIStrings.js

@@ -1,16 +0,0 @@
-// Copyright 2020 The Chromium Authors. All rights reserved.
-// 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';
-export const UIStrings = {
-  /**
-  *@description Title of the 'Changes' tool in the bottom drawer
-  */
-  changes: 'Changes',
-  /**
-  *@description The UI destination when right clicking an item that can be revealed
-  */
-  changesDrawer: 'Changes drawer',
-};
-i18n.i18n.registerUIStrings('changes/ModuleUIStrings.js', UIStrings);

front_end/changes/changes_strings.grdp

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<grit-part>
+  <message name="IDS_DEVTOOLS_025502db49a6cf61a8245998129bd973" desc="Deletion text in Changes View of the Changes tab">
+    <ph name="DELETIONS">$1s<ex>2</ex></ph> deletions (-)
+  </message>
+  <message name="IDS_DEVTOOLS_40b7f348c8d89730ae8b9a88c5d48e35" desc="Screen-reader accessible name for the code editor in the Changes tool showing the user's changes.">
+    Changes diff viewer
+  </message>
+  <message name="IDS_DEVTOOLS_5c2892cb638ec999fe22612587cd4a00" desc="Text in Changes View of the Changes tab">
+    No changes
+  </message>
+  <message name="IDS_DEVTOOLS_70c85e43e99bc0cfcbb656123306eb19" desc="Insertion text in Changes View of the Changes tab">
+    <ph name="INSERTIONS">$1s<ex>1</ex></ph> insertion (+),
+  </message>
+  <message name="IDS_DEVTOOLS_af2c230293677261fe33ba6d3fbf02e3" desc="Insertion text in Changes View of the Changes tab">
+    <ph name="INSERTIONS">$1s<ex>2</ex></ph> insertions (+),
+  </message>
+  <message name="IDS_DEVTOOLS_b5bfcafb00b072cfbae0735d027126f7" desc="Screen reader/tooltip label for a button in the Changes tool that reverts all changes to the currently open file.">
+    Revert all changes to current file
+  </message>
+  <message name="IDS_DEVTOOLS_8cd4f0e81bfac859d5f20d360ab63e93" desc="Text prepended to a new line in a diff in the Changes tool, viewable only by screen reader.">
+    Addition:<ph name="THIS_TEXTAREA_VALUE">$1s<ex>function log () {</ex></ph>
+  </message>
+  <message name="IDS_DEVTOOLS_c112bb3542e98308d12d5ecb10a67abc" desc="Title of the 'Changes' tool in the bottom drawer">
+    Changes
+  </message>
+  <message name="IDS_DEVTOOLS_c73e4e53c15d9971d9293fcff6c0d8c0" desc="Text in Changes View of the Changes tab">
+    ( … Skipping <ph name="LINES_LENGTH___PADDINGLINES____">$1d<ex>2</ex></ph> matching lines … )
+  </message>
+  <message name="IDS_DEVTOOLS_ca012662d53a8bde28b4d82722aaff7e" desc="The UI destination when right clicking an item that can be revealed">
+    Changes drawer
+  </message>
+  <message name="IDS_DEVTOOLS_e0e5ea9203300d2eb8ced39dd88c214e" desc="Deletion text in Changes View of the Changes tab">
+    <ph name="DELETIONS">$1s<ex>1</ex></ph> deletion (-)
+  </message>
+  <message name="IDS_DEVTOOLS_e8f345109e87ecbafb4fd29b9f8afc0f" desc="Text prepended to a removed line in a diff in the Changes tool, viewable only by screen reader.">
+    Deletion:<ph name="THIS_TEXTAREA_VALUE">$1s<ex>function log () {</ex></ph>
+  </message>
+  <message name="IDS_DEVTOOLS_f550ec70278cc72604795d91ff8dcd30" desc="Text in Changes View of the Changes tab">
+    Binary data
+  </message>
+</grit-part>

front_end/changes/module.json

@@ -22,7 +22,6 @@
     "text_editor",
     "workspace",
     "diff",
-    "i18n",
     "bindings",
     "persistence",
     "snippets",

front_end/i18n/locales/en-US.json

@@ -53,48 +53,6 @@
   "animation/ModuleUIStrings.js | animations": {
     "message": "Animations"
   },
-  "changes/ChangesSidebar.js | sFromSourceMap": {
-    "message": "{PH1} (from source map)"
-  },
-  "changes/ChangesTextEditor.js | additions": {
-    "message": "Addition:{PH1}"
-  },
-  "changes/ChangesTextEditor.js | deletions": {
-    "message": "Deletion:{PH1}"
-  },
-  "changes/ChangesView.js | binaryData": {
-    "message": "Binary data"
-  },
-  "changes/ChangesView.js | changesDiffViewer": {
-    "message": "Changes diff viewer"
-  },
-  "changes/ChangesView.js | noChanges": {
-    "message": "No changes"
-  },
-  "changes/ChangesView.js | revertAllChangesToCurrentFile": {
-    "message": "Revert all changes to current file"
-  },
-  "changes/ChangesView.js | sDeletion": {
-    "message": "{PH1} deletion (-)"
-  },
-  "changes/ChangesView.js | sDeletions": {
-    "message": "{PH1} deletions (-)"
-  },
-  "changes/ChangesView.js | sInsertion": {
-    "message": "{PH1} insertion (+),"
-  },
-  "changes/ChangesView.js | sInsertions": {
-    "message": "{PH1} insertions (+),"
-  },
-  "changes/ChangesView.js | SkippingDMatchingLines": {
-    "message": "( … Skipping {PH1} matching lines … )"
-  },
-  "changes/ModuleUIStrings.js | changes": {
-    "message": "Changes"
-  },
-  "changes/ModuleUIStrings.js | changesDrawer": {
-    "message": "Changes drawer"
-  },
   "coverage/CoverageListView.js | Byte": {
     "message": "1 byte"
   },

front_end/langpacks/devtools_ui_strings.grd

@@ -15,6 +15,7 @@
       <part file="../bindings/bindings_strings.grdp" />
       <part file="../browser_debugger/browser_debugger_strings.grdp" />
       <part file="../browser_sdk/browser_sdk_strings.grdp" />
+      <part file="../changes/changes_strings.grdp" />
       <part file="../color_picker/color_picker_strings.grdp" />
       <part file="../common/common_strings.grdp" />
       <part file="../components/components_strings.grdp" />

front_end/langpacks/shared_strings.grdp

@@ -592,6 +592,9 @@
   <message name="IDS_DEVTOOLS_f907e651164789346ae0a1e257c462d8" desc="Label for a group of JavaScript files">
     Script
   </message>
+  <message name="IDS_DEVTOOLS_fa6711f918fe2018131a4ad0380b9e56" desc="Name of an item from source map">
+    <ph name="DISPLAY_NAME">$1s<ex>compile.html</ex></ph> (from source map)
+  </message>
   <message name="IDS_DEVTOOLS_fa7c73b6eb5f3c3b77e47d8a4557af3e" desc="Tooltip text that appears when hovering over the largeicon load button">
     Load profile…
   </message>

front_end/sources/sources_strings.grdp

@@ -630,9 +630,6 @@
   <message name="IDS_DEVTOOLS_f96985d765ed09d4930d76a3ca869508" desc="Tooltip text that appears when hovering over the largeicon terminate execution button in the Sources Panel of the Sources panel">
     Terminate current JavaScript call
   </message>
-  <message name="IDS_DEVTOOLS_fa6711f918fe2018131a4ad0380b9e56" desc="Name of an item from source map">
-    <ph name="DISPLAY_NAME">$1s<ex>compile.html</ex></ph> (from source map)
-  </message>
   <message name="IDS_DEVTOOLS_fada802796e35f867c2b3f605982b21d" desc="Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit because a descendant is removed">
     Descendant <ph name="TARGETNODELINK">$1s<ex>node</ex></ph> removed
   </message>

scripts/localization/utils/check_localized_strings.js

@@ -106,7 +106,6 @@ let devtoolsFrontendDirs;
 // TODO(crbug.com/941561): Remove once localization V1 is no longer used.
 const migratedDirsSet = new Set([
   'animation',
-  'changes',
   'coverage',
   'developer_resources',
   'devices',