chrome-devtools-frontend 1.0.1662965 → 1.0.1664496

package/front_end/ui/legacy/components/inline_editor/AnimationTimingUI.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Geometry from '../../../../models/geometry/geometry.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
@@ -12,6 +13,15 @@ import type {AnimationTimingModel} from './AnimationTimingModel.js';
 import {BezierUI} from './BezierUI.js';
 import {CSSLinearEasingModel, type Point} from './CSSLinearEasingModel.js';
 
+const UIStrings = {
+  /**
+   * @description Tooltip text for control points in the linear easing editor.
+   */
+  doubleClickToDelete: 'Double-click to delete',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/inline_editor/AnimationTimingUI.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 const DOUBLE_CLICK_DELAY = 500;
 
 interface Params {
@@ -130,6 +140,10 @@ class LinearEasingPresentation {
     circle.setAttribute('cx', String(controlX));
     circle.setAttribute('cy', String(controlY));
     circle.setAttribute('r', String(this.params.pointRadius));
+    // SVG sub-elements do not support tooltips via the 'title' attribute.
+    // Instead, a child <title> element must be appended to the shape.
+    const title = UI.UIUtils.createSVGChild(circle, 'title');
+    title.textContent = i18nString(UIStrings.doubleClickToDelete);
   }
 
   timingPointToPosition(point: Point): Position {
@@ -178,6 +192,10 @@ class LinearEasingUI {
   #doubleClickTimer?: number;
   #pointIndexForDoubleClick?: number;
   #mouseDownPosition?: {x: number, y: number};
+  /**
+   * The rendered SVG coordinate position of the dragged control point at the start of the drag gesture.
+   */
+  #dragStartPointPosition?: Position;
 
   #svg: Element;
 
@@ -214,6 +232,8 @@ class LinearEasingUI {
   #handleControlPointClick(event: MouseEvent, pointIndex: number): void {
     this.#selectedPointIndex = pointIndex;
     this.#mouseDownPosition = {x: event.x, y: event.y};
+    const controlPosition = this.#presentation.renderedPositions?.[pointIndex];
+    this.#dragStartPointPosition = controlPosition ? {...controlPosition} : undefined;
 
     // This is a workaround to understand whether the user double clicked
     // a point or not. The reason is, we also want to handle drag interactions
@@ -259,26 +279,20 @@ class LinearEasingUI {
   }
 
   #updatePointPosition(mouseX: number, mouseY: number): void {
-    if (this.#selectedPointIndex === undefined || this.#mouseDownPosition === undefined) {
-      return;
-    }
-
-    const controlPosition = this.#presentation.renderedPositions?.[this.#selectedPointIndex];
-    if (!controlPosition) {
+    if (this.#selectedPointIndex === undefined || this.#mouseDownPosition === undefined ||
+        this.#dragStartPointPosition === undefined) {
       return;
     }
 
+    // By calculating the position relative to the initial drag start position (#dragStartPointPosition)
+    // and the total drag distance (deltaX/deltaY), we avoid incremental coordinate drift and rounding
+    // errors that would accumulate if we updated the mouse starting point relative to the previous frame's position.
     const deltaX = mouseX - this.#mouseDownPosition.x;
     const deltaY = mouseY - this.#mouseDownPosition.y;
 
-    this.#mouseDownPosition = {
-      x: mouseX,
-      y: mouseY,
-    };
-
     const newPoint = {
-      x: controlPosition.x + deltaX,
-      y: controlPosition.y + deltaY,
+      x: this.#dragStartPointPosition.x + deltaX,
+      y: this.#dragStartPointPosition.y + deltaY,
     };
 
     this.#model.setPoint(this.#selectedPointIndex, this.#presentation.positionToTimingPoint(newPoint));

package/front_end/ui/legacy/components/inline_editor/BezierEditor.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../../../core/common/common.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -135,11 +136,13 @@ export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     if (!pivot) {
       return null;
     }
+    const logContext = VisualLogging.bezierPresetCategory()
+                           .track({click: true})
+                           .context(Platform.StringUtilities.toKebabCase(presetGroup[0].name));
 
     const presetElement = document.createElement('div');
     presetElement.classList.add('bezier-preset-category');
-    presetElement.setAttribute(
-        'jslog', `${VisualLogging.bezierPresetCategory().track({click: true}).context(presetGroup[0].name)}`);
+    presetElement.setAttribute('jslog', `${logContext}`);
     const iconElement = UI.UIUtils.createSVGChild(presetElement, 'svg', 'bezier-preset monospace');
     const category = {presets: presetGroup, presetIndex: 0, icon: presetElement};
     this.presetUI.draw(pivot, iconElement);

package/front_end/ui/legacy/components/inline_editor/CSSLinearEasingModel.ts

@@ -6,8 +6,17 @@ import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.
 
 const cssParser = CodeMirror.css.cssLanguage.parser;
 
+/**
+ * Represents a point in a linear easing function graph.
+ */
 export interface Point {
+  /**
+   * The timeline percentage fraction (0 to 100).
+   */
   input: number;
+  /**
+   * The progress value (typically between 0 and 1, but can exceed bounds for bounce/elastic effects).
+   */
   output: number;
 }
 
@@ -105,6 +114,10 @@ const KeywordToValue: Record<string, string> = {
   linear: 'linear(0 0%, 1 100%)',
 };
 
+/**
+ * Model representing a CSS `linear()` easing function, conforming to the CSS Easing Level 1 specification.
+ * It parses CSS linear easing text into a list of control points and manages point mutations.
+ */
 export class CSSLinearEasingModel {
   #points: Point[];
 
@@ -207,7 +220,17 @@ export class CSSLinearEasingModel {
     this.#points.splice(index, 1);
   }
 
+  /**
+   * Sets the timing point at the specified index, clamping its input value (percentage)
+   * to ensure it remains non-decreasing and within the bounds of neighboring points.
+   *
+   * @param index The index of the point to update.
+   * @param point The new timing point coordinates.
+   */
   setPoint(index: number, point: Point): void {
+    const minInput = index > 0 ? this.#points[index - 1].input : 0;
+    const maxInput = index < this.#points.length - 1 ? this.#points[index + 1].input : 100;
+    point.input = Math.max(minInput, Math.min(point.input, maxInput));
     this.#points[index] = point;
   }
 

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -34,12 +34,19 @@ 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 * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../../../generated/protocol.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
 import * as Highlighting from '../../../components/highlighting/highlighting.js';
 import * as TextEditor from '../../../components/text_editor/text_editor.js';
-import {Directives, html, type LitTemplate, nothing, render} from '../../../lit/lit.js';
+import {
+  type DirectiveResult,
+  Directives,
+  html,
+  type LitTemplate,
+  nothing,
+  render,
+} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 import type * as Components from '../utils/utils.js';
@@ -52,6 +59,10 @@ import {RemoteObjectPreviewFormatter, renderNodeTitle, renderTrustedType} from '
 
 export {objectPropertiesSectionStyles, objectValueStyles};
 
+export interface ObjectPropertySearchResult extends UI.TreeOutline.TreeSearchResult<ObjectTreeNodeBase> {
+  matchType: 'name'|'value';
+  range: TextUtils.TextRange.SourceRange;
+}
 const {widget} = UI.Widget;
 const {ref, repeat, ifDefined, classMap, until} = Directives;
 const UIStrings = {
@@ -169,15 +180,7 @@ export interface ObjectTreeOptions {
   readonly propertiesMode: ObjectPropertiesMode;
   readonly readOnly: boolean;
   readonly expansionTracker?: ObjectTreeExpansionTracker;
-}
-
-let cachedSortAlphabeticallySetting: Common.Settings.Setting<boolean>|undefined;
-export function sortPropertiesAlphabeticallySetting(): Common.Settings.Setting<boolean> {
-  if (!cachedSortAlphabeticallySetting) {
-    cachedSortAlphabeticallySetting =
-        Common.Settings.Settings.instance().createSetting('object-properties-sort-alphabetically', true);
-  }
-  return cachedSortAlphabeticallySetting;
+  readonly search?: UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>;
 }
 
 // WASM properties are index-based (e.g. locals[0], globals[1]); alphabetical
@@ -398,11 +401,15 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
   protected filter: {includeNullOrUndefinedValues: boolean, regex: RegExp|null}|null = null;
   protected extraProperties: ObjectTreeNode[] = [];
   #expanded = false;
+  #sortPropertiesAlphabeticallySetting: Common.Settings.Setting<boolean>;
 
   constructor(readonly parent: ObjectTreeNodeBase|undefined, options: ObjectTreeOptions) {
     super();
     this.filter = parent?.filter ?? null;
     this.options = {...options};
+    this.#sortPropertiesAlphabeticallySetting = parent ?
+        parent.#sortPropertiesAlphabeticallySetting :
+        Common.Settings.Settings.instance().createSetting('object-properties-sort-alphabetically', true);
   }
 
   get isWasm(): boolean {
@@ -432,6 +439,9 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     return this.options.propertiesMode;
   }
 
+  get search(): UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>|undefined {
+    return this.options.search;
+  }
   get includeNullOrUndefinedValues(): boolean {
     return this.filter?.includeNullOrUndefinedValues ?? true;
   }
@@ -448,37 +458,36 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     if (this.isWasm) {
       return false;
     }
-    return sortPropertiesAlphabeticallySetting().get();
+    return this.#sortPropertiesAlphabeticallySetting.get();
   }
 
   set sortPropertiesAlphabetically(value: boolean) {
-    const setting = sortPropertiesAlphabeticallySetting();
-    if (this.isWasm || setting.get() === value) {
+    if (this.isWasm || this.#sortPropertiesAlphabeticallySetting.get() === value) {
       return;
     }
-    setting.set(value);
+    this.#sortPropertiesAlphabeticallySetting.set(value);
     this.removeChildren();
   }
+  * treeNodeChildren(): Generator<ObjectTreeNodeBase> {
+    if (this.#children) {
+      yield* this.#children.properties ?? [];
+      yield* this.#children.arrayRanges ?? [];
+      yield* this.#children.internalProperties ?? [];
+    }
+  }
   // Performs a pre-order tree traversal over the populated children. If any children need to be populated, callers must
   // do that while walking (pre-order visitation enables that).
   * #walk(maxDepth = -1, filter?: (node: ObjectTreeNodeBase) => boolean): Generator<ObjectTreeNodeBase> {
     if (filter && !filter(this)) {
       return;
     }
-    function* walkChildren(children: ObjectTreeNodeBase[]|undefined): Generator<ObjectTreeNodeBase> {
-      if (children) {
-        for (const child of children) {
-          yield* child.#walk(Math.max(-1, maxDepth - 1), filter);
-        }
-      }
-    }
     yield this;
     if (maxDepth !== 0) {
-      yield* walkChildren(this.#children?.properties);
-      yield* walkChildren(this.#children?.arrayRanges);
-      yield* walkChildren(this.#children?.internalProperties);
+      for (const child of this.treeNodeChildren()) {
+        yield* child.#walk(Math.max(-1, maxDepth - 1), filter);
+      }
+    }
     }
-  }
 
   async expandRecursively(maxDepth: number): Promise<void> {
     for (const node of this.#walk(maxDepth, n => n.canExpandRecursively)) {
@@ -509,6 +518,9 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     this.dispatchEventToListeners(ObjectTreeNodeBase.Events.CHILDREN_CHANGED);
   }
 
+  match(_regex: RegExp): ObjectPropertySearchResult[] {
+    return [];
+  }
   removeChild(child: ObjectTreeNodeBase): void {
     remove(this.#children?.arrayRanges, child);
     remove(this.#children?.internalProperties, child);
@@ -564,9 +576,7 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
       const ranges = await arrayRangeGroups(object, 0, this.arrayLength - 1);
       const arrayRanges = ranges?.ranges.map(([fromIndex, toIndex, count]) => new ArrayGroupTreeNode(
                                                  object, {fromIndex, toIndex, count}, effectiveParent, {
-                                                   readOnly: this.readOnly,
-                                                   propertiesMode: this.propertiesMode,
-                                                   expansionTracker: this.options.expansionTracker,
+                                                   ...this.options,
                                                  }));
       if (!arrayRanges) {
         return {};
@@ -577,16 +587,14 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
                                                                      true /* nonIndexedPropertiesOnly */);
 
       const properties = objectProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
-                                                 readOnly: this.readOnly,
+                                                 ...this.options,
                                                  propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                                 expansionTracker: this.options.expansionTracker,
                                                }));
 
       const internalProperties =
           objectInternalProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
-                                          readOnly: this.readOnly,
+                                          ...this.options,
                                           propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                          expansionTracker: this.options.expansionTracker,
                                         }));
       return {arrayRanges, properties, internalProperties};
     }
@@ -605,9 +613,8 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     }
 
     const properties = objectProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
-                                               readOnly: this.readOnly,
+                                               ...this.options,
                                                propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                               expansionTracker: this.options.expansionTracker,
                                              }));
     properties?.push(...this.extraProperties);
     properties?.sort((a, b) => ObjectPropertiesSection.compareProperties(a, b, this.sortPropertiesAlphabetically));
@@ -615,9 +622,8 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
 
     const internalProperties =
         objectInternalProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
-                                        readOnly: this.readOnly,
+                                        ...this.options,
                                         propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                        expansionTracker: this.options.expansionTracker,
                                       }));
     return {properties, internalProperties, accessors};
   }
