chrome-devtools-frontend 1.0.1534717 → 1.0.1536371

package/front_end/panels/security/CookieControlsView.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/components/switch/switch.js';
 import '../../ui/components/cards/cards.js';
@@ -14,15 +13,15 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as ChromeLink from '../../ui/components/chrome_link/chrome_link.js';
 import * as Input from '../../ui/components/input/input.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Lit from '../../ui/lit/lit.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import cookieControlsViewStyles from './cookieControlsView.css.js';
 
-const {render, html} = Lit;
+const {ref} = Directives;
 
 const UIStrings = {
   /**
@@ -115,55 +114,53 @@ const UIStrings = {
 
 const str_ = i18n.i18n.registerUIStrings('panels/security/CookieControlsView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
+export const i18nFormatString = uiI18n.getFormatLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {
+  thirdPartyControlsDict: Root.Runtime.HostConfig['thirdPartyCookieControls'];
+  isGracePeriodActive: boolean;
   inputChanged: (newValue: boolean, setting: Common.Settings.Setting<boolean>) => void;
   openChromeCookieSettings: () => void;
 }
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
-export function showInfobar(): void {
-  UI.InspectorView.InspectorView.instance().displayDebuggedTabReloadRequiredWarning(
-      i18nString(UIStrings.siteReloadMessage));
+function getChromeFlagsLink(flag: string): TemplateResult {
+  return html`
+    <devtools-chrome-link href="chrome://flags/#${flag}" tabindex="0">
+     ${flag}
+    </devtools-chrome-link>`;
 }
+const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLElement): void => {
+  // createSetting() allows us to initialize the settings with the UI binding values the first
+  // time that the browser starts, and use the existing setting value for all subsequent uses.
+  const enterpriseEnabledSetting = Common.Settings.Settings.instance().createSetting(
+      'enterprise-enabled',
+      input.thirdPartyControlsDict && input.thirdPartyControlsDict.managedBlockThirdPartyCookies &&
+              typeof input.thirdPartyControlsDict.managedBlockThirdPartyCookies === 'boolean' ?
+          input.thirdPartyControlsDict.managedBlockThirdPartyCookies :
+          false,
+      Common.Settings.SettingStorageType.GLOBAL);
+  const toggleEnabledSetting = Common.Settings.Settings.instance().createSetting(
+      'cookie-control-override-enabled',
+      input.thirdPartyControlsDict?.thirdPartyCookieRestrictionEnabled ?
+          input.thirdPartyControlsDict.thirdPartyCookieRestrictionEnabled :
+          false,
+      Common.Settings.SettingStorageType.GLOBAL);
+  const gracePeriodDisabledSetting = Common.Settings.Settings.instance().createSetting(
+      'grace-period-mitigation-disabled',
+      input.thirdPartyControlsDict?.thirdPartyCookieMetadataEnabled ?
+          input.thirdPartyControlsDict.thirdPartyCookieMetadataEnabled :
+          true,
+      Common.Settings.SettingStorageType.GLOBAL);
+  const heuristicsDisabledSetting = Common.Settings.Settings.instance().createSetting(
+      'heuristic-mitigation-disabled',
+      input.thirdPartyControlsDict?.thirdPartyCookieHeuristicsEnabled ?
+          input.thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled :
+          true,
+      Common.Settings.SettingStorageType.GLOBAL);
 
-export class CookieControlsView extends UI.Widget.VBox {
-  #view: View;
-  #isGracePeriodActive: boolean;
-  #thirdPartyControlsDict: Root.Runtime.HostConfig['thirdPartyCookieControls'];
-
-  constructor(element?: HTMLElement, view: View = (input, _, target) => {
-    // createSetting() allows us to initialize the settings with the UI binding values the first
-    // time that the browser starts, and use the existing setting value for all subsequent uses.
-    const enterpriseEnabledSetting = Common.Settings.Settings.instance().createSetting(
-        'enterprise-enabled',
-        this.#thirdPartyControlsDict && this.#thirdPartyControlsDict.managedBlockThirdPartyCookies &&
-                typeof this.#thirdPartyControlsDict.managedBlockThirdPartyCookies === 'boolean' ?
-            this.#thirdPartyControlsDict.managedBlockThirdPartyCookies :
-            false,
-        Common.Settings.SettingStorageType.GLOBAL);
-    const toggleEnabledSetting = Common.Settings.Settings.instance().createSetting(
-        'cookie-control-override-enabled',
-        this.#thirdPartyControlsDict && this.#thirdPartyControlsDict.thirdPartyCookieRestrictionEnabled ?
-            this.#thirdPartyControlsDict.thirdPartyCookieRestrictionEnabled :
-            false,
-        Common.Settings.SettingStorageType.GLOBAL);
-    const gracePeriodDisabledSetting = Common.Settings.Settings.instance().createSetting(
-        'grace-period-mitigation-disabled',
-        this.#thirdPartyControlsDict && this.#thirdPartyControlsDict.thirdPartyCookieMetadataEnabled ?
-            this.#thirdPartyControlsDict.thirdPartyCookieMetadataEnabled :
-            true,
-        Common.Settings.SettingStorageType.GLOBAL);
-    const heuristicsDisabledSetting = Common.Settings.Settings.instance().createSetting(
-        'heuristic-mitigation-disabled',
-        this.#thirdPartyControlsDict && this.#thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled ?
-            this.#thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled :
-            true,
-        Common.Settings.SettingStorageType.GLOBAL);
-
-    // clang-format off
+  // clang-format off
     const cardHeader = html `
       <div class="card-header">
         <div class="lhs">
@@ -175,11 +172,11 @@ export class CookieControlsView extends UI.Widget.VBox {
             <devtools-icon
               tabindex="0"
               name="domain"
-              ${Lit.Directives.ref((el: Element|undefined) => {
+              ${ref((el: Element|undefined) => {
                 UI.Tooltip.Tooltip.install(el as HTMLElement, i18nString(UIStrings.enterpriseTooltip));
                 (el as HTMLElement).role = 'img';
               })}>
-            </devtools-icon>` : Lit.nothing
+            </devtools-icon>` : nothing
           }
         </div>
         <div>
@@ -197,8 +194,8 @@ export class CookieControlsView extends UI.Widget.VBox {
     `;
 
     const gracePeriodControlDisabled =
-        (this.#thirdPartyControlsDict ? (!this.#thirdPartyControlsDict.thirdPartyCookieMetadataEnabled) : false) ||
-        enterpriseEnabledSetting.get() || !toggleEnabledSetting.get() || !this.#isGracePeriodActive;
+        (input.thirdPartyControlsDict ? (!input.thirdPartyControlsDict.thirdPartyCookieMetadataEnabled) : false) ||
+        enterpriseEnabledSetting.get() || !toggleEnabledSetting.get() || !input.isGracePeriodActive;
     const gracePeriodControl = html`
       <div class="card-row">
         <label class='checkbox-label'>
@@ -215,11 +212,11 @@ export class CookieControlsView extends UI.Widget.VBox {
                   i18nFormatString(UIStrings.gracePeriodExplanation, {
                     PH1: i18nString(UIStrings.gracePeriod),
                   }) :
-                (this.#thirdPartyControlsDict ? !this.#thirdPartyControlsDict?.thirdPartyCookieMetadataEnabled: false) ?
+                (input.thirdPartyControlsDict ? !input.thirdPartyControlsDict?.thirdPartyCookieMetadataEnabled: false) ?
                   i18nFormatString(UIStrings.enableFlag, {
-                    PH1: this.getChromeFlagsLink(UIStrings.tpcdMetadataGrants),
+                    PH1: getChromeFlagsLink(UIStrings.tpcdMetadataGrants),
                   }) :
-                i18nFormatString(this.#isGracePeriodActive ? UIStrings.gracePeriodExplanation : UIStrings.enrollGracePeriod, {
+                i18nFormatString(input.isGracePeriodActive ? UIStrings.gracePeriodExplanation : UIStrings.enrollGracePeriod, {
                   PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/grace-period" jslog=${VisualLogging.link('grace-period-link').track({click: true})}>${i18nString(UIStrings.gracePeriod)}</x-link>`,
                 })
               }
@@ -230,7 +227,7 @@ export class CookieControlsView extends UI.Widget.VBox {
     `;
 
     const heuristicsControlDisabled =
-        (this.#thirdPartyControlsDict ? (!this.#thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled) : false) ||
+        (input.thirdPartyControlsDict ? (!input.thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled) : false) ||
         enterpriseEnabledSetting.get() || !toggleEnabledSetting.get();
     const heuristicControl = html`
       <div class="card-row">
@@ -248,9 +245,9 @@ export class CookieControlsView extends UI.Widget.VBox {
                 i18nFormatString(UIStrings.heuristicExplanation, {
                   PH1: i18nString(UIStrings.scenarios),
                 }) :
-                (this.#thirdPartyControlsDict ? !this.#thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled: false) ?
+                (input.thirdPartyControlsDict ? !input.thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled: false) ?
                   i18nFormatString(UIStrings.enableFlag, {
-                    PH1: this.getChromeFlagsLink(UIStrings.tpcdHeuristicsGrants),
+                    PH1: getChromeFlagsLink(UIStrings.tpcdHeuristicsGrants),
                   }) :
                 i18nFormatString(UIStrings.heuristicExplanation, {
                   PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/heuristics-based-exceptions" jslog=${VisualLogging.link('heuristic-link').track({click: true})}>${i18nString(UIStrings.scenarios)}</x-link>`,
@@ -300,12 +297,24 @@ export class CookieControlsView extends UI.Widget.VBox {
               </div>
             </div>
           </devtools-card>
-          ${Boolean(enterpriseEnabledSetting.get()) ? enterpriseDisclaimer : Lit.nothing}
+          ${Boolean(enterpriseEnabledSetting.get()) ? enterpriseDisclaimer : nothing}
         </div>
       </div>
-    `, target, {host: this});
-    // clang-format on
-  }) {
+    `, target);
+  // clang-format on
+};
+
+export function showInfobar(): void {
+  UI.InspectorView.InspectorView.instance().displayDebuggedTabReloadRequiredWarning(
+      i18nString(UIStrings.siteReloadMessage));
+}
+
+export class CookieControlsView extends UI.Widget.VBox {
+  #view: View;
+  #isGracePeriodActive: boolean;
+  #thirdPartyControlsDict: Root.Runtime.HostConfig['thirdPartyCookieControls'];
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
     this.#isGracePeriodActive = false;
@@ -327,7 +336,14 @@ export class CookieControlsView extends UI.Widget.VBox {
   }
 
   override performUpdate(): void {
-    this.#view(this, this, this.contentElement);
+    this.#view(
+        {
+          thirdPartyControlsDict: this.#thirdPartyControlsDict,
+          isGracePeriodActive: this.#isGracePeriodActive,
+          inputChanged: this.inputChanged.bind(this),
+          openChromeCookieSettings: this.openChromeCookieSettings.bind(this),
+        },
+        this, this.contentElement);
   }
 
   inputChanged(newValue: boolean, setting: Common.Settings.Setting<boolean>): void {
@@ -390,13 +406,4 @@ export class CookieControlsView extends UI.Widget.VBox {
       this.requestUpdate();
     }
   }
-
-  getChromeFlagsLink(flag: string): Element {
-    const link = new ChromeLink.ChromeLink.ChromeLink();
-    link.textContent = flag;
-    link.href = ('chrome://flags/' + flag) as Platform.DevToolsPath.UrlString;
-    link.setAttribute('tabindex', '0');
-
-    return link;
-  }
 }

package/front_end/panels/security/CookieReportView.ts

@@ -12,6 +12,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -196,17 +197,8 @@ export interface CookieReportNodeData {
 }
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
-
-export class CookieReportView extends UI.Widget.VBox {
-  #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
-  namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
-  #cookieRows = new Map<string, IssuesManager.CookieIssue.CookieReportInfo>();
-  #view: View;
-  filterItems: UI.FilterBar.Item[] = [];
-  searchText: string;
-
-  constructor(element?: HTMLElement, view: View = (input, output, target) => {
-    // clang-format off
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
     render(html `
         <div class="report overflow-auto">
             <div class="header">
@@ -283,9 +275,19 @@ export class CookieReportView extends UI.Widget.VBox {
             }
 
         </div>
-    `, target, {host: this});
-    // clang-format on
-  }) {
+    `, target);
+  // clang-format on
+};
+
+export class CookieReportView extends UI.Widget.VBox {
+  #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
+  namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
+  #cookieRows = new Map<string, IssuesManager.CookieIssue.CookieReportInfo>();
+  #view: View;
+  filterItems: UI.FilterBar.Item[] = [];
+  searchText: string;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(cookieReportViewStyles);
@@ -447,7 +449,7 @@ export class CookieReportView extends UI.Widget.VBox {
                 'https://github.com/privacysandbox/privacy-sandbox-dev-support/blob/main/3pc-migration-readiness.md',
             i18nString(UIStrings.guidance), undefined, undefined, 'readiness-list-link');
 
-        return html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.gitHubResource, {
+        return html`${uiI18n.getFormatLocalizedString(str_, UIStrings.gitHubResource, {
           PH1: githubLink,
         })}`;
       }
@@ -460,7 +462,7 @@ export class CookieReportView extends UI.Widget.VBox {
                 (domain.charAt(0) === '.' ? domain.substring(1) : domain),
             i18nString(UIStrings.reportedIssues), undefined, undefined, 'compatibility-lookup-link');
 
-        return html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.gracePeriod, {
+        return html`${uiI18n.getFormatLocalizedString(str_, UIStrings.gracePeriod, {
           PH1: gracePeriodLink,
         })}`;
       }

package/front_end/panels/security/IPProtectionView.ts

@@ -1,7 +1,6 @@
 // Copyright 2025 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/components/switch/switch.js';
 import '../../ui/components/cards/cards.js';
@@ -136,7 +135,7 @@ export interface ViewInput {
 }
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW: View = (input, _, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   const {status} = input;
   const statusText = status ? i18nString(UIStrings[status]) : i18nString(UIStrings.statusUnknown);
 

package/front_end/panels/security/SecurityPanel.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -549,6 +548,24 @@ export interface ViewOutput {
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
+const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <devtools-split-view direction="column" name="security"
+      ${UI.Widget.widgetRef(UI.SplitWidget.SplitWidget, e => {output.splitWidget = e;})}>
+      <devtools-widget
+        slot="sidebar"
+        .widgetConfig=${widgetConfig(SecurityPanelSidebar)}
+        @showIPProtection=${() => output.setVisibleView(new IPProtectionView())}
+        @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
+        @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
+        ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
+      </devtools-widget>
+  </devtools-split-view>`,
+    target);
+  // clang-format on
+};
+
 export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.SDKModelObserver<SecurityModel> {
   readonly mainView: SecurityMainView;
   readonly sidebar!: SecurityPanelSidebar;
@@ -560,24 +577,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   private securityModel: SecurityModel|null;
   readonly splitWidget!: UI.SplitWidget.SplitWidget;
 
-  constructor(private view: View = (_input, output, target) => {
-    // clang-format off
-    render(
-      html`
-    <devtools-split-view direction="column" name="security"
-      ${UI.Widget.widgetRef(UI.SplitWidget.SplitWidget, e => {output.splitWidget = e;})}>
-        <devtools-widget
-          slot="sidebar"
-          .widgetConfig=${widgetConfig(SecurityPanelSidebar)}
-          @showIPProtection=${() => output.setVisibleView(new IPProtectionView())}
-          @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
-          @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
-          ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
-        </devtools-widget>
-    </devtools-split-view>`,
-      target, {host: this});
-    // clang-format on
-  }) {
+  constructor(private view: View = DEFAULT_VIEW) {
     super('security');
 
     this.update();

package/front_end/panels/settings/AISettingsTab.ts

@@ -13,6 +13,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Switch from '../../ui/components/switch/switch.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -515,7 +516,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       },
       {
         icon: 'policy',
-        text: html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.termsOfServicePrivacyNotice, {
+        text: html`${uiI18n.getFormatLocalizedString(str_, UIStrings.termsOfServicePrivacyNotice, {
           PH1: tosLink,
           PH2: privacyNoticeLink,
         })}`,

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -42,6 +42,11 @@ const UIStrings = {
    * @description Link text in the settings pane to add another shortcut for an action
    */
   addAShortcut: 'Add a shortcut',
+  /**
+   * @description Placeholder text in the settings pane when adding a new shortcut.
+   * Explaining that key strokes are going to be recoded.
+   */
+  recordingKeys: 'Recoding keys',
   /**
    * @description Label for a button in the settings pane that confirms changes to a keyboard shortcut
    */
@@ -446,6 +451,7 @@ export class ShortcutListItem {
     if (this.isEditing) {
       const shortcutInput = shortcutElement.createChild('input', 'harmony-input');
       shortcutInput.setAttribute('jslog', `${VisualLogging.textField().track({change: true})}`);
+      shortcutInput.setAttribute('placeholder', i18nString(UIStrings.recordingKeys));
       shortcutInput.spellcheck = false;
       shortcutInput.maxLength = 0;
       this.shortcutInputs.set(shortcut, shortcutInput);

package/front_end/panels/settings/components/SyncSection.ts

@@ -16,6 +16,7 @@ import * as Badges from '../../../models/badges/badges.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as SettingsComponents from '../../../ui/components/settings/settings.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as PanelCommon from '../../common/common.js';
@@ -112,7 +113,7 @@ function renderDataDisclaimer(): HTMLElement {
 
   const container = document.createElement('span');
   Lit.render(relevantDataTooltipTemplate, container);
-  cachedTooltipElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.dataDisclaimer, {
+  cachedTooltipElement = uiI18n.getFormatLocalizedString(str_, UIStrings.dataDisclaimer, {
     PH1: container,
   });
   return cachedTooltipElement;

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -11,6 +11,7 @@ import * as Protocol from '../../generated/protocol.js';
 import type * as Bindings from '../../models/bindings/bindings.js';
 import type * as BreakpointManager from '../../models/breakpoints/breakpoints.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -175,12 +176,12 @@ export class DebuggerPausedMessage {
       let messageElement;
       if (data.insertion) {
         if (data.targetNode === data.node) {
-          messageElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.childSAdded, {PH1: targetNodeLink});
+          messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.childSAdded, {PH1: targetNodeLink});
         } else {
-          messageElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.descendantSAdded, {PH1: targetNodeLink});
+          messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.descendantSAdded, {PH1: targetNodeLink});
         }
       } else {
-        messageElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.descendantSRemoved, {PH1: targetNodeLink});
+        messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.descendantSRemoved, {PH1: targetNodeLink});
       }
       subElement.appendChild(document.createElement('br'));
       subElement.appendChild(messageElement);

