[Loc] Migrate browser_debugger to localization V2

Migrate brwoser_debugger
Tested with en-XL: https://imgur.com/a/61y0spd


Bug: 1136655
Change-Id: Ie9a831313a8d47a3b370b2248948a65881ab6685
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2667107
Commit-Queue: Christy Chen <chrche@microsoft.com>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>

all_devtools_modules.gni

@@ -43,6 +43,7 @@ all_typescript_module_sources = [
   "browser_debugger/CategorizedBreakpointsSidebarPane.js",
   "browser_debugger/DOMBreakpointsSidebarPane.js",
   "browser_debugger/EventListenerBreakpointsSidebarPane.js",
+  "browser_debugger/ModuleUIStrings.js",
   "browser_debugger/ObjectEventListenersSidebarPane.js",
   "browser_debugger/XHRBreakpointsSidebarPane.js",
   "browser_sdk/IssuesManager.js",

devtools_grd_files.gni

@@ -470,6 +470,7 @@ grd_files_debug_sources = [
   "front_end/browser_debugger/CategorizedBreakpointsSidebarPane.js",
   "front_end/browser_debugger/DOMBreakpointsSidebarPane.js",
   "front_end/browser_debugger/EventListenerBreakpointsSidebarPane.js",
+  "front_end/browser_debugger/ModuleUIStrings.js",
   "front_end/browser_debugger/ObjectEventListenersSidebarPane.js",
   "front_end/browser_debugger/XHRBreakpointsSidebarPane.js",
   "front_end/browser_sdk/IssuesManager.js",

front_end/browser_debugger/BUILD.gn

@@ -11,6 +11,7 @@ devtools_module("browser_debugger") {
     "CategorizedBreakpointsSidebarPane.js",
     "DOMBreakpointsSidebarPane.js",
     "EventListenerBreakpointsSidebarPane.js",
+    "ModuleUIStrings.js",
     "ObjectEventListenersSidebarPane.js",
     "XHRBreakpointsSidebarPane.js",
   ]
@@ -18,6 +19,7 @@ devtools_module("browser_debugger") {
   deps = [
     "../common:bundle",
     "../event_listeners:bundle",
+    "../i18n:bundle",
     "../sdk:bundle",
     "../sources:bundle",
     "../ui:bundle",

front_end/browser_debugger/CategorizedBreakpointsSidebarPane.js

@@ -2,10 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {ls} from '../platform/platform.js';
+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 Screen reader description of a hit breakpoint in the Sources panel
+  */
+  breakpointHit: 'breakpoint hit',
+};
+const str_ = i18n.i18n.registerUIStrings('browser_debugger/CategorizedBreakpointsSidebarPane.js', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /**
  * @abstract
  */
@@ -149,7 +157,7 @@ export class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     const matchingBreakpoint = this._breakpoints.get(breakpoint);
     if (matchingBreakpoint) {
       this._highlightedElement = matchingBreakpoint.element.listItemElement;
-      UI.ARIAUtils.setDescription(this._highlightedElement, ls`breakpoint hit`);
+      UI.ARIAUtils.setDescription(this._highlightedElement, i18nString(UIStrings.breakpointHit));
       this._highlightedElement.classList.add('breakpoint-hit');
     }
   }

front_end/browser_debugger/DOMBreakpointsSidebarPane.js

@@ -29,11 +29,74 @@
  */
 
 import * as Common from '../common/common.js';
-import {ls} from '../platform/platform.js';
+import * as i18n from '../i18n/i18n.js';
 import * as SDK from '../sdk/sdk.js';
 import * as Sources from '../sources/sources.js';
 import * as UI from '../ui/ui.js';
 
+export const UIStrings = {
+  /**
+  *@description Text to indicate there are no breakpoints
+  */
+  noBreakpoints: 'No breakpoints',
+  /**
+  *@description Accessibility label for the DOM breakpoints list in the Sources panel
+  */
+  domBreakpointsList: 'DOM Breakpoints list',
+  /**
+  *@description Text with two placeholders separated by a colon
+  *@example {Node removed} PH1
+  *@example {div#id1} PH2
+  */
+  sS: '{PH1}: {PH2}',
+  /**
+  *@description Text exposed to screen readers on checked items.
+  */
+  checked: 'checked',
+  /**
+  *@description Text exposed to screen readers on unchecked items.
+  */
+  unchecked: 'unchecked',
+  /**
+  *@description Accessibility label for hit breakpoints in the Sources panel.
+  *@example {checked} PH1
+  */
+  sBreakpointHit: '{PH1} breakpoint hit',
+  /**
+  *@description Screen reader description of a hit breakpoint in the Sources panel
+  */
+  breakpointHit: 'breakpoint hit',
+  /**
+  *@description A context menu item in the DOM Breakpoints sidebar that reveals the node on which the current breakpoint is set.
+  */
+  revealDomNodeInElementsPanel: 'Reveal DOM node in Elements panel',
+  /**
+  *@description Text to remove a breakpoint
+  */
+  removeBreakpoint: 'Remove breakpoint',
+  /**
+  *@description A context menu item in the DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+  */
+  removeAllDomBreakpoints: 'Remove all DOM breakpoints',
+  /**
+  *@description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+  */
+  subtreeModified: 'Subtree modified',
+  /**
+  *@description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+  */
+  attributeModified: 'Attribute modified',
+  /**
+  *@description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+  */
+  nodeRemoved: 'Node removed',
+  /**
+  *@description A context menu item in the DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+  */
+  breakOn: 'Break on',
+};
+const str_ = i18n.i18n.registerUIStrings('browser_debugger/DOMBreakpointsSidebarPane.js', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /** @type {!DOMBreakpointsSidebarPane} */
 let domBreakpointsSidebarPaneInstance;
 
@@ -53,7 +116,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox {
     this.elementToCheckboxes = new WeakMap();
 
     this._emptyElement = this.contentElement.createChild('div', 'gray-info-message');
-    this._emptyElement.textContent = Common.UIString.UIString('No breakpoints');
+    this._emptyElement.textContent = i18nString(UIStrings.noBreakpoints);
     /** @type {!UI.ListModel.ListModel.<!SDK.DOMDebuggerModel.DOMBreakpoint>} */
     this._breakpoints = new UI.ListModel.ListModel();
     /** @type {!UI.ListControl.ListControl.<!SDK.DOMDebuggerModel.DOMBreakpoint>} */
@@ -61,7 +124,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox {
     this.contentElement.appendChild(this._list.element);
     this._list.element.classList.add('breakpoint-list', 'hidden');
     UI.ARIAUtils.markAsList(this._list.element);
-    UI.ARIAUtils.setAccessibleName(this._list.element, ls`DOM Breakpoints list`);
+    UI.ARIAUtils.setAccessibleName(this._list.element, i18nString(UIStrings.domBreakpointsList));
     this._emptyElement.tabIndex = -1;
 
     SDK.SDKModel.TargetManager.instance().addModelListener(
@@ -124,22 +187,23 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox {
     const description = document.createElement('div');
     const breakpointTypeLabel = BreakpointTypeLabels.get(item.type);
     description.textContent = breakpointTypeLabel || null;
-    UI.ARIAUtils.setAccessibleName(checkboxElement, ls`${breakpointTypeLabel}`);
+    UI.ARIAUtils.setAccessibleName(checkboxElement, breakpointTypeLabel || '');
     const linkifiedNode = document.createElement('monospace');
     linkifiedNode.style.display = 'block';
     labelElement.appendChild(linkifiedNode);
     Common.Linkifier.Linkifier.linkify(item.node, {preventKeyboardFocus: true, tooltip: undefined}).then(linkified => {
       linkifiedNode.appendChild(linkified);
-      UI.ARIAUtils.setAccessibleName(checkboxElement, ls`${breakpointTypeLabel}: ${linkified.deepTextContent()}`);
+      UI.ARIAUtils.setAccessibleName(
+          checkboxElement, i18nString(UIStrings.sS, {PH1: breakpointTypeLabel, PH2: linkified.deepTextContent()}));
     });
 
     labelElement.appendChild(description);
 
-    const checkedStateText = item.enabled ? ls`checked` : ls`unchecked`;
+    const checkedStateText = item.enabled ? i18nString(UIStrings.checked) : i18nString(UIStrings.unchecked);
     if (item === this._highlightedBreakpoint) {
       element.classList.add('breakpoint-hit');
-      UI.ARIAUtils.setDescription(element, ls`${checkedStateText} breakpoint hit`);
-      UI.ARIAUtils.setDescription(checkboxElement, ls`breakpoint hit`);
+      UI.ARIAUtils.setDescription(element, i18nString(UIStrings.sBreakpointHit, {PH1: checkedStateText}));
+      UI.ARIAUtils.setDescription(checkboxElement, i18nString(UIStrings.breakpointHit));
     } else {
       UI.ARIAUtils.setDescription(element, checkedStateText);
     }
@@ -273,11 +337,11 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox {
   _contextMenu(breakpoint, event) {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.defaultSection().appendItem(
-        ls`Reveal DOM node in Elements panel`, () => Common.Revealer.reveal(breakpoint.node));
-    contextMenu.defaultSection().appendItem(Common.UIString.UIString('Remove breakpoint'), () => {
+        i18nString(UIStrings.revealDomNodeInElementsPanel), () => Common.Revealer.reveal(breakpoint.node));
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeBreakpoint), () => {
       breakpoint.domDebuggerModel.removeDOMBreakpoint(breakpoint.node, breakpoint.type);
     });
-    contextMenu.defaultSection().appendItem(Common.UIString.UIString('Remove all DOM breakpoints'), () => {
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeAllDomBreakpoints), () => {
       breakpoint.domDebuggerModel.removeAllDOMBreakpoints();
     });
     contextMenu.show();
@@ -333,9 +397,9 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox {
 }
 
 export const BreakpointTypeLabels = new Map([
-  [Protocol.DOMDebugger.DOMBreakpointType.SubtreeModified, Common.UIString.UIString('Subtree modified')],
-  [Protocol.DOMDebugger.DOMBreakpointType.AttributeModified, Common.UIString.UIString('Attribute modified')],
-  [Protocol.DOMDebugger.DOMBreakpointType.NodeRemoved, Common.UIString.UIString('Node removed')],
+  [Protocol.DOMDebugger.DOMBreakpointType.SubtreeModified, i18nString(UIStrings.subtreeModified)],
+  [Protocol.DOMDebugger.DOMBreakpointType.AttributeModified, i18nString(UIStrings.attributeModified)],
+  [Protocol.DOMDebugger.DOMBreakpointType.NodeRemoved, i18nString(UIStrings.nodeRemoved)],
 ]);
 
 /**
@@ -372,7 +436,7 @@ export class ContextMenuProvider {
       }
     }
 
-    const breakpointsMenu = contextMenu.debugSection().appendSubMenuItem(Common.UIString.UIString('Break on'));
+    const breakpointsMenu = contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.breakOn));
     for (const type of Object.values(Protocol.DOMDebugger.DOMBreakpointType)) {
       const label = Sources.DebuggerPausedMessage.BreakpointTypeNouns.get(type);
       if (label) {

front_end/browser_debugger/ModuleUIStrings.js

@@ -0,0 +1,12 @@
+// Copyright 2021 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 Marker Decorator of Elements
+  */
+  domBreakpoint: 'DOM Breakpoint',
+};
+i18n.i18n.registerUIStrings('browser_debugger/ModuleUIStrings.js', UIStrings);

front_end/browser_debugger/ObjectEventListenersSidebarPane.js

@@ -4,10 +4,18 @@
 
 import * as Common from '../common/common.js';  // eslint-disable-line no-unused-vars
 import * as EventListeners from '../event_listeners/event_listeners.js';
-import {ls} from '../platform/platform.js';
+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 Label for a button in the sources panel that refreshes the list of global event listeners.
+  */
+  refreshGlobalListeners: 'Refresh global listeners',
+};
+const str_ = i18n.i18n.registerUIStrings('browser_debugger/ObjectEventListenersSidebarPane.js', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /** @type {!ObjectEventListenersSidebarPane} */
 let objectEventListenersSidebarPaneInstance;
 
@@ -20,7 +28,8 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox {
    */
   constructor() {
     super();
-    this._refreshButton = new UI.Toolbar.ToolbarButton(ls`Refresh global listeners`, 'largeicon-refresh');
+    this._refreshButton =
+        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.refreshGlobalListeners), 'largeicon-refresh');
     this._refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this._refreshClick, this);
     this._refreshButton.setEnabled(false);
 

front_end/browser_debugger/XHRBreakpointsSidebarPane.js

@@ -2,11 +2,59 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../common/common.js';
-import {ls} from '../platform/platform.js';
+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 Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool
+  */
+  xhrfetchBreakpoints: 'XHR/fetch Breakpoints',
+  /**
+  *@description Text to indicate there are no breakpoints
+  */
+  noBreakpoints: 'No breakpoints',
+  /**
+  *@description Label for a button in the Sources panel that opens the input field to create a new XHR/fetch breakpoint.
+  */
+  addXhrfetchBreakpoint: 'Add XHR/fetch breakpoint',
+  /**
+  *@description Text to add a breakpoint
+  */
+  addBreakpoint: 'Add breakpoint',
+  /**
+  *@description Input element container text content in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+  */
+  breakWhenUrlContains: 'Break when URL contains:',
+  /**
+  *@description Accessible label for XHR/fetch breakpoint text input
+  */
+  urlBreakpoint: 'URL Breakpoint',
+  /**
+  *@description Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+  *@example {example.com} PH1
+  */
+  urlContainsS: 'URL contains "{PH1}"',
+  /**
+  *@description Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+  */
+  anyXhrOrFetch: 'Any XHR or fetch',
+  /**
+  *@description Screen reader description of a hit breakpoint in the Sources panel
+  */
+  breakpointHit: 'breakpoint hit',
+  /**
+  *@description Text to remove all breakpoints
+  */
+  removeAllBreakpoints: 'Remove all breakpoints',
+  /**
+  *@description Text to remove a breakpoint
+  */
+  removeBreakpoint: 'Remove breakpoint',
+};
+const str_ = i18n.i18n.registerUIStrings('browser_debugger/XHRBreakpointsSidebarPane.js', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 /**
  * @type {!WeakMap<!Element, !HTMLElement>}
  */
@@ -39,14 +87,14 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox {
     this.contentElement.appendChild(this._list.element);
     this._list.element.classList.add('breakpoint-list', 'hidden');
     UI.ARIAUtils.markAsList(this._list.element);
-    UI.ARIAUtils.setAccessibleName(this._list.element, ls`XHR/fetch Breakpoints`);
+    UI.ARIAUtils.setAccessibleName(this._list.element, i18nString(UIStrings.xhrfetchBreakpoints));
     this._emptyElement = this.contentElement.createChild('div', 'gray-info-message');
-    this._emptyElement.textContent = Common.UIString.UIString('No breakpoints');
+    this._emptyElement.textContent = i18nString(UIStrings.noBreakpoints);
 
     /** @type {!Map.<string, !Element>} */
     this._breakpointElements = new Map();
 
-    this._addButton = new UI.Toolbar.ToolbarButton(ls`Add XHR/fetch breakpoint`, 'largeicon-add');
+    this._addButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.addXhrfetchBreakpoint), 'largeicon-add');
     this._addButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, event => {
       this._addButtonClicked();
     });
@@ -77,8 +125,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox {
    */
   _emptyElementContextMenu(event) {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    contextMenu.defaultSection().appendItem(
-        Common.UIString.UIString('Add breakpoint'), this._addButtonClicked.bind(this));
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.addBreakpoint), this._addButtonClicked.bind(this));
     contextMenu.show();
   }
 
@@ -87,10 +134,10 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox {
 
     const inputElementContainer = document.createElement('p');
     inputElementContainer.classList.add('breakpoint-condition');
-    inputElementContainer.textContent = Common.UIString.UIString('Break when URL contains:');
+    inputElementContainer.textContent = i18nString(UIStrings.breakWhenUrlContains);
 
     const inputElement = inputElementContainer.createChild('span', 'breakpoint-condition-input');
-    UI.ARIAUtils.setAccessibleName(inputElement, ls`URL Breakpoint`);
+    UI.ARIAUtils.setAccessibleName(inputElement, i18nString(UIStrings.urlBreakpoint));
     this._addListElement(inputElementContainer, /** @type {?Element} */ (this._list.element.firstChild));
 
     /**
@@ -167,8 +214,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox {
     UI.ARIAUtils.setChecked(element, enabled);
     element.addEventListener('contextmenu', this._contextMenu.bind(this, item), true);
 
-    const title =
-        item ? Common.UIString.UIString('URL contains "%s"', item) : Common.UIString.UIString('Any XHR or fetch');
+    const title = item ? i18nString(UIStrings.urlContainsS, {PH1: item}) : i18nString(UIStrings.anyXhrOrFetch);
     const label = UI.UIUtils.CheckboxLabel.create(title, enabled);
     UI.ARIAUtils.markAsHidden(label);
     UI.ARIAUtils.setAccessibleName(element, title);
@@ -203,7 +249,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox {
 
     if (item === this._hitBreakpoint) {
       element.classList.add('breakpoint-hit');
-      UI.ARIAUtils.setDescription(element, ls`breakpoint hit`);
+      UI.ARIAUtils.setDescription(element, i18nString(UIStrings.breakpointHit));
     }
 
     label.classList.add('cursor-auto');
@@ -307,11 +353,10 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox {
       }
       this._update();
     }
-    const removeAllTitle = Common.UIString.UIString('Remove all breakpoints');
+    const removeAllTitle = i18nString(UIStrings.removeAllBreakpoints);
 
-    contextMenu.defaultSection().appendItem(
-        Common.UIString.UIString('Add breakpoint'), this._addButtonClicked.bind(this));
-    contextMenu.defaultSection().appendItem(Common.UIString.UIString('Remove breakpoint'), removeBreakpoint.bind(this));
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.addBreakpoint), this._addButtonClicked.bind(this));
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.removeBreakpoint), removeBreakpoint.bind(this));
     contextMenu.defaultSection().appendItem(removeAllTitle, removeAllBreakpoints.bind(this));
     contextMenu.show();
   }

front_end/browser_debugger/browser_debugger-meta.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../platform/platform.js';
-import {ls} from '../platform/platform.js';
 import * as Root from '../root/root.js';
 import * as UI from '../ui/ui.js';
 
@@ -11,6 +9,75 @@ import * as UI from '../ui/ui.js';
 import type * as BrowserDebugger from './browser_debugger.js';
 import type * as Sources from '../sources/sources.js';
 
+import * as i18n from '../i18n/i18n.js';
+export const UIStrings = {
+  /**
+  *@description Command for showing the 'Elements' tool
+  */
+  showElements: 'Show Elements',
+  /**
+  *@description Title of the 'Event Listener Breakpoints' tool in the bottom sidebar of the Sources tool
+  */
+  eventListenerBreakpoints: 'Event Listener Breakpoints',
+  /**
+  *@description Title for showing the 'CSP Violation Breakpoints' tool in the Sources panel
+  */
+  showCspViolationBreakpoints: 'Show CSP Violation Breakpoints',
+  /**
+  *@description Title of the 'CSP Violation Breakpoints' tool in the bottom sidebar of the Sources tool
+  */
+  cspViolationBreakpoints: 'CSP Violation Breakpoints',
+  /**
+  *@description Command for showing the 'XHR/fetch Breakpoints' in the sources panel
+  */
+  showXhrfetchBreakpoints: 'Show XHR/fetch Breakpoints',
+  /**
+  *@description Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool
+  */
+  xhrfetchBreakpoints: 'XHR/fetch Breakpoints',
+  /**
+  *@description Command for showing the 'DOM Breakpoints' tool in the Elements panel
+  */
+  showDomBreakpoints: 'Show DOM Breakpoints',
+  /**
+  *@description Title of the 'DOM Breakpoints' tool in the bottom sidebar of the Sources tool
+  */
+  domBreakpoints: 'DOM Breakpoints',
+  /**
+  *@description Command for showing the 'Gobal Listeners' tool in the sources panel
+  */
+  showGlobalListeners: 'Show Global Listeners',
+  /**
+  *@description Title of the 'Global Listeners' tool in the bottom sidebar of the Sources tool
+  */
+  globalListeners: 'Global Listeners',
+  /**
+  *@description Text that refers to one or a group of webpages
+  */
+  page: 'Page',
+  /**
+  *@description Command for showing the 'Page' tab in the Sources panel
+  */
+  showPage: 'Show Page',
+  /**
+  *@description Title as part of a tool to override existing configurations
+  */
+  overrides: 'Overrides',
+  /**
+  *@description Command for showing the 'Overrides' tool in the Sources panel
+  */
+  showOverrides: 'Show Overrides',
+  /**
+  *@description Title for a type of source files
+  */
+  contentScripts: 'Content scripts',
+  /**
+  *@description Command for showing the 'Content scripts' tool in the sources panel
+  */
+  showContentScripts: 'Show Content scripts',
+};
+const str_ = i18n.i18n.registerUIStrings('browser_debugger/browser_debugger-meta.ts', UIStrings);
+const i18nString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 let loadedBrowserDebuggerModule: (typeof BrowserDebugger|undefined);
 
 async function loadBrowserDebuggerModule(): Promise<typeof BrowserDebugger> {
@@ -45,8 +112,8 @@ UI.ViewManager.registerViewExtension({
   },
   id: 'sources.eventListenerBreakpoints',
   location: UI.ViewManager.ViewLocationValues.SOURCES_SIDEBAR_BOTTOM,
-  commandPrompt: (): Platform.UIString.LocalizedString => ls`Show Elements`,
-  title: (): Platform.UIString.LocalizedString => ls`Event Listener Breakpoints`,
+  commandPrompt: i18nString(UIStrings.showElements),
+  title: i18nString(UIStrings.eventListenerBreakpoints),
   order: 9,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
 });
@@ -58,8 +125,8 @@ UI.ViewManager.registerViewExtension({
   },
   id: 'sources.cspViolationBreakpoints',
   location: UI.ViewManager.ViewLocationValues.SOURCES_SIDEBAR_BOTTOM,
-  commandPrompt: (): Platform.UIString.LocalizedString => ls`Show CSP Violation Breakpoints`,
-  title: (): Platform.UIString.LocalizedString => ls`CSP Violation Breakpoints`,
+  commandPrompt: i18nString(UIStrings.showCspViolationBreakpoints),
+  title: i18nString(UIStrings.cspViolationBreakpoints),
   order: 10,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
 });
@@ -71,8 +138,8 @@ UI.ViewManager.registerViewExtension({
   },
   id: 'sources.xhrBreakpoints',
   location: UI.ViewManager.ViewLocationValues.SOURCES_SIDEBAR_BOTTOM,
-  commandPrompt: (): Platform.UIString.LocalizedString => ls`Show XHR/fetch Breakpoints`,
-  title: (): Platform.UIString.LocalizedString => ls`XHR/fetch Breakpoints`,
+  commandPrompt: i18nString(UIStrings.showXhrfetchBreakpoints),
+  title: i18nString(UIStrings.xhrfetchBreakpoints),
   order: 5,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   hasToolbar: true,
@@ -85,8 +152,8 @@ UI.ViewManager.registerViewExtension({
   },
   id: 'sources.domBreakpoints',
   location: UI.ViewManager.ViewLocationValues.SOURCES_SIDEBAR_BOTTOM,
-  commandPrompt: (): Platform.UIString.LocalizedString => ls`Show DOM Breakpoints`,
-  title: (): Platform.UIString.LocalizedString => ls`DOM Breakpoints`,
+  commandPrompt: i18nString(UIStrings.showDomBreakpoints),
+  title: i18nString(UIStrings.domBreakpoints),
   order: 7,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
 });
@@ -98,8 +165,8 @@ UI.ViewManager.registerViewExtension({
   },
   id: 'sources.globalListeners',
   location: UI.ViewManager.ViewLocationValues.SOURCES_SIDEBAR_BOTTOM,
-  commandPrompt: (): Platform.UIString.LocalizedString => ls`Show Global Listeners`,
-  title: (): Platform.UIString.LocalizedString => ls`Global Listeners`,
+  commandPrompt: i18nString(UIStrings.showGlobalListeners),
+  title: i18nString(UIStrings.globalListeners),
   order: 8,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   hasToolbar: true,
@@ -112,8 +179,8 @@ UI.ViewManager.registerViewExtension({
   },
   id: 'elements.domBreakpoints',
   location: UI.ViewManager.ViewLocationValues.ELEMENTS_SIDEBAR,
-  commandPrompt: (): Platform.UIString.LocalizedString => ls`Show DOM Breakpoints`,
-  title: (): Platform.UIString.LocalizedString => ls`DOM Breakpoints`,
+  commandPrompt: i18nString(UIStrings.showDomBreakpoints),
+  title: i18nString(UIStrings.domBreakpoints),
   order: 6,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
 });
@@ -122,8 +189,8 @@ UI.ViewManager.registerViewExtension({
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.NAVIGATOR_VIEW,
   id: 'navigator-network',
-  title: (): Platform.UIString.LocalizedString => ls`Page`,
-  commandPrompt: (): Platform.UIString.LocalizedString => ls`Show Page`,
+  title: i18nString(UIStrings.page),
+  commandPrompt: i18nString(UIStrings.showPage),
   order: 2,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   async loadView() {
@@ -135,8 +202,8 @@ UI.ViewManager.registerViewExtension({
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.NAVIGATOR_VIEW,
   id: 'navigator-overrides',
-  title: (): Platform.UIString.LocalizedString => ls`Overrides`,
-  commandPrompt: (): Platform.UIString.LocalizedString => ls`Show Overrides`,
+  title: i18nString(UIStrings.overrides),
+  commandPrompt: i18nString(UIStrings.showOverrides),
   order: 4,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   async loadView() {
@@ -148,8 +215,8 @@ UI.ViewManager.registerViewExtension({
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.NAVIGATOR_VIEW,
   id: 'navigator-contentScripts',
-  title: (): Platform.UIString.LocalizedString => ls`Content scripts`,
-  commandPrompt: (): Platform.UIString.LocalizedString => ls`Show Content scripts`,
+  title: i18nString(UIStrings.contentScripts),
+  commandPrompt: i18nString(UIStrings.showContentScripts),
   order: 5,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   async loadView() {

front_end/browser_debugger/browser_debugger_strings.grdp

@@ -1,87 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<grit-part>
-  <message name="IDS_DEVTOOLS_0d02e04134959bb67494bff03494b3c3" desc="Command for showing the 'DOM Breakpoints' tool in the Elements panel">
-    Show DOM Breakpoints
-  </message>
-  <message name="IDS_DEVTOOLS_1106d01848580ffc52dd36e2d60316d9" desc="Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool">
-    XHR/fetch Breakpoints
-  </message>
-  <message name="IDS_DEVTOOLS_2daf59f0ff992924e42c14c1e674bd6a" desc="Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel">
-    Attribute modified
-  </message>
-  <message name="IDS_DEVTOOLS_30d67fd6c32c9a9ff5ecb4472b44ed54" desc="Input element container text content in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel">
-    Break when URL contains:
-  </message>
-  <message name="IDS_DEVTOOLS_340641a167ad6da1bcb4016357f4695d" desc="Title for a type of source files">
-    Content scripts
-  </message>
-  <message name="IDS_DEVTOOLS_39c145d69ad05e44e74017346c116251" desc="A context menu item in the DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel">
-    Remove all DOM breakpoints
-  </message>
-  <message name="IDS_DEVTOOLS_3ea566249a507705d9a7ff4d3bd31440" desc="Screen reader description of a hit breakpoint in the Sources panel">
-    breakpoint hit
-  </message>
-  <message name="IDS_DEVTOOLS_534292fc712c811c7410d6da5970f2bc" desc="Command for showing the 'Gobal Listeners' tool in the sources panel">
-    Show Global Listeners
-  </message>
-  <message name="IDS_DEVTOOLS_57aab6f08efb5f158365bef707ea951d" desc="A context menu item in the DOM Breakpoints sidebar that reveals the node on which the current breakpoint is set.">
-    Reveal DOM node in Elements panel
-  </message>
-  <message name="IDS_DEVTOOLS_59eaf6955f44a94237b6d26911c1d983" desc="A context menu item in the DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel">
-    Break on
-  </message>
-  <message name="IDS_DEVTOOLS_5a6c09d307d092070a6cab8e49b99488" desc="Command for showing the 'Page' tab in the Sources panel">
-    Show Page
-  </message>
-  <message name="IDS_DEVTOOLS_626585724f35f9d9fce0bd36525cb7de" desc="Title of the Marker Decorator of Elements">
-    DOM Breakpoint
-  </message>
-  <message name="IDS_DEVTOOLS_66b74432bdc2797086f419010cc5ff86" desc="Title of the 'DOM Breakpoints' tool in the bottom sidebar of the Sources tool">
-    DOM Breakpoints
-  </message>
-  <message name="IDS_DEVTOOLS_692f478386247489be7f2a2927d8c307" desc="Title for showing the 'CSP Violation Breakpoints' tool in the Sources panel">
-    Show CSP Violation Breakpoints
-  </message>
-  <message name="IDS_DEVTOOLS_9f76c421048cb58ab03988d2ce1c813e" desc="Label for a button in the sources panel that refreshes the list of global event listeners.">
-    Refresh global listeners
-  </message>
-  <message name="IDS_DEVTOOLS_b70b90aced7bee98586bc1054f1c80b6" desc="Accessible label for XHR/fetch breakpoint text input">
-    <ph name="LOCKED_1">URL</ph> Breakpoint
-  </message>
-  <message name="IDS_DEVTOOLS_b839f802a330e4d4145cb182e6767f45" desc="Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel">
-    Any XHR or fetch
-  </message>
-  <message name="IDS_DEVTOOLS_c22470110316d6334bed53ae61a08f59" desc="Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel">
-    URL contains &quot;<ph name="URL">$1s<ex>example.com</ex></ph>&quot;
-  </message>
-  <message name="IDS_DEVTOOLS_c4bd9c57c6b315e3f7374cf77143ca58" desc="Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel">
-    Subtree modified
-  </message>
-  <message name="IDS_DEVTOOLS_cb8effb6eee92e704f07162c68010b50" desc="Command for showing the 'Content scripts' tool in the sources panel">
-    Show Content scripts
-  </message>
-  <message name="IDS_DEVTOOLS_d0321dd3a8e201e6d120c6a0da5ee9c4" desc="Command for showing the 'XHR/fetch Breakpoints' in the sources panel" >
-    Show XHR/fetch Breakpoints
-  </message>
-  <message name="IDS_DEVTOOLS_e30c4292775f68b2bc9eb3957a69f899" desc="Title of the 'Global Listeners' tool in the bottom sidebar of the Sources tool">
-    Global Listeners
-  </message>
-  <message name="IDS_DEVTOOLS_e4fc5497303105b60ef0b8c90be3fbd2" desc="Accessibility label for the DOM breakpoints list in the Sources panel">
-    DOM Breakpoints list
-  </message>
-  <message name="IDS_DEVTOOLS_e5cc0724ff43fa0e0ccfc0487b1aac68" desc="Title of the 'CSP Violation Breakpoints' tool in the bottom sidebar of the Sources tool">
-    CSP Violation Breakpoints
-  </message>
-  <message name="IDS_DEVTOOLS_ebdb33cde9015fa4b294220ee89cff00" desc="Title of the 'Event Listener Breakpoints' tool in the bottom sidebar of the Sources tool">
-    Event Listener Breakpoints
-  </message>
-  <message name="IDS_DEVTOOLS_f10fd68f78454eccf6d71f2ab62659a0" desc="Command for showing the 'Overrides' tool in the Sources panel">
-    Show Overrides
-  </message>
-  <message name="IDS_DEVTOOLS_f7b864eedd9a968c73e7b0f08fe1f62d" desc="Label for a button in the Sources panel that opens the input field to create a new XHR/fetch breakpoint.">
-    Add XHR/fetch breakpoint
-  </message>
-  <message name="IDS_DEVTOOLS_f80938ab8ce27f3427af09c97a718fff" desc="Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel">
-    Node removed
-  </message>
-</grit-part>

front_end/browser_debugger/module.json

@@ -42,7 +42,8 @@
   "dependencies": [
     "elements",
     "sources",
-    "console"
+    "console",
+    "i18n"
   ],
   "modules": [
     "browser_debugger-legacy.js"

front_end/elements/elements_strings.grdp

@@ -36,6 +36,9 @@
   <message name="IDS_DEVTOOLS_2ddaa8e6378b906b42429dc4003edbd3" desc="A context menu item to reveal a node in the DOM tree of the Elements Panel">
     Reveal in Elements panel
   </message>
+  <message name="IDS_DEVTOOLS_3f08ab5159cf45a5c7472053c971eb28" desc="Command for showing the 'Elements' tool">
+    Show Elements
+  </message>
   <message name="IDS_DEVTOOLS_3f8f88e3686b2345cecc9530e19e6172" desc="A context menu item to store a value as a global variable the Elements Panel">
     Store as global variable
   </message>

front_end/emulation/emulation_strings.grdp

@@ -12,6 +12,9 @@
   <message name="IDS_DEVTOOLS_0c78cd3aa4c94a64675bc6aa77802843" desc="Text in Sensors View of the Device Toolbar">
     Device-based
   </message>
+  <message name="IDS_DEVTOOLS_0ca08f8f4a8a19f7f1ae87c119494327" desc="Title as part of a tool to override existing configurations">
+    Overrides
+  </message>
   <message name="IDS_DEVTOOLS_0e1275697d4c40b4b0640fbfa3907afa" desc="A tag of Sensors tool that can be searched in the command menu">
     accelerometer
   </message>

front_end/i18n/locales/en-US.json

@@ -467,6 +467,138 @@
   "animation/AnimationUI.ts | sSlider": {
     "message": "{PH1} slider"
   },
+  "browser_debugger/browser_debugger-meta.ts | contentScripts": {
+    "message": "Content scripts"
+  },
+  "browser_debugger/browser_debugger-meta.ts | cspViolationBreakpoints": {
+    "message": "CSP Violation Breakpoints"
+  },
+  "browser_debugger/browser_debugger-meta.ts | domBreakpoints": {
+    "message": "DOM Breakpoints"
+  },
+  "browser_debugger/browser_debugger-meta.ts | eventListenerBreakpoints": {
+    "message": "Event Listener Breakpoints"
+  },
+  "browser_debugger/browser_debugger-meta.ts | globalListeners": {
+    "message": "Global Listeners"
+  },
+  "browser_debugger/browser_debugger-meta.ts | overrides": {
+    "message": "Overrides"
+  },
+  "browser_debugger/browser_debugger-meta.ts | page": {
+    "message": "Page"
+  },
+  "browser_debugger/browser_debugger-meta.ts | showContentScripts": {
+    "message": "Show Content scripts"
+  },
+  "browser_debugger/browser_debugger-meta.ts | showCspViolationBreakpoints": {
+    "message": "Show CSP Violation Breakpoints"
+  },
+  "browser_debugger/browser_debugger-meta.ts | showDomBreakpoints": {
+    "message": "Show DOM Breakpoints"
+  },
+  "browser_debugger/browser_debugger-meta.ts | showElements": {
+    "message": "Show Elements"
+  },
+  "browser_debugger/browser_debugger-meta.ts | showGlobalListeners": {
+    "message": "Show Global Listeners"
+  },
+  "browser_debugger/browser_debugger-meta.ts | showOverrides": {
+    "message": "Show Overrides"
+  },
+  "browser_debugger/browser_debugger-meta.ts | showPage": {
+    "message": "Show Page"
+  },
+  "browser_debugger/browser_debugger-meta.ts | showXhrfetchBreakpoints": {
+    "message": "Show XHR/fetch Breakpoints"
+  },
+  "browser_debugger/browser_debugger-meta.ts | xhrfetchBreakpoints": {
+    "message": "XHR/fetch Breakpoints"
+  },
+  "browser_debugger/CategorizedBreakpointsSidebarPane.js | breakpointHit": {
+    "message": "breakpoint hit"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | attributeModified": {
+    "message": "Attribute modified"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | breakOn": {
+    "message": "Break on"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | breakpointHit": {
+    "message": "breakpoint hit"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | checked": {
+    "message": "checked"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | domBreakpointsList": {
+    "message": "DOM Breakpoints list"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | noBreakpoints": {
+    "message": "No breakpoints"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | nodeRemoved": {
+    "message": "Node removed"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | removeAllDomBreakpoints": {
+    "message": "Remove all DOM breakpoints"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | removeBreakpoint": {
+    "message": "Remove breakpoint"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | revealDomNodeInElementsPanel": {
+    "message": "Reveal DOM node in Elements panel"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | sBreakpointHit": {
+    "message": "{PH1} breakpoint hit"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | sS": {
+    "message": "{PH1}: {PH2}"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | subtreeModified": {
+    "message": "Subtree modified"
+  },
+  "browser_debugger/DOMBreakpointsSidebarPane.js | unchecked": {
+    "message": "unchecked"
+  },
+  "browser_debugger/ModuleUIStrings.js | domBreakpoint": {
+    "message": "DOM Breakpoint"
+  },
+  "browser_debugger/ObjectEventListenersSidebarPane.js | refreshGlobalListeners": {
+    "message": "Refresh global listeners"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | addBreakpoint": {
+    "message": "Add breakpoint"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | addXhrfetchBreakpoint": {
+    "message": "Add XHR/fetch breakpoint"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | anyXhrOrFetch": {
+    "message": "Any XHR or fetch"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | breakpointHit": {
+    "message": "breakpoint hit"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | breakWhenUrlContains": {
+    "message": "Break when URL contains:"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | noBreakpoints": {
+    "message": "No breakpoints"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | removeAllBreakpoints": {
+    "message": "Remove all breakpoints"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | removeBreakpoint": {
+    "message": "Remove breakpoint"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | urlBreakpoint": {
+    "message": "URL Breakpoint"
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | urlContainsS": {
+    "message": "URL contains \"{PH1}\""
+  },
+  "browser_debugger/XHRBreakpointsSidebarPane.js | xhrfetchBreakpoints": {
+    "message": "XHR/fetch Breakpoints"
+  },
   "browser_sdk/browser_sdk-meta.ts | clear": {
     "message": "clear"
   },

front_end/langpacks/devtools_ui_strings.grd

@@ -12,7 +12,6 @@
   <release seq="1" allow_pseudo="false">
     <messages fallback_to_english="true">
       <part file="../bindings/bindings_strings.grdp" />
-      <part file="../browser_debugger/browser_debugger_strings.grdp" />
       <part file="../common/common_strings.grdp" />
       <part file="../console/console_strings.grdp" />
       <part file="../data_grid/data_grid_strings.grdp" />

front_end/langpacks/shared_strings.grdp

@@ -22,9 +22,6 @@
   <message name="IDS_DEVTOOLS_0be7b7d0111a248185e7b1bebaf8595b" desc="Text to enable blocking of network requests">
     Enable network request blocking
   </message>
-  <message name="IDS_DEVTOOLS_0ca08f8f4a8a19f7f1ae87c119494327" desc="Title as part of a tool to override existing configurations">
-    Overrides
-  </message>
   <message name="IDS_DEVTOOLS_0eaadb4fcb48a0a0ed7bc9868be9fbaa" desc="Text to indicate an item is a warning">
     Warning
   </message>
@@ -49,9 +46,6 @@
   <message name="IDS_DEVTOOLS_17145319aba079a26c6d3bb2b1d58894" desc="Text in Request Timing View of the Network panel">
     <ph name="LOCKED_TERM">Service Worker</ph>
   </message>
-  <message name="IDS_DEVTOOLS_193cfc9be3b995831c6af2fea6650e60" desc="Text that refers to one or a group of webpages">
-    Page
-  </message>
   <message name="IDS_DEVTOOLS_1b1ac1c7a54457ce73ddd25a5b51c47d" desc="A title of the 'Drawer sidebar' @UI.ViewLocationResolver category">
     Drawer sidebar
   </message>
@@ -98,15 +92,9 @@
     Frame
   </message>
 
-  <message name="IDS_DEVTOOLS_3f08ab5159cf45a5c7472053c971eb28" desc="Command for showing the 'Elements' tool">
-    Show Elements
-  </message>
   <message name="IDS_DEVTOOLS_4789f23283b3a61f858b641a1bef19a3" desc="Text for the memory of the page">
     Memory
   </message>
-  <message name="IDS_DEVTOOLS_47bda3033cb8fe0e76c45c293db011b5" desc="Text to indicate there are no breakpoints">
-    No breakpoints
-  </message>
   <message name="IDS_DEVTOOLS_49ee3087348e8d44e1feda1917443987" desc="Text for the name of something">
     Name
   </message>
@@ -173,9 +161,6 @@
   <message name="IDS_DEVTOOLS_6adf97f83acf6453d4a6a4b1070f3754" desc="Text to show there is nothing">
     None
   </message>
-  <message name="IDS_DEVTOOLS_6ba3a9ac3e0d57683c56299484b7ee3b" desc="Text to remove all breakpoints">
-    Remove all breakpoints
-  </message>
   <message name="IDS_DEVTOOLS_6f6cb72d544962fa333e2e34ce64f719" desc="Text for the size of something">
     Size
   </message>
@@ -191,9 +176,6 @@
   <message name="IDS_DEVTOOLS_76c3e002d3c052bd6a909366a8dc3845" desc="Text that appears on a button for the manifest resource type filter.">
     Manifest
   </message>
-  <message name="IDS_DEVTOOLS_7d341c08fd102f0b86285b5ff2e26ea7" desc="Text with two placeholders separated by a colon">
-    <ph name="BREAKPOINT_TYPE_LABEL">$1s<ex>Node removed</ex></ph>: <ph name="LINKIFIED_CONTENT">$2s<ex>div#id1</ex></ph>
-  </message>
   <message name="IDS_DEVTOOLS_8166a4b3fb4979da3a24ed21ced7fdf7" desc="Text for an option to learn more about something">
     Learn more
   </message>
@@ -218,9 +200,6 @@
   <message name="IDS_DEVTOOLS_8d9da4bc0e49a50e09ac9f7e56789d39" desc="Text to indicate the network connectivity is offline">
     Offline
   </message>
-  <message name="IDS_DEVTOOLS_8fc1dde0c79d8adcaf674b3d679d3596" desc="Accessibility label for hit breakpoints in the Sources panel.">
-    <ph name="CHECKEDSTATETEXT">$1s<ex>checked</ex></ph> breakpoint hit
-  </message>
   <message name="IDS_DEVTOOLS_902b0d55fddef6f8d651fe1035b7d4bd" desc="Text for errors">
     Error
   </message>
@@ -287,9 +266,6 @@
   <message name="IDS_DEVTOOLS_b1c94ca2fbc3e78fc30069c8d0f01680" desc="Text for everything">
     All
   </message>
-  <message name="IDS_DEVTOOLS_b4e79b551a1ceae24b7de243ab1fd27c" desc="Text to add a breakpoint">
-    Add breakpoint
-  </message>
   <message name="IDS_DEVTOOLS_b5a7adde1af5c87d7fd797b6245c2a39" desc="Text for the description of something">
     Description
   </message>
@@ -341,9 +317,6 @@
   <message name="IDS_DEVTOOLS_d59048f21fd887ad520398ce677be586" desc="Text that is usually a hyperlink to more documentation">
     Learn more
   </message>
-  <message name="IDS_DEVTOOLS_d5bfaaca8e28f8b9b9211038f86a4494" desc="Text to remove a breakpoint">
-    Remove breakpoint
-  </message>
   <message name="IDS_DEVTOOLS_d64ed3e9c10229648e069f56e32f4c8e" desc="Text for a network response">
     Response
   </message>

front_end/sources/sources_strings.grdp

@@ -183,6 +183,9 @@
   <message name="IDS_DEVTOOLS_46e8256224399a2d32a2f988a21d6562" desc="Text in Sources Navigator of the Sources panel">
     Select folder for overrides
   </message>
+  <message name="IDS_DEVTOOLS_47bda3033cb8fe0e76c45c293db011b5" desc="Text to indicate there are no breakpoints">
+    No breakpoints
+  </message>
   <message name="IDS_DEVTOOLS_47dbdb85aee276cd77a84a067af48aa5" desc="Title of a setting under the Sources category that can be invoked through the Command Menu">
     Enable tab moves focus
   </message>
@@ -291,6 +294,9 @@
   <message name="IDS_DEVTOOLS_69a309503a6b6e3265981a5db92c82ac" desc="Text in Debugger Paused Message of the Sources panel">
     Paused on promise rejection
   </message>
+  <message name="IDS_DEVTOOLS_6ba3a9ac3e0d57683c56299484b7ee3b" desc="Text to remove all breakpoints">
+    Remove all breakpoints
+  </message>
   <message name="IDS_DEVTOOLS_6bb8aa3b54918eeb27dafcace1e5addd" desc="Text in Navigator View of the Sources panel">
     (no domain)
   </message>
@@ -399,6 +405,9 @@
   <message name="IDS_DEVTOOLS_8b86092355ebf3d7d9ab48cbfb406747" desc="Error message that shows up in the console if a buffer to be opened in the lienar memory inspector cannot be found.">
     Could not open linear memory inspector: failed locating buffer.
   </message>
+  <message name="IDS_DEVTOOLS_8fc1dde0c79d8adcaf674b3d679d3596" desc="Accessibility label for hit breakpoints in the Sources panel.">
+    <ph name="CHECKEDSTATETEXT">$1s<ex>checked</ex></ph> breakpoint hit
+  </message>
   <message name="IDS_DEVTOOLS_904a8304056d77e4547744781b7ceb50" desc="Title of a sources panel action that renames a file">
     Rename
   </message>
@@ -513,6 +522,9 @@
   <message name="IDS_DEVTOOLS_b402b605feaea6029ac976f4963e20cd" desc="Text in Tabbed Editor Container of the Sources panel">
     Are you sure you want to close unsaved file: <ph name="UISOURCECODE_NAME__">$1s<ex>example.file</ex></ph>?
   </message>
+  <message name="IDS_DEVTOOLS_b4e79b551a1ceae24b7de243ab1fd27c" desc="Text to add a breakpoint">
+    Add breakpoint
+  </message>
   <message name="IDS_DEVTOOLS_b526d5bfa95ab0d53b118425336d52a3" desc="Text in Navigator View of the Sources panel">
     Are you sure you want to remove this folder?
   </message>
@@ -570,6 +582,9 @@
   <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_d5bfaaca8e28f8b9b9211038f86a4494" desc="Text to remove a breakpoint">
+    Remove breakpoint
+  </message>
   <message name="IDS_DEVTOOLS_d73bf4cc90c1cf3da05515764aa97722" desc="Command for showing the 'Watch' tool">
     Show Watch
   </message>

front_end/timeline/timeline_strings.grdp

@@ -124,6 +124,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_18fe96f0c47fa8c62afe3be31d97b880" desc="Text in Timeline UIUtils of the Performance panel">
     Finish Loading
   </message>
+  <message name="IDS_DEVTOOLS_193cfc9be3b995831c6af2fea6650e60" desc="Text that refers to one or a group of webpages">
+    Page
+  </message>
   <message name="IDS_DEVTOOLS_1b01d1ef7772f8e0c0e0427e4faad653" desc="Text in Counters Graph of the Performance panel">
     Listeners: <ph name="NUMBER_OF_LISTENERS">$1s<ex>17</ex></ph>
   </message>
@@ -595,6 +598,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_7c880e07f865ea4661fc6317f9b9de60" desc="Title of an action that opens the previous recording in the performance panel">
     Previous recording
   </message>
+  <message name="IDS_DEVTOOLS_7d341c08fd102f0b86285b5ff2e26ea7" desc="Text with two placeholders separated by a colon">
+    <ph name="BREAKPOINT_TYPE_LABEL">$1s<ex>Node removed</ex></ph>: <ph name="LINKIFIED_CONTENT">$2s<ex>div#id1</ex></ph>
+  </message>
   <message name="IDS_DEVTOOLS_80a4b8755d836d50c19e6eefb976bc2e" desc="Text in Timeline UIUtils of the Performance panel">
     <ph name="SELFCATEGORY_TITLE">$1s<ex>blink.console</ex></ph> (self)
   </message>

scripts/localization/utils/check_localized_strings.js

@@ -109,6 +109,7 @@ let devtoolsFrontendDirs;
 const migratedDirsSet = new Set([
   'accessibility',
   'animation',
+  'browser_debugger',
   'browser_sdk',
   'changes',
   'color_picker',