chrome-devtools-frontend 1.0.1657110 → 1.0.1660788

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -1,128 +1,222 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import type * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as AccessibilityTreeUtils from './AccessibilityTreeUtils.js';
 import accessibilityTreeViewStyles from './accessibilityTreeView.css.js';
 import {ElementsPanel} from './ElementsPanel.js';
 
+const {html, render, Directives: {ref}} = Lit;
+const UIStrings = {
+  /**
+   * @description Text for copying, copy should be used as a verb
+   */
+  copy: 'Copy',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/elements/AccessibilityTreeView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  nodes: AccessibilityTreeUtils.AXTreeNode[];
+  onNodeSelected: (node: SDK.AccessibilityModel.AccessibilityNode) => void;
+  onNodeHighlight: (node: SDK.AccessibilityModel.AccessibilityNode) => void;
+  onNodeClearHighlight: () => void;
+  onCopy: (node: SDK.AccessibilityModel.AccessibilityNode) => void;
+}
+
+export interface ViewOutput {
+  expandRoots?(): Promise<void>;
+  revealNode?(ancestors: string[], nodeId: string): Promise<void>;
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const treeData: TreeOutline.TreeOutline.TreeOutlineData<AccessibilityTreeUtils.AXTreeNodeData> = {
+    defaultRenderer: AccessibilityTreeUtils.accessibilityNodeRenderer,
+    tree: input.nodes,
+    filter: node => {
+      return node.ignored() || (node.role()?.value === 'generic' && !node.name()?.value) ?
+          TreeOutline.TreeOutline.FilterOption.FLATTEN :
+          TreeOutline.TreeOutline.FilterOption.SHOW;
+    },
+  };
+
+  const onTreeOutlineRef = (el?: Element): void => {
+    const treeOutline = el as TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>| undefined;
+    if (treeOutline) {
+      output.expandRoots = () => treeOutline.expandRecursively(1);
+      output.revealNode = (ancestors: string[], nodeId: string) =>
+          treeOutline.expandNodeIds(ancestors).then(() => treeOutline.focusNodeId(nodeId));
+    } else {
+      output.expandRoots = undefined;
+      output.revealNode = undefined;
+    }
+  };
+
+  let selectedAXNode: SDK.AccessibilityModel.AccessibilityNode|null = null;
+
+  const onItemSelected =
+      (event: TreeOutline.TreeOutline.ItemSelectedEvent<AccessibilityTreeUtils.AXTreeNodeData>): void => {
+        selectedAXNode = event.data.node.treeNodeData;
+        input.onNodeSelected(selectedAXNode);
+      };
+  const onItemMouseOver =
+      (event: TreeOutline.TreeOutline.ItemMouseOverEvent<AccessibilityTreeUtils.AXTreeNodeData>): void => {
+        input.onNodeHighlight(event.data.node.treeNodeData);
+      };
+  const onItemMouseOut = (): void => {
+    input.onNodeClearHighlight();
+  };
+  const onItemContextMenu =
+      (event: TreeOutline.TreeOutline.ItemContextMenuEvent<AccessibilityTreeUtils.AXTreeNodeData>): void => {
+        event.data.originalEvent.preventDefault();
+        event.data.originalEvent.stopPropagation();
+        const contextMenu = new UI.ContextMenu.ContextMenu(event.data.originalEvent);
+        const axNode = event.data.node.treeNodeData;
+        contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copy), () => input.onCopy(axNode),
+                                                  {jslogContext: 'copy'});
+        void contextMenu.show();
+      };
+
+  const onCopy = (event: ClipboardEvent): void => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (selectedAXNode) {
+      input.onCopy(selectedAXNode);
+    }
+  };
+
+  // clang-format off
+  render(html`
+    <div class="accessibility-tree-view-container" jslog=${VisualLogging.tree('full-accessibility')} @copy=${onCopy}>
+      <devtools-tree-outline .data=${treeData}
+                             @itemselected=${onItemSelected}
+                             @itemmouseover=${onItemMouseOver}
+                             @itemmouseout=${onItemMouseOut}
+                             @itemcontextmenu=${onItemContextMenu}
+                             ${ref(onTreeOutlineRef)}></devtools-tree-outline>
+    </div>
+  `, target);
+  // clang-format on
+};
 export class AccessibilityTreeView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.AccessibilityModel.AccessibilityModel> {
-  private accessibilityTreeComponent: TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>;
   private inspectedDOMNode: SDK.DOMModel.DOMNode|null = null;
   private root: SDK.AccessibilityModel.AccessibilityNode|null = null;
 
+  readonly #view: View;
   readonly #frameManager: SDK.FrameManager.FrameManager;
+  readonly #treeOperations: ViewOutput = {};
 
-  constructor(accessibilityTreeComponent: TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>,
+  constructor(view: View = DEFAULT_VIEW,
               frameManager: SDK.FrameManager.FrameManager = SDK.FrameManager.FrameManager.instance()) {
     super();
+    this.#view = view;
     this.registerRequiredCSS(accessibilityTreeViewStyles);
-    this.accessibilityTreeComponent = accessibilityTreeComponent;
     this.#frameManager = frameManager;
 
-    const container = this.contentElement.createChild('div');
-
-    container.classList.add('accessibility-tree-view-container');
-    container.setAttribute('jslog', `${VisualLogging.tree('full-accessibility')}`);
-    container.appendChild(this.accessibilityTreeComponent);
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.AccessibilityModel.AccessibilityModel, this,
+                                                             {scoped: true});
+  }
 
-    SDK.TargetManager.TargetManager.instance().observeModels(
-        SDK.AccessibilityModel.AccessibilityModel, this, {scoped: true});
+  #onNodeSelected = (axNode: SDK.AccessibilityModel.AccessibilityNode): void => {
+    if (!axNode.isDOMNode()) {
+      return;
+    }
+    const deferredNode = axNode.deferredDOMNode();
+    if (deferredNode) {
+      deferredNode.resolve(domNode => {
+        if (domNode) {
+          this.inspectedDOMNode = domNode;
+          void ElementsPanel.instance().revealAndSelectNode(
+              domNode, {showPanel: true, focusNode: true, highlightInOverlay: true});
+        }
+      });
+    }
+  };
 
