chrome-devtools-frontend 1.0.1672557 → 1.0.1675430

package/front_end/third_party/source-map-scopes-codec/package/src/builder/builder.ts

@@ -228,6 +228,8 @@ export class ScopeInfoBuilder {
     this.#scopes = [];
     this.#ranges = [];
     this.#knownScopes.clear();
+    this.#keyToScope.clear();
+    this.#lastScope = null;
 
     return info;
   }

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -0,0 +1,132 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+export interface CommentAnchorSignature {
+  /** Visual logging tree path, e.g. "Panel: elements > Pane: styles > TreeOutline > TreeItem: color" */
+  vePath: string;
+  /** Normalized text content of the target node */
+  textSignature: string;
+  /** Text content of the parent container VE node for sibling disambiguation */
+  parentTextSignature?: string;
+  /** 0-indexed position among siblings sharing the same visual logging path and text signature */
+  siblingIndex?: number;
+  /** Optional backend RequestId for Network panel elements (`data-network-request-id`) */
+  networkRequestId?: string;
+  /** Optional backend NodeId for Elements panel DOM nodes (`data-backend-node-id`) */
+  backendNodeId?: number;
+  /** Optional 1-indexed line number for CodeMirror text editors */
+  editorLineNumber?: number;
+  /** Optional file path of the document displayed in the CodeMirror editor */
+  editorFilePath?: string;
+}
+
+export interface CommentThread {
+  id: string;
+  anchor: CommentAnchorSignature;
+  comments: Array<{
+    author: 'DEVELOPER' | 'AGENT',
+    text: string,
+    timestamp: number,
+  }>;
+  status: 'ACTIVE'|'RESOLVED';
+  changes?: Array<Record<string, unknown>>;
+}
+
+const IGNORED_MINOR_CONTROLS = new Set<number>([
+  VisualLogging.VisualElements.Action,
+  VisualLogging.VisualElements.Toggle,
+  VisualLogging.VisualElements.Close,
+  VisualLogging.VisualElements.Expand,
+  VisualLogging.VisualElements.ToggleSubpane,
+  VisualLogging.VisualElements.Toolbar,
+]);
+
+export function closestAcrossShadow(element: Element, selector: string): Element|null {
+  let current: Element|null = element;
+  while (current) {
+    if (current.matches(selector)) {
+      return current;
+    }
+    current = current.parentElementOrShadowHost();
+  }
+  return null;
+}
+
+export function isNonEmptyItem(element: Element): boolean {
+  return element.deepTextContent().trim().length > 0;
+}
+
+export function isTabTitle(element: Element): boolean {
+  let current: Element|null = element;
+  while (current) {
+    if (VisualLogging.needsLogging(current)) {
+      try {
+        const config = VisualLogging.getLoggingConfig(current);
+        if (config.ve === VisualLogging.VisualElements.PanelTabHeader) {
+          return true;
+        }
+      } catch {
+        // Ignore
+      }
+    }
+    const role = current.getAttribute('role');
+    if (role === 'tab') {
+      return true;
+    }
+    if (current.classList.contains('tab-element') || current.classList.contains('tab-header')) {
+      return true;
+    }
+    current = current.parentElementOrShadowHost();
+  }
+  return false;
+}
+
+export function resolveCommentAnchorElement(element: Element): Element|null {
+  if (isTabTitle(element)) {
+    return null;
+  }
+  let target: Element|null = element;
+  let fallbackCandidate: Element|null = null;
+
+  while (target) {
+    const hasDomainId = target.hasAttribute('data-network-request-id') || target.hasAttribute('data-backend-node-id');
+
+    if (hasDomainId) {
+      return isNonEmptyItem(target) ? target : null;
+    }
+    if (VisualLogging.needsLogging(target)) {
+      try {
+        const config = VisualLogging.getLoggingConfig(target);
+        if (config.ve === VisualLogging.VisualElements.TableRow ||
+            config.ve === VisualLogging.VisualElements.TreeItem) {
+          return isNonEmptyItem(target) ? target : null;
+        }
+        if (!fallbackCandidate && !IGNORED_MINOR_CONTROLS.has(config.ve)) {
+          fallbackCandidate = target;
+        }
+      } catch {
+        // Ignore
+      }
+    }
+    target = target.parentElementOrShadowHost();
+  }
+
+  if (fallbackCandidate && isNonEmptyItem(fallbackCandidate)) {
+    return fallbackCandidate;
+  }
+  return null;
+}
+
+export function isElementVisible(element: Element): boolean {
+  if (!element.isConnected) {
+    return false;
+  }
+  if (!element.checkVisibility({checkOpacity: true, checkVisibilityCSS: true, contentVisibilityAuto: true})) {
+    return false;
+  }
+  const rect = element.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
+}

