Introduce <devtools-highlight> custom element.

This change adds a new `<devtools-highlight>` custom element that uses the `HighlightManager` to apply highlighting based on `ranges` and `current-range` attributes. The `DeveloperResourcesListView` and `XMLView` are refactored to use this new component for displaying search and filter highlights.

Bug: 414630818
Change-Id: Ifb8073ecd177a2c28b70413c2712c28ad008d5d7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7002770
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

config/gni/devtools_grd_files.gni

@@ -2380,6 +2380,7 @@ grd_files_unbundled_sources = [
   "front_end/ui/components/helpers/directives.js",
   "front_end/ui/components/helpers/get-root-node.js",
   "front_end/ui/components/helpers/scheduled-render.js",
+  "front_end/ui/components/highlighting/HighlightElement.js",
   "front_end/ui/components/highlighting/HighlightManager.js",
   "front_end/ui/components/icon_button/FileSourceIcon.js",
   "front_end/ui/components/icon_button/Icon.js",

docs/ui_engineering.md

@@ -1299,3 +1299,25 @@ export class NodeIndicatorProvider implements UI.Toolbar.Provider {
   }
 }
 ```
+
+## Highlighting text
+
+### (UI.UIUtils.highlightRangesWithStyleClass or Highlighting.HighlightManager)
+
+Use the `<devtools-highlight>` component to highlight text ranges within its
+container. The component takes two attributes: `ranges`, which is a
+space-separated list of `offset,length` pairs, and `current-range`, which is a
+single `offset,length` pair to highlight with a different color.
+
+The component will automatically sort and merge the ranges provided.
+
+```html
+<div style="position:relative">
+  <devtools-highlight ranges="10,2 1,3 2,3" current-range="5,3">
+    This is some text to highlight.
+  </devtools-highlight>
+</div>
+```
+
+In this example, the ranges `1,3` and `2,3` will be merged into `1,4`. The
+ranges `10,2` and the current range `5,3` will also be highlighted.

front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -3,20 +3,19 @@
 // found in the LICENSE file.
 
 import '../../ui/legacy/components/data_grid/data_grid.js';
+import '../../ui/components/highlighting/highlighting.js';
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
 
 import developerResourcesListViewStyles from './developerResourcesListView.css.js';
 
-const {ref} = Directives;
-
 const UIStrings = {
   /**
    * @description Text for the status of something
@@ -87,7 +86,6 @@ const {withThousandsSeparator} = Platform.NumberUtilities;
 export interface ViewInput {
   items: SDK.PageResourceLoader.PageResource[];
   selectedItem: SDK.PageResourceLoader.PageResource|null;
-  highlight: (element: Element|undefined, textContent: string|undefined, columnId: string) => void;
   filters: TextUtils.TextUtils.ParsedFilter[];
   onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
   onSelect: (e: CustomEvent<HTMLElement>) => void;
@@ -98,6 +96,20 @@ export interface ViewInput {
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 const DEFAULT_VIEW: View = (input, _output, target) => {
+  function highlightRange(textContent: string|undefined, columnId: string): string {
+    if (!textContent) {
+      return '';
+    }
+    const filter = input.filters.find(filter => filter.key?.split(',')?.includes(columnId));
+    if (!filter?.regex) {
+      return '';
+    }
+    const matches = filter.regex.exec(textContent ?? '');
+    if (!matches?.length) {
+      return '';
+    }
+    return `${matches.index},${matches[0].length}`;
+  }
   // clang-format off
   render(html`
       <style>${developerResourcesListViewStyles}</style>
@@ -135,11 +147,11 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
                     item.success === false ? i18nString(UIStrings.failure) :
                                              i18nString(UIStrings.pending)}</td>
               <td title=${item.url} aria-label=${item.url}>
-                <div aria-hidden="true" part="url-outer"
-                     ${ref(e => input.highlight(e, item.url, 'url'))}>
+                <devtools-highlight aria-hidden="true" part="url-outer"
+                                    ranges=${highlightRange(item.url, 'url')}>
                   <div part="url-prefix">${splitURL ? splitURL[1] : item.url}</div>
                   <div part="url-suffix">${splitURL ? splitURL[2] : ''}</div>
-                </div>
+                </devtools-highlight>
               </td>
               <td title=${item.initiator.initiatorUrl || ''}
                   aria-label=${item.initiator.initiatorUrl || ''}
@@ -154,9 +166,9 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
                   item.duration !== null ? html`<span>${i18n.TimeUtilities.millisToString(item.duration)}</span>` : ''}</td>
               <td class="error-message">
                 ${item.errorMessage ? html`
-                <span ${ref(e => input.highlight(e, item.errorMessage, 'error-message'))}>
+                <devtools-highlight ranges=${highlightRange(item.errorMessage, 'error-message')}>
                   ${item.errorMessage}
-                </span>` : nothing}
+                </devtools-highlight>` : nothing}
               </td>
             </tr>`;
           })}
