chrome-devtools-frontend 1.0.1535712 → 1.0.1537268

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

@@ -23,6 +23,7 @@ import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wra
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as ReportView from '../../../ui/components/report_view/report_view.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.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';
 
@@ -35,6 +36,7 @@ import {
 import type {StackTraceData} from './StackTrace.js';
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -283,7 +285,6 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
   #protocolMonitorExperimentEnabled = false;
   #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
   #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
-  #originTrialTreeView: OriginTrialTreeView = new OriginTrialTreeView();
   #linkifier = new Components.Linkifier.Linkifier();
   #adScriptAncestry: Protocol.Page.AdScriptAncestry|null = null;
 
@@ -317,7 +318,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     if (!this.#permissionsPolicies && this.#frame) {
       this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
     }
-    await RenderCoordinator.write('FrameDetailsView render', () => {
+    await RenderCoordinator.write('FrameDetailsView render', async () => {
       if (!this.#frame) {
         return;
       }
@@ -331,7 +332,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
           ${this.#renderDocumentSection()}
           ${this.#renderIsolationSection()}
           ${this.#renderApiAvailabilitySection()}
-          ${this.#renderOriginTrial()}
+          ${await this.#renderOriginTrial()}
           ${Lit.Directives.until(this.#permissionsPolicies?.then(policies => {
             this.#permissionsPolicySectionData.policies = policies || [];
             return html`
@@ -348,17 +349,12 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     });
   }
 
-  #renderOriginTrial(): Lit.LitTemplate {
+  async #renderOriginTrial(): Promise<Lit.LitTemplate> {
     if (!this.#frame) {
       return Lit.nothing;
     }
 
-    this.#originTrialTreeView.classList.add('span-cols');
-
-    void this.#frame.getOriginTrials().then(trials => {
-      this.#originTrialTreeView.data = {trials};
-    });
-
+    const data = {trials: await this.#frame.getOriginTrials()};
     // clang-format off
     return html`
     <devtools-report-section-header>
@@ -373,7 +369,8 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
         </x-link>
       </span>
     </devtools-report-section>
-    ${this.#originTrialTreeView}
+    <devtools-widget class="span-cols" .widgetConfig=${widgetConfig(OriginTrialTreeView, {data})}>
+    </devtools-widget>
     <devtools-report-divider></devtools-report-divider>`;
     // clang-format on
   }

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

@@ -11,6 +11,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Adorners from '../../../ui/components/adorners/adorners.js';
 import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import badgeStyles from './badge.css.js';
@@ -79,34 +80,18 @@ export interface BadgeData {
   style: 'error'|'success'|'secondary';
 }
 
-export class Badge extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #adorner = new Adorners.Adorner.Adorner();
-
-  set data(data: BadgeData) {
-    this.#render(data);
-  }
-
-  #render(data: BadgeData): void {
-    const adornerContent = document.createElement('span');
-    adornerContent.textContent = data.badgeContent;
-    this.#adorner.data = {
-      name: 'badge',
-      content: adornerContent,
-    };
-    this.#adorner.classList.add(`badge-${data.style}`);
-
-    Lit.render(
-        html`
-      <style>${badgeStyles}</style>
-      ${this.#adorner}
-    `,
-        this.#shadow, {host: this});
-  }
+function createBadge(data: BadgeData): Adorners.Adorner.Adorner {
+  const adorner = new Adorners.Adorner.Adorner();
+  const adornerContent = document.createElement('span');
+  adornerContent.textContent = data.badgeContent;
+  adorner.data = {
+    name: 'badge',
+    content: adornerContent,
+  };
+  adorner.classList.add(`badge-${data.style}`);
+  return adorner;
 }
 
-customElements.define('devtools-resources-origin-trial-tree-view-badge', Badge);
-
 type TreeNode<DataType> = TreeOutline.TreeOutlineUtils.TreeNode<DataType>;
 
 /**
@@ -127,19 +112,18 @@ function constructOriginTrialTree(originTrial: Protocol.Page.OriginTrial): TreeN
         constructTokenDetailsNodes(originTrial.tokensWithStatus[0]),
     renderer: (node: TreeNode<OriginTrialTreeNodeData>) => {
       const trial = node.treeNodeData as Protocol.Page.OriginTrial;
-      const tokenCountBadge = html`
-        <devtools-resources-origin-trial-tree-view-badge .data=${{
+      const tokenCountBadge = createBadge({
         badgeContent: i18nString(UIStrings.tokens, {PH1: trial.tokensWithStatus.length}),
         style: 'secondary',
-      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
-      `;
+      });
 
       return html`
         ${trial.trialName}
-        <devtools-resources-origin-trial-tree-view-badge .data=${{
+        <style>${badgeStyles}</style>
+        ${createBadge({
         badgeContent: trial.status,
         style: trial.status === Protocol.Page.OriginTrialStatus.Enabled ? 'success' : 'error',
-      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
+      })}
         ${trial.tokensWithStatus.length > 1 ? tokenCountBadge : Lit.nothing}
       `;
     },
@@ -153,12 +137,10 @@ function constructTokenNode(token: Protocol.Page.OriginTrialTokenWithStatus): Tr
     children: async () => constructTokenDetailsNodes(token),
     renderer: (node: TreeNode<OriginTrialTreeNodeData>, state: {isExpanded: boolean}) => {
       const tokenStatus = node.treeNodeData as string;
-      const statusBadge = html`
-        <devtools-resources-origin-trial-tree-view-badge .data=${{
+      const statusBadge = createBadge({
         badgeContent: tokenStatus,
         style: tokenStatus === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
-      `;
+      });
       // Only display token status for convenience when the node is not expanded.
       return html`${i18nString(UIStrings.token)} ${state.isExpanded ? Lit.nothing : statusBadge}`;
     },
@@ -290,10 +272,11 @@ export class OriginTrialTokenRows extends HTMLElement {
       {
         name: i18nString(UIStrings.status),
         value: html`
-          <devtools-resources-origin-trial-tree-view-badge .data=${{
+          <style>${badgeStyles}</style>
+          ${createBadge({
           badgeContent: this.#tokenWithStatus.status,
           style: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-        } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>`,
+        })}`,
       },
       ...this.#parsedTokenDetails,
     ];
@@ -307,7 +290,9 @@ export class OriginTrialTokenRows extends HTMLElement {
 
     Lit.render(
         html`
-      <style>${originTrialTokenRowsStyles}</style>
+      <style>
+        ${originTrialTokenRowsStyles}
+      </style>
       <div class="content">
         ${tokenDetailRows}
       </div>
@@ -322,45 +307,56 @@ export interface OriginTrialTreeViewData {
   trials: Protocol.Page.OriginTrial[];
 }
 
-export class OriginTrialTreeView extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+type View = (input: OriginTrialTreeViewData, output: undefined, target: HTMLElement) => void;
 
-  set data(data: OriginTrialTreeViewData) {
-    this.#render(data.trials);
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  if (!input.trials.length) {
+    // clang-format off
+    Lit.render(html`
+      <style>${originTrialTreeViewStyles}</style>
+      <span class="status-badge">
+        <devtools-icon class="medium" name="clear"></devtools-icon>
+        <span>${i18nString(UIStrings.noTrialTokens)}</span>
+      </span>`, target);
+    // clang-format on
+    return;
   }
 
-  #render(trials: Protocol.Page.OriginTrial[]): void {
-    if (!trials.length) {
-      Lit.render(
-          html`
-    <style>${originTrialTreeViewStyles}</style>
-    <span class="status-badge">
-      <devtools-icon class="medium" name="clear"></devtools-icon>
-      <span>${i18nString(UIStrings.noTrialTokens)}</span>
-    </span>`,
-          this.#shadow, {host: this});
-      return;
-    }
+  // clang-format off
+  Lit.render(html`
+    <style>
+      ${originTrialTreeViewStyles}
+    </style>
+    <devtools-tree-outline .data=${{
+      tree: input.trials.map(constructOriginTrialTree),
+      defaultRenderer,
+    } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
+    </devtools-tree-outline>
+  `, target);
+  // clang-format on
+};
+
+export class OriginTrialTreeView extends UI.Widget.Widget {
+  #data: OriginTrialTreeViewData = {trials: []};
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
-    Lit.render(
-        html`
-      <style>${originTrialTreeViewStyles}</style>
-      <devtools-tree-outline .data=${{
-          tree: trials.map(constructOriginTrialTree),
-          defaultRenderer,
-        } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
-      </devtools-tree-outline>
-    `,
-        this.#shadow, {host: this});
+  set data(data: OriginTrialTreeViewData) {
+    this.#data = data;
+    this.requestUpdate();
   }
-}
 
-customElements.define('devtools-resources-origin-trial-tree-view', OriginTrialTreeView);
+  override performUpdate(): void {
+    this.#view(this.#data, undefined, this.contentElement);
+  }
+}
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-resources-origin-trial-tree-view': OriginTrialTreeView;
     'devtools-resources-origin-trial-token-rows': OriginTrialTokenRows;
-    'devtools-resources-origin-trial-tree-view-badge': Badge;
   }
 }

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/components/backForwardCacheView.css

@@ -73,6 +73,10 @@ devtools-report-value:has(devtools-tree-outline) {
   margin-left: var(--sys-size-7);
 }
 
+.cache-status-section:focus-visible {
+ outline: 0;
+}
+
 .tree-outline li .selection {
   margin-left: -5px;
 }

package/front_end/panels/application/components/badge.css

@@ -20,6 +20,6 @@
 }
 
 /* Use mono-space source code font to assist reading of adorner content */
-:host {
+:host devtools-adorner {
   font-family: var(--source-code-font-family);
 }

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/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -126,10 +126,9 @@ const str_ = i18n.i18n.registerUIStrings('panels/browser_debugger/CategorizedBre
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-const {html, render, Directives: {ref}} = Lit;
+const {html, render} = Lit;
 
 interface ViewOutput {
-  defaultFocus: Element|undefined;
   userExpandedCategories: Set<SDK.CategorizedBreakpoint.Category>;
 }
 interface ViewInput {
@@ -211,53 +210,49 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         style="flex: 1;"
         ></devtools-toolbar-input>
     </devtools-toolbar>
-    <devtools-tree
-      ${ref(e => { output.defaultFocus = e; })}
-      .template=${html`
-        <ul role="tree">
-          ${filteredCategories.map(([category, breakpoints]) => html`
-            <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
-                role="treeitem"
-                jslog-context=${category}
-                aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
-                  ? breakpoints.some(breakpoint => !breakpoint.enabled()) ? 'mixed' : true
-                  : false}>
-              <style>${categorizedBreakpointsSidebarPaneStyles}</style>
-              <devtools-checkbox
-                class="small"
-                tabIndex=-1
-                title=${getLocalizedCategory(category)}
-                ?indeterminate=${breakpoints.some(breakpoint => !breakpoint.enabled()) &&
-                                 breakpoints.some(breakpoint => breakpoint.enabled())}
-                ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
-                @change=${(e: Event) => onCheckboxClicked(e, category)}
-              >${getLocalizedCategory(category)}</devtools-checkbox>
-              <ul
-                  role="group"
-                  ?hidden=${!shouldExpandCategory(breakpoints) && !input.userExpandedCategories.has(category)}>
-                ${breakpoints.map(breakpoint => html`
-                <li
-                    role="treeitem"
-                    aria-checked=${breakpoint.enabled()}
-                    jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
-                  <div ?hidden=${breakpoint !== input.highlightedItem} class="breakpoint-hit-marker"></div>
-                  <devtools-checkbox
-                    class=${classes(breakpoint)}
-                    tabIndex=-1
-                    title=${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}
-                    ?checked=${breakpoint.enabled()}
-                    aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
-                                                                            : Lit.nothing}
-                    @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}
-                  >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
-                </li>`)}
-              </ul>
-            </li>`)}
-        </ul>
-      `}>
-    </devtools-tree>`,
-      // clang-format on
-      target);
+    <devtools-tree autofocus .template=${html`
+      <ul role="tree">
+        ${filteredCategories.map(([category, breakpoints]) => html`
+          <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
+              role="treeitem"
+              jslog-context=${category}
+              aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
+                ? breakpoints.some(breakpoint => !breakpoint.enabled()) ? 'mixed' : true
+                : false}>
+            <style>${categorizedBreakpointsSidebarPaneStyles}</style>
+            <devtools-checkbox
+              class="small"
+              tabIndex=-1
+              title=${getLocalizedCategory(category)}
+              ?indeterminate=${breakpoints.some(breakpoint => !breakpoint.enabled()) &&
+                                breakpoints.some(breakpoint => breakpoint.enabled())}
+              ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
+              @change=${(e: Event) => onCheckboxClicked(e, category)}
+            >${getLocalizedCategory(category)}</devtools-checkbox>
+            <ul
+                role="group"
+                ?hidden=${!shouldExpandCategory(breakpoints) && !input.userExpandedCategories.has(category)}>
+              ${breakpoints.map(breakpoint => html`
+              <li
+                  role="treeitem"
+                  aria-checked=${breakpoint.enabled()}
+                  jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
+                <div ?hidden=${breakpoint !== input.highlightedItem} class="breakpoint-hit-marker"></div>
+                <devtools-checkbox
+                  class=${classes(breakpoint)}
+                  tabIndex=-1
+                  title=${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}
+                  ?checked=${breakpoint.enabled()}
+                  aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
+                                                                          : Lit.nothing}
+                  @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}
+                >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
+              </li>`)}
+            </ul>
+          </li>`)}
+      </ul>`}>
+    </devtools-tree>`, target);
+  // clang-format on
 };
 
 export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
@@ -341,11 +336,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       highlightedItem: this.#highlightedItem,
       userExpandedCategories: this.#userExpandedCategories,
     };
-    const that = this;
     const output: ViewOutput = {
-      set defaultFocus(e: Element|undefined) {
-        that.setDefaultFocusedElement(e ?? null);
-      },
       userExpandedCategories: this.#userExpandedCategories,
     };
     this.#view(input, output, this.contentElement);

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/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

@@ -164,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}
             >
@@ -178,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" jslogContext="teaser-info-tooltip">
+          <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

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 {