package/front_end/ui/comments/comments.ts

@@ -0,0 +1,9 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as CommentAnchorResolver from './CommentAnchorResolver.js';
+
+export {
+  CommentAnchorResolver,
+};

package/front_end/ui/components/dialogs/ShortcutDialog.ts

@@ -13,6 +13,7 @@ import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import {html, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
 
 import type {ButtonDialogData} from './ButtonDialog.js';
+import {DialogHorizontalAlignment} from './Dialog.js';
 import shortcutDialogStyles from './shortcutDialog.css.js';
 
 const UIStrings = {
@@ -116,6 +117,7 @@ export class ShortcutDialog extends HTMLElement {
           variant: Buttons.Button.Variant.TOOLBAR,
           iconName: 'help',
           iconTitle: i18nString(UIStrings.showShortcutTitle),
+          horizontalAlignment: DialogHorizontalAlignment.AUTO,
         } as ButtonDialogData}>
         <ul class="keybinds-list">
           ${(this.#prependedElement) ? html`${this.#prependedElement}` : nothing}

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -17,7 +17,7 @@ import * as Input from '../input/input.js';
 
 import settingCheckboxStyles from './settingCheckbox.css.js';
 
-const {html, Directives: {ifDefined}} = Lit;
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -123,7 +123,7 @@ export class SettingCheckbox extends HTMLElement {
   }
 
   get checked(): boolean {
-    if (!this.#setting || this.#setting.disabledReasons().length > 0) {
+    if (!this.#setting) {
       return false;
     }
 
@@ -141,14 +141,6 @@ export class SettingCheckbox extends HTMLElement {
 
     const icon = this.icon();
     const title = learnMore?.tooltip?.() ?? '';
-    const disabledReasons = this.#setting.disabledReasons();
-    const reason = disabledReasons.length ?
-        html`
-      <devtools-button class="disabled-reason" .iconName=${'info'} .variant=${Buttons.Button.Variant.ICON} .size=${
-            Buttons.Button.Size.SMALL} title=${ifDefined(disabledReasons.join('\n'))} @click=${
-            onclick}></devtools-button>
-    ` :
-        Lit.nothing;
     Lit.render(html`
       <style>${Input.checkboxStyles}</style>
       <style>${settingCheckboxStyles}</style>
@@ -157,12 +149,12 @@ export class SettingCheckbox extends HTMLElement {
           <input
             type="checkbox"
             .checked=${this.checked}
-            ?disabled=${this.#disabled || this.#setting.disabled()}
+            ?disabled=${this.#disabled}
             @change=${this.#checkboxChanged}
             jslog=${VisualLogging.toggle().track({change: true}).context(this.#setting.name)}
             aria-label=${titleText}
           />
-          ${this.#textOverride || titleText}${reason}
+          ${this.#textOverride || titleText}
         </label>
         ${icon}
       </p>`,

package/front_end/ui/components/settings/settingCheckbox.css

@@ -28,13 +28,6 @@ p {
   margin: 6px 0;
 }
 
-.disabled-reason {
-  box-sizing: border-box;
-  margin-left: var(--sys-size-2);
-  width: var(--sys-size-9);
-  height: var(--sys-size-9);
-}
-
 .info-icon {
   cursor: pointer;
   position: relative;

package/front_end/ui/legacy/Treeoutline.ts

@@ -58,7 +58,6 @@ import {
   deepElementFromPoint,
   enclosingNodeOrSelfWithNodeNameInArray,
   HTMLElementWithLightDOMTemplate,
-  InterceptBindingDirective,
   isEditing,
 } from './UIUtils.js';
 
@@ -1658,7 +1657,7 @@ class TreeViewTreeElement extends TreeElement {
   }
 
   refresh(): void {
-    const expandable = Boolean(this.configElement.querySelector('ul[role="group"]'));
+    const expandable = Boolean(this.configElement.querySelector(':scope > ul[role="group"]'));
     this.setExpandable(expandable);
 
     this.titleElement.textContent = '';
@@ -1677,7 +1676,9 @@ class TreeViewTreeElement extends TreeElement {
       this.listItemElement.classList.add(className);
       this.#clonedClasses.add(className);
     }
-    InterceptBindingDirective.setEventListeners(this.configElement, this.listItemElement);
+    const childUl = this.configElement.querySelector(':scope > ul[role="group"]');
+    const templateElements = childUl ? [this.configElement, childUl] : [this.configElement];
+    Lit.CustomDirectives.InterceptBindingDirective.setEventListeners(templateElements, this.listItemElement);
 
     for (const child of this.configElement.childNodes) {
       if (child instanceof HTMLUListElement && child.role === 'group') {
@@ -1697,9 +1698,9 @@ class TreeViewTreeElement extends TreeElement {
   }
 
   remove(): void {
-    removeNode(
-        this,
-        Boolean(this.parent && (this.parent as TreeViewTreeElement).configElement?.querySelector('ul[role="group"]')));
+    removeNode(this,
+               Boolean(this.parent &&
+                       (this.parent as TreeViewTreeElement).configElement?.querySelector(':scope > ul[role="group"]')));
     TreeViewTreeElement.#elementToTreeElement.delete(this.configElement);
   }
 }
@@ -1804,10 +1805,10 @@ function removeNode(node: TreeElement, preserveParentExpandable = false): void {
  * This section is only relevant if NOT using the `template`.
  *
  * Since config elements are cloned into the shadow DOM, it's not possible to directly attach event listeners to the
- * children of config elements. Instead, the `UI.UIUtils.InterceptBindingDirective` directive needs to be used as a
+ * children of config elements. Instead, the `Lit.CustomDirectives.InterceptBindingDirective` directive needs to be used as a
  * wrapper:
  * ```
- * const on = Lit.Directive.directive(UI.UIUtils.InterceptBindingDirective);
+ * const on = Lit.Directive.directive(Lit.CustomDirectives.InterceptBindingDirective);
  *
  * html`<li role="treeitem">
  *   <button @click=${on(clickHandler)}>click me</button>
@@ -1933,7 +1934,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       let treeElement;
       if (node instanceof HTMLLIElement) {
         treeElement = new TreeViewTreeElement(this.#treeOutline, node);
-        const expandable = Boolean(node.querySelector('ul[role="group"]'));
+        const expandable = Boolean(node.querySelector(':scope > ul[role="group"]'));
         treeElement.setExpandable(expandable);
         treeElement.updateExpansionFromAttribute();
       } else {
@@ -1965,11 +1966,10 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       if (node instanceof HTMLLIElement) {
         TreeViewTreeElement.get(node)?.remove();
       } else if (node.treeElement) {
-        removeNode(
-            node.treeElement,
-            Boolean(
-                node.treeElement.parent &&
-                (node.treeElement.parent as TreeViewTreeElement).configElement?.querySelector('ul[role="group"]')));
+        removeNode(node.treeElement,
+                   Boolean(node.treeElement.parent &&
+                           (node.treeElement.parent as TreeViewTreeElement)
+                               .configElement?.querySelector(':scope > ul[role="group"]')));
       }
     }
   }

package/front_end/ui/legacy/UIUtils.ts

@@ -2026,51 +2026,6 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
   });
 }
 
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-type BindingEventListener = (arg: any) => any;
-export class InterceptBindingDirective extends Lit.Directive.Directive {
-  static readonly #interceptedBindings = new WeakMap<Element, Map<string, BindingEventListener>>();
-  static readonly #attachedBindings = new WeakMap<Element, Map<string, BindingEventListener>>();
-
-  override update(part: Lit.Directive.Part, [listener]: [BindingEventListener]): unknown {
-    if (part.type !== Lit.Directive.PartType.EVENT) {
-      return listener;
-    }
-    let eventListeners = InterceptBindingDirective.#interceptedBindings.get(part.element);
-    if (!eventListeners) {
-      eventListeners = new Map();
-      InterceptBindingDirective.#interceptedBindings.set(part.element, eventListeners);
-    }
-    eventListeners.set(part.name, listener);
-
-    return this.render(listener);
-  }
-
-  /* eslint-disable-next-line @typescript-eslint/no-unsafe-function-type */
-  render(listener: Function): Function {
-    return listener;
-  }
-
-  static setEventListeners(templateElement: Element, renderedElement: Element): void {
-    const attachedListeners = InterceptBindingDirective.#attachedBindings.get(renderedElement);
-    if (attachedListeners) {
-      for (const [name, listener] of attachedListeners) {
-        renderedElement.removeEventListener(name, listener);
-      }
-    }
-
-    const newListeners = InterceptBindingDirective.#interceptedBindings.get(templateElement);
-    if (newListeners?.size) {
-      for (const [name, listener] of newListeners) {
-        renderedElement.addEventListener(name, listener);
-      }
-      InterceptBindingDirective.#attachedBindings.set(renderedElement, new Map(newListeners));
-    } else {
-      InterceptBindingDirective.#attachedBindings.delete(renderedElement);
-    }
-  }
-}
-
 export const cloneCustomElement = <T extends HTMLElement>(element: T, deep?: boolean): T => {
   const clone = document.createElement(element.localName) as T;
   for (const attribute of element.attributes) {
@@ -2099,13 +2054,13 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
       clone.appendChild(HTMLElementWithLightDOMTemplate.cloneNode(child));
     }
     if (node instanceof Element && clone instanceof Element) {
-      InterceptBindingDirective.setEventListeners(node, clone);
+      Lit.CustomDirectives.InterceptBindingDirective.setEventListeners(node, clone);
     }
     return clone;
   }
 
   private static patchLitTemplate(template: Lit.LitTemplate): void {
-    const interceptingWrapper = Lit.Directive.directive(InterceptBindingDirective);
+    const interceptingWrapper = Lit.Directive.directive(Lit.CustomDirectives.InterceptBindingDirective);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const patchingWrapper = <Args extends any[], R>(fn: (...args: Args) => R): ((...args: Args) => R) => {
       return function(this: unknown, ...args: Args): R {

package/front_end/ui/legacy/Widget.ts

@@ -1144,8 +1144,12 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
   }
 
   setMinimumAndPreferredSizes(width: number, height: number, preferredWidth: number, preferredHeight: number): void {
-    this.#constraints =
+    const newConstraints =
         new Geometry.Constraints(new Geometry.Size(width, height), new Geometry.Size(preferredWidth, preferredHeight));
+    if (this.#constraints?.isEqual(newConstraints)) {
+      return;
+    }
+    this.#constraints = newConstraints;
     this.invalidateConstraints();
   }
 
@@ -1154,7 +1158,11 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
   }
 
   set minimumSize(size: Geometry.Size) {
-    this.#constraints = new Geometry.Constraints(size);
+    const newConstraints = new Geometry.Constraints(size);
+    if (this.#constraints?.isEqual(newConstraints)) {
+      return;
+    }
+    this.#constraints = newConstraints;
     this.invalidateConstraints();
   }
 

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import type * as Common from '../../../../core/common/common.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import type * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Lit from '../../../lit/lit.js';
@@ -79,6 +80,39 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
   #hiddenColumns = new Set<string>();
   #usedCreationNode: DataGridElementNode|null = null;
   #sortingChangedScheduled = false;
+  #columnsVisibilitySetting?: Common.Settings.Setting<Record<string, {visible: boolean}>>;
+
+  set columnsVisibilitySetting(setting: Common.Settings.Setting<Record<string, {visible: boolean}>>) {
+    this.#columnsVisibilitySetting = setting;
+    this.#applyColumnVisibilitySetting();
+  }
+
+  get columnsVisibilitySetting(): Common.Settings.Setting<Record<string, {visible: boolean}>>|undefined {
+    return this.#columnsVisibilitySetting;
+  }
+
+  #applyColumnVisibilitySetting(): void {
+    if (!this.#columnsVisibilitySetting) {
+      return;
+    }
+    const settingValue = this.#columnsVisibilitySetting.get();
+    let changed = false;
+    for (const column of this.#columns) {
+      if (this.#hideableColumns.has(column.id) && settingValue[column.id]?.visible === false) {
+        if (!this.#hiddenColumns.has(column.id)) {
+          this.#hiddenColumns.add(column.id);
+          changed = true;
+        }
+      } else if (this.#hiddenColumns.has(column.id)) {
+        this.#hiddenColumns.delete(column.id);
+        changed = true;
+      }
+    }
+    if (changed) {
+      const visibleColumns = new Set(this.#columns.map(({id}) => id).filter(id => !this.#hiddenColumns.has(id)));
+      this.#dataGrid.setColumnsVisibility(visibleColumns);
+    }
+  }
 
   constructor() {
     super();
@@ -133,6 +167,11 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
                 }
                 this.#dataGrid.setColumnsVisibility(
                     new Set(this.#columns.map(({id}) => id).filter(column => !this.#hiddenColumns.has(column))));
+                if (this.#columnsVisibilitySetting) {
+                  const settingValue = this.#columnsVisibilitySetting.get();
+                  settingValue[column.id] = {visible: !this.#hiddenColumns.has(column.id)};
+                  this.#columnsVisibilitySetting.set(settingValue);
+                }
               }, {checked: !this.#hiddenColumns.has(column.id)});
         }
       }
@@ -320,6 +359,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     const visibleColumns = new Set(this.#columns.map(({id}) => id).filter(id => !this.#hiddenColumns.has(id)));
     this.#dataGrid.setColumnsVisibility(visibleColumns);
     this.#dataGrid.setEditCallback(hasEditableColumn ? this.#editCallback.bind(this) : undefined, INTERNAL_TOKEN);
+    this.#applyColumnVisibilitySetting();
   }
 
   #needUpdateColumns(mutationList: MutationRecord[]): boolean {

package/front_end/ui/legacy/components/settings_ui/SettingsUI.ts

@@ -80,7 +80,7 @@ export function renderSettingSelect(setting: Common.Settings.Setting<unknown>, s
         <select
           id=${controlId}
           aria-label=${name}
-          .disabled=${disabled ?? setting.disabled()}
+          .disabled=${Boolean(disabled)}
           @change=${onSelectChange}
           jslog=${VisualLogging.dropDown().track({change: true}).context(setting.name)}
         >

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -709,6 +709,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
         if (text instanceof HTMLElement) {
           link.appendChild(text);
         } else if (bypassURLTrimming) {
+          link.removeChildren();
           link.classList.add('devtools-link-styled-trim');
           Linkifier.appendTextWithoutHashes(link, text);
         } else {

package/front_end/ui/lit/Directives.ts

@@ -0,0 +1,80 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Lit from '../../third_party/lit/lit.js';
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export type BindingEventListener = (arg: any) => any;
+
+export class InterceptBindingDirective extends Lit.Directive.Directive {
+  static readonly #interceptedBindings = new WeakMap<Element, Map<string, BindingEventListener>>();
+  static readonly #attachedBindings = new WeakMap<Element, Map<string, Set<BindingEventListener>>>();
+
+  override update(part: Lit.Directive.Part, [listener]: [BindingEventListener]): unknown {
+    if (part.type !== Lit.Directive.PartType.EVENT) {
+      return listener;
+    }
+    let eventListeners = InterceptBindingDirective.#interceptedBindings.get(part.element);
+    if (!eventListeners) {
+      eventListeners = new Map();
+      InterceptBindingDirective.#interceptedBindings.set(part.element, eventListeners);
+    }
+    eventListeners.set(part.name, listener);
+
+    return this.render(listener);
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/no-unsafe-function-type */
+  render(listener: Function): Function {
+    return listener;
+  }
+
+  static setEventListeners(templateElements: Element|Iterable<Element>, renderedElement: Element): void {
+    const attachedListeners = InterceptBindingDirective.#attachedBindings.get(renderedElement);
+    if (attachedListeners) {
+      for (const [name, listeners] of attachedListeners) {
+        for (const listener of listeners) {
+          renderedElement.removeEventListener(name, listener);
+        }
+      }
+    }
+
+    const elements = templateElements instanceof Element ? [templateElements] : templateElements;
+    const newAttachedListeners = new Map<string, Set<BindingEventListener>>();
+    for (const templateElement of elements) {
+      const newListeners = InterceptBindingDirective.#interceptedBindings.get(templateElement);
+      if (newListeners) {
+        for (const [name, listener] of newListeners) {
+          renderedElement.addEventListener(name, listener);
+          let listenersSet = newAttachedListeners.get(name);
+          if (!listenersSet) {
+            listenersSet = new Set();
+            newAttachedListeners.set(name, listenersSet);
+          }
+          listenersSet.add(listener);
+        }
+      }
+    }
+
+    if (newAttachedListeners.size) {
+      InterceptBindingDirective.#attachedBindings.set(renderedElement, newAttachedListeners);
+    } else {
+      InterceptBindingDirective.#attachedBindings.delete(renderedElement);
+    }
+  }
+
+  static registerListeners(element: Element, listeners?: Record<string, EventListenerOrEventListenerObject>): void {
+    if (!listeners) {
+      InterceptBindingDirective.#interceptedBindings.delete(element);
+      return;
+    }
+    const map = new Map<string, BindingEventListener>();
+    for (const [name, listener] of Object.entries(listeners)) {
+      map.set(name,
+              typeof listener === 'function' ? listener as BindingEventListener :
+                                               listener.handleEvent.bind(listener) as BindingEventListener);
+    }
+    InterceptBindingDirective.#interceptedBindings.set(element, map);
+  }
+}

package/front_end/ui/lit/lit.ts

@@ -18,6 +18,7 @@ export {
   svg,
   type TemplateResult,
 } from '../../third_party/lit/lit.js';
+export * as CustomDirectives from './Directives.js';
 export {
   i18nTemplate,
 } from './i18n-template.js';