-    // The DOM tree and accessibility are kept in sync as much as possible, so
-    // on node selection, update the currently inspected node and reveal in the
-    // DOM tree.
-    this.accessibilityTreeComponent.addEventListener('itemselected', (event: Event) => {
-      const evt = event as TreeOutline.TreeOutline.ItemSelectedEvent<AccessibilityTreeUtils.AXTreeNodeData>;
-      const axNode = evt.data.node.treeNodeData;
-      if (!axNode.isDOMNode()) {
-        return;
-      }
-      const deferredNode = axNode.deferredDOMNode();
-      if (deferredNode) {
-        deferredNode.resolve(domNode => {
-          if (domNode) {
-            this.inspectedDOMNode = domNode;
-            void ElementsPanel.instance().revealAndSelectNode(
-                domNode, {showPanel: true, focusNode: true, highlightInOverlay: true});
-          }
-        });
-      }
-    });
+  #onNodeHighlight = (axNode: SDK.AccessibilityModel.AccessibilityNode): void => {
+    axNode.highlightDOMNode();
+  };
 
-    this.accessibilityTreeComponent.addEventListener('itemmouseover', (event: Event) => {
-      const evt = event as TreeOutline.TreeOutline.ItemMouseOverEvent<AccessibilityTreeUtils.AXTreeNodeData>;
-      evt.data.node.treeNodeData.highlightDOMNode();
-    });
+  #onNodeClearHighlight = (): void => {
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
+  };
 
-    this.accessibilityTreeComponent.addEventListener('itemmouseout', () => {
-      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
-    });
-  }
+  #onCopy = async(axNode: SDK.AccessibilityModel.AccessibilityNode): Promise<void> => {
+    const text = await axNode.axNodeToText();
+    UI.UIUtils.copyTextToClipboard(text);
+  };
 
   override async wasShown(): Promise<void> {
     super.wasShown();
+    this.requestUpdate();
     await this.refreshAccessibilityTree();
     if (this.inspectedDOMNode) {
       await this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode);
     }
   }
 
