chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -1,7 +1,6 @@
 // Copyright 2011 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-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -10,11 +9,12 @@ 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 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 {Icon} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelCommon from '../common/common.js';
 import * as Snippets from '../snippets/snippets.js';
@@ -527,10 +527,11 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
   }
 
   private addLoadErrorIcon(tabId: string): void {
-    const icon = new IconButton.Icon.Icon();
-    icon.name = 'cross-circle-filled';
-    icon.classList.add('small');
-    UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.unableToLoadThisContent));
+    // clang-format off
+    const icon = html`<devtools-icon class="small" name="cross-circle-filled"
+                                     title=${i18nString(UIStrings.unableToLoadThisContent)}>
+                      </devtools-icon>`;
+    // clang-format on
     if (this.tabbedPane.tabView(tabId)) {
       this.tabbedPane.setTrailingTabIcon(tabId, icon);
     }
@@ -606,10 +607,11 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
       const tooltip = this.tooltipForFile(uiSourceCode);
       this.tabbedPane.changeTabTitle(tabId, title, tooltip);
       if (uiSourceCode.loadError()) {
-        const icon = new IconButton.Icon.Icon();
-        icon.name = 'cross-circle-filled';
-        icon.classList.add('small');
-        UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.unableToLoadThisContent));
+        // clang-format off
+        const icon = html`<devtools-icon class="small" name="cross-circle-filled"
+                                         title=${i18nString(UIStrings.unableToLoadThisContent)}>
+                          </devtools-icon>`;
+        // clang-format on
         this.tabbedPane.setTrailingTabIcon(tabId, icon);
       } else if (Persistence.Persistence.PersistenceImpl.instance().hasUnsavedCommittedChanges(uiSourceCode)) {
         /* eslint-disable @devtools/no-imperative-dom-api --
@@ -617,7 +619,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
          * and we will use a toast instead once available.
          **/
         const suffixElement = document.createElement('div');
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'warning-filled';
         icon.classList.add('small');
         const id = `tab-tooltip-${nextTooltipId++}`;

package/front_end/panels/sources/ThreadsSidebarPane.ts

@@ -1,17 +1,18 @@
 // Copyright 2014 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-imperative-dom-api */
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.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';
 
 import threadsSidebarPaneStyles from './threadsSidebarPane.css.js';
 
+const {html, render, nothing} = Lit;
+
 const UIStrings = {
   /**
    * @description Text in Threads Sidebar Pane of the Sources panel
@@ -21,25 +22,56 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/ThreadsSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+interface Thread {
+  name: string;
+  paused: boolean;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+interface ViewInput {
+  threads: Thread[];
+}
+
+// clang-format off
+const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  render(html`
+    <style>${threadsSidebarPaneStyles}</style>
+    <div role="listbox">
+    ${input.threads.map(thread => html`
+      <button
+        class="thread-item"
+        @click=${thread.onSelect}
+        tabindex="0"
+        aria-selected=${thread.selected}
+        role="option"
+      >
+        <div class="thread-item-title">${thread.name}</div>
+        <div class="thread-item-paused-state">${thread.paused ? i18nString(UIStrings.paused) : ''}</div>
+        ${thread.selected ? html`<devtools-icon name="large-arrow-right-filled" class="selected-thread-icon"></devtools-icon>` : nothing}
+      </button>
+    `)}
+    </div>
+  `, target);
+};
+// clang-format on
+
+type View = typeof DEFAULT_VIEW;
+
 export class ThreadsSidebarPane extends UI.Widget.VBox implements
-    SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel>,
-    UI.ListControl.ListDelegate<SDK.DebuggerModel.DebuggerModel> {
-  private readonly items: UI.ListModel.ListModel<SDK.DebuggerModel.DebuggerModel>;
-  private readonly list: UI.ListControl.ListControl<SDK.DebuggerModel.DebuggerModel>;
-  private selectedModel: SDK.DebuggerModel.DebuggerModel|null;
-
-  constructor() {
-    super({
+    SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
+  #debuggerModels = new Set<SDK.DebuggerModel.DebuggerModel>();
+  #selectedModel: SDK.DebuggerModel.DebuggerModel|null;
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {
       jslog: `${VisualLogging.section('sources.threads')}`,
-      useShadowDom: true,
     });
-    this.registerRequiredCSS(threadsSidebarPaneStyles);
+    this.#view = view;
 
-    this.items = new UI.ListModel.ListModel();
-    this.list = new UI.ListControl.ListControl(this.items, this, UI.ListControl.ListMode.NonViewport);
     const currentTarget = UI.Context.Context.instance().flavor(SDK.Target.Target);
-    this.selectedModel = currentTarget !== null ? currentTarget.model(SDK.DebuggerModel.DebuggerModel) : null;
-    this.contentElement.appendChild(this.list.element);
+    this.#selectedModel = currentTarget?.model(SDK.DebuggerModel.DebuggerModel) ?? null;
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.Target.Target, this.targetFlavorChanged, this);
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.DebuggerModel.DebuggerModel, this);
@@ -49,106 +81,69 @@ export class ThreadsSidebarPane extends UI.Widget.VBox implements
     return SDK.TargetManager.TargetManager.instance().models(SDK.DebuggerModel.DebuggerModel).length >= 2;
   }
 
-  createElementForItem(debuggerModel: SDK.DebuggerModel.DebuggerModel): Element {
-    const element = document.createElement('div');
-    element.classList.add('thread-item');
-    const title = element.createChild('div', 'thread-item-title');
-    const pausedState = element.createChild('div', 'thread-item-paused-state');
-    const icon = new IconButton.Icon.Icon();
-    icon.name = 'large-arrow-right-filled';
-    icon.classList.add('selected-thread-icon', 'small');
-    element.appendChild(icon);
-    element.tabIndex = -1;
-    self.onInvokeElement(element, event => {
-      UI.Context.Context.instance().setFlavor(SDK.Target.Target, debuggerModel.target());
-      event.consume(true);
-    });
-    const isSelected = UI.Context.Context.instance().flavor(SDK.Target.Target) === debuggerModel.target();
-    element.classList.toggle('selected', isSelected);
-    UI.ARIAUtils.setSelected(element, isSelected);
-
-    function updateTitle(): void {
-      const executionContext = debuggerModel.runtimeModel().defaultExecutionContext();
-      title.textContent = executionContext?.label() ? executionContext.label() : debuggerModel.target().name();
-    }
-
-    function updatePausedState(): void {
-      pausedState.textContent = debuggerModel.isPaused() ? i18nString(UIStrings.paused) : '';
-    }
-
-    function targetNameChanged(event: Common.EventTarget.EventTargetEvent<SDK.Target.Target>): void {
-      const target = event.data;
-      if (target === debuggerModel.target()) {
-        updateTitle();
-      }
-    }
-
-    debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerPaused, updatePausedState);
-    debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerResumed, updatePausedState);
-    debuggerModel.runtimeModel().addEventListener(SDK.RuntimeModel.Events.ExecutionContextChanged, updateTitle);
-    SDK.TargetManager.TargetManager.instance().addEventListener(
-        SDK.TargetManager.Events.NAME_CHANGED, targetNameChanged);
-
-    updatePausedState();
-    updateTitle();
-    return element;
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
   }
 
-  heightForItem(_debuggerModel: SDK.DebuggerModel.DebuggerModel): number {
-    console.assert(false);  // Should not be called.
-    return 0;
+  #getThreadName(debuggerModel: SDK.DebuggerModel.DebuggerModel): string {
+    const executionContext = debuggerModel.runtimeModel().defaultExecutionContext();
+    return executionContext?.label() || debuggerModel.target().name();
   }
 
-  isItemSelectable(_debuggerModel: SDK.DebuggerModel.DebuggerModel): boolean {
-    return true;
+  #handleThreadSelect(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
+    UI.Context.Context.instance().setFlavor(SDK.Target.Target, debuggerModel.target());
   }
 
-  selectedItemChanged(
-      _from: SDK.DebuggerModel.DebuggerModel|null, _to: SDK.DebuggerModel.DebuggerModel|null, fromElement: Element|null,
-      toElement: Element|null): void {
-    const fromEle = (fromElement as HTMLElement | null);
-    if (fromEle) {
-      fromEle.tabIndex = -1;
-    }
-    const toEle = (toElement as HTMLElement | null);
-    if (toEle) {
-      this.setDefaultFocusedElement(toEle);
-      toEle.tabIndex = 0;
-      if (this.hasFocus()) {
-        toEle.focus();
-      }
-    }
-  }
+  #updatePausedState = (): void => {
+    this.requestUpdate();
+  };
 
-  updateSelectedItemARIA(_fromElement: Element|null, _toElement: Element|null): boolean {
-    return false;
+  #targetNameChanged = (event: Common.EventTarget.EventTargetEvent<SDK.Target.Target>): void => {
+    const target = event.data;
+    const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+    if (debuggerModel && this.#debuggerModels.has(debuggerModel)) {
+      this.requestUpdate();
+    }
+  };
+
+  override performUpdate(): void {
+    const threads: Thread[] =
+        Array.from(this.#debuggerModels).map(debuggerModel => ({
+                                               name: this.#getThreadName(debuggerModel),
+                                               paused: debuggerModel.isPaused(),
+                                               selected: this.#selectedModel === debuggerModel,
+                                               onSelect: () => this.#handleThreadSelect(debuggerModel),
+                                             }));
+    this.#view({threads}, undefined, this.contentElement);
   }
 
   modelAdded(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
-    this.items.insert(this.items.length, debuggerModel);
-    const currentTarget = UI.Context.Context.instance().flavor(SDK.Target.Target);
-    if (currentTarget === debuggerModel.target()) {
-      this.list.selectItem(debuggerModel);
-    }
+    this.#debuggerModels.add(debuggerModel);
+    debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerPaused, this.#updatePausedState);
+    debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerResumed, this.#updatePausedState);
+    debuggerModel.runtimeModel().addEventListener(
+        SDK.RuntimeModel.Events.ExecutionContextChanged, this.requestUpdate, this);
+    SDK.TargetManager.TargetManager.instance().addEventListener(
+        SDK.TargetManager.Events.NAME_CHANGED, this.#targetNameChanged);
+
+    this.requestUpdate();
   }
 
   modelRemoved(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
-    this.items.remove(this.items.indexOf(debuggerModel));
+    this.#debuggerModels.delete(debuggerModel);
+    debuggerModel.removeEventListener(SDK.DebuggerModel.Events.DebuggerPaused, this.#updatePausedState);
+    debuggerModel.removeEventListener(SDK.DebuggerModel.Events.DebuggerResumed, this.#updatePausedState);
+    debuggerModel.runtimeModel().removeEventListener(
+        SDK.RuntimeModel.Events.ExecutionContextChanged, this.requestUpdate, this);
+    SDK.TargetManager.TargetManager.instance().removeEventListener(
+        SDK.TargetManager.Events.NAME_CHANGED, this.#targetNameChanged);
+
+    this.requestUpdate();
   }
 
   private targetFlavorChanged({data: target}: Common.EventTarget.EventTargetEvent<SDK.Target.Target>): void {
-    const hadFocus = this.hasFocus();
-    const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
-    this.list.selectItem(debuggerModel);
-    if (debuggerModel) {
-      this.list.refreshItem(debuggerModel);
-    }
-    if (this.selectedModel !== null) {
-      this.list.refreshItem(this.selectedModel);
-    }
-    this.selectedModel = debuggerModel;
-    if (hadFocus) {
-      this.focus();
-    }
+    this.#selectedModel = target.model(SDK.DebuggerModel.DebuggerModel);
+    this.requestUpdate();
   }
 }

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -14,9 +14,9 @@ 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 CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import {Icon, type IconWithName} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -528,7 +528,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 }
 
-function getIconDataForLevel(level: Workspace.UISourceCode.Message.Level): IconButton.Icon.IconWithName {
+function getIconDataForLevel(level: Workspace.UISourceCode.Message.Level): IconWithName {
   if (level === Workspace.UISourceCode.Message.Level.ERROR) {
     return {color: 'var(--icon-error)', width: '16px', height: '14px', iconName: 'cross-circle-filled'};
   }
@@ -561,7 +561,7 @@ function messageLevelComparator(a: RowMessage, b: RowMessage): number {
   return messageLevelPriority[a.level()] - messageLevelPriority[b.level()];
 }
 
-function getIconDataForMessage(message: RowMessage): IconButton.Icon.IconWithName {
+function getIconDataForMessage(message: RowMessage): IconWithName {
   if (message.origin instanceof IssuesManager.SourceFrameIssuesManager.IssueMessage) {
     return {iconName: IssueCounter.IssueCounter.getIssueKindIconName(message.origin.getIssueKind())};
   }
@@ -742,8 +742,8 @@ class RowMessageDecorations {
   }
 }
 
-function createIconFromIconData(data: IconButton.Icon.IconWithName): IconButton.Icon.Icon {
-  const icon = new IconButton.Icon.Icon();
+function createIconFromIconData(data: IconWithName): Icon {
+  const icon = new Icon();
   icon.name = data.iconName;
   if (data.width) {
     icon.style.width = data.width;

package/front_end/panels/sources/threadsSidebarPane.css

@@ -11,6 +11,10 @@
   line-height: 15px;
   display: flex;
   flex-wrap: wrap;
+  appearance: none;
+  border-width: 0;
+  background-color: var(--sys-color-cdt-base-container);
+  width: 100%;
 }
 
 .thread-item + .thread-item {
@@ -39,14 +43,11 @@
 }
 
 .selected-thread-icon {
-  display: none;
   position: absolute;
   top: 3px;
   left: 4px;
-}
-
-.thread-item.selected .selected-thread-icon {
-  display: block;
+  width: 16px;
+  height: 16px;
 }
 
 @media (forced-colors: active) {

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -1,6 +1,7 @@
 // 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.
+
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -153,9 +154,7 @@ export class InteractionsTrackAppender implements TrackAppender {
 
   setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
     if (Trace.Types.Events.isSyntheticInteraction(event)) {
-      const breakdown = new Components.InteractionBreakdown.InteractionBreakdown();
-      breakdown.entry = event;
-      info.additionalElements.push(breakdown);
+      info.additionalElements.push(Components.InteractionBreakdown.InteractionBreakdown.createWidgetElement(event));
     }
   }
 }

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -256,40 +256,30 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       if (callTree) {
         const action = UI.ActionRegistry.ActionRegistry.instance().getAction(PERF_AI_ACTION_ID);
 
-        if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
-          function appendSubmenuPromptAction(
-              submenu: UI.ContextMenu.SubMenu, action: UI.ActionRegistration.Action,
-              label: Common.UIString.LocalizedString, prompt: string, jslogContext: string): void {
-            submenu.defaultSection().appendItem(
-                label, () => action.execute({prompt}), {disabled: !action.enabled(), jslogContext});
-          }
-
-          const submenu = contextMenu.footerSection().appendSubMenuItem(
-              action.title(), false, PERF_AI_ACTION_ID,
-              Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.featureName);
-          submenu.defaultSection().appendAction(PERF_AI_ACTION_ID, i18nString(UIStrings.startAChat));
-          submenu.defaultSection().appendItem(i18nString(UIStrings.labelEntry), () => {
-            this.dispatchEventToListeners(
-                Events.ENTRY_LABEL_ANNOTATION_ADDED, {entryIndex, withLinkCreationButton: false});
-          }, {
-            jslogContext: 'timeline.annotations.create-entry-label',
-          });
-          appendSubmenuPromptAction(
-              submenu, action, i18nString(UIStrings.assessThePurpose), 'What\'s the purpose of this entry?',
-              PERF_AI_ACTION_ID + '.purpose');
-          appendSubmenuPromptAction(
-              submenu, action, i18nString(UIStrings.identifyTimeSpent),
-              'Where is most time being spent in this call tree?', PERF_AI_ACTION_ID + '.time-spent');
-          appendSubmenuPromptAction(
-              submenu, action, i18nString(UIStrings.findImprovements), 'How can I reduce the time of this call tree?',
-              PERF_AI_ACTION_ID + '.improvements');
-        } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
-          contextMenu.footerSection().appendAction(
-              PERF_AI_ACTION_ID, undefined, false, undefined,
-              Root.Runtime.hostConfig.devToolsAiAssistancePerformanceAgent?.featureName);
-        } else {
-          contextMenu.footerSection().appendAction(PERF_AI_ACTION_ID);
+        function appendSubmenuPromptAction(
+            submenu: UI.ContextMenu.SubMenu, action: UI.ActionRegistration.Action,
+            label: Common.UIString.LocalizedString, prompt: string, jslogContext: string): void {
+          submenu.defaultSection().appendItem(
+              label, () => action.execute({prompt}), {disabled: !action.enabled(), jslogContext});
         }
+
+        const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, PERF_AI_ACTION_ID);
+        submenu.defaultSection().appendAction(PERF_AI_ACTION_ID, i18nString(UIStrings.startAChat));
+        submenu.defaultSection().appendItem(i18nString(UIStrings.labelEntry), () => {
+          this.dispatchEventToListeners(
+              Events.ENTRY_LABEL_ANNOTATION_ADDED, {entryIndex, withLinkCreationButton: false});
+        }, {
+          jslogContext: 'timeline.annotations.create-entry-label',
+        });
+        appendSubmenuPromptAction(
+            submenu, action, i18nString(UIStrings.assessThePurpose), 'What\'s the purpose of this entry?',
+            PERF_AI_ACTION_ID + '.purpose');
+        appendSubmenuPromptAction(
+            submenu, action, i18nString(UIStrings.identifyTimeSpent),
+            'Where is most time being spent in this call tree?', PERF_AI_ACTION_ID + '.time-spent');
+        appendSubmenuPromptAction(
+            submenu, action, i18nString(UIStrings.findImprovements), 'How can I reduce the time of this call tree?',
+            PERF_AI_ACTION_ID + '.improvements');
       }
     }
 

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -395,16 +395,17 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
 
   preparePopoverElement(index: number): Element|null {
     const event = this.#events[index];
+
     if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
       const element = document.createElement('div');
       const root = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: timelineFlamechartPopoverStyles});
-
       const contents = root.createChild('div', 'timeline-flamechart-popover');
-      const infoElement = new TimelineComponents.NetworkRequestTooltip.NetworkRequestTooltip();
-      infoElement.data = {networkRequest: event, entityMapper: this.#entityMapper};
+      const infoElement = TimelineComponents.NetworkRequestTooltip.NetworkRequestTooltip.createWidgetElement(
+          event, this.#entityMapper || undefined);
       contents.appendChild(infoElement);
       return element;
     }
+
     return null;
   }
 

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1664,6 +1664,18 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
   #onEntryInvoked(
       dataProvider: TimelineFlameChartDataProvider|TimelineFlameChartNetworkDataProvider,
       event: Common.EventTarget.EventTargetEvent<number>): void {
+    const selectedEvent = dataProvider.eventByIndex(event.data);
+    if (this.#parsedTrace && selectedEvent) {
+      const handledByFloaty = UI.Floaty.onFloatyClick({
+        type: UI.Floaty.FloatyContextTypes.PERFORMANCE_EVENT,
+        data: {event: selectedEvent, traceStartTime: this.#parsedTrace.data.Meta.traceBounds.min}
+      });
+      if (handledByFloaty) {
+        // If this was added to the Floaty context, we do not need to actually
+        // select the event.
+        return;
+      }
+    }
     this.#updateSelectedEntryStatus(dataProvider, event);
 
     const entryIndex = event.data;

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -7,7 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Trace from '../../models/trace/trace.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -582,7 +582,7 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
 
     div.style.width = `${previewWidth}px`;
 
-    const icon = IconButton.Icon.create('arrow-back');
+    const icon = createIcon('arrow-back');
     icon.title = i18nString(UIStrings.backButtonTooltip);
     icon.classList.add('back-arrow');
     div.appendChild(icon);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -431,8 +431,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #onMainEntryHovered: (event: Common.EventTarget.EventTargetEvent<number>) => void;
   #hiddenTracksInfoBarByParsedTrace = new WeakMap<Trace.TraceModel.ParsedTrace, UI.Infobar.Infobar|'DISMISSED'>();
 
-  constructor(traceModel?: Trace.TraceModel.Model) {
+  readonly #resourceLoader: SDK.PageResourceLoader.ResourceLoader;
+
+  constructor(resourceLoader: SDK.PageResourceLoader.ResourceLoader, traceModel?: Trace.TraceModel.Model) {
     super('timeline');
+    this.#resourceLoader = resourceLoader;
     this.registerRequiredCSS(timelinePanelStyles);
     const adornerContent = document.createElement('span');
     adornerContent.innerHTML = `<div style="
@@ -698,13 +701,16 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   static instance(opts: {
-    forceNew: boolean|null,
+    forceNew: true,
+    resourceLoader: SDK.PageResourceLoader.ResourceLoader,
     traceModel?: Trace.TraceModel.Model,
-  }|undefined = {forceNew: null}): TimelinePanel {
-    const {forceNew} = opts;
+  }|undefined = undefined): TimelinePanel {
+    if (opts) {
+      timelinePanelInstance = new TimelinePanel(opts.resourceLoader, opts.traceModel);
+    }
 
-    if (!timelinePanelInstance || forceNew) {
-      timelinePanelInstance = new TimelinePanel(opts.traceModel);
+    if (!timelinePanelInstance) {
+      throw new Error('No TimelinePanel instance');
     }
 
     return timelinePanelInstance;
@@ -1137,8 +1143,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     // Ignore list setting
     this.panelToolbar.appendSeparator();
-    const showIgnoreListSetting = new TimelineComponents.IgnoreListSetting.IgnoreListSetting();
-    this.panelToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(showIgnoreListSetting));
+    this.panelToolbar.appendToolbarItem(
+        new UI.Toolbar.ToolbarItem(TimelineComponents.IgnoreListSetting.IgnoreListSetting.createWidgetElement()));
 
     if (this.#dimThirdPartiesSetting) {
       const dimThirdPartiesCheckbox =
@@ -2643,8 +2649,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
           initiatorUrl: script.url as Platform.DevToolsPath.UrlString
         };
         rawSourceMap = await SDK.SourceMapManager.tryLoadSourceMap(
-            SDK.PageResourceLoader.PageResourceLoader.instance(),
-            script.sourceMapUrl as Platform.DevToolsPath.UrlString, initiator);
+            this.#resourceLoader, script.sourceMapUrl as Platform.DevToolsPath.UrlString, initiator);
       }
 
       if (script.url && rawSourceMap) {
@@ -2747,7 +2752,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         initiatorUrl: sourceUrl
       };
       const payload = await SDK.SourceMapManager.tryLoadSourceMap(
-          SDK.PageResourceLoader.PageResourceLoader.instance(), sourceMapUrl, initiator);
+          TimelinePanel.instance().#resourceLoader, sourceMapUrl, initiator);
       return payload ? new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, payload) : null;
     };
   }
@@ -3115,9 +3120,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       let responseTextForPassedInsights = '';
 
       // TODO(b/442392194): use PerformanceTraceFormatter summary instead.
-      for (const modelName in insightsForNav.model) {
-        const model = modelName as keyof Trace.Insights.Types.InsightModelsType;
-        const insight = insightsForNav.model[model];
+      for (const insight of Object.values(insightsForNav.model)) {
         const focus = AiAssistanceModel.AIContext.AgentFocus.fromParsedTrace(parsedTrace);
         const formatter = new AiAssistanceModel.PerformanceInsightFormatter.PerformanceInsightFormatter(focus, insight);
         if (!formatter.insightIsSupported()) {

package/front_end/panels/timeline/components/CPUThrottlingSelector.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/menus/menus.js';
 
 import * as Common from '../../../core/common/common.js';