chrome-devtools-frontend 1.0.1699061 → 1.0.1701636

package/front_end/third_party/lit/lit.ts

@@ -9,4 +9,7 @@ import * as Directive from './lib/directive.js';
 import * as Decorators from './lib/decorators.js';
 import * as StaticHtml from './lib/static-html.js';
 
+// Required for lit-analyzer
+export type {DirectiveResult} from './lib/directive.js';
+
 export {AsyncDirective, Directives, Directive, Decorators, StaticHtml};

package/front_end/third_party/lit/package.json

@@ -6,6 +6,9 @@
     "lit": "3.3.3"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@rollup/plugin-terser": "1.0.0",
+    "rollup": "4.62.4",
     "rollup-plugin-dts": "6.4.1"
   }
 }

package/front_end/third_party/lit/rebuild.sh

@@ -1,6 +1,7 @@
+set -e
 npm install
-../../../node_modules/.bin/tsc --ignoreConfig -d -t esnext -m esnext --moduleResolution bundler src/*
-../../../node_modules/rollup/dist/bin/rollup -c
+vpython3 ../../../third_party/typescript/typescript.py --ignoreConfig --skipLibCheck -d -t esnext -m esnext --moduleResolution bundler src/*
+node_modules/rollup/dist/bin/rollup -c
 rm -rf node_modules src/*.js src/*.d.ts
 # Because there's a bug in clang causing it to reformat import lists even where formatting is disabled, run it right away
 git cl format --js

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -29,6 +29,12 @@ const DISALLOWED_COMMENT_TARGETS = new Set<number>([
   VisualLogging.VisualElements.Toolbar,
 ]);
 
+/**
+ * The comment thread UI itself is never a valid comment target: anything inside it (including the
+ * DOM node link in its header) must stay inert while comment mode is on.
+ */
+export const COMMENT_THREAD_UI_SELECTOR = '.comment-thread-widget';
+
 /**
  * Finds the closest ancestor (or the element itself) matching a CSS selector,
  * traversing across Shadow DOM boundaries (shadow root boundaries to shadow hosts).
@@ -268,7 +274,7 @@ function resolveCodeMirrorLineInfo(element: Element): CodeMirrorLineInfo|null {
  * Resolves an arbitrary clicked or targeted DOM element to its appropriate semantic comment anchor element.
  *
  * Traversal hierarchy:
- * 1. Checks if the element is part of a tab title (returns null if so).
+ * 1. Checks if the element is part of a tab title or of the comment thread UI (returns null if so).
  * 2. Escalates CodeMirror line/gutter elements to .cm-editor (only if the clicked line is non-empty).
  * 3. Checks for domain IDs (`data-network-request-id` or `data-backend-node-id`) across shadow boundaries,
  *    returning the owning domain element.
@@ -281,7 +287,7 @@ function resolveCodeMirrorLineInfo(element: Element): CodeMirrorLineInfo|null {
  */
 export function resolveCommentAnchorElement(
     element: Element, options?: {clientX: number, clientY: number, forHover?: boolean}): Element|null {
-  if (isTabTitle(element)) {
+  if (isTabTitle(element) || closestAcrossShadow(element, COMMENT_THREAD_UI_SELECTOR)) {
     return null;
   }
   const customResolver = getCustomAnchorResolverForElement(element);

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -7,6 +7,7 @@ import * as CommentManager from '../../models/comment_manager/comment_manager.js
 
 import {
   closestAcrossShadow,
+  COMMENT_THREAD_UI_SELECTOR,
   type CommentAnchorSignature,
   type CommentThread,
   computeVisibleRect,
@@ -238,7 +239,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
   }
 
   handleElementClick(element: Element, options?: {clientX: number, clientY: number}): boolean {
-    if (!this.isCommentMode() || closestAcrossShadow(element, '.comment-thread-widget')) {
+    if (!this.isCommentMode() || closestAcrossShadow(element, COMMENT_THREAD_UI_SELECTOR)) {
       return false;
     }
     this.clearDraftThreads();

package/front_end/ui/legacy/InspectorView.ts

@@ -853,15 +853,16 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
   }
 
-  renderStatusBar(): void {
+  renderStatusBar(visible = true): void {
     if (!this.#statusBarContainer) {
       this.#statusBarContainer = document.createElement('div');
       this.#statusBarContainer.style.display = 'contents';
       this.element.appendChild(this.#statusBarContainer);
     }
     // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    Lit.render(html`<devtools-widget class="flex-none" ${widget(StatusBarWidget)}></devtools-widget>`,
-               this.#statusBarContainer);
+    Lit.render(
+        visible ? html`<devtools-widget class="flex-none" ${widget(StatusBarWidget)}></devtools-widget>` : Lit.nothing,
+        this.#statusBarContainer);
   }
 
   private createInfoBarDiv(): void {

package/front_end/ui/legacy/TabbedPane.ts

@@ -77,6 +77,8 @@ export interface TabInfo {
   jslogContext?: string;
   enabled?: boolean;
   selected?: boolean;
+  icon?: Element|null;
+  suffix?: Element|null;
 }
 
 const TabbedPaneBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof VBox> = Common.ObjectWrapper.eventMixin(
@@ -120,6 +122,8 @@ export class TabbedPane extends TabbedPaneBase {
     this.registerRequiredCSS(tabbedPaneStyles);
     this.element.classList.add('tabbed-pane');
     this.contentElement.classList.add('tabbed-pane-shadow');
+    this.element.classList.add('flex-auto', 'vbox');
+    this.contentElement.classList.add('flex-auto', 'vbox');
     this.contentElement.tabIndex = -1;
     this.setDefaultFocusedElement(this.contentElement);
     this.#headerElement = this.contentElement.createChild('div', 'tabbed-pane-header');
@@ -565,47 +569,6 @@ export class TabbedPane extends TabbedPaneBase {
                           }));
   }
 
-  set tabs(tabs: TabInfo[]) {
-    const newIds = new Set(tabs.map(tab => tab.id));
-    for (const id of this.tabsById.keys()) {
-      if (!newIds.has(id)) {
-        this.#closeTab(id);
-      }
-    }
-    let index = 0;
-    for (const tab of tabs) {
-      const existingTab = this.tabsById.get(tab.id);
-      if (existingTab) {
-        this.changeTabView(tab.id, tab.view);
-        this.changeTabTitle(tab.id, tab.title, tab.tabTooltip);
-        if (tab.jslogContext !== undefined) {
-          existingTab.jslogContext = tab.jslogContext;
-        }
-        if (tab.isCloseable !== undefined) {
-          existingTab.closeable = tab.isCloseable;
-        }
-        if (tab.previewFeature !== undefined) {
-          existingTab.previewFeature = tab.previewFeature;
-        }
-        const currentIndex = this.#tabs.indexOf(existingTab);
-        if (currentIndex !== index) {
-          this.insertBefore(existingTab, index);
-        }
-      } else {
-        this.appendTab(
-            tab.id, tab.title, tab.view, tab.tabTooltip, /* userGesture=*/ false, tab.isCloseable, tab.previewFeature,
-            index, tab.jslogContext);
-      }
-      if (tab.enabled !== undefined) {
-        this.setTabEnabled(tab.id, tab.enabled);
-      }
-      if (tab.selected) {
-        this.selectTab(tab.id);
-      }
-      ++index;
-    }
-  }
-
   override onResize(): void {
     if (this.currentDevicePixelRatio !== window.devicePixelRatio) {
       // Force recalculation of all tab widths on a DPI change
@@ -1694,42 +1657,72 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
     this.#automaticReorder = automatic;
     this.getWidget()?.setAllowTabReorder(this.#allowTabReorder, this.#automaticReorder);
   }
+
+  get tabs(): TabInfo[] {
+    const widget = Widget.getOrCreateWidget(this) as TabbedPane;
+    if (widget) {
+      this.#updateTabs(widget);
+      return widget.tabs;
+    }
+    return [];
+  }
+
+  #delegate?: TabbedPaneTabDelegate;
+  set tabDelegate(delegate: TabbedPaneTabDelegate) {
+    this.#delegate = delegate;
+    this.getWidget()?.setTabDelegate(delegate);
+  }
+
+  #placeholderElement?: Element;
+  #managedTabIds = new Set<string>();
+  set placeholder(element: Element) {
+    this.#placeholderElement = element;
+    this.getWidget()?.setPlaceholderElement(element);
+  }
+
   readonly #tabObserver = new MutationObserver(() => this.#updateTabs());
 
   constructor() {
     super();
 
-    registerWidgetConfig(this, widgetConfig(element => {
-                           const widget = new TabbedPane(element as TabbedPaneElement);
-                           widget.setCloseableTabs(this.#closeableTabs);
-                           widget.setAllowTabReorder(this.#allowTabReorder, this.#automaticReorder);
-                           const slot = widget.contentElement.querySelector('slot:not([name])');
-                           if (slot) {
-                             slot.addEventListener('slotchange', () => this.#syncTabs());
-                           }
-                           widget.addEventListener(Events.TabSelected, () => {
-                             const slot =
-                                 widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
-                             const nodes = slot ? slot.assignedElements() : [];
-                             for (const child of nodes) {
-                               if (child.id === widget.selectedTabId) {
-                                 child.setAttribute('selected', '');
-                               } else {
-                                 child.removeAttribute('selected');
-                               }
-                             }
-                             this.dispatchEvent(new CustomEvent('select', {detail: {tabId: widget.selectedTabId}}));
-                           });
-                           widget.addEventListener(Events.TabClosed, event => {
-                             this.dispatchEvent(new CustomEvent('close', {detail: {tabId: event.data.tabId}}));
-                           });
-                           widget.addEventListener(Events.TabOrderChanged, event => {
-                             this.dispatchEvent(new CustomEvent(
-                                 'taborderchanged', {detail: {tabId: event.data.tabId, tabIds: widget.tabIds()}}));
-                           });
-                           this.#syncTabs(widget);
-                           return widget;
-                         }));
+    registerWidgetConfig(
+        this, widgetConfig(element => {
+          const widget = new TabbedPane(element as TabbedPaneElement);
+          widget.setCloseableTabs(this.#closeableTabs);
+          widget.setAllowTabReorder(this.#allowTabReorder, this.#automaticReorder);
+          if (this.#delegate) {
+            widget.setTabDelegate(this.#delegate);
+          }
+          const slot = widget.contentElement.querySelector('slot:not([name])');
+          if (slot) {
+            slot.addEventListener('slotchange', () => this.#syncTabs());
+          }
+          widget.addEventListener(Events.TabSelected, event => {
+            const nodes = this.#getTabNodes(widget);
+            for (const child of nodes) {
+              if (child.id === widget.selectedTabId) {
+                child.setAttribute('selected', '');
+              } else {
+                child.removeAttribute('selected');
+              }
+            }
+            this.dispatchEvent(new CustomEvent(
+                'select', {detail: {tabId: widget.selectedTabId, isUserGesture: event.data?.isUserGesture}}));
+          });
+          widget.addEventListener(Events.TabClosed, event => {
+            this.dispatchEvent(
+                new CustomEvent('close', {detail: {tabId: event.data.tabId, isUserGesture: event.data.isUserGesture}}));
+          });
+          widget.addEventListener(Events.TabOrderChanged, event => {
+            this.dispatchEvent(
+                new CustomEvent('taborderchanged', {detail: {tabId: event.data.tabId, tabIds: widget.tabIds()}}));
+          });
+          if (this.#placeholderElement) {
+            widget.setPlaceholderElement(this.#placeholderElement);
+          }
+          this.#syncTabs(widget);
+          return widget;
+        }));
   }
 
   override disconnectedCallback(): void {
@@ -1747,8 +1740,7 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
 
   #updateObserver(widget: TabbedPane): void {
     this.#tabObserver.disconnect();
-    const slot = widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
-    const nodes = slot ? slot.assignedElements() : [];
+    const nodes = this.#getTabNodes(widget);
     for (const child of nodes) {
       this.#tabObserver.observe(child, {
         attributes: true,
@@ -1757,13 +1749,18 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
     }
   }
 
+  #getTabNodes(widget: TabbedPane): Element[] {
+    return Array.from(widget.element.children)
+        .filter(c => c.id !== '' && !c.hasAttribute('slot') && !c.classList.contains('tabbed-pane-header') &&
+                    !c.classList.contains('tabbed-pane-content'));
+  }
+
   #updateTabs(widget = this.getWidget()): void {
     if (!widget) {
       return;
     }
     const tabs: TabInfo[] = [];
-    const slot = widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
-    const nodes = slot ? slot.assignedElements() : [];
+    const nodes = this.#getTabNodes(widget);
     for (const child of nodes) {
       const id = child.id;
       const title = child.getAttribute('title') || '';
@@ -1772,13 +1769,12 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
       const enabled = !child.hasAttribute('disabled');
       const isCloseable =
           child.hasAttribute('closeable') ? true : (child.hasAttribute('uncloseable') ? false : undefined);
+      const icon = child.querySelector('[slot="icon"]') ?? undefined;
+      const suffix = child.querySelector('[slot="suffix"]') ?? undefined;
       const view = Widget.getOrCreateWidget(child as HTMLElement);
       view.setHideOnDetach();
       if (widget.selectedTabId !== id) {
-        view.hideWidget();
         child.classList.add('hidden');
-      } else {
-        view.showWidget();
       }
       tabs.push({
         id,
@@ -1788,10 +1784,55 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
         selected,
         enabled,
         isCloseable,
+        icon,
+        suffix,
       });
     }
 
-    widget.tabs = tabs;
+    const newIds = new Set(tabs.map(tab => tab.id));
+    for (const id of this.#managedTabIds) {
+      if (!newIds.has(id)) {
+        widget.closeTab(id);
+      }
+    }
+    this.#managedTabIds = newIds;
+    let index = 0;
+    for (const tab of tabs) {
+      const existingTab = widget.tabsById.get(tab.id);
+      if (existingTab) {
+        widget.changeTabView(tab.id, tab.view);
+        widget.changeTabTitle(tab.id, tab.title, tab.tabTooltip);
+        if (tab.jslogContext !== undefined) {
+          existingTab.jslogContext = tab.jslogContext;
+        }
+        if (tab.isCloseable !== undefined) {
+          existingTab.closeable = tab.isCloseable;
+        }
+        if (tab.previewFeature !== undefined) {
+          existingTab.previewFeature = tab.previewFeature;
+        }
+        const currentIndex = widget.tabIndex(tab.id);
+        if (currentIndex !== index) {
+          widget.insertBefore(existingTab, index);
+        }
+      } else {
+        widget.appendTab(tab.id, tab.title, tab.view, tab.tabTooltip, /* userGesture=*/ false, tab.isCloseable,
+                         tab.previewFeature, index, tab.jslogContext);
+      }
+      if (tab.icon !== undefined) {
+        widget.setTabIcon(tab.id, tab.icon as unknown as Icon);
+      }
+      if (tab.suffix !== undefined) {
+        widget.setSuffixElement(tab.id, tab.suffix as unknown as HTMLElement);
+      }
+      if (tab.enabled !== undefined) {
+        widget.setTabEnabled(tab.id, tab.enabled);
+      }
+      if (tab.selected) {
+        widget.selectTab(tab.id);
+      }
+      ++index;
+    }
   }
 }
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -60,6 +60,7 @@ import {
   HTMLElementWithLightDOMTemplate,
   isEditing,
 } from './UIUtils.js';
+import {Widget} from './Widget.js';
 
 const UIStrings = {
   /**
@@ -1304,9 +1305,9 @@ export class TreeElement {
     }
   }
 
-  revealAndSelect(omitFocus?: boolean): void {
+  revealAndSelect(omitFocus?: boolean, selectedByUser?: boolean): void {
     this.reveal(true);
-    this.select(omitFocus);
+    this.select(omitFocus, selectedByUser ?? false);
   }
 
   deselect(): void {
@@ -1653,11 +1654,18 @@ class TreeViewTreeElement extends TreeElement {
     }
     this.#refreshScheduled = true;
     queueMicrotask(() => {
-      this.#refreshScheduled = false;
-      this.refresh();
+      if (this.#refreshScheduled) {
+        this.refresh();
+      }
     });
   }
 
+  flushPendingRefreshForTesting(): void {
+    if (this.#refreshScheduled) {
+      this.refresh();
+    }
+  }
+
   updateAttributes(): void {
     const expandable = Boolean(this.configElement.querySelector(':scope > ul[role="group"]'));
     this.setExpandable(expandable);
@@ -1668,7 +1676,8 @@ class TreeViewTreeElement extends TreeElement {
     this.#clonedClasses.clear();
     for (let i = 0; i < this.configElement.attributes.length; ++i) {
       const attribute = this.configElement.attributes.item(i);
-      if (attribute && attribute.name !== 'role' && TreeViewTreeElement.CLONED_ATTRIBUTES.has(attribute.name)) {
+      if (attribute && attribute.name !== 'role' &&
+          (TreeViewTreeElement.CLONED_ATTRIBUTES.has(attribute.name) || attribute.name.startsWith('data-'))) {
         this.listItemElement.setAttribute(attribute.name, attribute.value);
         this.#clonedAttributes.add(attribute.name);
       }
@@ -1684,6 +1693,7 @@ class TreeViewTreeElement extends TreeElement {
   }
 
   refresh(): void {
+    this.#refreshScheduled = false;
     const hadFocus = this.listItemElement.hasFocus();
     this.titleElement.textContent = '';
     this.updateAttributes();
@@ -1726,7 +1736,7 @@ class TreeViewTreeElement extends TreeElement {
     return super.onenter();
   }
 
-  remove(): void {
+  removeFromTree(): void {
     removeNode(this,
                Boolean(this.parent &&
                        (this.parent as TreeViewTreeElement).configElement?.querySelector(':scope > ul[role="group"]')));
@@ -1892,6 +1902,26 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     return this.#treeOutline;
   }
 
+  flushPendingUpdatesForTesting(): void {
+    this.flushPendingMutationsForTesting();
+    const stack: TreeElement[] = [...this.#treeOutline.rootElement().children()];
+    while (stack.length > 0) {
+      const item = stack.pop();
+      if (!item) {
+        continue;
+      }
+      if (item instanceof TreeViewTreeElement) {
+        item.flushPendingRefreshForTesting();
+      }
+      if (item.children()) {
+        stack.push(...item.children());
+      }
+    }
+    for (const widgetEl of this.#treeOutline.shadowRoot.querySelectorAll('devtools-widget')) {
+      void Widget.get(widgetEl)?.performUpdate();
+    }
+  }
+
   override focus(): void {
     if (!this.#treeOutline.selectedTreeElement && this.#treeOutline.firstChild()) {
       this.#treeOutline.firstChild()?.select(/* omitFocus */ true, /* selectedByUser */ false);
@@ -2030,7 +2060,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
   protected override removeNodes(nodes: NodeList|Node[]): void {
     for (const node of getTreeNodes(nodes)) {
       if (node instanceof HTMLLIElement) {
-        TreeViewTreeElement.get(node)?.remove();
+        TreeViewTreeElement.get(node)?.removeFromTree();
       } else if (node.treeElement) {
         removeNode(node.treeElement,
                    Boolean(node.treeElement.parent &&

package/front_end/ui/legacy/UIUtils.ts

@@ -2196,6 +2196,13 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     render(template, this.#contentTemplate.content);
   }
 
+  flushPendingMutationsForTesting(): void {
+    const records = this.#mutationObserver.takeRecords();
+    if (records.length > 0) {
+      this.#onChange(records);
+    }
+  }
+
   #onChange(mutationList: MutationRecord[]): void {
     this.onChange(mutationList);
     const addedNodes = new Set<Node>();

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -646,7 +646,7 @@ function nodeMixin<TBase extends Constructor<DataGridNode<any>>>(base: TBase) {
 
     override createElement(): HTMLElement {
       const element = super.createElement();
-      element.addEventListener('click', this.#onRowMouseEvent.bind(this));
+      element.addEventListener('click', this.#onRowMouseEvent.bind(this), {capture: true});
       element.addEventListener('mouseenter', this.#onRowMouseEvent.bind(this));
       element.addEventListener('mouseleave', this.#onRowMouseEvent.bind(this));
       if (this.#configElement.hasAttribute('style')) {