chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

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 {Icon} from '../../ui/kit/kit.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 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/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/CompatibilityTracksAppender.ts

@@ -510,7 +510,6 @@ export class CompatibilityTracksAppender {
    * @returns the index of the event in all events to be rendered in the flamechart.
    */
   appendEventAtLevel(event: Trace.Types.Events.Event, level: number, appender: TrackAppender): number {
-    // TODO(crbug.com/1442454) Figure out how to avoid the circular calls.
     this.#trackForLevel.set(level, appender);
     const index = this.#entryData.length;
     this.#entryData.push(event);

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/TimelinePanel.ts

@@ -1143,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 =
@@ -3120,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()) {