chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/ui/components/annotations/AnnotationRepository.ts

@@ -0,0 +1,98 @@
+// Copyright 2025 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 Common from '../../../core/common/common.js';
+import * as Root from '../../../core/root/root.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
+
+import {AnnotationType} from './AnnotationType.js';
+
+interface BaseAnnotationData {
+  id: number;
+  type: AnnotationType;
+  message: string;
+  // Sometimes the anchor for an annotation is not known, but is provided using a
+  // string id instead (which can be converted to an `anchor` later).
+  lookupId: string;
+  // Sometimes we want annotations to anchor to a particular string on the page.
+  anchorToString?: string;
+}
+
+export interface ElementsAnnotationData extends BaseAnnotationData {
+  type: AnnotationType.ELEMENT_NODE;
+  anchor?: SDK.DOMModel.DOMNode;
+}
+
+export const enum Events {
+  ANNOTATION_ADDED = 'AnnotationAdded',
+}
+
+export interface EventTypes {
+  [Events.ANNOTATION_ADDED]: BaseAnnotationData;
+}
+
+export class AnnotationRepository {
+  static #instance: AnnotationRepository|null = null;
+  #events = new Common.ObjectWrapper.ObjectWrapper<EventTypes>();
+  #annotations: BaseAnnotationData[] = [];
+  #nextId = 0;
+
+  static instance(): AnnotationRepository {
+    if (!AnnotationRepository.#instance) {
+      AnnotationRepository.#instance = new AnnotationRepository();
+    }
+    return AnnotationRepository.#instance;
+  }
+
+  static annotationsEnabled(): boolean {
+    return Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+  }
+
+  addEventListener<T extends keyof EventTypes>(
+      eventType: T, listener: (arg0: Common.EventTarget.EventTargetEvent<EventTypes[T]>) => void,
+      thisObject?: Object): Common.EventTarget.EventDescriptor<EventTypes, T> {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received request to add event listener with annotations disabled');
+    }
+    return this.#events.addEventListener(eventType, listener, thisObject);
+  }
+
+  getAnnotationsByType(type: AnnotationType): BaseAnnotationData[] {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received query for annotation types with annotations disabled');
+      return [];
+    }
+
+    const annotations = this.#annotations.filter(annotation => annotation.type === type);
+    return annotations;
+  }
+
+  addElementsAnnotation(
+      label: string,
+      lookupId?: string,
+      anchor?: SDK.DOMModel.DOMNode,
+      anchorToString?: string,
+      ): void {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received annotation registration with annotations disabled');
+      return;
+    }
+
+    const annotationData: ElementsAnnotationData = {
+      id: this.#nextId++,
+      type: AnnotationType.ELEMENT_NODE,
+      message: label,
+      lookupId: lookupId || '',
+      anchor,
+      anchorToString
+    };
+    this.#annotations.push(annotationData);
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationRepository] Added annotation:', label, {
+      annotationData,
+      annotations: this.#annotations.length,
+    });
+    this.#events.dispatchEventToListeners(Events.ANNOTATION_ADDED, annotationData);
+  }
+}

package/front_end/ui/components/annotations/AnnotationType.ts

@@ -0,0 +1,10 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export enum AnnotationType {
+  ELEMENT_NODE = 0,
+  STYLE_RULE = 1,
+  NETWORK_REQUEST = 2,
+  NETWORK_REQUEST_SUBPANEL_HEADERS = 3,
+}

package/front_end/ui/components/annotations/annotations.ts

@@ -0,0 +1,6 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * from './AnnotationRepository.js';
+export * from './AnnotationType.js';

package/front_end/ui/components/buttons/Button.ts

@@ -1,9 +1,9 @@
 // Copyright 2021 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../icon_button/icon_button.js';
+import '../../kit/kit.js';
 
 import * as Lit from '../../lit/lit.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';

package/front_end/ui/components/buttons/FloatingButton.ts

@@ -1,8 +1,8 @@
 // Copyright 2024 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-lit-render-outside-of-view */
-import '../icon_button/icon_button.js';
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
+import '../../kit/kit.js';
 
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Lit from '../../lit/lit.js';

package/front_end/ui/components/chrome_link/ChromeLink.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';

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

@@ -1,7 +1,7 @@
 // Copyright 2024 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import type * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';

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

@@ -1,7 +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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';

package/front_end/ui/components/dialogs/ShortcutDialog.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.
+/* eslint-disable @devtools/enforce-custom-element-definitions-location */
 import './ButtonDialog.js';
 
 /* eslint-disable @devtools/no-lit-render-outside-of-view */

package/front_end/ui/components/diff_view/DiffView.ts

