chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

package/front_end/third_party/web-vitals/package/src/types/inp.ts

@@ -14,7 +14,21 @@
  * limitations under the License.
  */
 
-import type {LoadState, Metric} from './base.js';
+import type {
+  LoadState,
+  Metric,
+  ReportOpts,
+  AttributionReportOpts,
+} from './base.js';
+
+export interface INPReportOpts extends ReportOpts {
+  durationThreshold?: number;
+}
+
+export interface INPAttributionReportOpts extends AttributionReportOpts {
+  durationThreshold?: number;
+  onEachInteraction?: (interaction: INPMetricWithAttribution) => void;
+}
 
 /**
  * An INP-specific version of the Metric object.
@@ -24,6 +38,22 @@ export interface INPMetric extends Metric {
   entries: PerformanceEventTiming[];
 }
 
+export interface INPLongestScriptSummary {
+  /**
+   * The longest Long Animation Frame script entry that intersects the INP
+   * interaction.
+   */
+  entry: PerformanceScriptTiming;
+  /**
+   * The INP subpart where the longest script ran.
+   */
+  subpart: 'input-delay' | 'processing-duration' | 'presentation-delay';
+  /**
+   * The amount of time the longest script intersected the INP duration.
+   */
+  intersectingDuration: number;
+}
+
 /**
  * An object containing potentially-helpful debugging information that
  * can be sent along with the INP value for the current page visit in order
@@ -31,37 +61,21 @@ export interface INPMetric extends Metric {
  */
 export interface INPAttribution {
   /**
-   * A selector identifying the element that the user first interacted with
-   * as part of the frame where the INP candidate interaction occurred.
-   * If this value is an empty string, that generally means the element was
-   * removed from the DOM after the interaction.
+   * By default, a selector identifying the element that the user first
+   * interacted with as part of the frame where the INP candidate interaction
+   * occurred. If this value is an empty string, that generally means the
+   * element was removed from the DOM after the interaction. If the
+   * `generateTarget` configuration option was passed, then this will instead
+   * be the return value of that function, falling back to the default if that
+   * returns null or undefined.
    */
   interactionTarget: string;
-  /**
-   * A reference to the HTML element identified by `interactionTargetSelector`.
-   * NOTE: for attribution purpose, a selector identifying the element is
-   * typically more useful than the element itself. However, the element is
-   * also made available in case additional context is needed.
-   */
-  interactionTargetElement: Node | undefined;
   /**
    * The time when the user first interacted during the frame where the INP
    * candidate interaction occurred (if more than one interaction occurred
    * within the frame, only the first time is reported).
    */
   interactionTime: DOMHighResTimeStamp;
-  /**
-   * The best-guess timestamp of the next paint after the interaction.
-   * In general, this timestamp is the same as the `startTime + duration` of
-   * the event timing entry. However, since `duration` values are rounded to
-   * the nearest 8ms, it can sometimes appear that the paint occurred before
-   * processing ended (which cannot happen). This value clamps the paint time
-   * so it's always after `processingEnd` from the Event Timing API and
-   * `renderStart` from the Long Animation Frame API (where available).
-   * It also averages the duration values for all entries in the same
-   * animation frame, which should be closer to the "real" value.
-   */
-  nextPaintTime: DOMHighResTimeStamp;
   /**
    * The type of interaction, based on the event type of the `event` entry
    * that corresponds to the interaction (i.e. the first `event` entry
@@ -70,20 +84,19 @@ export interface INPAttribution {
    * and for "keydown" or "keyup" events this will be "keyboard".
    */
   interactionType: 'pointer' | 'keyboard';
+  /**
+   * The best-guess timestamp of the next paint after the interaction.
+   * In general, this timestamp is the same as the `startTime + duration` of
+   * the event timing entry. However, since duration values are rounded to the
+   * nearest 8ms (and can be rounded down), this value is clamped to always be
+   * reported after the processing times.
+   */
+  nextPaintTime: DOMHighResTimeStamp;
   /**
    * An array of Event Timing entries that were processed within the same
    * animation frame as the INP candidate interaction.
    */
   processedEventEntries: PerformanceEventTiming[];
-  /**
-   * If the browser supports the Long Animation Frame API, this array will
-   * include any `long-animation-frame` entries that intersect with the INP
-   * candidate interaction's `startTime` and the `processingEnd` time of the
-   * last event processed within that animation frame. If the browser does not
-   * support the Long Animation Frame API or no `long-animation-frame` entries
-   * are detect, this array will be empty.
-   */
-  longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[];
   /**
    * The time from when the user interacted with the page until when the
    * browser was first able to start processing event listeners for that
@@ -112,6 +125,48 @@ export interface INPAttribution {
    * (e.g. usually in the `dom-interactive` phase) it can result in long delays.
    */
   loadState: LoadState;
+  /**
+   * If the browser supports the Long Animation Frame API, this array will
+   * include any `long-animation-frame` entries that intersect with the INP
+   * candidate interaction's `startTime` and the `processingEnd` time of the
+   * last event processed within that animation frame. If the browser does not
+   * support the Long Animation Frame API or no `long-animation-frame` entries
+   * are detected, this array will be empty.
+   */
+  longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[];
+  /**
+   * Summary information about the longest script entry intersecting the INP
+   * duration. Note, only script entries above 5 milliseconds are reported by
+   * the Long Animation Frame API.
+   */
+  longestScript?: INPLongestScriptSummary;
+  /**
+   * The total duration of Long Animation Frame scripts that intersect the INP
+   * duration excluding any forced style and layout (that is included in
+   * totalStyleAndLayout). Note, this is limited to scripts > 5 milliseconds.
+   */
+  totalScriptDuration?: number;
+  /**
+   * The total style and layout duration from any Long Animation Frames
+   * intersecting the INP interaction. This includes any end-of-frame style and
+   * layout duration + any forced style and layout duration.
+   */
+  totalStyleAndLayoutDuration?: number;
+  /**
+   * The off main-thread presentation delay from the end of the last Long
+   * Animation Frame (where available) until the INP end point.
+   */
+  totalPaintDuration?: number;
+  /**
+   * The total unattributed time not included in any of the previous totals.
+   * This includes scripts < 5 milliseconds and other timings not attributed
+   * by Long Animation Frame (including when a frame is < 50ms and so has no
+   * Long Animation Frame).
+   * When no Long Animation Frames are present this will be undefined, rather
+   * than everything being unattributed to make it clearer when it's expected
+   * to be small.
+   */
+  totalUnattributedDuration?: number;
 }
 
 /**

package/front_end/third_party/web-vitals/package/src/types/lcp.ts

@@ -31,9 +31,13 @@ export interface LCPMetric extends Metric {
  */
 export interface LCPAttribution {
   /**
-   * The element corresponding to the largest contentful paint for the page.
+   * By default, a selector identifying the element corresponding to the
+   * largest contentful paint for the page. If the `generateTarget`
+   * configuration option was passed, then this will instead be the return
+   * value of that function, falling back to the default if that returns null
+   * or undefined.
    */
-  element?: string;
+  target?: string;
   /**
    * The URL (if applicable) of the LCP image resource. If the LCP element
    * is a text node, this value will not be set.

package/front_end/third_party/web-vitals/package/src/types.ts

@@ -19,7 +19,6 @@ export * from './types/polyfills.js';
 
 export * from './types/cls.js';
 export * from './types/fcp.js';
-export * from './types/fid.js';
 export * from './types/inp.js';
 export * from './types/lcp.js';
 export * from './types/ttfb.js';
@@ -67,7 +66,7 @@ declare global {
 
   // https://wicg.github.io/layout-instability/#sec-layout-shift-attribution
   interface LayoutShiftAttribution {
-    node?: Node;
+    node: Node | null;
     previousRect: DOMRectReadOnly;
     currentRect: DOMRectReadOnly;
   }
@@ -89,9 +88,53 @@ declare global {
     readonly element: Element | null;
   }
 
+  // https://w3c.github.io/long-animation-frame/#sec-PerformanceLongAnimationFrameTiming
+  export type ScriptInvokerType =
+    | 'classic-script'
+    | 'module-script'
+    | 'event-listener'
+    | 'user-callback'
+    | 'resolve-promise'
+    | 'reject-promise';
+
+  // https://w3c.github.io/long-animation-frame/#sec-PerformanceLongAnimationFrameTiming
+  export type ScriptWindowAttribution =
+    | 'self'
+    | 'descendant'
+    | 'ancestor'
+    | 'same-page'
+    | 'other';
+
+  // https://w3c.github.io/long-animation-frame/#sec-PerformanceLongAnimationFrameTiming
+  interface PerformanceScriptTiming extends PerformanceEntry {
+    /* Overloading PerformanceEntry */
+    readonly startTime: DOMHighResTimeStamp;
+    readonly duration: DOMHighResTimeStamp;
+    readonly name: string;
+    readonly entryType: string;
+
+    readonly invokerType: ScriptInvokerType;
+    readonly invoker: string;
+    readonly executionStart: DOMHighResTimeStamp;
+    readonly sourceURL: string;
+    readonly sourceFunctionName: string;
+    readonly sourceCharPosition: number;
+    readonly pauseDuration: DOMHighResTimeStamp;
+    readonly forcedStyleAndLayoutDuration: DOMHighResTimeStamp;
+    readonly window?: Window;
+    readonly windowAttribution: ScriptWindowAttribution;
+  }
+
   // https://w3c.github.io/long-animation-frame/#sec-PerformanceLongAnimationFrameTiming
   interface PerformanceLongAnimationFrameTiming extends PerformanceEntry {
-    renderStart: DOMHighResTimeStamp;
-    duration: DOMHighResTimeStamp;
+    readonly startTime: DOMHighResTimeStamp;
+    readonly duration: DOMHighResTimeStamp;
+    readonly name: string;
+    readonly entryType: string;
+    readonly renderStart: DOMHighResTimeStamp;
+    readonly styleAndLayoutStart: DOMHighResTimeStamp;
+    readonly blockingDuration: DOMHighResTimeStamp;
+    readonly firstUIEventTimestamp: DOMHighResTimeStamp;
+    readonly scripts: PerformanceScriptTiming[];
   }
 }

