chrome-devtools-frontend 1.0.1662289 → 1.0.1664496

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';
@@ -48,9 +55,14 @@ import {CustomPreviewComponent} from './CustomPreviewComponent.js';
 import {JavaScriptREPL} from './JavaScriptREPL.js';
 import objectPropertiesSectionStyles from './objectPropertiesSection.css.js';
 import objectValueStyles from './objectValue.css.js';
-import {RemoteObjectPreviewFormatter, renderNodeTitle} from './RemoteObjectPreviewFormatter.js';
+import {RemoteObjectPreviewFormatter, renderNodeTitle, renderTrustedType} from './RemoteObjectPreviewFormatter.js';
 
 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 = {
@@ -168,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
@@ -259,8 +263,8 @@ export class ObjectTreeExpansionTracker {
     if (!(node instanceof ObjectTreeNode)) {
       return undefined;
     }
-    return node.parent?.children?.internalProperties?.find(
-        p => p.name === '[[Prototype]]' && p.children?.properties?.includes(node));
+    return node.parent?.children?.internalProperties?.find(p => p.name === '[[Prototype]]' &&
+                                                               p.children?.properties?.includes(node));
   }
 
   static #keyType(node: ObjectTreeNodeBase): keyof NodeChildren|null {
@@ -397,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 {
@@ -431,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;
   }
@@ -447,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)) {
@@ -508,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);
@@ -563,29 +576,25 @@ 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 {};
       }
 
       const {properties: objectProperties, internalProperties: objectInternalProperties} =
-          await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(
-              this.object, true /* generatePreview */, true /* nonIndexedPropertiesOnly */);
+          await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(this.object, true /* generatePreview */,
+                                                                     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};
     }
@@ -604,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));
@@ -614,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};
   }
@@ -636,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,
                                                 })));
   }
 
@@ -647,21 +653,21 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     for (const property of properties) {
       if (property.property.isOwn) {
         if (property.property.getter) {
-          const getterProperty = new SDK.RemoteObject.RemoteObjectProperty(
-              'get ' + property.property.name, property.property.getter, false);
+          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);
+          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,
           }));
         }
       }