@@ -1,7 +1,7 @@
 // Copyright 2019 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Diff from '../../../third_party/diff/diff.js';

package/front_end/ui/components/expandable_list/ExpandableList.ts

@@ -1,7 +1,7 @@
 // Copyright 2021 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Lit from '../../lit/lit.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';

package/front_end/ui/components/highlighting/HighlightElement.ts

@@ -1,15 +1,19 @@
 // Copyright 2025 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/enforce-custom-element-definitions-location */
 
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 
 import {HighlightManager} from './HighlightManager.js';
+import {type HighlightChange, highlightRangesWithStyleClass, revertDomChanges} from './MarkupHighlight.js';
 
 export class HighlightElement extends HTMLElement {
-  static readonly observedAttributes = ['ranges', 'current-range'];
+  static readonly observedAttributes = ['ranges', 'current-range', 'type'];
   #ranges: TextUtils.TextRange.SourceRange[] = [];
   #currentRange: TextUtils.TextRange.SourceRange|undefined;
+  #type = 'css';
+  #markupChanges: HighlightChange[] = [];
 
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
     if (oldValue === newValue) {
@@ -22,8 +26,18 @@ export class HighlightElement extends HTMLElement {
       case 'current-range':
         this.#currentRange = parseRanges(newValue)[0];
         break;
+      case 'type':
+        this.#type = newValue || 'css';
+        break;
     }
-    HighlightManager.instance().set(this, this.#ranges, this.#currentRange);
+    queueMicrotask(() => {
+      if (this.#type === 'css') {
+        HighlightManager.instance().set(this, this.#ranges, this.#currentRange);
+      } else {
+        revertDomChanges(this.#markupChanges);
+        highlightRangesWithStyleClass(this, this.#ranges, 'highlight', this.#markupChanges);
+      }
+    });
   }
 }
 

package/front_end/ui/components/highlighting/MarkupHighlight.ts

@@ -0,0 +1,162 @@
+// Copyright 2025 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 TextUtils from '../../../models/text_utils/text_utils.js';
+
+export const highlightedSearchResultClassName = 'highlighted-search-result';
+export const highlightedCurrentSearchResultClassName = 'current-search-result';
+
+export interface HighlightChange {
+  node: Element|Text;
+  type: string;
+  oldText?: string;
+  newText?: string;
+  nextSibling?: Node;
+  parent?: Node;
+}
+
+export function highlightRangesWithStyleClass(
+    element: Element, resultRanges: TextUtils.TextRange.SourceRange[], styleClass: string,
+    changes?: HighlightChange[]): Element[] {
+  changes = changes || [];
+  const highlightNodes: Element[] = [];
+  const textNodes = element.childTextNodes();
+  const lineText = textNodes
+                       .map(function(node) {
+                         return node.textContent;
+                       })
+                       .join('');
+  const ownerDocument = element.ownerDocument;
+
+  if (textNodes.length === 0) {
+    return highlightNodes;
+  }
+
+  const nodeRanges: TextUtils.TextRange.SourceRange[] = [];
+  let rangeEndOffset = 0;
+  for (const textNode of textNodes) {
+    const range =
+        new TextUtils.TextRange.SourceRange(rangeEndOffset, textNode.textContent ? textNode.textContent.length : 0);
+    rangeEndOffset = range.offset + range.length;
+    nodeRanges.push(range);
+  }
+
+  let startIndex = 0;
+  for (let i = 0; i < resultRanges.length; ++i) {
+    const startOffset = resultRanges[i].offset;
+    const endOffset = startOffset + resultRanges[i].length;
+
+    while (startIndex < textNodes.length &&
+           nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset) {
+      startIndex++;
+    }
+    let endIndex = startIndex;
+    while (endIndex < textNodes.length && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset) {
+      endIndex++;
+    }
+    if (endIndex === textNodes.length) {
+      break;
+    }
+
+    const highlightNode = ownerDocument.createElement('span');
+    highlightNode.className = styleClass;
+    highlightNode.textContent = lineText.substring(startOffset, endOffset);
+
+    const lastTextNode = textNodes[endIndex];
+    const lastText = lastTextNode.textContent || '';
+    lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
+    changes.push({
+      node: (lastTextNode as Element),
+      type: 'changed',
+      oldText: lastText,
+      newText: lastTextNode.textContent,
+      nextSibling: undefined,
+      parent: undefined,
+    });
+
+    if (startIndex === endIndex && lastTextNode.parentElement) {
+      lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
+      changes.push({
+        node: highlightNode,
+        type: 'added',
+        nextSibling: lastTextNode,
+        parent: lastTextNode.parentElement,
+        oldText: undefined,
+        newText: undefined,
+      });
+      highlightNodes.push(highlightNode);
+
+      const prefixNode =
+          ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
+      lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
+      changes.push({
+        node: prefixNode,
+        type: 'added',
+        nextSibling: highlightNode,
+        parent: lastTextNode.parentElement,
+        oldText: undefined,
+        newText: undefined,
+      });
+    } else {
+      const firstTextNode = textNodes[startIndex];
+      const firstText = firstTextNode.textContent || '';
+      const anchorElement = firstTextNode.nextSibling;
+
+      if (firstTextNode.parentElement) {
+        firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
+        changes.push({
+          node: highlightNode,
+          type: 'added',
+          nextSibling: anchorElement || undefined,
+          parent: firstTextNode.parentElement,
+          oldText: undefined,
+          newText: undefined,
+        });
+        highlightNodes.push(highlightNode);
+      }
+
+      firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
+      changes.push({
+        node: (firstTextNode as Element),
+        type: 'changed',
+        oldText: firstText,
+        newText: firstTextNode.textContent,
+        nextSibling: undefined,
+        parent: undefined,
+      });
+
+      for (let j = startIndex + 1; j < endIndex; j++) {
+        const textNode = textNodes[j];
+        const text = textNode.textContent;
+        textNode.textContent = '';
+        changes.push({
+          node: (textNode as Element),
+          type: 'changed',
+          oldText: text || undefined,
+          newText: textNode.textContent,
+          nextSibling: undefined,
+          parent: undefined,
+        });
+      }
+    }
+    startIndex = endIndex;
+    nodeRanges[startIndex].offset = endOffset;
+    nodeRanges[startIndex].length = lastTextNode.textContent.length;
+  }
+  return highlightNodes;
+}
+
+export function revertDomChanges(domChanges: HighlightChange[]): void {
+  for (let i = domChanges.length - 1; i >= 0; --i) {
+    const entry = domChanges[i];
+    switch (entry.type) {
+      case 'added':
+        entry.node.remove();
+        break;
+      case 'changed':
+        entry.node.textContent = entry.oldText ?? null;
+        break;
+    }
+  }
+}

package/front_end/ui/components/highlighting/highlighting.ts

@@ -6,4 +6,11 @@ import './HighlightElement.js';
 
 import * as HighlightManager from './HighlightManager.js';
 
+export {
+  type HighlightChange,
+  highlightedCurrentSearchResultClassName,
+  highlightedSearchResultClassName,
+  highlightRangesWithStyleClass,
+  revertDomChanges
+} from './MarkupHighlight.js';
 export {HighlightManager};

package/front_end/ui/components/icon_button/FileSourceIcon.ts

@@ -1,9 +1,9 @@
 // Copyright 2024 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import './IconButton.js';
+import '../../kit/kit.js';
 
 import {Directives, html, render} from '../../lit/lit.js';
 

package/front_end/ui/components/icon_button/IconButton.ts

@@ -1,9 +1,9 @@
 // Copyright 2021 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import './Icon.js';
+import '../../kit/kit.js';
 
 import * as Lit from '../../lit/lit.js';
 

package/front_end/ui/components/icon_button/icon_button.ts

@@ -3,11 +3,9 @@
 // found in the LICENSE file.
 
 import * as FileSourceIcon from './FileSourceIcon.js';
-import * as Icon from './Icon.js';
 import * as IconButton from './IconButton.js';
 
 export {
   FileSourceIcon,
-  Icon,
   IconButton,
 };

package/front_end/ui/components/issue_counter/IssueCounter.ts

@@ -1,15 +1,15 @@
 // Copyright 2021 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import '../icon_button/icon_button.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import {html, render} from '../../lit/lit.js';
-import type * as IconButton from '../icon_button/icon_button.js';
 
 import issueCounterStyles from './issueCounter.css.js';
 

package/front_end/ui/components/issue_counter/IssueLinkIcon.ts

@@ -1,9 +1,9 @@
 // Copyright 2021 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/ui/components/legacy_wrapper/LegacyWrapper.ts

@@ -1,7 +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.
-/* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-imperative-dom-api, @devtools/enforce-custom-element-definitions-location*/
 
 import type * as Platform from '../../../core/platform/platform.js';
 import type * as UI from '../../legacy/legacy.js';

package/front_end/ui/components/linkifier/LinkifierImpl.ts

@@ -1,7 +1,7 @@
 // Copyright 2020 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-lit-render-outside-of-view */
+/* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
 import * as Platform from '../../../core/platform/platform.js';
 import * as Lit from '../../lit/lit.js';