chrome-devtools-frontend 1.0.1674545 → 1.0.1675430

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/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/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/settings/SettingUIRegistration.ts

@@ -51,6 +51,7 @@ export function register(
   if (registeredSettings.has(settingName)) {
     throw new Error(`Duplicate setting name '${settingName}'`);
   }
+  Common.SettingRegistration.registerCategoryOrder(settingUIDescriptor.category, settingUIDescriptor.order);
   registeredSettings.set(settingName, {descriptor: settingDescriptor, uiDescriptor: settingUIDescriptor});
 }
 
@@ -98,5 +99,8 @@ export function resolve(settingDescriptor: Common.Settings.SettingDescriptor<unk
 }
 
 export function resetSettings(): void {
+  for (const {uiDescriptor} of registeredSettings.values()) {
+    Common.SettingRegistration.removeCategoryOrder(uiDescriptor.category, uiDescriptor.order);
+  }
   registeredSettings.clear();
 }

package/front_end/ui/visual_logging/Debugging.ts

@@ -6,7 +6,7 @@
 import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 
 import type {Loggable} from './Loggable.js';
-import {type LoggingConfig, VisualElements} from './LoggingConfig.js';
+import {elementKey, type LoggingConfig, VisualElements} from './LoggingConfig.js';
 import {getLoggingState, type LoggingState} from './LoggingState.js';
 
 let veDebuggingEnabled = false;
@@ -406,10 +406,6 @@ function processImpressionsForAdHocAnalysisDebugLog(states: LoggingState[]): voi
   }
 }
 
-function elementKey(config: LoggingConfig): string {
-  return `${VisualElements[config.ve]}${config.context ? `: ${config.context}` : ''}`;
-}
-
 export function debugString(config: LoggingConfig): string {
   const components = [VisualElements[config.ve]];
   if (config.context) {

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -3238,6 +3238,7 @@ export const knownContextValues = new Set([
   'protocol',
   'protocol-handlers',
   'protocol-monitor',
+  'protocol-monitor-columns',
   'protocol-monitor-documentation',
   'protocol-monitor.add-custom-property',
   'protocol-monitor.add-parameter',

package/front_end/ui/visual_logging/LoggingConfig.ts

@@ -27,6 +27,27 @@ export interface LoggingConfig {
   parent?: string;
 }
 
+export function elementKey(config: LoggingConfig): string {
+  return `${VisualElements[config.ve]}${config.context ? `: ${config.context}` : ''}`;
+}
+
+export function getVePath(element: Element): string {
+  const parts: string[] = [];
+  let current: Element|null = element;
+  while (current) {
+    if (needsLogging(current)) {
+      try {
+        const config = getLoggingConfig(current);
+        parts.unshift(elementKey(config));
+      } catch {
+        // Skip invalid logging configs
+      }
+    }
+    current = current.parentElementOrShadowHost();
+  }
+  return parts.join(' > ');
+}
+
 export function needsLogging(element: Element): boolean {
   return element.hasAttribute(LOGGING_ATTRIBUTE);
 }

package/front_end/ui/visual_logging/visual_logging.ts

@@ -11,6 +11,15 @@ import * as NonDomState from './NonDomState.js';
 
 export type Loggable = LoggableModule.Loggable;
 export {DebugLoggingFormat, setVeDebuggingEnabled, setVeDebugLoggingEnabled} from './Debugging.js';
+export {
+  elementKey,
+  getLoggingConfig,
+  getVePath,
+  type LoggingConfig,
+  needsLogging,
+  parseJsLog,
+  VisualElements,
+} from './LoggingConfig.js';
 export {addDocument, startLogging, stopLogging} from './LoggingDriver.js';
 export {logImpressions, logSettingAccess, logFunctionCall} from './LoggingEvents.js';
 export const logClick = (loggable: Loggable, event: Event, options: {doubleClick?: boolean} = {}): void =>

package/package.json

@@ -92,5 +92,5 @@
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1674545"
+  "version": "1.0.1675430"
 }

package/front_end/panels/mobile_throttling/MobileThrottlingSelector.ts

@@ -1,92 +0,0 @@
-// Copyright 2017 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 i18n from '../../core/i18n/i18n.js';
-import * as SDK from '../../core/sdk/sdk.js';
-
-import {throttlingManager} from './ThrottlingManager.js';
-import {
-  ThrottlingPresets,
-  type Conditions,
-  type ConditionsList,
-  type MobileThrottlingConditionsGroup,
-} from './ThrottlingPresets.js';
-
-const UIStrings = {
-  /**
-   * @description Mobile throttling is disabled. The user can select this option to run mobile
-   * emulation at a normal speed instead of throttled.
-   */
-  disabled: 'Disabled',
-  /**
-   * @description Title for a group of pre-decided configuration options for mobile throttling. These
-   * are useful default options that users might want.
-   */
-  presets: 'Presets',
-  /**
-   * @description Title for a group of advanced configuration options for mobile throttling, which
-   * might not be applicable to every user or situation.
-   */
-  advanced: 'Advanced',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/MobileThrottlingSelector.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class MobileThrottlingSelector {
-  private readonly populateCallback: (arg0: MobileThrottlingConditionsGroup[]) => ConditionsList;
-  private readonly selectCallback: (arg0: number) => void;
-  private readonly options: ConditionsList;
-
-  constructor(
-      populateCallback: (arg0: MobileThrottlingConditionsGroup[]) => ConditionsList,
-      selectCallback: (arg0: number) => void) {
-    this.populateCallback = populateCallback;
-    this.selectCallback = selectCallback;
-    SDK.CPUThrottlingManager.CPUThrottlingManager.instance().addEventListener(
-        SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.conditionsChanged, this);
-    SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
-        SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.conditionsChanged, this);
-    this.options = this.populateOptions();
-    this.conditionsChanged();
-  }
-
-  optionSelected(conditions: Conditions): void {
-    SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(conditions.network);
-    throttlingManager().setCPUThrottlingOption(conditions.cpuThrottlingOption);
-  }
-
-  private populateOptions(): ConditionsList {
-    const disabledGroup = {
-      title: i18nString(UIStrings.disabled),
-      items: [ThrottlingPresets.getNoThrottlingConditions()],
-    };
-    const presetsGroup = {title: i18nString(UIStrings.presets), items: ThrottlingPresets.getMobilePresets()};
-    const advancedGroup = {title: i18nString(UIStrings.advanced), items: ThrottlingPresets.getAdvancedMobilePresets()};
-    return this.populateCallback([disabledGroup, presetsGroup, advancedGroup]);
-  }
-
-  private conditionsChanged(): void {
-    this.populateOptions();
-
-    const networkConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
-    const cpuThrottlingOption = throttlingManager().cpuThrottlingOption();
-    for (let index = 0; index < this.options.length; ++index) {
-      const option = this.options[index];
-      if (option && 'network' in option && option.network === networkConditions &&
-          option.cpuThrottlingOption === cpuThrottlingOption) {
-        this.selectCallback(index);
-        return;
-      }
-    }
-
-    const customConditions = ThrottlingPresets.getCustomConditions();
-    for (let index = 0; index < this.options.length; ++index) {
-      const item = this.options[index];
-      if (item && item.title === customConditions.title && item.description === customConditions.description) {
-        this.selectCallback(index);
-        return;
-      }
-    }
-  }
-}