@@ -706,9 +712,8 @@ interface ArrayGroupRange {
 export class ArrayGroupTreeNode extends ObjectTreeNodeBase {
   readonly #object: SDK.RemoteObject.RemoteObject;
   readonly #range: ArrayGroupRange;
-  constructor(
-      object: SDK.RemoteObject.RemoteObject, range: ArrayGroupRange, parent: ObjectTreeNodeBase,
-      options: ObjectTreeOptions) {
+  constructor(object: SDK.RemoteObject.RemoteObject, range: ArrayGroupRange, parent: ObjectTreeNodeBase,
+              options: ObjectTreeOptions) {
     super(parent, options);
     this.#object = object;
     this.#range = range;
@@ -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 => {
@@ -879,13 +935,14 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
   titleElement: Element;
   skipProtoInternal?: boolean;
 
-  constructor(
-      object: SDK.RemoteObject.RemoteObject, title?: string|Element|null, linkifier?: Components.Linkifier.Linkifier,
-      showOverflow?: boolean, editable = true) {
+  constructor(object: SDK.RemoteObject.RemoteObject, title?: string|Element|null,
+              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);
@@ -896,7 +953,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     this.appendChild(this.#objectTreeElement);
     if (typeof title === 'string' || !title) {
       this.titleElement = this.element.createChild('span');
-      this.titleElement.textContent = title || '';
+      this.titleElement.textContent = title ? Platform.StringUtilities.escapeUnicodeAsText(title) : '';
     } else {
       this.titleElement = title;
       this.element.appendChild(title);
@@ -910,9 +967,8 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     this.rootElement().childrenListElement.classList.add('source-code', 'object-properties-section');
   }
 
-  static defaultObjectPresentation(
-      object: SDK.RemoteObject.RemoteObject, linkifier?: Components.Linkifier.Linkifier, skipProto?: boolean,
-      readOnly?: boolean): Element {
+  static defaultObjectPresentation(object: SDK.RemoteObject.RemoteObject, linkifier?: Components.Linkifier.Linkifier,
+                                   skipProto?: boolean, readOnly?: boolean): Element {
     const objectPropertiesSection =
         ObjectPropertiesSection.defaultObjectPropertiesSection(object, linkifier, skipProto, readOnly);
     if (!object.hasChildren) {
@@ -921,9 +977,9 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     return objectPropertiesSection.element;
   }
 
-  static defaultObjectPropertiesSection(
-      object: SDK.RemoteObject.RemoteObject, linkifier?: Components.Linkifier.Linkifier, skipProto?: boolean,
-      readOnly?: boolean): ObjectPropertiesSection {
+  static defaultObjectPropertiesSection(object: SDK.RemoteObject.RemoteObject,
+                                        linkifier?: Components.Linkifier.Linkifier, skipProto?: boolean,
+                                        readOnly?: boolean): ObjectPropertiesSection {
     const titleElement = document.createElement('span');
     titleElement.classList.add('source-code');
     const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(titleElement, {cssFile: objectValueStyles});
@@ -1001,24 +1057,25 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     if (name === null) {
       return element;
     }
-    if (/^\s|\s$|^$|\n/.test(name)) {
-      element.textContent = `"${name.replace(/\n/g, '\u21B5')}"`;
+    const escapedName = Platform.StringUtilities.escapeUnicodeAsText(name);
+    if (/^\s|\s$|^$|\n/.test(escapedName)) {
+      element.textContent = `"${escapedName.replace(/\n/g, '\u21B5')}"`;
       return element;
     }
     if (isPrivate) {
       const privatePropertyHash = document.createElement('span');
       privatePropertyHash.classList.add('private-property-hash');
-      privatePropertyHash.textContent = name[0];
+      privatePropertyHash.textContent = escapedName[0];
       element.appendChild(privatePropertyHash);
-      element.appendChild(document.createTextNode(name.substring(1)));
+      element.appendChild(document.createTextNode(escapedName.substring(1)));
       return element;
     }
-    element.textContent = name;
+    element.textContent = escapedName;
     return element;
   }
 
-  static valueElementForFunctionDescription(
-      description?: string, includePreview?: boolean, defaultName?: string, className?: string): LitTemplate {
+  static valueElementForFunctionDescription(description?: string, includePreview?: boolean, defaultName?: string,
+                                            className?: string): LitTemplate {
     const contents =
         (description: string, defaultName: string): {prefix: string, abbreviation: string, body: string} => {
           const text = description.replace(/^function [gs]et /, 'function ')
@@ -1095,17 +1152,17 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     }
   }
 
-  static createPropertyValueWithCustomSupport(
-      value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean,
-      linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty?: boolean, variableName?: string,
-      includeNullOrUndefined?: boolean): HTMLElement {
+  static createPropertyValueWithCustomSupport(value: SDK.RemoteObject.RemoteObject, wasThrown: boolean,
+                                              showPreview: boolean, linkifier?: Components.Linkifier.Linkifier,
+                                              isSyntheticProperty?: boolean, variableName?: string,
+                                              includeNullOrUndefined?: boolean): HTMLElement {
     if (value.customPreview()) {
       const result = (new CustomPreviewComponent(value)).element;
       result.classList.add('object-properties-section-custom-section');
       return result;
     }
-    return ObjectPropertiesSection.createPropertyValue(
-        value, wasThrown, showPreview, linkifier, isSyntheticProperty, variableName, includeNullOrUndefined);
+    return ObjectPropertiesSection.createPropertyValue(value, wasThrown, showPreview, linkifier, isSyntheticProperty,
+                                                       variableName, includeNullOrUndefined);
   }
 
   static getMemoryIcon(object: SDK.RemoteObject.RemoteObject, expression?: string): LitTemplate {
@@ -1132,10 +1189,9 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     element.appendChild(fragment);
   }
 
-  static createPropertyValue(
-      value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean,
-      linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty = false, variableName?: string,
-      includeNullOrUndefined?: boolean): HTMLElement {
+  static createPropertyValue(value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean,
+                             linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty = false,
+                             variableName?: string, includeNullOrUndefined?: boolean): HTMLElement {
     const propertyValue = document.createDocumentFragment();
     const type = value.type;
     const subtype = value.subtype;
@@ -1149,21 +1205,20 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
         if (rawLocation && linkifier) {
           return html`${linkifier.linkifyRawLocation(rawLocation, Platform.DevToolsPath.EmptyUrlString, 'value')}`;
         }
-        return html`<span class=value title=${description}>${'<' + i18nString(UIStrings.unknown) + '>'}</span>`;
+        const title = description || undefined;
+        return html`<span class=value title=${ifDefined(title)}>${'<' + i18nString(UIStrings.unknown) + '>'}</span>`;
       }
       if (type === 'string' && typeof description === 'string') {
-        const text = Platform.StringUtilities.escapeUnicode(JSON.stringify(description));
+        const text = Platform.StringUtilities.escapeUnicodeAsText(JSON.stringify(description));
         const tooLong = description.length > maxRenderableStringLength;
         return html`<span class="value object-value-string" title=${ifDefined(tooLong ? undefined : description)}>${
             tooLong ? widget(ExpandableTextPropertyValue, {text}) : text}</span>`;
       }
       if (type === 'object' && subtype === 'trustedtype') {
-        const text = `${className} '${description}'`;
+        const text = `${className} "${description}"`;
         const tooLong = text.length > maxRenderableStringLength;
         return html`<span class="value object-value-trustedtype" title=${ifDefined(tooLong ? undefined : text)}>${
-            tooLong ? widget(ExpandableTextPropertyValue, {text}) :
-                      html`${className} <span class=object-value-string title=${description}>${
-                          Platform.StringUtilities.escapeUnicode(JSON.stringify(description))}</span>`}</span>`;
+            tooLong ? widget(ExpandableTextPropertyValue, {text}) : renderTrustedType(description, className)}</span>`;
       }
       if (type === 'function') {
         return ObjectPropertiesSection.valueElementForFunctionDescription(description, undefined, undefined, 'value');
@@ -1194,10 +1249,9 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
 
     if (wasThrown) {
       // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(
-          html`<span class="error value">${
-              uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.exceptionS, {PH1: contents()})}</span>`,
-          propertyValue);
+      render(html`<span class="error value">${
+                 uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.exceptionS, {PH1: contents()})}</span>`,
+             propertyValue);
     } else {
       // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
       render(contents(), propertyValue);
@@ -1209,9 +1263,8 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     return child;
   }
 
-  static formatObjectAsFunction(
-      func: SDK.RemoteObject.RemoteObject, element: Element, linkify: boolean,
-      includePreview?: boolean): Promise<void> {
+  static formatObjectAsFunction(func: SDK.RemoteObject.RemoteObject, element: Element, linkify: boolean,
+                                includePreview?: boolean): Promise<void> {
     return func.debuggerModel().functionDetailsPromise(func).then(didGetDetails);
 
     function didGetDetails(response: SDK.DebuggerModel.FunctionDetails|null): void {
@@ -1230,16 +1283,14 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       }
       const valueElement = document.createDocumentFragment();
       // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-      render(
-          ObjectPropertiesSection.valueElementForFunctionDescription(func.description, includePreview, defaultName),
-          valueElement);
+      render(ObjectPropertiesSection.valueElementForFunctionDescription(func.description, includePreview, defaultName),
+             valueElement);
       element.appendChild(valueElement);
     }
   }
 
-  static isDisplayableProperty(
-      property: SDK.RemoteObject.RemoteObjectProperty,
-      parentProperty?: SDK.RemoteObject.RemoteObjectProperty): boolean {
+  static isDisplayableProperty(property: SDK.RemoteObject.RemoteObjectProperty,
+                               parentProperty?: SDK.RemoteObject.RemoteObjectProperty): boolean {
     if (!parentProperty?.synthetic) {
       return true;
     }
@@ -1272,9 +1323,9 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
           i18nString(UIStrings.expandRecursively),
           this.#objectTreeElement.expandRecursively.bind(this.#objectTreeElement, EXPANDABLE_MAX_DEPTH),
           {jslogContext: 'expand-recursively'});
-      contextMenu.viewSection().appendItem(
-          i18nString(UIStrings.collapseChildren),
-          this.#objectTreeElement.collapseChildren.bind(this.#objectTreeElement), {jslogContext: 'collapse-children'});
+      contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren),
+                                           this.#objectTreeElement.collapseChildren.bind(this.#objectTreeElement),
+                                           {jslogContext: 'collapse-children'});
     }
     void contextMenu.show();
   }
@@ -1321,8 +1372,9 @@ export function populateObjectTreeContextMenu(
 
   if (object.object instanceof SDK.RemoteObject.LocalJSONObject) {
     const {value} = object.object;
-    const propertyValue =
-        typeof value === 'object' ? Platform.StringUtilities.escapeUnicode(JSON.stringify(value, null, 2)) : value;
+    const propertyValue = typeof value === 'object' ?
+        Platform.StringUtilities.escapeUnicodeAsText(JSON.stringify(value, null, 2)) :
+        value;
     const copyValueHandler = (): void => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText((propertyValue as string | undefined));
@@ -1347,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>
     `;
@@ -1373,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;
@@ -1444,8 +1527,8 @@ class RootElement extends UI.TreeOutline.TreeElement {
     this.removeChildren();
     const treeOutline = (this.treeOutline as ObjectPropertiesSection | null);
     const skipProto = treeOutline ? Boolean(treeOutline.skipProtoInternal) : false;
-    return await ObjectPropertyTreeElement.populate(
-        this, this.object, skipProto, false, this.linkifier, this.emptyPlaceholder);
+    return await ObjectPropertyTreeElement.populate(this, this.object, skipProto, false, this.linkifier,
+                                                    this.emptyPlaceholder);
   }
 }
 
@@ -1467,6 +1550,7 @@ export interface ObjectPropertyViewInput {
   editingEnded(): unknown;
   editingCommitted(detail: string): unknown;
   node: ObjectTreeNode;
+  search?: UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>;
 }
 interface ObjectPropertyViewOutput {
   valueElement: Element|undefined;
@@ -1496,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;
@@ -1544,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)}
@@ -1557,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)}>${
@@ -1567,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);
@@ -1585,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);
@@ -1600,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();
   }
 
@@ -1647,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 = {
@@ -2010,8 +2111,9 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       contextMenu.appendApplicableItems(this.property.object);
       if (this.property.parent?.object instanceof SDK.RemoteObject.LocalJSONObject) {
         const {object: {value}} = this.property;
-        const propertyValue =
-            typeof value === 'object' ? Platform.StringUtilities.escapeUnicode(JSON.stringify(value, null, 2)) : value;
+        const propertyValue = typeof value === 'object' ?
+            Platform.StringUtilities.escapeUnicodeAsText(JSON.stringify(value, null, 2)) :
+            value;
         const copyValueHandler = (): void => {
           Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText((propertyValue as string | undefined));
@@ -2381,7 +2483,7 @@ export const EXPANDABLE_TEXT_DEFAULT_VIEW: ExpandableTextView = (input, output,
                  data-text=${i18nString(UIStrings.copy)}
                  jslog=${VisualLogging.action('copy').track({click: true})}
                  ></button>
-             </span>`,
+              </span>`,
       // clang-format on
       target);
 };