@@ -637,9 +643,8 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
 
   addExtraProperties(...properties: SDK.RemoteObject.RemoteObjectProperty[]): void {
     this.extraProperties.push(...properties.map(p => new ObjectTreeNode(p, this, {
-                                                  readOnly: this.readOnly,
+                                                  ...this.options,
                                                   propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-                                                  expansionTracker: this.options.expansionTracker,
                                                 })));
   }
 
@@ -651,18 +656,18 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
           const getterProperty = new SDK.RemoteObject.RemoteObjectProperty('get ' + property.property.name,
                                                                            property.property.getter, false);
           gettersAndSetters.push(new ObjectTreeNode(getterProperty, property.parent, {
+            ...options,
             propertiesMode: property.propertiesMode,
             readOnly: property.readOnly,
-            expansionTracker: options.expansionTracker,
           }));
         }
         if (property.property.setter) {
           const setterProperty = new SDK.RemoteObject.RemoteObjectProperty('set ' + property.property.name,
                                                                            property.property.setter, false);
           gettersAndSetters.push(new ObjectTreeNode(setterProperty, property.parent, {
+            ...options,
             propertiesMode: property.propertiesMode,
             readOnly: property.readOnly,
-            expansionTracker: options.expansionTracker,
           }));
         }
       }
