Web Inspector: add contextmenu item to arbitrarily add HTML/Child to DOMTree

https://bugs.webkit.org/show_bug.cgi?id=179042

Reviewed by Joseph Pecoraro.

* Localizations/en.lproj/localizedStrings.js:

* UserInterface/Models/DOMNode.js:
(WI.DOMNode.prototype.insertAdjacentHTML.inspectedPage_node_insertAdjacentHTML):
(WI.DOMNode.prototype.insertAdjacentHTML):
Call-through to `insertAdjacentHTML` on the corresponding node in the inspected page.

* UserInterface/Views/DOMTreeElement.js:
(WI.DOMTreeElement):
(WI.DOMTreeElement.prototype._populateNodeContextMenu):
(WI.DOMTreeElement.prototype._startEditingAsHTML.dispose):
(WI.DOMTreeElement.prototype._startEditingAsHTML):
(WI.DOMTreeElement.prototype._insertAdjacentHTML.commitCallback):
(WI.DOMTreeElement.prototype._insertAdjacentHTML):
(WI.DOMTreeElement.prototype.updateTitle):
(WI.DOMTreeElement.prototype._singleTextChild):
(WI.DOMTreeElement.prototype._nodeTitleInfo):
(WI.DOMTreeElement.prototype._addHTML):
(WI.DOMTreeElement.prototype._addPreviousSibling):
(WI.DOMTreeElement.prototype._addNextSibling):
(WI.DOMTreeElement.prototype._editAsHTML):
Adjust where the editing element is placed depending on the options passed to `_editAsHTML`.
If the placement is as a child, put it inside the child list. If the placement is as a
sibling, place it before/after the selected TreeElement. Otherwise, add it as a child.

* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom):
(.tree-outline.dom li):
(.tree-outline.dom li:not(.editing)):
(.tree-outline.dom li.editing):
(body[dir=ltr] .tree-outline.dom li): Deleted.
(body[dir=rtl] .tree-outline.dom li): Deleted.
Don't add padding when the list item is being edited.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@224456 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Author: [email protected]

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,44 @@
+2017-11-04  Devin Rousso  <[email protected]>
+
+        Web Inspector: add contextmenu item to arbitrarily add HTML/Child to DOMTree
+        https://bugs.webkit.org/show_bug.cgi?id=179042
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+        * UserInterface/Models/DOMNode.js:
+        (WI.DOMNode.prototype.insertAdjacentHTML.inspectedPage_node_insertAdjacentHTML):
+        (WI.DOMNode.prototype.insertAdjacentHTML):
+        Call-through to `insertAdjacentHTML` on the corresponding node in the inspected page.
+
+        * UserInterface/Views/DOMTreeElement.js:
+        (WI.DOMTreeElement):
+        (WI.DOMTreeElement.prototype._populateNodeContextMenu):
+        (WI.DOMTreeElement.prototype._startEditingAsHTML.dispose):
+        (WI.DOMTreeElement.prototype._startEditingAsHTML):
+        (WI.DOMTreeElement.prototype._insertAdjacentHTML.commitCallback):
+        (WI.DOMTreeElement.prototype._insertAdjacentHTML):
+        (WI.DOMTreeElement.prototype.updateTitle):
+        (WI.DOMTreeElement.prototype._singleTextChild):
+        (WI.DOMTreeElement.prototype._nodeTitleInfo):
+        (WI.DOMTreeElement.prototype._addHTML):
+        (WI.DOMTreeElement.prototype._addPreviousSibling):
+        (WI.DOMTreeElement.prototype._addNextSibling):
+        (WI.DOMTreeElement.prototype._editAsHTML):
+        Adjust where the editing element is placed depending on the options passed to `_editAsHTML`.
+        If the placement is as a child, put it inside the child list. If the placement is as a
+        sibling, place it before/after the selected TreeElement. Otherwise, add it as a child.
+
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.tree-outline.dom):
+        (.tree-outline.dom li):
+        (.tree-outline.dom li:not(.editing)):
+        (.tree-outline.dom li.editing):
+        (body[dir=ltr] .tree-outline.dom li): Deleted.
+        (body[dir=rtl] .tree-outline.dom li): Deleted.
+        Don't add padding when the list item is being edited.
+
 2017-11-03  Nikita Vasilyev  <[email protected]>
 
         Web Inspector: Uncaught Exception: null is not an object (evaluating 'selector.specificity.map') (at SpreadsheetCSSStyleDeclarationSection.js:199:51)

Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -178,6 +178,7 @@ localizedStrings["Center Y"] = "Center Y";
 localizedStrings["Character Data"] = "Character Data";
 localizedStrings["Charge ‘%s’ to Callers"] = "Charge ‘%s’ to Callers";
 localizedStrings["Checked"] = "Checked";