@@ -233,7 +245,6 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
       items: this.#items,
       selectedItem: this.#selectedItem,
       filters: this.#filters,
-      highlight: this.#highlight.bind(this),
       onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => {
         if (e.detail?.element) {
           this.#populateContextMenu(e.detail.menu, e.detail.element);
@@ -256,28 +267,4 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
     const output = {};
     this.#view(input, output, this.contentElement);
   }
-
-  #highlight(element: Element|undefined, textContent: string|undefined, columnId: string): void {
-    if (!element || !textContent) {
-      return;
-    }
-    const highlightContainers =
-        new Set<Element>([...element.querySelectorAll('.filter-highlight')].map(e => e.parentElement as Element));
-    for (const container of highlightContainers) {
-      container.textContent = container.textContent;
-    }
-    const filter = this.#filters.find(filter => filter.key?.split(',')?.includes(columnId));
-    if (!filter?.regex) {
-      return;
-    }
-    const matches = filter.regex.exec(element.textContent ?? '');
-    if (!matches?.length) {
-      return;
-    }
-    const range = new TextUtils.TextRange.SourceRange(matches.index, matches[0].length);
-    UI.UIUtils.highlightRangesWithStyleClass(element, [range], 'filter-highlight');
-    for (const el of element.querySelectorAll('.filter-highlight')) {
-      el.setAttribute('part', 'filter-highlight');
-    }
-  }
 }

front_end/ui/components/highlighting/BUILD.gn

@@ -9,7 +9,10 @@ import("../../../../scripts/build/typescript/typescript.gni")
 import("../visibility.gni")
 
 devtools_module("highlighting") {
-  sources = [ "HighlightManager.ts" ]
+  sources = [
+    "HighlightElement.ts",
+    "HighlightManager.ts",
+  ]
   deps = [ "../../../models/text_utils:bundle" ]
 }
 
