chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -864,9 +864,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     input.onExpand,
     input.issues,
   )}</span>` : nothing}
-      ${input.isHovered || input.isSelected ? html`
-        <div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>
-      ` : nothing}
+      <div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>
       <div class=${classMap(gutterContainerClasses)}
            style="left: ${-input.indent}px"
            @click=${input.onGutterClick}>
@@ -1110,7 +1108,8 @@ export interface InitialEditState {
 }
 
 export class ElementsTreeWidget extends UI.Widget.Widget {
-  static override readonly INJECT = [IssuesManager.DOMIssuesManager.DOMIssuesManager] as const;
+  static override readonly INJECT: readonly[typeof IssuesManager.DOMIssuesManager.DOMIssuesManager] =
+      [IssuesManager.DOMIssuesManager.DOMIssuesManager] as const;
   #domIssuesManager?: IssuesManager.DOMIssuesManager.DOMIssuesManager;
 
   #node!: SDK.DOMModel.DOMNode;
@@ -1147,7 +1146,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
                          moveDirection?: string) => void;
   runPendingUpdates?: () => void;
   focusOutline?: () => void;
-  setMultilineEditing?: (multilineEditing: EditorHandles|null) => void;
+  setMultilineEditing?: (multilineEditing: EditorHandles|null, node?: SDK.DOMModel.DOMNode) => void;
   visibleWidth?: () => number;
 
   #view: View;
@@ -1292,6 +1291,20 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     this.editing = null;
     this.expandAllButtonElement = null;
+
+    this.contentElement.addEventListener('dblclick', (event: MouseEvent) => {
+      if (!this.node || this.editing || this.isClosingTag) {
+        return;
+      }
+      if (!this.isDOMNodeSelected) {
+        this.selectDOMNode?.(this.node, true);
+        this.isDOMNodeSelected = true;
+      }
+      const target = (event.composedPath()[0] || event.target) as Element;
+      if (this.startEditingTarget(target)) {
+        event.preventDefault();
+      }
+    });
   }
 
   static visibleShadowRoots(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {
@@ -1367,6 +1380,14 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     // editorState) is happening. Doing an update would break editing
     // (crbug.com/515639787).
     if (this.editing && !this.#editorState) {
+      if (this.initialEdit) {
+        const edit = this.initialEdit;
+        this.initialEdit = null;
+        this.onInitialEditCompleted?.();
+        if (edit.isEditAsHTML) {
+          edit.editAsHTMLCallback?.(false);
+        }
+      }
       return;
     }
     this.updateDecorations();
@@ -2242,13 +2263,14 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
   }
 
-  private async startEditingAsHTML(
-      commitCallback: (arg0: string, arg1: string) => void, disposeCallback: () => void,
-      maybeInitialValue: string|null): Promise<void> {
-    if (maybeInitialValue === null) {
+  private async startEditingAsHTML(commitCallback: (arg0: string, arg1: string) => void, disposeCallback: () => void,
+                                   maybeInitialValue: string|null|undefined): Promise<void> {
+    if (maybeInitialValue === null || maybeInitialValue === undefined) {
+      disposeCallback();
       return;
     }
     if (this.editing) {
+      disposeCallback();
       return;
     }
 
@@ -2337,7 +2359,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.requestUpdate();
     resize.call(this);
     this.editing = {commit: commit.bind(this), cancel: dispose.bind(this), resize: resize.bind(this)};
-    this.setMultilineEditing?.(this.editing);
+    this.setMultilineEditing?.(this.editing, this.node);
     await this.updateComplete;
     this.#editorRef?.focus();
 
@@ -2704,7 +2726,9 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
 
     const node = this.node;
-    void node.getOuterHTML().then(this.startEditingAsHTML.bind(this, commitChange, disposeCallback));
+    void node.getOuterHTML()
+        .then(this.startEditingAsHTML.bind(this, commitChange, disposeCallback))
+        .catch(disposeCallback);
   }
 
   #highlightSearchResults(): void {
@@ -3011,8 +3035,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       };
       this.widget.runPendingUpdates = () => outline.runPendingUpdates();
       this.widget.focusOutline = () => outline.focus();
-      this.widget.setMultilineEditing = multilineEditing => {
-        outline.domTreeWidget?.setMultilineEditing(multilineEditing);
+      this.widget.setMultilineEditing = (multilineEditing, n) => {
+        outline.domTreeWidget?.setMultilineEditing(multilineEditing, n ?? this.nodeInternal);
       };
       this.widget.visibleWidth = () => outline.domTreeWidget?.visibleWidth ?? outline.visibleWidth();
     }
@@ -3116,6 +3140,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.widget.onunbind();
   }
 
+  override ensureSelection(): void {
+    // Selection element is rendered in DEFAULT_VIEW via ElementsTreeWidget.
+  }
+
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
     treeElement.widget.animateOnDOMUpdate();
   }
@@ -3203,13 +3231,13 @@ export const InitialChildrenLimit = 500;
  * A union of HTML4 and HTML5-Draft elements that explicitly
  * or implicitly (for HTML5) forbid the closing tag.
  **/
-export const ForbiddenClosingTagElements = new Set<string>([
+export const ForbiddenClosingTagElements: Set<string> = new Set<string>([
   'area', 'base',  'basefont', 'br',   'canvas',   'col',  'command', 'embed',  'frame', 'hr',
   'img',  'input', 'keygen',   'link', 'menuitem', 'meta', 'param',   'source', 'track', 'wbr',
 ]);
 
 /** These tags we do not allow editing their tag name. **/
-export const EditTagBlocklist = new Set<string>(['html', 'head', 'body']);
+export const EditTagBlocklist: Set<string> = new Set<string>(['html', 'head', 'body']);
 
 export function convertUnicodeCharsToHTMLEntities(text: string): {
   text: string,