-  async refreshAccessibilityTree(): Promise<void> {
+  override async performUpdate(): Promise<void> {
+    let nodes: AccessibilityTreeUtils.AXTreeNode[] = [];
     if (!this.root) {
       const frameId = this.#frameManager.getOutermostFrame()?.id;
-      if (!frameId) {
-        throw new Error('No top frame');
-      }
-      this.root = await AccessibilityTreeUtils.getRootNode(frameId, this.#frameManager);
-      if (!this.root) {
-        throw new Error('No root');
+      if (frameId) {
+        this.root = await SDK.AccessibilityModel.getRootNode(frameId, this.#frameManager);
       }
     }
-    await this.renderTree();
-    await this.accessibilityTreeComponent.expandRecursively(1);
+    if (this.root) {
+      nodes = await AccessibilityTreeUtils.sdkNodeToAXTreeNodes(this.root);
+    }
+    const input: ViewInput = {
+      nodes,
+      onNodeSelected: this.#onNodeSelected,
+      onNodeHighlight: this.#onNodeHighlight,
+      onNodeClearHighlight: this.#onNodeClearHighlight,
+      onCopy: this.#onCopy,
+    };
+    this.#view(input, this.#treeOperations, this.contentElement);
   }
 
-  async renderTree(): Promise<void> {
+  async refreshAccessibilityTree(): Promise<void> {
     if (!this.root) {
       const frameId = this.#frameManager.getOutermostFrame()?.id;
-      if (frameId) {
-        this.root = await AccessibilityTreeUtils.getRootNode(frameId, this.#frameManager);
+      if (!frameId) {
+        throw new Error('No top frame');
+      }
+      this.root = await SDK.AccessibilityModel.getRootNode(frameId, this.#frameManager);
+      if (!this.root) {
+        throw new Error('No root');
       }
     }
-    if (!this.root) {
-      return;
-    }
-    const treeData = await AccessibilityTreeUtils.sdkNodeToAXTreeNodes(this.root, this.#frameManager);
-    this.accessibilityTreeComponent.data = {
-      defaultRenderer: AccessibilityTreeUtils.accessibilityNodeRenderer,
-      tree: treeData,
-      filter: node => {
-        return node.ignored() || (node.role()?.value === 'generic' && !node.name()?.value) ?
-            TreeOutline.TreeOutline.FilterOption.FLATTEN :
-            TreeOutline.TreeOutline.FilterOption.SHOW;
-      },
-    };
+    this.requestUpdate();
+    await this.updateComplete;
+    await this.#treeOperations.expandRoots?.();
   }
 
   // Given a selected DOM node, asks the model to load the missing subtree from the root to the
   // selected node and then re-renders the tree.
   async loadSubTreeIntoAccessibilityModel(selectedNode: SDK.DOMModel.DOMNode): Promise<void> {
-    const ancestors = await AccessibilityTreeUtils.getNodeAndAncestorsFromDOMNode(selectedNode, this.#frameManager);
+    const ancestors = await SDK.AccessibilityModel.getNodeAndAncestorsFromDOMNode(selectedNode);
     const inspectedAXNode = ancestors.find(node => node.backendDOMNodeId() === selectedNode.backendNodeId());
     if (!inspectedAXNode) {
       return;
     }
-    await this.accessibilityTreeComponent.expandNodeIds(ancestors.map(node => node.getFrameId() + '#' + node.id()));
-    await this.accessibilityTreeComponent.focusNodeId(AccessibilityTreeUtils.getNodeId(inspectedAXNode));
+    this.requestUpdate();
+    await this.updateComplete;
+    await this.#treeOperations.revealNode?.(
+        ancestors.map(node => node.getFrameId() + '#' + node.id()),
+        inspectedAXNode.getNodeId(),
+    );
   }
 
   // A node was revealed through the elements picker.
@@ -160,16 +254,15 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
     }
     if (!data.root) {
       this.root = null;
-      void this.renderTree();
+      this.requestUpdate();
       return;
     }
     const outermostFrameId = this.#frameManager.getOutermostFrame()?.id;
     if (data.root?.getFrameId() !== outermostFrameId) {
-      void this.renderTree();
+      this.requestUpdate();
       return;
     }
     this.root = data.root;
-    void this.accessibilityTreeComponent.collapseAllNodes();
 
     void this.refreshAccessibilityTree();
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -43,11 +43,9 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import type {AXTreeNodeData} from './AccessibilityTreeUtils.js';
 import {AccessibilityTreeView} from './AccessibilityTreeView.js';
 import {ColorSwatchPopoverIcon} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
@@ -269,7 +267,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#settings.moduleSetting('dom-word-wrap').addChangeListener(this.domWordWrapSettingChanged.bind(this));
 
     crumbsContainer.id = 'elements-crumbs';
-    this.accessibilityTreeView = new AccessibilityTreeView(new TreeOutline.TreeOutline.TreeOutline<AXTreeNodeData>());
+    this.accessibilityTreeView = new AccessibilityTreeView();
     this.breadcrumbs = new ElementsComponents.ElementsBreadcrumbs.ElementsBreadcrumbs();
     this.breadcrumbs.addEventListener('breadcrumbsnodeselected', event => {
       this.crumbNodeSelected(event);
@@ -317,8 +315,9 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.setWordWrap(this.#settings.moduleSetting('dom-word-wrap').get());
 
     this.#targetManager.observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
-    this.#targetManager.addEventListener(SDK.TargetManager.Events.NAME_CHANGED,
-                                         event => this.targetNameChanged(event.data));
+    this.#targetManager.addModelListener(SDK.ResourceTreeModel.ResourceTreeModel,
+                                         SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.onPrimaryPageChanged,
+                                         this, {scoped: true});
     this.#settings.moduleSetting('show-ua-shadow-dom').addChangeListener(this.showUAShadowDOMChanged.bind(this));
     PanelCommon.ExtensionServer.ExtensionServer.instance().addEventListener(
         PanelCommon.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
@@ -467,10 +466,15 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     });
   }
 
-  private targetNameChanged(target: SDK.Target.Target): void {
-    const domModel = target.model(SDK.DOMModel.DOMModel);
-    if (!domModel) {
-      return;
+  private onPrimaryPageChanged(
+      event: Common.EventTarget.EventTargetEvent<
+          {frame: SDK.ResourceTreeModel.ResourceTreeFrame, type: SDK.ResourceTreeModel.PrimaryPageChangeType}>): void {
+    const {frame, type} = event.data;
+    if (type === SDK.ResourceTreeModel.PrimaryPageChangeType.ACTIVATION) {
+      const domModel = frame.resourceTreeModel().target().model(SDK.DOMModel.DOMModel);
+      if (domModel && !domModel.parentModel()) {
+        this.#domTreeWidget.show(this.domTreeContainer);
+      }
     }
   }
 
@@ -502,7 +506,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   override willHide(): void {
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     this.evaluateTrackingComputedStyleUpdatesForNode();
     this.#domTreeWidget.detach();
     super.willHide();
@@ -551,7 +555,9 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (!selectedNode) {
       return;
     }
-    void selectedNode.setAsInspectedNode();
+    if (selectedNode.canInspectNode()) {
+      void selectedNode.setAsInspectedNode();
+    }
     if (focus) {
       this.selectedNodeOnReset = selectedNode;
       this.hasNonDefaultSelectedNode = true;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -145,6 +145,11 @@ const UIStrings = {
    * @description Text to paste an element, paste should be used as a verb
    */
   paste: 'Paste',
+  /**
+   * @description Context menu item in the Edit as HTML editor that selects the editor's entire
+   * contents. "Select all" should be used as a verb.
+   */
+  selectAll: 'Select all',
   /**
    * @description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
    */
@@ -459,6 +464,7 @@ export interface ViewInput {
 
   isHovered: boolean;
   isSelected: boolean;
+  canInspect: boolean;
   showAiButton: boolean;
   aiButtonTitle?: string;
   onAiButtonClick: (e: Event) => void;
@@ -1173,7 +1179,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP}</span>
         </devtools-adorner>` : nothing}
       </div>`: nothing}
-      ${input.isSelected ? html`
+      ${input.isSelected && input.canInspect ? html`
         <span class="selected-hint ${input.editorState ? 'hidden' : ''}" title=${i18nString(UIStrings.useSInTheConsoleToReferToThis, { PH1: '$0' })} aria-hidden="true"></span>
       ` : nothing}
       ${input.showAiButton ? html`
@@ -1212,6 +1218,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #hovered: boolean;
   private editing: EditorHandles|null;
   #editorRef?: TextEditor.TextEditor.TextEditor;
+  // True while the Edit as HTML editor's own context menu is open, so that the
+  // focusout caused by the menu taking focus does not commit the edit.
+  #editAsHtmlMenuOpen = false;
   #editorState: CodeMirror.EditorState|null = null;
   #editorWidth: number|null = null;
   expandAllButtonElement: UI.TreeOutline.TreeElement|null;
@@ -1430,6 +1439,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
                                                                },
       isHovered: this.#hovered,
       isSelected: this.selected,
+      canInspect: this.node().canInspectNode(),
       showAiButton: Boolean(this.#hovered || this.selected) && this.node().nodeType() === Node.ELEMENT_NODE &&
           this.isAiButtonEnabled() && (this.treeOutline as ElementsTreeOutline)?.showAIButton,
       aiButtonTitle: this.isAiButtonEnabled() ?
@@ -1806,6 +1816,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       onTopLayerAdornerClick: () => {},
       isHovered: false,
       isSelected: false,
+      canInspect: false,
       showAiButton: false,
       onAiButtonClick: () => {},
       decorations: [],
@@ -2691,7 +2702,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         }),
         CodeMirror.EditorView.domEventHandlers({
           focusout: event => {
-            if (!this.#editorRef) {
+            if (!this.#editorRef || this.#editAsHtmlMenuOpen) {
               return;
             }
             // The relatedTarget is null when no element gains focus, e.g. switching windows.
@@ -2700,6 +2711,42 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
               this.editing?.commit();
             }
           },
+          contextmenu: (event, view) => {
+            // The editor virtualizes its content, so the browser's native
+            // "Select all" only reaches the rendered lines. Show a menu whose
+            // "Select all" spans the whole document, like Ctrl/Cmd+A.
+            event.consume(true);
+            const {from, to, empty} = view.state.selection.main;
+            const copy = (): void =>
+                Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(view.state.sliceDoc(from, to));
+            const contextMenu = new UI.ContextMenu.ContextMenu(event, {
+              onSoftMenuClosed: () => {
+                this.#editAsHtmlMenuOpen = false;
+              },
+            });
+            contextMenu.clipboardSection().appendItem(i18nString(UIStrings.cut), () => {
+              copy();
+              view.dispatch({changes: {from, to, insert: ''}});
+              view.focus();
+            }, {disabled: empty, jslogContext: 'cut'});
+            contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copy), () => {
+              copy();
+              view.focus();
+            }, {disabled: empty, jslogContext: 'copy'});
+            contextMenu.clipboardSection().appendItem(i18nString(UIStrings.paste), () => {
+              void navigator.clipboard.readText().then(text => {
+                view.dispatch(view.state.replaceSelection(text));
+                view.focus();
+              });
+            }, {jslogContext: 'paste'});
+            contextMenu.editSection().appendItem(i18nString(UIStrings.selectAll), () => {
+              view.dispatch({selection: {anchor: 0, head: view.state.doc.length}});
+              view.focus();
+            }, {jslogContext: 'select-all'});
+            this.#editAsHtmlMenuOpen = true;
+            void contextMenu.show();
+            return true;
+          },
         }),
       ],
     });

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1348,7 +1348,7 @@ export class ElementsTreeOutline extends
   }
 
   private onfocusout(_event: Event): void {
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
   private onmousedown(event: MouseEvent): void {
@@ -1401,7 +1401,7 @@ export class ElementsTreeOutline extends
 
   private onmouseleave(_event: MouseEvent): void {
     this.setHoverEffect(null);
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
   private ondragstart(event: DragEvent): boolean|undefined {
@@ -1429,7 +1429,7 @@ export class ElementsTreeOutline extends
     event.dataTransfer.effectAllowed = 'copyMove';
     this.treeElementBeingDragged = treeElement;
 
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
 
     return true;
   }
@@ -1790,7 +1790,7 @@ export class ElementsTreeOutline extends
     this.selectDOMNode(null, false);
     this.imagePreviewPopover.hide();
     delete this.clipboardNodeData;
-    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     this.updateRecords.clear();
   }
 

package/front_end/panels/elements/LayoutPane.ts

@@ -116,7 +116,7 @@ const nodeToLayoutElement = (node: SDK.DOMModel.DOMNode): LayoutElement => {
       node.highlight();
     },
     hideHighlight: () => {
-      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     },
     toggle: (_value: boolean) => {
       throw new Error('Not implemented');