+localizedStrings["Child"] = "Child";
 localizedStrings["Child Layers"] = "Child Layers";
 localizedStrings["Child added to "] = "Child added to ";
 localizedStrings["Children"] = "Children";
@@ -599,6 +600,7 @@ localizedStrings["Network Issue"] = "Network Issue";
 localizedStrings["Network Requests"] = "Network Requests";
 localizedStrings["Network:"] = "Network:";
 localizedStrings["New Tab"] = "New Tab";
+localizedStrings["Next Sibling"] = "Next Sibling";
 localizedStrings["No"] = "No";
 localizedStrings["No Accessibility Information"] = "No Accessibility Information";
 localizedStrings["No Application Cache information available"] = "No Application Cache information available";
@@ -698,6 +700,7 @@ localizedStrings["Prefer indent using:"] = "Prefer indent using:";
 localizedStrings["Pressed"] = "Pressed";
 localizedStrings["Pretty print"] = "Pretty print";
 localizedStrings["Preview"] = "Preview";
+localizedStrings["Previous Sibling"] = "Previous Sibling";
 localizedStrings["Primary Key"] = "Primary Key";
 localizedStrings["Primary Key \u2014 %s"] = "Primary Key \u2014 %s";
 localizedStrings["Priority"] = "Priority";

Source/WebInspectorUI/UserInterface/Models/DOMNode.js

@@ -500,6 +500,23 @@ WI.DOMNode = class DOMNode extends WI.Object
         DOMAgent.setOuterHTML(this.id, html, this._makeUndoableCallback(callback));
     }
 
+    insertAdjacentHTML(position, html)
+    {
+        if (this.nodeType() !== Node.ELEMENT_NODE)
+            return;
+
+        // FIXME: <https://webkit.org/b/179283> Web Inspector: support undo/redo of insertAdjacentHTML
+
+        WI.RemoteObject.resolveNode(this).then((object) => {
+            function inspectedPage_node_insertAdjacentHTML(position, html) {
+                this.insertAdjacentHTML(position, html);
+            }
+
+            object.callFunction(inspectedPage_node_insertAdjacentHTML, [position, html]);
+            object.release();
+        });
+    }
+
     removeNode(callback)
     {
         DOMAgent.removeNode(this.id, this._makeUndoableCallback(callback));

Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

@@ -51,6 +51,9 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
         this._boundNodeChangedAnimationEnd = this._nodeChangedAnimationEnd.bind(this);
 
         node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this);
+
+        this._ignoreSingleTextChild = false;
+        this._forceUpdateTitle = false;
     }
 
     // Static
@@ -825,7 +828,12 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
     {
         let node = this.representedObject;
 
-        // FIXME: <https://webkit.org/b/179042> Web Inspector: add contextmenu item to arbitrarily add HTML/Child to DOMTree
+        let isEditableNode = node.nodeType() === Node.ELEMENT_NODE && this.editable;
+        let forbiddenClosingTag = WI.DOMTreeElement.ForbiddenClosingTagElements.has(node.nodeNameInCorrectCase());
+        subMenus.add.appendItem(WI.UIString("Child"), this._addHTML.bind(this), forbiddenClosingTag || !isEditableNode);
+        subMenus.add.appendItem(WI.UIString("Previous Sibling"), this._addPreviousSibling.bind(this), !isEditableNode);
+        subMenus.add.appendItem(WI.UIString("Next Sibling"), this._addNextSibling.bind(this), !isEditableNode);
+
         subMenus.edit.appendItem(WI.UIString("HTML"), this._editAsHTML.bind(this), !this.editable);
         subMenus.copy.appendItem(WI.UIString("HTML"), this._copyHTML.bind(this), node.isPseudoElement());
         subMenus.delete.appendItem(WI.UIString("Node"), this.remove.bind(this), !this.editable);
@@ -950,7 +958,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
         }
 
         var tagName = tagNameElement.textContent;