package/front_end/third_party/web-vitals/patches/0001-Add-onEachInteraction-to-onINP-options.patch

@@ -0,0 +1,75 @@
+From 491debaabfe255b3c046c79db34defee146e5eec Mon Sep 17 00:00:00 2001
+From: Connor Clark <cjamcl@gmail.com>
+Date: Fri, 10 Oct 2025 09:46:44 -0700
+Subject: [PATCH] Add onEachInteraction to onINP options
+
+This adds an "onEachInteraction" option to onINP, which exposes to us
+each interaction. It also calls attributeINP on each value given to the
+callback.
+
+---
+ src/attribution/onINP.ts | 35 ++++++++++++++++++++++++++++++++++-
+ src/types/inp.ts         |  1 +
+ 2 files changed, 35 insertions(+), 1 deletion(-)
+
+diff --git a/src/attribution/onINP.ts b/src/attribution/onINP.ts
+index 479a00f..d295263 100644
+--- a/src/attribution/onINP.ts
++++ b/src/attribution/onINP.ts
+@@ -240,7 +240,40 @@ export const onINP = (
+     cleanupPending = false;
+   };
+ 
+-  interactionManager._onBeforeProcessingEntry = groupEntriesByRenderTime;
++  async function handleOnEachInteractionCallback(
++    entry: PerformanceEventTiming,
++  ) {
++    if (!opts.onEachInteraction) {
++      return;
++    }
++
++    // Wait a microtask so this "pre" processing callback actually
++    // becomes a "post" processing callback.
++    void (await Promise.resolve());
++    if (!entry.interactionId) {
++      return;
++    }
++
++    const interaction = attributeINP({
++      entries: [entry],
++      // The only value we really need for `attributeINP` is `entries`
++      // Everything else is included to fill out the type.
++      name: 'INP',
++      rating: 'good',
++      value: entry.duration,
++      delta: entry.duration,
++      navigationType: 'navigate',
++      id: 'N/A',
++    });
++    opts.onEachInteraction(interaction);
++  }
++
++  interactionManager._onBeforeProcessingEntry = (
++    entry: PerformanceEventTiming,
++  ) => {
++    void handleOnEachInteractionCallback(entry);
++    groupEntriesByRenderTime(entry);
++  };
+   interactionManager._onAfterProcessingINPCandidate = saveInteractionTarget;
+ 
+   const getIntersectingLoAFs = (
+diff --git a/src/types/inp.ts b/src/types/inp.ts
+index 7dfa9bb..f87a2c5 100644
+--- a/src/types/inp.ts
++++ b/src/types/inp.ts
+@@ -27,6 +27,7 @@ export interface INPReportOpts extends ReportOpts {
+ 
+ export interface INPAttributionReportOpts extends AttributionReportOpts {
+   durationThreshold?: number;
++  onEachInteraction?: (interaction: INPMetricWithAttribution) => void;
+ }
+ 
+ /**
+-- 
+2.51.0.760.g7b8bcc2412-goog
+

package/front_end/third_party/web-vitals/rebuild.sh

@@ -4,21 +4,35 @@ set -euo pipefail
 
 SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 
-# Roll the latest version of the package from NPM
-vpython3 scripts/deps/roll_front_end_third_party.py web-vitals web-vitals dist
-
-# We need this one helper function to be exported, so modify the source .ts and then rebuild
-sed -i -e 's/^const attributeINP/export const attributeINP/g' $SCRIPT_DIR/package/src/attribution/onINP.ts
-
-# See other edits mentioned in README.chromium
-
-# Delete package bundles as devtools doesn't consume them
-rm -f "$SCRIPT_DIR"/package/dist/*.*js
-
-# Instead devtools compiles the JS from this tsc compile.
-# rough tsc version of https://github.com/GoogleChrome/web-vitals/blob/main/tsconfig.json
-# Minor variations in the *.d.ts files are fine, but make sure the only change to onINP.js is the
-# `export` added above.
-node_modules/.bin/tsc -d -t esnext -m nodenext --moduleResolution nodenext --lib es2017,DOM --strict --outDir $SCRIPT_DIR/package/dist/modules/ $SCRIPT_DIR/package/src/**/*.ts
-
-echo "Rebuild complete. Ensure any manual edits are handled appropriately."
+VERSION=5.1.0
+GIT_SHA=1b872cf5f2159e8ace0e98d55d8eb54fb09adfbe # web-vitals does not tag releases.
+
+# Note: this is just to handle updating README.chromium.
+# For the actual sources, below we checkout the repo, apply local patches, then build with tsc.
+vpython3 scripts/deps/roll_front_end_third_party.py web-vitals web-vitals dist $VERSION
+
+cd "$SCRIPT_DIR"
+
+# As per above comment, we don't need this from npm.
+rm -rf package/src package/dist
+
+if [ ! -d tmp-repo ]; then
+    git clone http://github.com/GoogleChrome/web-vitals tmp-repo
+fi
+
+cd tmp-repo
+rm -fr .git/rebase-apply
+git checkout main
+git reset --hard $GIT_SHA
+git am ../patches/*.patch
+# Note: to modify the local patches applied, exit the script at this point:
+#    exit 1
+# then cd into tmp-repo, make whatever modifications you need, then write the patches back:
+#    git format-patch -o ../patches origin/main
+cd -
+
+# Copy the source files to our repo, and build it.
+cp -r tmp-repo/src package/src
+../../../node_modules/.bin/tsc -d -t esnext -m esnext --moduleResolution node --strict --outDir package/dist/modules/ package/src/**/*.ts package/src/index.ts
+
+echo "Rebuild complete."

package/front_end/third_party/web-vitals/web-vitals-tsconfig.json

@@ -3,16 +3,16 @@
     "composite": true
   },
   "files": [
-    "package/dist/modules/attribution/deprecated.js",
     "package/dist/modules/attribution/index.js",
     "package/dist/modules/attribution/onCLS.js",
     "package/dist/modules/attribution/onFCP.js",
-    "package/dist/modules/attribution/onFID.js",
     "package/dist/modules/attribution/onINP.js",
     "package/dist/modules/attribution/onLCP.js",
     "package/dist/modules/attribution/onTTFB.js",
-    "package/dist/modules/deprecated.js",
     "package/dist/modules/index.js",
+    "package/dist/modules/lib/InteractionManager.js",
+    "package/dist/modules/lib/LCPEntryManager.js",
+    "package/dist/modules/lib/LayoutShiftManager.js",
     "package/dist/modules/lib/bfcache.js",
     "package/dist/modules/lib/bindReporter.js",
     "package/dist/modules/lib/doubleRAF.js",
@@ -23,18 +23,14 @@
     "package/dist/modules/lib/getSelector.js",
     "package/dist/modules/lib/getVisibilityWatcher.js",
     "package/dist/modules/lib/initMetric.js",
-    "package/dist/modules/lib/interactions.js",
+    "package/dist/modules/lib/initUnique.js",
     "package/dist/modules/lib/observe.js",
-    "package/dist/modules/lib/onHidden.js",
-    "package/dist/modules/lib/polyfills/firstInputPolyfill.js",
-    "package/dist/modules/lib/polyfills/getFirstHiddenTimePolyfill.js",
     "package/dist/modules/lib/polyfills/interactionCountPolyfill.js",
     "package/dist/modules/lib/runOnce.js",
     "package/dist/modules/lib/whenActivated.js",
-    "package/dist/modules/lib/whenIdle.js",
+    "package/dist/modules/lib/whenIdleOrHidden.js",
     "package/dist/modules/onCLS.js",
     "package/dist/modules/onFCP.js",
-    "package/dist/modules/onFID.js",
     "package/dist/modules/onINP.js",
     "package/dist/modules/onLCP.js",
     "package/dist/modules/onTTFB.js",
@@ -42,7 +38,6 @@
     "package/dist/modules/types/base.js",
     "package/dist/modules/types/cls.js",
     "package/dist/modules/types/fcp.js",
-    "package/dist/modules/types/fid.js",
     "package/dist/modules/types/inp.js",
     "package/dist/modules/types/lcp.js",
     "package/dist/modules/types/polyfills.js",

package/front_end/third_party/web-vitals/web-vitals.ts

@@ -1,5 +1,3 @@
 export * from './package/dist/modules/index.js';
 export * as Attribution from './package/dist/modules/attribution/index.js';
 export {onBFCacheRestore} from './package/dist/modules/lib/bfcache.js';
-export {attributeINP} from './package/dist/modules/attribution/onINP.js';
-export {entryPreProcessingCallbacks} from './package/dist/modules/lib/interactions.js';

package/front_end/ui/components/docs/console_insight/basic.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Host from '../../../../core/host/host.js';
+import * as Console from '../../../../panels/console/console.js';
 import * as Explain from '../../../../panels/explain/explain.js';
 import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
@@ -23,11 +24,11 @@ const component = new ConsoleInsight(
           isPageReloadRecommended: false,
           sources: [
             {
-              type: Explain.SourceType.MESSAGE,
+              type: Console.PromptBuilder.SourceType.MESSAGE,
               value: 'Something went wrong\n\nSomething went wrong',
             },
             {
-              type: Explain.SourceType.NETWORK_REQUEST,
+              type: Console.PromptBuilder.SourceType.NETWORK_REQUEST,
               value: `Request: https://example.com/data.html
 
 Request headers:

package/front_end/ui/components/legacy_wrapper/LegacyWrapper.ts

@@ -39,11 +39,13 @@ export function legacyWrapper<T extends Platform.Constructor.Constructor<UI.Widg
     }
 
     override wasShown(): void {
+      super.wasShown();
       this.#component.wasShown();
       void this.#component.render();
     }
 
     override willHide(): void {
+      super.willHide();
       this.#component.willHide();
     }
 

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -10,7 +10,6 @@ import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
 import {baseConfiguration, dummyDarkTheme, dynamicSetting, DynamicSetting, themeSelection} from './config.js';
 import {toLineColumn, toOffset} from './position.js';
-import textEditorStyles from './textEditor.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -42,7 +41,6 @@ export class TextEditor extends HTMLElement {
     super();
     this.#pendingState = pendingState;
     this.#shadow.createChild('style').textContent = CodeHighlighter.codeHighlighterStyles;
-    this.#shadow.createChild('style').textContent = textEditorStyles;
   }
 
   #createEditor(): CodeMirror.EditorView {

package/front_end/ui/legacy/InspectorView.ts

@@ -362,6 +362,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.#resizeObserver.observe(this.element);
     this.#observedResize();
     this.element.ownerDocument.addEventListener('keydown', this.keyDownBound, false);
@@ -371,6 +372,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   override willHide(): void {
+    super.willHide();
     this.#resizeObserver.unobserve(this.element);
     this.element.ownerDocument.removeEventListener('keydown', this.keyDownBound, false);
     DockController.instance().removeEventListener(

package/front_end/ui/legacy/ListWidget.ts

@@ -118,7 +118,7 @@ export class ListWidget<T> extends VBox {
     if (this.isTable) {
       element.role = 'rowgroup';
     }
-    const content = this.delegate.renderItem(item, editable);
+    const content = this.delegate.renderItem(item, editable, this.items.length - 1);
     if (!content.hasAttribute('jslog')) {
       element.setAttribute('jslog', `${VisualLogging.item()}`);
     }
@@ -297,7 +297,7 @@ export class ListWidget<T> extends VBox {
 }
 
 export interface Delegate<T> {
-  renderItem(item: T, editable: boolean): Element;
+  renderItem(item: T, editable: boolean, index: number): Element;
   removeItemRequested(item: T, index: number): void;
   beginEdit(item: T): Editor<T>;
   commitEdit(item: T, editor: Editor<T>, isNew: boolean): void;

package/front_end/ui/legacy/SplitWidget.ts

@@ -648,11 +648,13 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.#forceUpdateLayout();
     ZoomManager.instance().addEventListener(ZoomManagerEvents.ZOOM_CHANGED, this.onZoomChanged, this);
   }
 
   override willHide(): void {
+    super.willHide();
     ZoomManager.instance().removeEventListener(ZoomManagerEvents.ZOOM_CHANGED, this.onZoomChanged, this);
   }
 

package/front_end/ui/legacy/TabbedPane.ts

@@ -503,6 +503,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   override wasShown(): void {
+    super.wasShown();
     const effectiveTab = this.currentTab || this.tabsHistory[0];
     if (effectiveTab && this.autoSelectFirstItemOnShow) {
       this.selectTab(effectiveTab.id);

package/front_end/ui/legacy/TargetCrashedScreen.ts

@@ -42,6 +42,7 @@ export class TargetCrashedScreen extends VBox {
   }
 
   override willHide(): void {
+    super.willHide();
     this.hideCallback.call(null);
   }
 }

package/front_end/ui/legacy/UIUtils.ts

@@ -55,11 +55,9 @@ import checkboxTextLabelStyles from './checkboxTextLabel.css.js';
 import confirmDialogStyles from './confirmDialog.css.js';
 import {Dialog} from './Dialog.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
-import inlineButtonStyles from './inlineButton.css.js';
 import inspectorCommonStyles from './inspectorCommon.css.js';
 import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
 import smallBubbleStyles from './smallBubble.css.js';
-import type {ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {Widget} from './Widget.js';
 
@@ -1757,15 +1755,6 @@ export class ConfirmDialog {
   }
 }
 
-export function createInlineButton(toolbarButton: ToolbarButton): Element {
-  const element = document.createElement('span');
-  const shadowRoot = createShadowRootWithCoreStyles(element, {cssFile: inlineButtonStyles});
-  element.classList.add('inline-button');
-  const toolbar = shadowRoot.createChild('devtools-toolbar');
-  toolbar.appendToolbarItem(toolbarButton);
-  return element;
-}
-
 export interface RenderedObject {
   element: HTMLElement;
   forceSelect(): void;
@@ -2154,7 +2143,14 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
     action.addEventListener(ActionRegistration.Events.ENABLED, actionEnabledChanged);
 
     const toggleable = action.toggleable();
-    if (toggleable) {
+    const title = action.title();
+    const iconName = action.icon() ?? '';
+    const jslogContext = action.id();
+    const toggledIconName = action.toggledIcon() ?? iconName;
+    const toggleType = action.toggleWithRedColor() ? Buttons.Button.ToggleType.RED : Buttons.Button.ToggleType.PRIMARY;
+    if (e.childNodes.length) {
+      e.jslogContext = jslogContext;
+    } else if (toggleable) {
       toggled = () => {
         e.toggled = action.toggled();
         if (action.title()) {
@@ -2163,13 +2159,6 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
         }
       };
       action.addEventListener(ActionRegistration.Events.TOGGLED, toggled);
-    }
-    const title = action.title();
-    const iconName = action.icon() ?? '';
-    const jslogContext = action.id();
-    const toggledIconName = action.toggledIcon() ?? iconName;
-    const toggleType = action.toggleWithRedColor() ? Buttons.Button.ToggleType.RED : Buttons.Button.ToggleType.PRIMARY;
-    if (toggleable) {
       e.data = {
         jslogContext,
         title,

package/front_end/ui/legacy/ViewManager.ts

@@ -441,6 +441,7 @@ export class ContainerWidget extends VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     void this.materialize().then(() => {
       const widget = widgetForView.get(this.view);
       if (widget) {