package/front_end/panels/sources/ResourceOriginPlugin.ts

@@ -6,6 +6,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -62,14 +63,14 @@ export class ResourceOriginPlugin extends Plugin {
         }
         element.append(link);
       });
-      return [new UI.Toolbar.ToolbarItem(i18n.i18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: element}))];
+      return [new UI.Toolbar.ToolbarItem(uiI18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: element}))];
     }
 
     // Handle anonymous scripts with an originStackTrace.
     for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(this.uiSourceCode)) {
       if (script.originStackTrace?.callFrames.length) {
         const link = linkifier.linkifyStackTraceTopFrame(script.debuggerModel.target(), script.originStackTrace);
-        return [new UI.Toolbar.ToolbarItem(i18n.i18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: link}))];
+        return [new UI.Toolbar.ToolbarItem(uiI18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: link}))];
       }
     }
 

package/front_end/panels/sources/SourcesNavigator.ts

@@ -15,6 +15,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
 
@@ -190,7 +191,7 @@ export class FilesNavigatorView extends NavigatorView {
     const link =
         UI.XLink.XLink.create('https://goo.gle/devtools-automatic-workspace-folders', 'com.chrome.devtools.json');
     this.#automaticFileSystemNudge =
-        i18n.i18n.getFormatLocalizedString(str_, UIStrings.automaticWorkspaceNudge, {PH1: link});
+        uiI18n.getFormatLocalizedString(str_, UIStrings.automaticWorkspaceNudge, {PH1: link});
     this.#automaticFileSystemNudge.classList.add('automatic-file-system-nudge');
     this.contentElement.insertBefore(this.#automaticFileSystemNudge, this.contentElement.firstChild);
 

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -12,6 +12,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -633,11 +634,11 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
             await UI.ViewManager.ViewManager.instance().showView('navigator-files');
             await automaticFileSystemManager.connectAutomaticFileSystem(/* addIfMissing= */ true);
           });