@@ -739,9 +744,7 @@ export class ArrayGroupTreeNode extends ObjectTreeNodeBase {
         await arrayFragment.getAllProperties(false /* accessorPropertiesOnly */, true /* generatePreview */);
     arrayFragment.release();
     const properties = allProperties.properties?.map(p => new ObjectTreeNode(p, this, {
-                                                       propertiesMode: this.propertiesMode,
-                                                       readOnly: this.readOnly,
-                                                       expansionTracker: this.options.expansionTracker,
+                                                       ...this.options,
                                                      }));
     properties?.push(...this.extraProperties);
     properties?.sort((a, b) => ObjectPropertiesSection.compareProperties(a, b, this.sortPropertiesAlphabetically));
@@ -867,6 +870,59 @@ export class ObjectTreeNode extends ObjectTreeNodeBase {
     this.property.wasThrown = result.wasThrown || false;
     this.dispatchEventToListeners(ObjectTreeNodeBase.Events.VALUE_CHANGED);
   }
+  #getSearchableNameText(): string {
+    return /^\s|\s$|^$|\n/.test(this.property.name) ? `"${this.property.name.replace(/\n/g, '\u21B5')}"` :
+                                                      this.property.name;
+  }
+
+  #getSearchableValueText(): string {
+    const value = this.property.value;
+    if (!value || (value.type !== 'string' && value.type !== 'number') || value.description === undefined) {
+      return '';
+    }
+    if (value.type === 'string' && typeof value.description === 'string') {
+      const text = Platform.StringUtilities.safeEscapeUnicode(JSON.stringify(value.description));
+      if (value.description.length > maxRenderableStringLength) {
+        return text.slice(0, ExpandableTextPropertyValue.EXPANDABLE_MAX_LENGTH);
+      }
+      return text;
+    }
+    return value.description;
+  }
+
+  override match(regex: RegExp): ObjectPropertySearchResult[] {
+    const results: ObjectPropertySearchResult[] = [];
+
+    // 1. Match name against search text model
+    const nameText = this.#getSearchableNameText();
+    const nameGlobalRegex = regex.global ? regex : new RegExp(regex.source, regex.flags + 'g');
+    for (const m of nameText.matchAll(nameGlobalRegex)) {
+      results.push({
+        node: this,
+        isPostOrderMatch: false,
+        matchIndexInNode: results.length,
+        matchType: 'name',
+        range: new TextUtils.TextRange.SourceRange(m.index ?? 0, m[0].length),
+      });
+    }
+
+    // 2. Match value against search text model
+    const valueText = this.#getSearchableValueText();
+    if (valueText) {
+      const valueGlobalRegex = regex.global ? regex : new RegExp(regex.source, regex.flags + 'g');
+      for (const m of valueText.matchAll(valueGlobalRegex)) {
+        results.push({
+          node: this,
+          isPostOrderMatch: false,
+          matchIndexInNode: results.length,
+          matchType: 'value',
+          range: new TextUtils.TextRange.SourceRange(m.index ?? 0, m[0].length),
+        });
+      }
+    }
+
+    return results;
+  }
 }
 
 export const getObjectPropertiesSectionFrom = (element: Element): ObjectPropertiesSection|undefined => {
@@ -880,11 +936,13 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
   skipProtoInternal?: boolean;
 
   constructor(object: SDK.RemoteObject.RemoteObject, title?: string|Element|null,
-              linkifier?: Components.Linkifier.Linkifier, showOverflow?: boolean, editable = true) {
+              linkifier?: Components.Linkifier.Linkifier, showOverflow?: boolean, editable = true,
+              search?: UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>) {
     super();
     this.root = new ObjectTree(object, {
       readOnly: !editable,
       propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+      search,
     });
     if (!showOverflow) {
       this.setHideOverflow(true);
@@ -1341,15 +1399,16 @@ export function populateObjectTreeContextMenu(
       {checked: object.includeNullOrUndefinedValues, jslogContext: 'show-all'});
 }
 
-export function renderObjectTree(
+function renderObjectTreeInternal(
     objectTree: ObjectTree,
     linkifier?: Components.Linkifier.Linkifier,
     emptyPlaceholder?: string|null,
-    ): unknown {
+    classes: Record<string, boolean> = {},
+    ): LitTemplate|DirectiveResult {
   const entry = topLevelNodesCache.get(objectTree);
   if (entry && entry.linkifier === linkifier) {
     return html`
-      <ul class="source-code object-properties-section" role="group">
+      <ul class=${classMap(classes)} role="group">
         ${entry.nodes.map(node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
       </ul>
     `;
@@ -1367,13 +1426,43 @@ export function renderObjectTree(
     objectTree.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, listener);
 
     return html`
-      <ul class="source-code object-properties-section" role="group">
+      <ul class=${classMap(classes)} role="group">
         ${nodes.map(node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
       </ul>
     `;
   })();
 
-  return until(promise, html`<ul class="source-code object-properties-section" role="group"></ul>`);
+  return until(promise, html`<ul class=${classMap(classes)} role="group"></ul>`);
+}
+
+export function renderObjectTree(
+    objectTree: ObjectTree,
+    linkifier?: Components.Linkifier.Linkifier,
+    emptyPlaceholder?: string|null,
+    ): LitTemplate|DirectiveResult {
+  return renderObjectTreeInternal(objectTree, linkifier, emptyPlaceholder, {
+    'source-code': true,
+    'object-properties-section': true,
+  });
+}
+
+export function renderObjectPropertiesSection(
+    objectTree: ObjectTree,
+    title: LitTemplate,
+    linkifier?: Components.Linkifier.Linkifier,
+    ): LitTemplate {
+  const treeContent = renderObjectTreeInternal(objectTree, linkifier, undefined, {});
+
+  return html`<devtools-tree class="object-properties-section" show-selection-on-keyboard-focus .template=${html`
+    <ul role="tree" class="source-code object-properties-section">
+      <style>${objectValueStyles}</style>
+      <style>${objectPropertiesSectionStyles}</style>
+      <li role="treeitem" class="object-properties-section-root-element" ?open=${objectTree.expanded}>
+        ${title}
+        ${treeContent}
+      </li>
+    </ul>
+  `}></devtools-tree>`;
 }
 class RootElement extends UI.TreeOutline.TreeElement {
   private readonly object: ObjectTree;
@@ -1461,6 +1550,7 @@ export interface ObjectPropertyViewInput {
   editingEnded(): unknown;
   editingCommitted(detail: string): unknown;
   node: ObjectTreeNode;
+  search?: UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>;
 }
 interface ObjectPropertyViewOutput {
   valueElement: Element|undefined;
@@ -1490,6 +1580,17 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
       !property.value.customPreview() && property.value.subtype !== 'node' && property.value.type !== 'function' &&
       (property.value.type !== 'object' || property.value.preview);
 
+  const search = input.search;
+  const entries = search?.getResults(input.node) as ObjectPropertySearchResult[] | undefined;
+  const currentMatch = search?.currentMatch() as ObjectPropertySearchResult | undefined;
+  const isCurrentNode = currentMatch?.node === input.node;
+  const nameCurrent = (isCurrentNode && currentMatch?.matchType === 'name') ? currentMatch.range.cssValue() : '';
+  const valueCurrent = (isCurrentNode && currentMatch?.matchType === 'value') ? currentMatch.range.cssValue() : '';
+
+  const nameRanges =
+      (entries ?? []).filter(e => e !== currentMatch && e.matchType === 'name').map(e => e.range.cssValue()).join(' ');
+  const valueRanges =
+      (entries ?? []).filter(e => e !== currentMatch && e.matchType === 'value').map(e => e.range.cssValue()).join(' ');
   const value = (): LitTemplate|HTMLElement => {
     const valueRef = ref(e => {
       output.valueElement = e;
@@ -1538,9 +1639,9 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
         html`<span class=name-and-value><span
           ${ref(e => { output.nameElement = e; })}
           class=${nameClasses}
-          title=${input.node.path}>${property.private ?
+          title=${input.node.path}><devtools-highlight ranges=${nameRanges} current-range=${nameCurrent}>${property.private ?
             html`<span class="private-property-hash">${property.name[0]}</span>${
-            property.name.substring(1)}</span>` : quotedName}</span>${
+            property.name.substring(1)}` : quotedName}</devtools-highlight></span>${
               isInternalEntries ? nothing :
               html`<span class='separator'>: </span><devtools-prompt
                 @commit=${(e: UI.TextPrompt.TextPromptElement.CommitEvent) => input.editingCommitted(e.detail)}
@@ -1551,7 +1652,8 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
                 completions=${completionsId}
                 placeholder=${i18nString(UIStrings.stringIsTooLargeToEdit)}
                 ?editing=${input.editing}>
-                  ${input.expanded && isExpandable && property.value ?
+                  <devtools-highlight ranges=${valueRanges} current-range=${valueCurrent}>${
+                    input.expanded && isExpandable && property.value ?
                     html`<span
                       class="value object-value-${property.value.subtype || property.value.type}"
                       title=${ifDefined(property.value.description)}>${
@@ -1561,7 +1663,7 @@ export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, output,
                       property.synthetic ? nothing :
                         ObjectPropertiesSection.getMemoryIcon(property.value)}</span>` :
                     value()
-                  }
+                  }</devtools-highlight>
                   <datalist id=${completionsId}>${repeat(input.completions, c => html`<option>${c}</option>`)}</datalist>
                 </devtools-prompt></span>`}</span>`,
           target);
@@ -1579,6 +1681,7 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
   #expanded = false;
   #linkifier: Components.Linkifier.Linkifier|undefined;
   #editable = false;
+  #search?: UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>;
 
   constructor(target?: HTMLElement, view = OBJECT_PROPERTY_DEFAULT_VIEW) {
     super(target);
@@ -1594,10 +1697,13 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
       this.#property.removeEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
       this.#property.removeEventListener(ObjectTreeNodeBase.Events.FILTER_CHANGED, this.requestUpdate, this);
     }
+    this.#search?.removeEventListener(UI.TreeOutline.TreeSearch.Events.SEARCH_CHANGED, this.requestUpdate, this);
     this.#property = property;
     this.#property.addEventListener(ObjectTreeNodeBase.Events.VALUE_CHANGED, this.requestUpdate, this);
     this.#property.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.requestUpdate, this);
     this.#property.addEventListener(ObjectTreeNodeBase.Events.FILTER_CHANGED, this.requestUpdate, this);
+    this.#search = property.search;
+    this.#search?.addEventListener(UI.TreeOutline.TreeSearch.Events.SEARCH_CHANGED, this.requestUpdate, this);
     this.requestUpdate();
   }
 
@@ -1641,6 +1747,7 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
       onAutoComplete: this.#updateCompletions.bind(this),
       invokeGetter: this.#invokeGetter.bind(this),
       startEditing: this.startEditing.bind(this),
+      search: this.#search,
     };
     const that = this;
     const output: ObjectPropertyViewOutput = {

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -6,8 +6,8 @@
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Geometry from '../../../../models/geometry/geometry.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
 import * as TextPrompt from '../../../../ui/components/text_prompt/text_prompt.js';
 import {type LitTemplate, nothing, render} from '../../../lit/lit.js';

package/front_end/ui/legacy/components/source_frame/BinaryResourceViewFactory.ts

@@ -4,7 +4,7 @@
 
 import type * as Common from '../../../../core/common/common.js';
 import type * as Platform from '../../../../core/platform/platform.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 
 import {ResourceSourceFrame} from './ResourceSourceFrame.js';
 import {StreamingContentHexView} from './StreamingContentHexView.js';

package/front_end/ui/legacy/components/source_frame/FontView.ts

@@ -32,7 +32,7 @@
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import {Directives, html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';

package/front_end/ui/legacy/components/source_frame/ImageView.ts

@@ -35,7 +35,7 @@ import * as Common from '../../../../core/common/common.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 TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import {createIcon} from '../../../kit/kit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';