chrome-devtools-frontend 1.0.1548980 → 1.0.1549484

package/front_end/ui/legacy/TabbedPane.ts

@@ -10,6 +10,7 @@ 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 Geometry from '../../models/geometry/geometry.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
@@ -53,6 +54,10 @@ const UIStrings = {
    * @description Indicates that a tab contains a preview feature (i.e., a beta / experimental feature).
    */
   previewFeature: 'Preview feature',
+  /**
+   * @description Indicates that a tab contains annotation(s).
+   */
+  panelContainsAnnotation: 'This panel has one or more annotations',
   /**
    * @description Text to move a tab forwar.
    */
@@ -121,6 +126,11 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.currentDevicePixelRatio = window.devicePixelRatio;
     ZoomManager.instance().addEventListener(ZoomManagerEvents.ZOOM_CHANGED, this.zoomChanged, this);
     this.makeTabSlider();
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      Annotations.AnnotationRepository.instance().addEventListener(
+          Annotations.Events.ANNOTATION_ADDED, this.#onAnnotationAdded, this);
+    }
   }
 
   setAccessibleName(name: string): void {
@@ -555,6 +565,36 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.performUpdate();
   }
 
+  updateTabAnnotationIcons(): void {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      return;
+    }
+
+    const annotations = Annotations.AnnotationRepository.instance();
+    if (!annotations) {
+      return;
+    }
+
+    for (const tab of this.tabs) {
+      let primaryType = -1;
+      let secondaryType = -1;
+      switch (tab.id) {
+        case 'elements':
+          primaryType = Annotations.AnnotationType.ELEMENT_NODE;
+          secondaryType = Annotations.AnnotationType.STYLE_RULE;
+          break;
+        case 'network':
+          primaryType = Annotations.AnnotationType.NETWORK_REQUEST;
+          secondaryType = Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS;
+          break;
+      }
+
+      const showTabAnnotationIcon = annotations.getAnnotationsByType(primaryType).length > 0 ||
+          annotations.getAnnotationsByType(secondaryType).length > 0;
+      this.setTabAnnotationIcon(tab.id, showTabAnnotationIcon);
+    }
+  }
+
   override performUpdate(): void {
     if (!this.isShowing()) {
       return;
@@ -583,6 +623,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.updateWidths();
     this.updateTabsDropDown();
     this.updateTabSlider();
+    this.updateTabAnnotationIcons();
   }
 
   private adjustToolbarWidth(): void {
@@ -939,6 +980,17 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.automaticReorder = automatic;
   }
 
+  setTabAnnotationIcon(id: string, iconVisible: boolean): void {
+    const tab = this.tabsById.get(id);
+    if (tab) {
+      tab.tabAnnotationIcon = iconVisible;
+    }
+  }
+
+  #onAnnotationAdded(): void {
+    this.updateTabAnnotationIcons();
+  }
+
   private keyDown(event: KeyboardEvent): void {
     if (!this.currentTab) {
       return;
@@ -1009,6 +1061,7 @@ export interface EventTypes {
 export class TabbedPaneTab {
   closeable: boolean;
   previewFeature = false;
+  #tabAnnotationIcon = false;
   private readonly tabbedPane: TabbedPane;
   #id: string;
   #title: string;
@@ -1064,6 +1117,32 @@ export class TabbedPaneTab {
     return this.#jslogContext ?? (this.#id === 'console-view' ? 'console' : this.#id);
   }
 
+  get tabAnnotationIcon(): boolean {
+    return this.#tabAnnotationIcon;
+  }
+
+  set tabAnnotationIcon(iconVisible: boolean) {
+    if (this.#tabAnnotationIcon === iconVisible) {
+      return;
+    }
+    this.#tabAnnotationIcon = iconVisible;
+    if (!this.#tabElement) {
+      return;
+    }
+    const iconElement = this.#tabElement.querySelector('.ai-icon');
+    if (iconVisible) {
+      if (!iconElement) {
+        const closeButton = this.#tabElement.querySelector('.close-button');
+        this.#tabElement.insertBefore(this.createTabAnnotationIcon(), closeButton);
+      }
+    } else {
+      iconElement?.remove();
+    }
+    this.#tabElement.classList.toggle('ai', iconVisible);
+    delete this.measuredWidth;
+    this.tabbedPane.requestUpdate();
+  }
+
   isCloseable(): boolean {
     return this.closeable;
   }
@@ -1204,6 +1283,12 @@ export class TabbedPaneTab {
       tabElement.classList.add('preview');
     }
 
+    if (this.tabAnnotationIcon) {
+      const tabAnnotationIcon = this.createTabAnnotationIcon();
+      tabElement.appendChild(tabAnnotationIcon);
+      tabElement.classList.add('ai');
+    }
+
     if (this.closeable) {
       const closeIcon = this.createCloseIconButton();
       tabElement.appendChild(closeIcon);
@@ -1230,6 +1315,19 @@ export class TabbedPaneTab {
     return tabElement as HTMLElement;
   }
 
+  private createTabAnnotationIcon(): HTMLDivElement {
+    // TODO(finnur): Replace the ai-icon with the squiggly svg once it becomes available.
+    const iconContainer = document.createElement('div');
+    iconContainer.classList.add('ai-icon');
+    const tabAnnotationIcon = new IconButton.Icon.Icon();
+    tabAnnotationIcon.name = 'smart-assistant';
+    tabAnnotationIcon.classList.add('small');
+    iconContainer.appendChild(tabAnnotationIcon);
+    iconContainer.setAttribute('title', i18nString(UIStrings.panelContainsAnnotation));
+    iconContainer.setAttribute('aria-label', i18nString(UIStrings.panelContainsAnnotation));
+    return iconContainer;
+  }
+
   private createCloseIconButton(): Buttons.Button.Button {
     const closeButton = new Buttons.Button.Button();
     closeButton.data = {

package/front_end/ui/legacy/UIUtils.ts

@@ -41,7 +41,6 @@ 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 Geometry from '../../models/geometry/geometry.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../components/buttons/buttons.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as Lit from '../lit/lit.js';
@@ -125,9 +124,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/UIUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export const highlightedSearchResultClassName = 'highlighted-search-result';
-export const highlightedCurrentSearchResultClassName = 'current-search-result';
-
 export function installDragHandle(
     element: Element, elementDragStart: ((arg0: MouseEvent) => boolean)|null, elementDrag: (arg0: MouseEvent) => void,
     elementDragEnd: ((arg0: MouseEvent) => void)|null, cursor: string|null, hoverCursor?: string|null,
@@ -698,17 +694,6 @@ export class ElementFocusRestorer {
   }
 }
 
-export function highlightSearchResult(
-    element: Element, offset: number, length: number, domChanges?: HighlightChange[]): Element|null {
-  const result = highlightSearchResults(element, [new TextUtils.TextRange.SourceRange(offset, length)], domChanges);
-  return result.length ? result[0] : null;
-}
-
-export function highlightSearchResults(
-    element: Element, resultRanges: TextUtils.TextRange.SourceRange[], changes?: HighlightChange[]): Element[] {
-  return highlightRangesWithStyleClass(element, resultRanges, highlightedSearchResultClassName, changes);
-}
-
 export function runCSSAnimationOnce(element: Element, className: string): void {
   function animationEndCallback(): void {
     element.classList.remove(className);
@@ -725,166 +710,6 @@ export function runCSSAnimationOnce(element: Element, className: string): void {
   element.classList.add(className);
 }
 
-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;
-}
-
-/** Used in chromium/src/third_party/blink/web_tests/http/tests/devtools/components/utilities-highlight-results.js **/
-export function applyDomChanges(domChanges: HighlightChange[]): void {
-  for (let i = 0, size = domChanges.length; i < size; ++i) {
-    const entry = domChanges[i];
-    switch (entry.type) {
-      case 'added':
-        entry.parent?.insertBefore(entry.node, entry.nextSibling ?? null);
-        break;
-      case 'changed':
-        entry.node.textContent = entry.newText ?? null;
-        break;
-    }
-  }
-}
-
-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;
-    }
-  }
-}
-
 export function measurePreferredSize(element: Element, containerElement?: Element|null): Geometry.Size {
   const oldParent = element.parentElement;
   const oldNextSibling = element.nextSibling;
@@ -1802,15 +1627,6 @@ export interface Options {
   expand?: boolean;
 }
 
-export interface HighlightChange {
-  node: Element|Text;
-  type: string;
-  oldText?: string;
-  newText?: string;
-  nextSibling?: Node;
-  parent?: Node;
-}
-
 export const isScrolledToBottom = (element: Element): boolean => {
   // This code works only for 0-width border.
   // The scrollTop, clientHeight and scrollHeight are computed in double values internally.

package/front_end/ui/legacy/ViewManager.ts

@@ -10,6 +10,7 @@ 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 Root from '../../core/root/root.js';
+import type * as Foundation from '../../foundation/foundation.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
@@ -52,10 +53,12 @@ export const defaultOptionsForTabs = {
 
 export class PreRegisteredView implements View {
   private readonly viewRegistration: ViewRegistration;
+  private readonly universe?: Foundation.Universe.Universe;
   private widgetPromise: Promise<Widget>|null;
 
-  constructor(viewRegistration: ViewRegistration) {
+  constructor(viewRegistration: ViewRegistration, universe?: Foundation.Universe.Universe) {
     this.viewRegistration = viewRegistration;
+    this.universe = universe;
     this.widgetPromise = null;
   }
 
@@ -124,7 +127,10 @@ export class PreRegisteredView implements View {
 
   widget(): Promise<Widget> {
     if (this.widgetPromise === null) {
-      this.widgetPromise = this.viewRegistration.loadView();
+      if (!this.universe) {
+        throw new Error('Creating views via ViewManager requires a Foundation.Universe');
+      }
+      this.widgetPromise = this.viewRegistration.loadView(this.universe);
     }
     return this.widgetPromise;
   }
@@ -168,7 +174,11 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   private readonly locationNameByViewId = new Map<string, string>();
   private readonly locationOverrideSetting: Common.Settings.Setting<Record<string, string>>;
 
-  private constructor() {
+  private readonly preRegisteredViews: PreRegisteredView[] = [];
+
+  // TODO(crbug.com/458180550): Pass the universe unconditionally once tests no longer rely
+  //   on `instance()` to create ViewManagers lazily in after/afterEach blocks.
+  private constructor(universe?: Foundation.Universe.Universe) {
     super();
 
     // Read override setting for location
@@ -180,9 +190,9 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
     const viewsByLocation = new Map<ViewLocationValues|'none', PreRegisteredView[]>();
     for (const view of getRegisteredViewExtensions()) {
-      const location = view.location() || 'none';
+      const location = view.location || 'none';
       const views = viewsByLocation.get(location) || [];
-      views.push(view);
+      views.push(new PreRegisteredView(view, universe));
       viewsByLocation.set(location, views);
     }
 
@@ -209,6 +219,7 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         throw new Error(`Invalid view ID '${viewId}'`);
       }
       this.views.set(viewId, view);
+      this.preRegisteredViews.push(view);
       // Use the preferred user location if available
       const locationName = preferredExtensionLocations[viewId] || location;
       this.locationNameByViewId.set(viewId, locationName as string);
@@ -217,10 +228,11 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   static instance(opts: {
     forceNew: boolean|null,
+    universe?: Foundation.Universe.Universe,
   } = {forceNew: null}): ViewManager {
-    const {forceNew} = opts;
+    const {forceNew, universe} = opts;
     if (!viewManagerInstance || forceNew) {
-      viewManagerInstance = new ViewManager();
+      viewManagerInstance = new ViewManager(universe);
     }
 
     return viewManagerInstance;
@@ -241,6 +253,10 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return toolbar;
   }
 
+  getRegisteredViewExtensions(): PreRegisteredView[] {
+    return this.preRegisteredViews;
+  }
+
   locationNameForViewId(viewId: string): string {
     const locationName = this.locationNameByViewId.get(viewId);
     if (!locationName) {
@@ -1004,7 +1020,6 @@ class StackLocation extends Location implements ViewLocation {
 export {
   getLocalizedViewLocationCategory,
   getRegisteredLocationResolvers,
-  getRegisteredViewExtensions,
   maybeRemoveViewExtension,
   registerLocationResolver,
   registerViewExtension,

package/front_end/ui/legacy/ViewRegistration.ts

@@ -5,9 +5,9 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
+import type * as Foundation from '../../foundation/foundation.js';
 
 import type {ViewLocationResolver} from './View.js';
-import {PreRegisteredView} from './ViewManager.js';
 import type {Widget} from './Widget.js';
 
 const UIStrings = {
@@ -43,8 +43,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/ViewRegistration.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const registeredViewExtensions: PreRegisteredView[] = [];
-
 export const enum ViewPersistence {
   CLOSEABLE = 'closeable',
   PERMANENT = 'permanent',
@@ -115,7 +113,11 @@ export interface ViewRegistration {
   /**
    * Returns an instance of the class that wraps the view.
    * The common pattern for implementing this function is loading the module with the wrapping 'Widget'
-   * lazily loaded. As an example:
+   * lazily loaded.
+   * The DevTools universe is passed along, allowing `loadView` to retrieve necessary dependencies.
+   * Prefer passing individual dependencies one by one instead of forwarding the full universe. This
+   * makes testing easier.
+   * As an example:
    *
    * ```js
    * let loadedElementsModule;
@@ -129,15 +131,16 @@ export interface ViewRegistration {
    * }
    * UI.ViewManager.registerViewExtension({
    *   <...>
-   *   async loadView() {
+   *   async loadView(universe) {
    *      const Elements = await loadElementsModule();
-   *      return Elements.ElementsPanel.ElementsPanel.instance();
+   *      const pageResourceLoader = universe.context.get(SDK.PageResourceLoader.PageResourceLoader);
+   *      return new Elements.ElementsPanel.ElementsPanel(pageResourceLoader);
    *   },
    *   <...>
    * });
    * ```
    */
-  loadView: () => Promise<Widget>;
+  loadView: (universe: Foundation.Universe.Universe) => Promise<Widget>;
   /**
    * Used to sort the views that appear in a shared location.
    */
@@ -160,28 +163,25 @@ export interface ViewRegistration {
   featurePromotionId?: string;
 }
 
-const viewIdSet = new Set<string>();
+const registeredViewExtensions = new Map<string, ViewRegistration>();
+
 export function registerViewExtension(registration: ViewRegistration): void {
   const viewId = registration.id;
-  if (viewIdSet.has(viewId)) {
+  if (registeredViewExtensions.has(viewId)) {
     throw new Error(`Duplicate view id '${viewId}'`);
   }
-  viewIdSet.add(viewId);
-  registeredViewExtensions.push(new PreRegisteredView(registration));
+  registeredViewExtensions.set(viewId, registration);
 }
 
-export function getRegisteredViewExtensions(): PreRegisteredView[] {
-  return registeredViewExtensions.filter(
-      view => Root.Runtime.Runtime.isDescriptorEnabled({experiment: view.experiment(), condition: view.condition()}));
+export function getRegisteredViewExtensions(): ViewRegistration[] {
+  return registeredViewExtensions.values()
+      .filter(
+          view => Root.Runtime.Runtime.isDescriptorEnabled({experiment: view.experiment, condition: view.condition}))
+      .toArray();
 }
 
 export function maybeRemoveViewExtension(viewId: string): boolean {
-  const viewIndex = registeredViewExtensions.findIndex(view => view.viewId() === viewId);
-  if (viewIndex < 0 || !viewIdSet.delete(viewId)) {
-    return false;
-  }
-  registeredViewExtensions.splice(viewIndex, 1);
-  return true;
+  return registeredViewExtensions.delete(viewId);
 }
 
 const registeredLocationResolvers: LocationResolverRegistration[] = [];
@@ -202,10 +202,9 @@ export function getRegisteredLocationResolvers(): LocationResolverRegistration[]
 }
 
 export function resetViewRegistration(): void {
-  registeredViewExtensions.length = 0;
+  registeredViewExtensions.clear();
   registeredLocationResolvers.length = 0;
   viewLocationNameSet.clear();
-  viewIdSet.clear();
 }
 
 export const enum ViewLocationCategory {

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

@@ -37,6 +37,7 @@ 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 * 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 * as VisualLogging from '../../../visual_logging/visual_logging.js';
@@ -992,7 +993,7 @@ export const TREE_ELEMENT_DEFAULT_VIEW: TreeElementView = (input, output, target
 export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   property: ObjectTreeNode;
   override toggleOnClick: boolean;
-  private highlightChanges: UI.UIUtils.HighlightChange[];
+  private highlightChanges: Highlighting.HighlightChange[];
   private linkifier: Components.Linkifier.Linkifier|undefined;
   private readonly maxNumPropertiesToShow: number;
   readOnly!: boolean;
@@ -1115,7 +1116,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   setSearchRegex(regex: RegExp, additionalCssClassName?: string): boolean {
-    let cssClasses = UI.UIUtils.highlightedSearchResultClassName;
+    let cssClasses = Highlighting.highlightedSearchResultClassName;
     if (additionalCssClassName) {
       cssClasses += ' ' + additionalCssClassName;
     }
@@ -1144,7 +1145,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       match = regex.exec(content);
     }
     if (ranges.length) {
-      UI.UIUtils.highlightRangesWithStyleClass(element, ranges, cssClassName, this.highlightChanges);
+      Highlighting.highlightRangesWithStyleClass(element, ranges, cssClassName, this.highlightChanges);
     }
   }
 
@@ -1171,7 +1172,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   revertHighlightChanges(): void {
-    UI.UIUtils.revertDomChanges(this.highlightChanges);
+    Highlighting.revertDomChanges(this.highlightChanges);
     this.highlightChanges = [];
   }