-        if (WI.DOMTreeElement.EditTagBlacklist[tagName.toLowerCase()])
+        if (WI.DOMTreeElement.EditTagBlacklist.has(tagName.toLowerCase()))
             return false;
 
         if (WI.isBeingEdited(tagNameElement))
@@ -988,27 +996,39 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
         return true;
     }
 
-    _startEditingAsHTML(commitCallback, error, initialValue)
+    _startEditingAsHTML(commitCallback, options = {})
     {
-        if (error)
-            return;
         if (this._htmlEditElement && WI.isBeingEdited(this._htmlEditElement))
             return;
 
-        this._htmlEditElement = document.createElement("div");
-        this._htmlEditElement.textContent = initialValue;
+        if (options.hideExistingElements) {
+            let child = this.listItemElement.firstChild;
+            while (child) {
+                child.style.display = "none";
+                child = child.nextSibling;
+            }
+            if (this._childrenListNode)
+                this._childrenListNode.style.display = "none";
+        }
+
+        let positionInside = options.position === "afterbegin" || options.position === "beforeend";
+        if (positionInside && this._childrenListNode) {
+            this._htmlEditElement = document.createElement("li");
+
+            let referenceNode = options.position === "afterbegin" ? this._childrenListNode.firstElementChild : this._childrenListNode.lastElementChild;
+            this._childrenListNode.insertBefore(this._htmlEditElement, referenceNode);
+        } else if (options.position && !positionInside) {
+            this._htmlEditElement = document.createElement("li");
 
-        // Hide header items.
-        var child = this.listItemElement.firstChild;
-        while (child) {
-            child.style.display = "none";
-            child = child.nextSibling;
+            let targetNode = (options.position === "afterend" && this._childrenListNode) ? this._childrenListNode : this.listItemElement;
+            targetNode.insertAdjacentElement(options.position, this._htmlEditElement);
+        } else {
+            this._htmlEditElement = document.createElement("div");
+            this.listItemElement.appendChild(this._htmlEditElement);
         }
-        // Hide children item.
-        if (this._childrenListNode)
-            this._childrenListNode.style.display = "none";
-        // Append editor.
-        this.listItemElement.appendChild(this._htmlEditElement);
+
+        if (options.initialValue)
+            this._htmlEditElement.textContent = options.initialValue;
 
         this.updateSelectionArea();
 
@@ -1023,16 +1043,17 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
             this._editing = false;
 
             // Remove editor.
-            this.listItemElement.removeChild(this._htmlEditElement);
+            this._htmlEditElement.remove();
             this._htmlEditElement = null;
-            // Unhide children item.
-            if (this._childrenListNode)
-                this._childrenListNode.style.removeProperty("display");
-            // Unhide header items.
-            var child = this.listItemElement.firstChild;
-            while (child) {
-                child.style.removeProperty("display");
-                child = child.nextSibling;
+
+            if (options.hideExistingElements) {
+                if (this._childrenListNode)
+                    this._childrenListNode.style.removeProperty("display");
+                let child = this.listItemElement.firstChild;
+                while (child) {
+                    child.style.removeProperty("display");
+                    child = child.nextSibling;
+                }
             }
 
             this.updateSelectionArea();
@@ -1041,6 +1062,16 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
         var config = new WI.EditingConfig(commit.bind(this), dispose.bind(this));
         config.setMultiline(true);
         this._editing = WI.startEditing(this._htmlEditElement, config);
+
+        if (!isNaN(options.startPosition)) {
+            let range = document.createRange();
+            range.setStart(this._htmlEditElement.firstChild, options.startPosition);
+            range.collapse(true);
+
+            let selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
     }
 
     _attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection)
@@ -1220,7 +1251,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
     {
         // If we are editing, return early to prevent canceling the edit.
         // After editing is committed updateTitle will be called.
-        if (this._editing)
+        if (this._editing && !this._forceUpdateTitle)
             return;
 
         if (onlySearchQueryChanged) {
@@ -1388,7 +1419,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
                 var textChild = this._singleTextChild(node);
                 var showInlineText = textChild && textChild.nodeValue().length < WI.DOMTreeElement.MaximumInlineTextChildLength;
 
-                if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WI.DOMTreeElement.ForbiddenClosingTagElements[tagName]))) {
+                if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WI.DOMTreeElement.ForbiddenClosingTagElements.has(tagName)))) {
                     if (this.hasChildren) {
                         var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
                         textNodeElement.textContent = ellipsis;
@@ -1473,7 +1504,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
 
     _singleTextChild(node)
     {
-        if (!node)
+        if (!node || this._ignoreSingleTextChild)
             return null;
 
         var firstChild = node.firstChild;
@@ -1564,6 +1595,80 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
         this.representedObject.removeNode(removeNodeCallback);
     }
 
+    _insertAdjacentHTML(position, options = {})
+    {
+        let hasChildren = this.hasChildren;
+
+        let commitCallback = (value) => {
+            this._ignoreSingleTextChild = false;
+
+            if (!value.length) {
+                if (!hasChildren) {
+                    this._forceUpdateTitle = true;
+                    this.hasChildren = false;
+                    this._forceUpdateTitle = false;
+                }
+                return;
+            }
+
+            this.representedObject.insertAdjacentHTML(position, value);
+        };
+
+        if (position === "afterbegin" || position === "beforeend") {
+            this._ignoreSingleTextChild = true;
+            this.hasChildren = true;
+            this.expand();
+        }
+
+        this._startEditingAsHTML(commitCallback, Object.shallowMerge(options, {position}));
+    }
+
+    _addHTML(event)
+    {
+        let options = {};
+        switch (this.representedObject.nodeNameInCorrectCase()) {
+        case "ul":
+        case "ol":
+            options.initialValue = "<li></li>";
+            options.startPosition = 4;
+            break;
+        case "table":
+        case "thead":
+        case "tbody":
+        case "tfoot":
+            options.initialValue = "<tr></tr>";
+            options.startPosition = 4;
+            break;
+        case "tr":
+            options.initializing = "<td></td>";
+            options.startPosition = 4;
+            break;
+        }
+        this._insertAdjacentHTML("beforeend", options);
+    }
+
+    _addPreviousSibling(event)
+    {
+        let options = {};
+        let nodeName = this.representedObject.nodeNameInCorrectCase();
+        if (nodeName === "li" || nodeName === "tr" || nodeName === "th" || nodeName === "td") {
+            options.initialValue = `<${nodeName}></${nodeName}>`;
+            options.startPosition = nodeName.length + 2;
+        }
+        this._insertAdjacentHTML("beforebegin", options);
+    }
+
+    _addNextSibling(event)
+    {
+        let options = {};
+        let nodeName = this.representedObject.nodeNameInCorrectCase();
+        if (nodeName === "li" || nodeName === "tr" || nodeName === "th" || nodeName === "td") {
+            options.initialValue = `<${nodeName}></${nodeName}>`;
+            options.startPosition = nodeName.length + 2;
+        }
+        this._insertAdjacentHTML("afterend", options);
+    }
+
     _editAsHTML()
     {
         var treeOutline = this.treeOutline;
@@ -1598,7 +1703,15 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
             node.setOuterHTML(value, selectNode);
         }
 
-        node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
+        node.getOuterHTML((error, initialValue) => {
+            if (error)
+                return;
+
+            this._startEditingAsHTML(commitChange, {
+                initialValue,
+                hideExistingElements: true,
+            });
+        });
     }
 
     _copyHTML()
@@ -1775,20 +1888,16 @@ WI.DOMTreeElement.MaximumInlineTextChildLength = 80;
 
 // A union of HTML4 and HTML5-Draft elements that explicitly
 // or implicitly (for HTML5) forbid the closing tag.
-WI.DOMTreeElement.ForbiddenClosingTagElements = [
+WI.DOMTreeElement.ForbiddenClosingTagElements = new Set([
     "area", "base", "basefont", "br", "canvas", "col", "command", "embed", "frame",
     "hr", "img", "input", "keygen", "link", "meta", "param", "source",
     "wbr", "track", "menuitem"
-].keySet();
+]);
 
 // These tags we do not allow editing their tag name.
-WI.DOMTreeElement.EditTagBlacklist = [
+WI.DOMTreeElement.EditTagBlacklist = new Set([
     "html", "head", "body"
-].keySet();
-
-WI.DOMTreeElement.ChangeType = {
-    Attribute: "dom-tree-element-change-type-attribute"
-};
+]);
 
 WI.DOMTreeElement.BreakpointStatus = {
     None: Symbol("none"),