chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -65,7 +65,6 @@ import * as PanelsCommon from '../common/common.js';
 import * as Media from '../media/media.js';
 
 import * as ElementsComponents from './components/components.js';
-import {cssPath, jsPath, xPath} from './DOMPath.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
@@ -361,7 +360,7 @@ export interface Decoration {
 
 const DOM_UPDATE_ANIMATION_CLASS_NAME = 'dom-update-highlight';
 
-function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent) => void {
+export function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent) => void {
   return (event: KeyboardEvent) => {
     if (event.code === 'Enter' || event.code === 'Space') {
       cb(event);
@@ -882,10 +881,14 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ${hasAdorners ? html`<div class="adorner-container ${(input.editorState) ? 'hidden' : ''}">
         ${maybeRenderAdAdorner(input)}
         ${input.showViewSourceAdorner ? html`<devtools-adorner
+          class="clickable"
+          role=button
+          tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE)}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE).track({ click: true })}
           aria-label=${i18nString(UIStrings.viewSourceCode)}
           @click=${input.onViewSourceAdornerClick}
+          @keydown=${handleAdornerKeydown(input.onViewSourceAdornerClick)}
           ${adornerRef()}>
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}</span>
         </devtools-adorner>` : nothing}
@@ -1017,7 +1020,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           </span>
         </devtools-adorner>`: nothing}
         ${input.showStartingStyleAdorner ? html`<devtools-adorner
-          class="starting-style"
+          class="starting-style clickable"
+          role=button
+          tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE}
           jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE).track({ click: true })}
           active=${input.startingStyleAdornerActive}
@@ -1051,7 +1056,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           </span>
         </devtools-adorner>`: nothing}
         ${input.showScrollSnapAdorner ? html`<devtools-adorner
-          class="scroll-snap"
+          class="scroll-snap clickable"
+          role=button
+          tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP}
           jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP).track({ click: true })}
           active=${input.scrollSnapAdornerActive}
@@ -1093,6 +1100,15 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
 
 type View = typeof DEFAULT_VIEW;
 
+export interface InitialEditState {
+  attributeName?: string;
+  isNewAttribute?: boolean;
+  isProcessingInstruction?: boolean;
+  isTextNode?: boolean;
+  isEditAsHTML?: boolean;
+  editAsHTMLCallback?: (success: boolean) => void;
+}
+
 export class ElementsTreeWidget extends UI.Widget.Widget {
   static override readonly INJECT = [IssuesManager.DOMIssuesManager.DOMIssuesManager] as const;
   #domIssuesManager?: IssuesManager.DOMIssuesManager.DOMIssuesManager;
@@ -1106,6 +1122,8 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   disableEdits = false;
   showAIButton = false;
   isDOMNodeSelected = false;
+  initialEdit?: InitialEditState|null;
+  onInitialEditCompleted?: () => void;
 
   expand?: () => void;
   collapse?: () => void;
@@ -1115,22 +1133,18 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   childCount?: () => number;
   closingTagElement?: () => Element | null;
   updateShadowRootDepth?: (depth: number) => void;
-  computeLeftIndent?: () => number;
+  computeLeftIndent?: number|(() => number);
   setChildrenListElementVisible?: (visible: boolean) => void;
 
   findStartTagWidget?: () => ElementsTreeWidget | null;
   selectDOMNode?: (node: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => void;
   revealInTopLayer?: (node: SDK.DOMModel.DOMNode) => void;
-  showContextMenu?: (event: Event) => void;
+  showContextMenu?: (event: Event, widget?: ElementsTreeWidget) => void;
   populateTreeElement?: () => Promise<void>;
-  performCopyOrCut?: (isCut: boolean, node: SDK.DOMModel.DOMNode, isElement?: boolean) => void;
-  duplicateNode?: (node: SDK.DOMModel.DOMNode) => void;
-  pasteNode?: (node: SDK.DOMModel.DOMNode) => void;
-  canPaste?: (node: SDK.DOMModel.DOMNode) => boolean;
   toggleHideElement?: (node: SDK.DOMModel.DOMNode) => Promise<void>;
   isToggledToHidden?: (node: SDK.DOMModel.DOMNode) => boolean;
-  selectNodeAfterEdit?: (wasExpanded: boolean, error: string|null,
-                         newNode: SDK.DOMModel.DOMNode|null) => ElementsTreeWidget | null;
+  selectNodeAfterEdit?: (wasExpanded: boolean, error: string|null, newNode: SDK.DOMModel.DOMNode|null,
+                         moveDirection?: string) => void;
   runPendingUpdates?: () => void;
   focusOutline?: () => void;
   setMultilineEditing?: (multilineEditing: EditorHandles|null) => void;
@@ -1138,10 +1152,10 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #view: View;
 
-  private searchQuery: string|null;
+  #searchQuery: string|null = null;
   #expandedChildrenLimit: number;
-  private readonly decorationsThrottler: Common.Throttler.Throttler;
-  private inClipboard: boolean;
+  #decorationsThrottler = new Common.Throttler.Throttler(100);
+  inClipboard = false;
   #hovered: boolean;
   editing: EditorHandles|null;
   #editorRef?: TextEditor.TextEditor.TextEditor;
@@ -1181,6 +1195,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.#node = node;
     if (!this.isClosingTag) {
       void this.#updateAdorners();
+      this.updateDecorations();
     }
   }
 
@@ -1190,6 +1205,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   set expanded(expanded: boolean) {
     this.#expanded = expanded;
+    this.updateDecorations();
     this.requestUpdate();
   }
 
@@ -1211,6 +1227,18 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  get searchQuery(): string|null {
+    return this.#searchQuery;
+  }
+
+  set searchQuery(query: string|null) {
+    if (this.#searchQuery === query) {
+      return;
+    }
+    this.#searchQuery = query;
+    this.requestUpdate();
+  }
+
   get tagTypeContext(): TagTypeContext {
     if (this.isClosingTag) {
       return {tagType: TagType.CLOSING};
@@ -1245,9 +1273,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.#domIssuesManager = domIssuesManager;
     this.#view = view;
 
-    this.searchQuery = null;
     this.#expandedChildrenLimit = InitialChildrenLimit;
-    this.decorationsThrottler = new Common.Throttler.Throttler(100);
 
     this.inClipboard = false;
     this.#hovered = false;
@@ -1316,6 +1342,14 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #clearDOMNextUpdate = false;
 
+  override wasShown(): void {
+    super.wasShown();
+    if (!this.isClosingTag) {
+      void this.#updateAdorners();
+      this.updateDecorations();
+    }
+  }
+
   override performUpdate(): void {
     // Skip updating when in-place editing (not HTML editing indicated by the
     // editorState) is happening. Doing an update would break editing
@@ -1323,6 +1357,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     if (this.editing && !this.#editorState) {
       return;
     }
+    this.updateDecorations();
     if (this.#clearDOMNextUpdate) {
       this.#clearDOMNextUpdate = false;
       Lit.render(Lit.nothing, this.contentElement, {host: this});
@@ -1366,7 +1401,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       decorations: this.#decorations,
       descendantDecorations: this.#expanded ? [] : this.#descendantDecorations,
       decorationsTooltip: this.#decorationsTooltip,
-      indent: this.computeLeftIndent ? this.computeLeftIndent() : 0,
+      indent: this.#getLeftIndent(),
       showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !isClosingTag,
       scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
       showSlotAdorner: Boolean(this.node.assignedSlot) && !isClosingTag,
@@ -1388,7 +1423,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
           },
       topLayerIndex: this.node.topLayerIndex(),
       onViewSourceAdornerClick: this.disableEdits ? () => {} : this.revealHTMLInSources.bind(this),
-      onGutterClick: this.showContextMenu ? (event: Event) => this.showContextMenu?.(event) : () => {},
+      onGutterClick: this.showContextMenu ? (event: Event) => this.showContextMenu?.(event, this) : () => {},
       onContainerAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onContainerAdornerClick(event),
       onFlexAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onFlexAdornerClick(event),
       onGridAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onGridAdornerClick(event),
@@ -1426,6 +1461,30 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     if (this.#updateRecord) {
       this.#updateRecord = null;
     }
+    if (this.#searchQuery && !this.editing) {
+      this.#highlightSearchResults();
+    } else if (!this.#searchQuery && this.#highlights.length) {
+      this.hideSearchHighlights();
+    }
+    if (this.initialEdit) {
+      const edit = this.initialEdit;
+      this.initialEdit = null;
+      this.onInitialEditCompleted?.();
+      if (edit.isEditAsHTML) {
+        this.toggleEditAsHTML(edit.editAsHTMLCallback);
+      } else if (edit.isProcessingInstruction) {
+        this.startEditingProcessingInstructionValue();
+      } else if (edit.isTextNode) {
+        const textNode = this.contentElement.querySelector('.webkit-html-text-node');
+        if (textNode) {
+          this.startEditingTextNode(textNode);
+        }
+      } else if (edit.isNewAttribute) {
+        this.addNewAttribute();
+      } else if (edit.attributeName) {
+        this.triggerEditAttribute(edit.attributeName);
+      }
+    }
   }
 
   async #onCustomElementAdornerClick(event: Event): Promise<void> {
@@ -1913,7 +1972,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     return UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button');
   }
 
-  private startEditing(): boolean|undefined {
+  startEditing(): boolean|undefined {
     if (!this.isDOMNodeSelected) {
       return;
     }
@@ -2272,7 +2331,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     function resize(this: ElementsTreeWidget): void {
       if (this.visibleWidth) {
-        this.#editorWidth = this.visibleWidth() - (this.computeLeftIndent ? this.computeLeftIndent() : 0) - 30;
+        this.#editorWidth = this.visibleWidth() - this.#getLeftIndent() - 30;
         this.requestUpdate();
       }
     }
@@ -2285,7 +2344,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
 
     function dispose(this: ElementsTreeWidget): void {
-      if (!this.#editorRef) {
+      if (!this.editing && !this.#editorState) {
         return;
       }
       this.editing = null;
@@ -2311,6 +2370,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       moveDirection: string,
       ): void {
     this.editing = null;
+    this.#clearDOMNextUpdate = true;
 
     function moveToNextAttributeIfNeeded(this: ElementsTreeWidget, error?: string|null): void {
       if (error) {
@@ -2432,10 +2492,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       }
 
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
-      const newWidget = this.selectNodeAfterEdit(wasExpanded, error, newNode);
-      if (newWidget) {
-        moveToNextAttributeIfNeeded.call(newWidget);
-      }
+      this.selectNodeAfterEdit(wasExpanded, error, newNode, moveDirection);
     });
   }
 
@@ -2497,10 +2554,17 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.#highlightSearchResults();
   }
 
+  #getLeftIndent(): number {
+    if (typeof this.computeLeftIndent === 'function') {
+      return this.computeLeftIndent();
+    }
+    return this.computeLeftIndent ?? 0;
+  }
+
   updateDecorations(): void {
     // Important to keep the entire tree node row as a clickable area for that
     // node.
-    this.element.style.setProperty('--indent', (this.computeLeftIndent ? this.computeLeftIndent() : 0) + 'px');
+    this.element.style.setProperty('--indent', this.#getLeftIndent() + 'px');
 
     if (this.isClosingTag) {
       return;
@@ -2510,7 +2574,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       return;
     }
 
-    void this.decorationsThrottler.schedule(this.#updateDecorations.bind(this));
+    void this.#decorationsThrottler.schedule(this.#updateDecorations.bind(this));
   }
 
   #updateDecorations(): Promise<void> {
@@ -2552,15 +2616,23 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     return Promise.all(promises).then(updateDecorationsUI.bind(this));
 
     function updateDecorationsUI(this: ElementsTreeWidget): void {
-      this.#decorations = decorations;
-      this.#descendantDecorations = descendantDecorations;
+      if (!this.isShowing()) {
+        return;
+      }
 
       if (!decorations.length && !descendantDecorations.length) {
-        this.#decorationsTooltip = '';
-        this.requestUpdate();
+        if (this.#decorations.length || this.#descendantDecorations.length || this.#decorationsTooltip) {
+          this.#decorations = [];
+          this.#descendantDecorations = [];
+          this.#decorationsTooltip = '';
+          this.requestUpdate();
+        }
         return;
       }
 
+      this.#decorations = decorations;
+      this.#descendantDecorations = descendantDecorations;
+
       const tooltip: string[] = [];
       for (const decoration of decorations) {
         tooltip.push(decoration.title);
@@ -2623,53 +2695,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     void node.getOuterHTML().then(this.startEditingAsHTML.bind(this, commitChange, disposeCallback));
   }
 
-  copyCSSPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(cssPath(this.node, true));
-  }
-
-  copyJSPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(jsPath(this.node, true));
-  }
-
-  copyXPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.node, true));
-  }
-
-  copyFullXPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.node, false));
-  }
-
-  async copyStyles(): Promise<void> {
-    const node = this.node;
-    const cssModel = node.domModel().cssModel();
-    const cascade = await cssModel.cachedMatchedCascadeForNode(node);
-    if (!cascade) {
-      return;
-    }
-
-    const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
-    const lines: string[] = [];
-    for (const style of cascade.nodeStyles().reverse()) {
-      for (const property of style.leadingProperties()) {
-        if (!property.parsedOk || property.disabled || !property.activeInStyle() || property.implicit) {
-          continue;
-        }
-        if (cascade.isInherited(style) && !SDK.CSSMetadata.cssMetadata().isPropertyInherited(property.name)) {
-          continue;
-        }
-        if (style.parentRule?.isUserAgent()) {
-          continue;
-        }
-        if (cascade.propertyState(property) !== SDK.CSSMatchedStyles.PropertyState.ACTIVE) {
-          continue;
-        }
-        lines.push(`${indent}${property.name}: ${property.value};`);
-      }
-    }
-
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(lines.join('\n'));
-  }
-
   #highlightSearchResults(): void {
     this.hideSearchHighlights();
 
@@ -2805,6 +2830,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.widgetWrapper = document.createElement('div');
     this.widgetWrapper.style.display = 'contents';
     this.title = this.widgetWrapper;
+    this.listItemElement.draggable = true;
     this.widget = new ElementsTreeWidget();
     this.widget.isClosingTag = this.#isClosingTag;
     this.widget.node = this.nodeInternal;
@@ -2873,7 +2899,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.widget.hideSearchHighlights();
   }
   copyStyles(): Promise<void> {
-    return this.widget.copyStyles();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    return outline?.domTreeWidget?.copyStyles(this.nodeInternal) ?? Promise.resolve();
   }
   setInClipboard(inClipboard: boolean): void {
     this.widget.setInClipboard(inClipboard);
@@ -2894,6 +2921,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   highlightAttribute(name: string): void {
     this.widget.highlightAttribute(name);
   }
+  startEditing(): boolean|undefined {
+    return this.widget.startEditing();
+  }
   startEditingAttribute(attribute: Element, elementForSelection: Element): boolean {
     return this.widget.startEditingAttribute(attribute, elementForSelection);
   }
@@ -2904,16 +2934,20 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.widget.editAsHTML();
   }
   copyCSSPath(): void {
-    this.widget.copyCSSPath();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    outline?.domTreeWidget?.copyCSSPath(this.nodeInternal);
   }
   copyJSPath(): void {
-    this.widget.copyJSPath();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    outline?.domTreeWidget?.copyJSPath(this.nodeInternal);
   }
   copyXPath(): void {
-    this.widget.copyXPath();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    outline?.domTreeWidget?.copyXPath(this.nodeInternal);
   }
   copyFullXPath(): void {
-    this.widget.copyFullXPath();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    outline?.domTreeWidget?.copyFullXPath(this.nodeInternal);
   }
   hasEditableNode(): boolean {
     return this.widget.hasEditableNode();
@@ -2958,20 +2992,17 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.widget.revealInTopLayer = node => outline.revealInTopLayer(node);
       this.widget.showContextMenu = event => void outline.showContextMenu(this, event);
       this.widget.populateTreeElement = async () => await outline.populateTreeElement(this);
-      this.widget.performCopyOrCut = (isCut, node, isElement) => outline.performCopyOrCut(isCut, node, isElement);
-      this.widget.duplicateNode = node => outline.duplicateNode(node);
-      this.widget.pasteNode = node => outline.pasteNode(node);
-      this.widget.canPaste = node => outline.canPaste(node);
       this.widget.toggleHideElement = node => outline.toggleHideElement(node);
       this.widget.isToggledToHidden = node => outline.isToggledToHidden(node);
-      this.widget.selectNodeAfterEdit = (wasExpanded, error, newNode) => {
-        const newTreeItem = outline.selectNodeAfterEdit(wasExpanded, error, newNode);
-        return newTreeItem?.widget ?? null;
+      this.widget.selectNodeAfterEdit = (wasExpanded, error, newNode, moveDirection) => {
+        outline.domTreeWidget?.selectNodeAfterEdit(wasExpanded, error, newNode, moveDirection);
       };
       this.widget.runPendingUpdates = () => outline.runPendingUpdates();
       this.widget.focusOutline = () => outline.focus();
-      this.widget.setMultilineEditing = multilineEditing => outline.setMultilineEditing(multilineEditing);
-      this.widget.visibleWidth = () => outline.visibleWidth();
+      this.widget.setMultilineEditing = multilineEditing => {
+        outline.domTreeWidget?.setMultilineEditing(multilineEditing);
+      };
+      this.widget.visibleWidth = () => outline.domTreeWidget?.visibleWidth ?? outline.visibleWidth();
     }
   }
 
@@ -3031,6 +3062,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   override onenter(): boolean {
     this.#syncOutlineProperties();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    if (outline?.domTreeWidget) {
+      outline.domTreeWidget.startEditing(this.nodeInternal);
+      return true;
+    }
     return this.widget.onenter();
   }