@@ -24,7 +27,13 @@ devtools_entrypoint("bundle") {
 ts_library("unittests") {
   testonly = true
 
-  sources = [ "HighlightManager.test.ts" ]
+  sources = [
+    "HighlightElement.test.ts",
+    "HighlightManager.test.ts",
+  ]
 
-  deps = [ ":bundle" ]
+  deps = [
+    ":bundle",
+    "../../../testing",
+  ]
 }

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

@@ -0,0 +1,123 @@
+// 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';
+import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
+
+import * as Highlighting from './highlighting.js';
+
+describe('HighlightElement', () => {
+  let setStub: sinon.SinonStub;
+
+  beforeEach(() => {
+    setStub = sinon.stub(Highlighting.HighlightManager.HighlightManager.instance({forceNew: true}), 'set');
+  });
+
+  function createHighlightElement(): HTMLElement {
+    const element = document.createElement('devtools-highlight');
+    renderElementIntoDOM(element);
+    return element;
+  }
+
+  it('sets ranges on the highlight manager when the attribute is set', () => {
+    const element = createHighlightElement();
+    element.setAttribute('ranges', '1,2 3,4');
+
+    const expectedRanges = [
+      new TextUtils.TextRange.SourceRange(1, 6),
+    ];
+    sinon.assert.calledOnce(setStub);
+    const actualCall = setStub.getCall(0);
+    assert.strictEqual(actualCall.args[0], element);
+    assert.deepEqual(actualCall.args[1], expectedRanges);
+    assert.isUndefined(actualCall.args[2]);
+  });
+
+  it('sets current range on the highlight manager when the attribute is set', () => {
+    const element = createHighlightElement();
+    element.setAttribute('current-range', '5,6');
+
+    const currentRange = new TextUtils.TextRange.SourceRange(5, 6);
+    assert.isTrue(setStub.calledOnceWith(element, [], currentRange));
+  });
+
+  it('updates both ranges and current range on the highlight manager', () => {
+    const element = createHighlightElement();
+
+    element.setAttribute('ranges', '1,2 3,4');
+    const expectedRanges = [
+      new TextUtils.TextRange.SourceRange(1, 6),
+    ];
+    sinon.assert.calledOnce(setStub);
+    assert.deepEqual(setStub.getCall(0).args[1], expectedRanges);
+
+    setStub.resetHistory();
+
+    element.setAttribute('current-range', '5,6');
+    const expectedCurrentRange = new TextUtils.TextRange.SourceRange(5, 6);
+    sinon.assert.calledOnce(setStub);
+    const actualCall = setStub.getCall(0);
+    assert.strictEqual(actualCall.args[0], element);
+    assert.deepEqual(actualCall.args[1], expectedRanges);
+    assert.deepEqual(actualCall.args[2], expectedCurrentRange);
+  });
+
+  it('updates both current range and ranges on the highlight manager', () => {
+    const element = createHighlightElement();
+
+    element.setAttribute('current-range', '5,6');
+    const expectedCurrentRange = new TextUtils.TextRange.SourceRange(5, 6);
+    sinon.assert.calledOnce(setStub);
+    assert.deepEqual(setStub.getCall(0).args[2], expectedCurrentRange);
+
+    setStub.resetHistory();
+
+    element.setAttribute('ranges', '1,2 3,4');
+    const expectedRanges = [
+      new TextUtils.TextRange.SourceRange(1, 6),
+    ];
+    sinon.assert.calledOnce(setStub);
+    const actualCall = setStub.getCall(0);
+    assert.strictEqual(actualCall.args[0], element);
+    assert.deepEqual(actualCall.args[1], expectedRanges);
+    assert.deepEqual(actualCall.args[2], expectedCurrentRange);
+  });
+
+  it('handles empty range attributes', () => {
+    const element = createHighlightElement();
+
+    element.setAttribute('ranges', '');
+    assert.isTrue(setStub.calledOnceWith(element, [], undefined));
+  });
+
+  it('handles invalid range attributes', () => {
+    const element = createHighlightElement();
+
+    element.setAttribute('ranges', 'foo bar 1,2,3 4');
+    assert.isTrue(setStub.calledOnceWith(element, [], undefined));
+  });
+
+  it('sorts and merges ranges', () => {
+    const element = createHighlightElement();
+    element.setAttribute('ranges', '10,2 1,3 2,3');
+
+    const ranges = [
+      new TextUtils.TextRange.SourceRange(1, 4),
+      new TextUtils.TextRange.SourceRange(10, 2),
+    ];
+    assert.isTrue(setStub.calledOnceWith(element, ranges, undefined));
+  });
+
+  it('does not call set if attribute value does not change', () => {
+    const element = createHighlightElement();
+
+    element.setAttribute('ranges', '1,2');
+    sinon.assert.calledOnce(setStub);
+
+    setStub.resetHistory();
+
+    element.setAttribute('ranges', '1,2');
+    sinon.assert.notCalled(setStub);
+  });
+});

front_end/ui/components/highlighting/HighlightElement.ts

@@ -0,0 +1,77 @@
+// 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';
+
+import {HighlightManager} from './HighlightManager.js';
+
+export class HighlightElement extends HTMLElement {
+  static readonly observedAttributes = ['ranges', 'current-range'];
+  #ranges: TextUtils.TextRange.SourceRange[] = [];
+  #currentRange: TextUtils.TextRange.SourceRange|undefined;
+
+  attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
+    if (oldValue === newValue) {
+      return;
+    }
+    switch (name) {
+      case 'ranges':
+        this.#ranges = parseRanges(newValue);
+        break;
+      case 'current-range':
+        this.#currentRange = parseRanges(newValue)[0];
+        break;
+    }
+    HighlightManager.instance().set(this, this.#ranges, this.#currentRange);
+  }
+}
+
+function parseRanges(value: string|null): TextUtils.TextRange.SourceRange[] {
+  if (!value) {
+    return [];
+  }
+  const ranges = value.split(' ')
+                     .filter(rangeString => {
+                       const parts = rangeString.split(',');
+                       // A valid range string must have exactly two parts.
+                       if (parts.length !== 2) {
+                         return false;
+                       }
+                       // Both parts must be convertible to valid numbers.
+                       const num1 = Number(parts[0]);
+                       const num2 = Number(parts[1]);
+                       return !isNaN(num1) && !isNaN(num2);
+                     })
+                     .map(rangeString => {
+                       const parts = rangeString.split(',').map(part => Number(part));
+                       return new TextUtils.TextRange.SourceRange(parts[0], parts[1]);
+                     });
+  return sortAndMergeRanges(ranges);
+}
+
+function sortAndMergeRanges(ranges: TextUtils.TextRange.SourceRange[]): TextUtils.TextRange.SourceRange[] {
+  // Sort by start position.
+  ranges.sort((a, b) => a.offset - b.offset);
+
+  if (ranges.length === 0) {
+    return [];
+  }
+
+  // Merge overlapping ranges.
+  const merged = [ranges[0]];
+  for (let i = 1; i < ranges.length; i++) {
+    const last = merged[merged.length - 1];
+    const current = ranges[i];
+    if (current.offset <= last.offset + last.length) {
+      const newEnd = Math.max(last.offset + last.length, current.offset + current.length);
+      const newLength = newEnd - last.offset;
+      merged[merged.length - 1] = new TextUtils.TextRange.SourceRange(last.offset, newLength);
+    } else {
+      merged.push(current);
+    }
+  }
+  return merged;
+}
+
+customElements.define('devtools-highlight', HighlightElement);

front_end/ui/components/highlighting/highlighting.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './HighlightElement.js';
+
 import * as HighlightManager from './HighlightManager.js';
 
 export {HighlightManager};