chrome-devtools-frontend 1.0.1534717 → 1.0.1536371

package/front_end/panels/application/components/ProtocolHandlersView.ts

@@ -10,6 +10,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.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 * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -116,7 +117,7 @@ export class ProtocolHandlersView extends HTMLElement {
             <devtools-icon class="inline-icon"
                            name=${this.#protocolHandlers.length > 0 ? 'check-circle' : 'info'}>
             </devtools-icon>
-            ${i18n.i18n.getFormatLocalizedString(str_, statusString, {
+            ${uiI18n.getFormatLocalizedString(str_, statusString, {
       PH1: manifestInTextLink,
     })}
     </div>
@@ -175,7 +176,7 @@ export class ProtocolHandlersView extends HTMLElement {
       <style>${Input.textInputStyles}</style>
       ${this.#renderStatusMessage()}
       <div class="protocol-handlers-row">
-          ${i18n.i18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOur, {PH1: protocolDocLink})}
+          ${uiI18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOur, {PH1: protocolDocLink})}
       </div>
       ${this.#renderProtocolTest()}
     `, this.#shadow, {host: this});

package/front_end/panels/application/preloading/components/PreloadingDisabledInfobar.ts

@@ -13,6 +13,7 @@ import * as ChromeLink from '../../../../ui/components/chrome_link/chrome_link.j
 import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.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';
@@ -214,7 +215,7 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
     const extensionsSettingLink = new ChromeLink.ChromeLink.ChromeLink();
     extensionsSettingLink.href = 'chrome://extensions' as Platform.DevToolsPath.UrlString;
     extensionsSettingLink.textContent = i18nString(UIStrings.extensionsSettings);
-    const description = i18n.i18n.getFormatLocalizedString(
+    const description = uiI18n.getFormatLocalizedString(
         str_, UIStrings.descriptionDisabledByPreference, {PH1: preloadingSettingLink, PH2: extensionsSettingLink});
     return this.#maybeKeyValue(
         this.#data.disabledByPreference, i18nString(UIStrings.headerDisabledByPreference), description);

package/front_end/panels/autofill/AutofillView.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 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/adorners/adorners.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
@@ -250,7 +249,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
             </div>
           </div>
         </main>
-      `, target, {host: this});
+      `, target);
     // clang-format on
     return;
   }
@@ -287,7 +286,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
           ${renderFilledFields()}
         </div>
       </main>
-    `, target, {host: this});
+    `, target);
   // clang-format on
 };
 

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -9,8 +9,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as EventListeners from '../event_listeners/event_listeners.js';
 
-export class ObjectEventListenersSidebarPane extends UI.ThrottledWidget.ThrottledWidget implements
-    UI.Toolbar.ItemsProvider {
+export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements UI.Toolbar.ItemsProvider {
   #lastRequestedContext?: SDK.RuntimeModel.ExecutionContext;
 
   // TODO(bmeurer): This is only public for web tests.
@@ -21,11 +20,11 @@ export class ObjectEventListenersSidebarPane extends UI.ThrottledWidget.Throttle
     this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.global-listeners')}`);
 
     this.eventListenersView = new EventListeners.EventListenersView.EventListenersView();
-    this.eventListenersView.changeCallback = this.update.bind(this);
+    this.eventListenersView.changeCallback = this.requestUpdate.bind(this);
     this.eventListenersView.enableDefaultTreeFocus = true;
     this.eventListenersView.show(this.element);
     this.setDefaultFocusedChild(this.eventListenersView);
-    this.update();
+    this.requestUpdate();
   }
 
   toolbarItems(): UI.Toolbar.ToolbarItem[] {
@@ -34,7 +33,7 @@ export class ObjectEventListenersSidebarPane extends UI.ThrottledWidget.Throttle
     return [refreshButton];
   }
 
-  protected override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     if (this.#lastRequestedContext) {
       this.#lastRequestedContext.runtimeModel.releaseObjectGroup(objectGroupName);
       this.#lastRequestedContext = undefined;
@@ -64,13 +63,14 @@ export class ObjectEventListenersSidebarPane extends UI.ThrottledWidget.Throttle
 
   override wasShown(): void {
     super.wasShown();
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.requestUpdate, this);
     UI.Context.Context.instance().setFlavor(ObjectEventListenersSidebarPane, this);
   }
 
   override willHide(): void {
     UI.Context.Context.instance().setFlavor(ObjectEventListenersSidebarPane, null);
-    UI.Context.Context.instance().removeFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, this.update, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        SDK.RuntimeModel.ExecutionContext, this.requestUpdate, this);
     super.willHide();
     if (this.#lastRequestedContext) {
       this.#lastRequestedContext.runtimeModel.releaseObjectGroup(objectGroupName);
@@ -85,7 +85,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'browser-debugger.refresh-global-event-listeners': {
         const eventListenersSidebarPane = context.flavor(ObjectEventListenersSidebarPane);
         if (eventListenersSidebarPane) {
-          eventListenersSidebarPane.update();
+          eventListenersSidebarPane.requestUpdate();
           return true;
         }
         return false;

package/front_end/panels/changes/CombinedDiffView.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 * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -101,6 +100,18 @@ function renderSingleDiffView(singleDiffViewInput: SingleDiffViewInput): Lit.Tem
   // clang-format on
 }
 
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+  Lit.render(
+      html`
+      <div class="combined-diff-view">
+        ${input.singleDiffViewInputs.map(singleDiffViewInput => renderSingleDiffView(singleDiffViewInput))}
+      </div>
+    `,
+      target);
+  // clang-format on
+};
+
 export class CombinedDiffView extends UI.Widget.Widget {
   /**
    * Ignores urls that start with any in the list
@@ -113,19 +124,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
   #copiedFiles: Record<string, boolean> = {};
   #view: View;
   #viewOutput: ViewOutput = {};
-  constructor(element?: HTMLElement, view: View = (input, output, target) => {
-    output.scrollToSelectedDiff = () => {
-      target.querySelector('details.selected')?.scrollIntoView();
-    };
-
-    Lit.render(
-        html`
-      <div class="combined-diff-view">
-        ${input.singleDiffViewInputs.map(singleDiffViewInput => renderSingleDiffView(singleDiffViewInput))}
-      </div>
-    `,
-        target, {host: target});
-  }) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.registerRequiredCSS(combinedDiffViewStyles);
     this.#view = view;

package/front_end/panels/common/BadgeNotification.ts

@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Buttons from '../../ui/components/buttons/buttons.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';
@@ -63,7 +64,7 @@ const UIStrings = {
 
 const str_ = i18n.i18n.registerUIStrings('panels/common/BadgeNotification.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
+const i18nFormatString = uiI18n.getFormatLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
 const LEFT_OFFSET = 5;

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -12,6 +12,7 @@ import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import type * 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 {html, render} from '../../ui/lit/lit.js';
 
@@ -150,7 +151,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <h2 class="section-title">${i18nString(UIStrings.tailorProfile)}</h2>
             <div class="section-text">
               <div>${i18nString(UIStrings.tailorProfileBody)}</div><br/>
-              <div>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.tailorProfileBodyDisclaimer, {
+              <div>${uiI18n.getFormatLocalizedString(str_, UIStrings.tailorProfileBodyDisclaimer, {
       PH1: UI.XLink.XLink.create(CONTENT_POLICY_URL, i18nString(UIStrings.contentPolicy), 'link', undefined, 'content-policy'),
       PH2: UI.XLink.XLink.create(TERMS_OF_SERVICE_URL, i18nString(UIStrings.termsOfService), 'link',
         undefined, 'terms-of-service'),

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -124,6 +124,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       variant="rich"
       vertical-distance-increase=-6
       prefer-span-left
+      jslogContext="console-insight-teaser"
     >
       <div class="teaser-tooltip-container">
         ${input.isError ? html`
@@ -163,7 +164,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
           ${input.hasTellMeMoreButton ? html`
             <devtools-button
               title=${lockedString(UIStringsNotTranslate.tellMeMore)}
-              .jslogContext=${'insights-teaser-tell-me-more'},
+              .jslogContext=${'insights-teaser-tell-me-more'}
               .variant=${Buttons.Button.Variant.PRIMARY}
               @click=${input.onTellMeMoreClick}
             >
@@ -177,7 +178,13 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             aria-details=${'teaser-info-tooltip-' + input.uuid}
             .accessibleLabel=${lockedString(UIStringsNotTranslate.learnDataUsage)}
           ></devtools-button>
-          <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
+          <devtools-tooltip
+            id=${'teaser-info-tooltip-' + input.uuid}
+            variant="rich"
+            jslogContext="teaser-info-tooltip"
+            trigger="both"
+            hover-delay=500
+          >
             <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
             <div class="learn-more">
               <x-link
@@ -322,6 +329,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     }
     if (this.#isGenerating) {
       this.#mainText = '';
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationAborted);
     }
     this.#isGenerating = false;
     if (this.#timeoutId) {
@@ -345,6 +353,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   async #generateTeaserText(): Promise<void> {
     this.#headerText = this.#consoleViewMessage.toMessageTextString().substring(0, 70);
     this.#isGenerating = true;
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationStarted);
     this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
     const startTime = performance.now();
     let teaserText = '';
@@ -359,6 +368,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       if (err.name !== 'AbortError') {
         console.error(err.name, err.message);
         this.#isError = true;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationErrored);
       }
       this.#isGenerating = false;
       clearTimeout(this.#timeoutId);
@@ -370,6 +380,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     Host.userMetrics.consoleInsightTeaserGenerated(performance.now() - startTime);
     this.#isGenerating = false;
     this.#mainText = teaserText;
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationCompleted);
     this.requestUpdate();
   }
 

package/front_end/panels/console/ConsolePinPane.ts

@@ -58,11 +58,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const elementToConsolePin = new WeakMap<Element, ConsolePin>();
 
-export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
+export class ConsolePinPane extends UI.Widget.VBox {
   private pins: Set<ConsolePin>;
   private readonly pinsSetting: Common.Settings.Setting<string[]>;
+  private readonly throttler: Common.Throttler.Throttler;
   constructor(private readonly liveExpressionButton: UI.Toolbar.ToolbarButton, private readonly focusOut: () => void) {
-    super(true, 250);
+    super({useShadowDom: true});
+    this.throttler = new Common.Throttler.Throttler(250);
     this.registerRequiredCSS(consolePinPaneStyles, objectValueStyles);
     this.contentElement.classList.add('console-pins', 'monospace');
     this.contentElement.addEventListener('contextmenu', this.contextMenuEventFired.bind(this), false);
@@ -134,7 +136,7 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
     if (userGesture) {
       void pin.focus();
     }
-    this.update();
+    this.requestUpdate();
   }
 
   private focusedPinAfterDeletion(deletedPin: ConsolePin): ConsolePin|null {
@@ -153,16 +155,19 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
     return null;
   }
 
-  override async doUpdate(): Promise<void> {
+  override wasShown(): void {
+    super.wasShown();
+    void this.throttler.schedule(this.requestUpdate.bind(this));
+  }
+
+  override async performUpdate(): Promise<void> {
     if (!this.pins.size || !this.isShowing()) {
       return;
     }
-    if (this.isShowing()) {
-      this.update();
-    }
     const updatePromises = Array.from(this.pins, pin => pin.updatePreview());
     await Promise.all(updatePromises);
     this.updatedForTest();
+    void this.throttler.schedule(this.requestUpdate.bind(this));
   }
 
   private updatedForTest(): void {

package/front_end/panels/console/ConsoleView.ts

@@ -505,6 +505,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     this.pinPane = new ConsolePinPane(liveExpressionButton, () => this.prompt.focus());
     this.pinPane.element.classList.add('console-view-pinpane');
+    this.pinPane.element.classList.remove('flex-auto');
     this.pinPane.show(this.contentsElement);
 
     this.viewport = new ConsoleViewport(this);

package/front_end/panels/console/consoleView.css

@@ -527,7 +527,6 @@
 }
 
 .console-view-pinpane {
-  flex: none;
   max-height: 50%;
 }
 

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -117,22 +117,22 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
-export class DeveloperResourcesView extends UI.ThrottledWidget.ThrottledWidget {
+export class DeveloperResourcesView extends UI.Widget.VBox {
   readonly #loader: SDK.PageResourceLoader.PageResourceLoader;
   readonly #view: View;
   #selectedItem: SDK.PageResourceLoader.PageResource|null = null;
   #filters: TextUtils.TextUtils.ParsedFilter[] = [];
 
   constructor(view: View = DEFAULT_VIEW) {
-    super(true);
+    super({useShadowDom: true});
     this.#view = view;
 
     this.#loader = SDK.PageResourceLoader.PageResourceLoader.instance();
-    this.#loader.addEventListener(SDK.PageResourceLoader.Events.UPDATE, this.update, this);
-    this.update();
+    this.#loader.addEventListener(SDK.PageResourceLoader.Events.UPDATE, this.requestUpdate, this);
+    this.requestUpdate();
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const {loading, resources} = this.#loader.getScopedNumberOfResources();
     const input = {
       onFilterChanged: (e: CustomEvent<string>) => {
@@ -152,13 +152,13 @@ export class DeveloperResourcesView extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   async select(resource: SDK.PageResourceLoader.PageResource): Promise<void> {
-    await this.lastUpdatePromise;
+    await this.updateComplete;
     this.#selectedItem = resource;
-    this.update();
+    this.requestUpdate();
   }
 
   async selectedItem(): Promise<SDK.PageResourceLoader.PageResource|null> {
-    await this.lastUpdatePromise;
+    await this.updateComplete;
     return this.#selectedItem;
   }
 
@@ -171,6 +171,6 @@ export class DeveloperResourcesView extends UI.ThrottledWidget.ThrottledWidget {
     } else {
       this.#filters = [];
     }
-    this.update();
+    this.requestUpdate();
   }
 }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -255,7 +255,7 @@ type ComputedStyleData = {
   name: string,
 };
 
-export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class ComputedStyleWidget extends UI.Widget.VBox {
   private computedStyleModel: ComputedStyleModel;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
@@ -269,22 +269,22 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
 
   constructor(computedStyleModel: ComputedStyleModel) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(computedStyleSidebarPaneStyles);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
     this.computedStyleModel = computedStyleModel;
-    this.computedStyleModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
-    this.computedStyleModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.update, this);
+    this.computedStyleModel.addEventListener(Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+    this.computedStyleModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
 
     this.showInheritedComputedStylePropertiesSetting =
         Common.Settings.Settings.instance().createSetting('show-inherited-computed-style-properties', false);
-    this.showInheritedComputedStylePropertiesSetting.addChangeListener(this.update.bind(this));
+    this.showInheritedComputedStylePropertiesSetting.addChangeListener(this.requestUpdate.bind(this));
 
     this.groupComputedStylesSetting = Common.Settings.Settings.instance().createSetting('group-computed-styles', false);
     this.groupComputedStylesSetting.addChangeListener(() => {
-      this.update();
+      this.requestUpdate();
     });
 
     const hbox = this.contentElement.createChild('div', 'hbox styles-sidebar-pane-toolbar');
@@ -334,7 +334,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const [nodeStyles, matchedStyles] =
         await Promise.all([this.computedStyleModel.fetchComputedStyle(), this.fetchMatchedCascade()]);
     if (!nodeStyles || !matchedStyles) {

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -422,7 +422,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       if (domModel.parentModel()) {
         continue;
       }
-      if (!this.rootDOMNode) {
+      if (!this.rootDOMNode || this.rootDOMNode.domModel() !== domModel) {
         if (domModel.existingDocument()) {
           this.rootDOMNode = domModel.existingDocument();
           this.onDocumentUpdated(domModel);

package/front_end/panels/elements/EventListenersWidget.ts

@@ -135,7 +135,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
-export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class EventListenersWidget extends UI.Widget.VBox {
   private showForAncestorsSetting: Common.Settings.Setting<boolean>;
   private readonly dispatchFilterBySetting: Common.Settings.Setting<string>;
   private readonly showFrameworkListenersSetting: Common.Settings.Setting<boolean>;
@@ -147,19 +147,19 @@ export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
     this.#view = view;
     this.showForAncestorsSetting =
         Common.Settings.Settings.instance().moduleSetting('show-event-listeners-for-ancestors');
-    this.showForAncestorsSetting.addChangeListener(this.update.bind(this));
+    this.showForAncestorsSetting.addChangeListener(this.requestUpdate.bind(this));
 
     this.dispatchFilterBySetting =
         Common.Settings.Settings.instance().createSetting('event-listener-dispatch-filter-type', DispatchFilterBy.All);
-    this.dispatchFilterBySetting.addChangeListener(this.update.bind(this));
+    this.dispatchFilterBySetting.addChangeListener(this.requestUpdate.bind(this));
 
     this.showFrameworkListenersSetting =
         Common.Settings.Settings.instance().createSetting('show-frameowkr-listeners', true);
     this.showFrameworkListenersSetting.setTitle(i18nString(UIStrings.frameworkListeners));
-    this.showFrameworkListenersSetting.addChangeListener(this.update.bind(this));
+    this.showFrameworkListenersSetting.addChangeListener(this.requestUpdate.bind(this));
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
-    this.update();
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.requestUpdate.bind(this));
+    this.requestUpdate();
   }
 
   static instance(opts: {
@@ -173,7 +173,7 @@ export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
     return eventListenersWidgetInstance;
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const dispatchFilter = this.dispatchFilterBySetting.get();
     const showPassive = dispatchFilter === DispatchFilterBy.All || dispatchFilter === DispatchFilterBy.Passive;
     const showBlocking = dispatchFilter === DispatchFilterBy.All || dispatchFilter === DispatchFilterBy.Blocking;
@@ -186,7 +186,7 @@ export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget {
       onDispatchFilterTypeChange: (value: string) => {
         this.dispatchFilterBySetting.set(value);
       },
-      onEventListenersViewChange: this.update.bind(this),
+      onEventListenersViewChange: this.requestUpdate.bind(this),
       dispatchFilters: [
         {name: i18nString(UIStrings.all), value: DispatchFilterBy.All},
         {name: i18nString(UIStrings.passive), value: DispatchFilterBy.Passive},
@@ -279,7 +279,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     switch (actionId) {
       case 'elements.refresh-event-listeners': {
-        EventListenersWidget.instance().update();
+        EventListenersWidget.instance().requestUpdate();
         return true;
       }
     }

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -42,27 +42,27 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
-export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class NodeStackTraceWidget extends UI.Widget.VBox {
   readonly #linkifier = new Components.Linkifier.Linkifier(MaxLengthForLinks);
   readonly #view: View;
 
   constructor(view = DEFAULT_VIEW) {
-    super(true /* isWebComponent */);
+    super({useShadowDom: true});
     this.#view = view;
   }
 
   override wasShown(): void {
     super.wasShown();
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
-    this.update();
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.requestUpdate, this);
+    this.requestUpdate();
   }
 
   override willHide(): void {
     super.willHide();
-    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.requestUpdate, this);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
     const stackTrace = await node?.creationStackTrace() ?? undefined;

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -77,21 +77,21 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
-export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class PlatformFontsWidget extends UI.Widget.VBox {
   private readonly sharedModel: ComputedStyleModel;
   readonly #view: View;
 
   constructor(sharedModel: ComputedStyleModel, view: View = DEFAULT_VIEW) {
-    super(true);
+    super({useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(platformFontsWidgetStyles);
 
     this.sharedModel = sharedModel;
-    this.sharedModel.addEventListener(ComputedStyleModelEvents.CSS_MODEL_CHANGED, this.update, this);
-    this.sharedModel.addEventListener(ComputedStyleModelEvents.COMPUTED_STYLE_CHANGED, this.update, this);
+    this.sharedModel.addEventListener(ComputedStyleModelEvents.CSS_MODEL_CHANGED, this.requestUpdate, this);
+    this.sharedModel.addEventListener(ComputedStyleModelEvents.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const cssModel = this.sharedModel.cssModel();
     const node = this.sharedModel.node();
     if (!node || !cssModel) {

package/front_end/panels/elements/PropertiesWidget.ts

@@ -103,7 +103,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 const getShowAllPropertiesSetting = (): Common.Settings.Setting<boolean> =>
     Common.Settings.Settings.instance().createSetting('show-all-properties', /* defaultValue */ false);
 
-export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
+export class PropertiesWidget extends UI.Widget.VBox {
   private node: SDK.DOMModel.DOMNode|null;
   private readonly showAllPropertiesSetting: Common.Settings.Setting<boolean>;
   private filterRegex: RegExp|null = null;
@@ -112,8 +112,8 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
   readonly #view: View;
   #displayNoMatchingPropertyMessage = false;
 
-  constructor(throttlingTimeout?: number, view: View = DEFAULT_VIEW) {
-    super(true /* isWebComponent */, throttlingTimeout);
+  constructor(view: View = DEFAULT_VIEW) {
+    super({useShadowDom: true});
     this.registerRequiredCSS(propertiesWidgetStyles);
 
     this.showAllPropertiesSetting = getShowAllPropertiesSetting();
@@ -138,7 +138,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.DOMPropertiesExpanded);
     });
 
-    void this.doUpdate();
+    void this.performUpdate();
   }
 
   private onFilterChanged(event: CustomEvent<string>): void {
@@ -150,7 +150,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     const previousDisplay = this.#displayNoMatchingPropertyMessage;
     this.internalFilterProperties();
     if (previousDisplay !== this.#displayNoMatchingPropertyMessage) {
-      this.update();
+      this.requestUpdate();
     }
   }
 
@@ -169,10 +169,10 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
 
   private setNode(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
     this.node = event.data;
-    this.update();
+    this.requestUpdate();
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     if (this.lastRequestedNode) {
       this.lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(OBJECT_GROUP_NAME);
       delete this.lastRequestedNode;
@@ -218,6 +218,6 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     if (this.node !== node) {
       return;
     }
-    this.update();
+    this.requestUpdate();
   }
 }

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -10,6 +10,7 @@ import * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Geometry from '../../models/geometry/geometry.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';
 
@@ -772,7 +773,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   private webglDisabledBanner(): UI.EmptyWidget.EmptyWidget {
     const emptyWidget = new UI.EmptyWidget.EmptyWidget(
         i18nString(UIStrings.cantDisplayLayers), i18nString(UIStrings.webglSupportIsDisabledInYour));
-    emptyWidget.contentElement.appendChild(i18n.i18n.getFormatLocalizedString(
+    emptyWidget.contentElement.appendChild(uiI18n.getFormatLocalizedString(
         str_, UIStrings.checkSForPossibleReasons,
         {PH1: UI.XLink.XLink.create('about:gpu', undefined, undefined, undefined, 'about-gpu')}));
     return emptyWidget;