-          tooltip.append(i18n.i18n.getFormatLocalizedString(
+          tooltip.append(uiI18n.getFormatLocalizedString(
               str_, UIStrings.changesWereNotSavedToFileSystemToSaveAddFolderToWorkspace, {PH1: link}));
         } else {
           const link = UI.XLink.XLink.create('https://developer.chrome.com/docs/devtools/workspaces/', 'Workspace');
-          tooltip.append(i18n.i18n.getFormatLocalizedString(
+          tooltip.append(uiI18n.getFormatLocalizedString(
               str_, UIStrings.changesWereNotSavedToFileSystemToSaveSetUpYourWorkspace, {PH1: link}));
         }
         suffixElement.append(icon, tooltip);

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -94,7 +94,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/sources/WatchExpressionsSidebar
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let watchExpressionsSidebarPaneInstance: WatchExpressionsSidebarPane;
 
-export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWidget implements
+export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements
     UI.ActionRegistration.ActionDelegate, UI.Toolbar.ItemsProvider,
     UI.ContextMenu.Provider<ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement|UISourceCodeFrame> {
   private watchExpressions: WatchExpression[];
@@ -106,7 +106,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
   private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private constructor() {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(watchExpressionsSidebarPaneStyles, objectValueStyles);
 
     // TODO(szuend): Replace with a Set once the web test
@@ -125,7 +125,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
     this.refreshButton = new UI.Toolbar.ToolbarButton(
         i18nString(UIStrings.refreshWatchExpressions), 'refresh', undefined, 'refresh-watch-expressions');
     this.refreshButton.setSize(Buttons.Button.Size.SMALL);
-    this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.update, this);
+    this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.requestUpdate, this);
 
     this.contentElement.classList.add('watch-expressions');
     this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.watch')}`);
@@ -138,10 +138,10 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
     this.expandController =
         new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController(this.treeOutline);
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.requestUpdate, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.requestUpdate, this);
     this.linkifier = new Components.Linkifier.Linkifier();
-    this.update();
+    this.requestUpdate();
   }
 
   static instance(): WatchExpressionsSidebarPane {
@@ -182,7 +182,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
     this.createWatchExpression(null).startEditing();
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     this.linkifier.reset();
     this.contentElement.removeChildren();
     this.treeOutline.removeChildren();
@@ -265,14 +265,14 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid
   private deleteAllButtonClicked(): void {
     this.watchExpressions = [];
     this.saveExpressions();
-    this.update();
+    this.requestUpdate();
   }
 
   private async focusAndAddExpressionToWatch(expression: string): Promise<void> {
     await UI.ViewManager.ViewManager.instance().showView('sources.watch');
     this.createWatchExpression(expression);
     this.saveExpressions();
-    this.update();
+    this.requestUpdate();
   }
 
   handleAction(_context: UI.Context.Context, _actionId: string): boolean {