Changeset 90460 in webkit

Timestamp:

Jul 6, 2011 8:25:40 AM (13 years ago)

Author:

pfeldman@chromium.org

Message:

2011-07-06 Pavel Feldman <​pfeldman@google.com>

Web Inspector: implement drag'n'drop in the elements panel for reordering nodes.
​https://bugs.webkit.org/show_bug.cgi?id=63990

Reviewed by Yury Semikhatsky.

• inspector/Inspector.json:
• inspector/InspectorDOMAgent.cpp: (WebCore::InspectorDOMAgent::moveTo):
• inspector/InspectorDOMAgent.h:
• inspector/front-end/DOMAgent.js: (WebInspector.DOMNode.prototype._removeChild): (WebInspector.DOMNode.prototype.ownerDocumentElement): (WebInspector.DOMNode.prototype.moveTo): (WebInspector.DOMAgent.prototype._childNodeRemoved):
• inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeOutline): (WebInspector.ElementsTreeOutline.prototype._ondragstart): (WebInspector.ElementsTreeOutline.prototype._ondragover): (WebInspector.ElementsTreeOutline.prototype._ondragleave): (WebInspector.ElementsTreeOutline.prototype._isValidDragSourceOrTarget): (WebInspector.ElementsTreeOutline.prototype._ondragend.callback): (WebInspector.ElementsTreeOutline.prototype._ondragend): (WebInspector.ElementsTreeOutline.prototype._clearDragOverTreeElementMarker): (WebInspector.ElementsTreeOutline.prototype.populateContextMenu.focusElement): (WebInspector.ElementsTreeOutline.prototype.populateContextMenu): (WebInspector.ElementsTreeElement.prototype.onattach):
• inspector/front-end/inspector.css: (.outline-disclosure li.elements-drag-over .selection):
• inspector/front-end/treeoutline.js: (TreeOutline.prototype.treeElementFromEvent):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/Inspector.json (modified) (1 diff)
• inspector/InspectorDOMAgent.cpp (modified) (1 diff)
• inspector/InspectorDOMAgent.h (modified) (1 diff)
• inspector/front-end/DOMAgent.js (modified) (3 diffs)
• inspector/front-end/ElementsTreeOutline.js (modified) (5 diffs)
• inspector/front-end/inspector.css (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2011-07-06  Pavel Feldman  <pfeldman@google.com>
+
+        Web Inspector: implement drag'n'drop in the elements panel for reordering nodes.
+        https://bugs.webkit.org/show_bug.cgi?id=63990
+
+        Reviewed by Yury Semikhatsky.
+
+        * inspector/Inspector.json:
+        * inspector/InspectorDOMAgent.cpp:
+        (WebCore::InspectorDOMAgent::moveTo):
+        * inspector/InspectorDOMAgent.h:
+        * inspector/front-end/DOMAgent.js:
+        (WebInspector.DOMNode.prototype._removeChild):
+        (WebInspector.DOMNode.prototype.ownerDocumentElement):
+        (WebInspector.DOMNode.prototype.moveTo):
+        (WebInspector.DOMAgent.prototype._childNodeRemoved):
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeOutline):
+        (WebInspector.ElementsTreeOutline.prototype._ondragstart):
+        (WebInspector.ElementsTreeOutline.prototype._ondragover):
+        (WebInspector.ElementsTreeOutline.prototype._ondragleave):
+        (WebInspector.ElementsTreeOutline.prototype._isValidDragSourceOrTarget):
+        (WebInspector.ElementsTreeOutline.prototype._ondragend.callback):
+        (WebInspector.ElementsTreeOutline.prototype._ondragend):
+        (WebInspector.ElementsTreeOutline.prototype._clearDragOverTreeElementMarker):
+        (WebInspector.ElementsTreeOutline.prototype.populateContextMenu.focusElement):
+        (WebInspector.ElementsTreeOutline.prototype.populateContextMenu):
+        (WebInspector.ElementsTreeElement.prototype.onattach):
+        * inspector/front-end/inspector.css:
+        (.outline-disclosure li.elements-drag-over .selection):
+        * inspector/front-end/treeoutline.js:
+        (TreeOutline.prototype.treeElementFromEvent):
+
 2011-07-06  Andras Becsi  <abecsi@webkit.org>
 

trunk/Source/WebCore/inspector/Inspector.json

@@ -1016 +1016 @@
                 ],
                 "description": "Returns attributes for the specified nodes."
+            },
+            {
+                "name": "moveTo",
+                "parameters": [
+                    { "name": "nodeId", "type": "integer", "description": "Id of the node to drop." },
+                    { "name": "targetNodeId", "type": "integer", "description": "Id of the node to drop into." },
+                    { "name": "anchorNodeId", "type": "integer", "optional": true, "description": "Drop node before given one." }
+                ],
+                "returns": [
+                    { "name": "nodeId", "type": "integer", "description": "New id of the moved node." }
+                ],
+                "description": "Moves node into the new container, places it before the given anchor."
             }
         ],

trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp

@@ -1033 +1033 @@
 }
 
+void InspectorDOMAgent::moveTo(ErrorString* error, int nodeId, int targetNodeId, const int* const anchorNodeId, int* newNodeId)
+{
+    Element* element = assertElement(error, nodeId);
+    if (!element)
+        return;
+
+    Element* targetElement = assertElement(error, targetNodeId);
+    if (!targetElement)
+        return;
+
+    Element* anchorElement = 0;
+    if (anchorNodeId && *anchorNodeId) {
+        anchorElement = assertElement(error, *anchorNodeId);
+        if (!anchorElement)
+            return;
+        if (anchorElement->parentNode() != targetElement) {
+            *error = "Anchor node must be child of the target node.";
+            return;
+        }
+    }
+
+    ExceptionCode ec = 0;
+    bool success = targetElement->insertBefore(element, anchorElement, ec);
+    if (ec || !success) {
+        *error = "Could not drop node.";
+        return;
+    }
+    *newNodeId = pushNodePathToFrontend(element);
+}
+
 void InspectorDOMAgent::resolveNode(ErrorString* error, int nodeId, const String* const objectGroup, RefPtr<InspectorObject>* result)
 {

trunk/Source/WebCore/inspector/InspectorDOMAgent.h

@@ -137 +137 @@
     void highlightFrame(ErrorString*, const String& frameId);
     void hideFrameHighlight(ErrorString* error) { hideHighlight(error); }
+    void moveTo(ErrorString*, int nodeId, int targetNodeId, const int* const anchorNodeId, int* newNodeId);
+
     Node* highlightedNode() const { return m_highlightedNode.get(); }
 

trunk/Source/WebCore/inspector/front-end/DOMAgent.js

@@ -260 +260 @@
     },
 
-    removeChild_: function(node)
+    _removeChild: function(node)
     {
         this.children.splice(this.children.indexOf(node), 1);
@@ -316 +316 @@
             node = node.parentNode;
         return node;
+    },
+
+    moveTo: function(targetNode, anchorNode, callback)
+    {
+        DOMAgent.moveTo(this.id, targetNode.id, anchorNode ? anchorNode.id : undefined, callback); 
     }
 }
@@ -536 +541 @@
         var parent = this._idToDOMNode[parentId];
         var node = this._idToDOMNode[nodeId];
-        parent.removeChild_(node);
+        parent._removeChild(node);
         this.dispatchEventToListeners(WebInspector.DOMAgent.Events.NodeRemoved, {node:node, parent:parent});
         delete this._idToDOMNode[nodeId];

trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js

@@ -34 +34 @@
     this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
     this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
+    this.element.addEventListener("dragstart", this._ondragstart.bind(this), false);
+    this.element.addEventListener("dragover", this._ondragover.bind(this), false);
+    this.element.addEventListener("dragleave", this._ondragleave.bind(this), false);
+    this.element.addEventListener("dragend", this._ondragend.bind(this), false);
 
     TreeOutline.call(this, this.element);
@@ -259 +263 @@
     },
 
+    _ondragstart: function(event)
+    {
+        var treeElement = this._treeElementFromEvent(event);
+        if (!treeElement)
+            return false;
+
+        if (!this._isValidDragSourceOrTarget(treeElement))
+            return false;
+
+        if (treeElement.representedObject.nodeName() === "BODY" || treeElement.representedObject.nodeName() === "HEAD")
+            return false;
+
+        event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
+        event.dataTransfer.effectAllowed = "copy";
+        this._nodeBeingDragged = treeElement.representedObject;
+
+        WebInspector.highlightDOMNode(0);
+
+        return true;
+    },
+
+    _ondragover: function(event)
+    {
+        this._clearDragOverTreeElementMarker();
+
+        if (!this._nodeBeingDragged)
+            return;
+        
+        var treeElement = this._treeElementFromEvent(event);
+        if (!this._isValidDragSourceOrTarget(treeElement))
+            return;
+
+        var node = treeElement.representedObject;
+        while (node) {
+            if (node === this._nodeBeingDragged)
+                return;
+            node = node.parentNode;
+        }
+
+        treeElement.updateSelection();
+        treeElement.listItemElement.addStyleClass("elements-drag-over");
+        this._dragOverTreeElement = treeElement;
+    },
+
+    _ondragleave: function(event)
+    {
+        this._clearDragOverTreeElementMarker();
+
+        if (!this._nodeBeingDragged)
+            return;
+        
+        var treeElement = this._treeElementFromEvent(event);
+        if (!this._isValidDragSourceOrTarget(treeElement))
+            return false;
+
+        var node = treeElement.representedObject;
+        while (node) {
+            if (node === this._nodeBeingDragged)
+                return;
+            node = node.parentNode;
+        }
+
+        treeElement.updateSelection();
+        treeElement.listItemElement.addStyleClass("elements-drag-over");
+        this._dragOverTreeElement = treeElement;
+    },
+
+    _isValidDragSourceOrTarget: function(treeElement)
+    {
+        if (!treeElement)
+            return false;
+
+        var node = treeElement.representedObject;
+        if (!(node instanceof WebInspector.DOMNode))
+            return false;
+
+        if (node.nodeType() !== Node.ELEMENT_NODE)
+            return false;
+
+        if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE)
+            return false;
+
+        return true;
+    },
+
+    _ondragend: function(event)
+    {
+        if (this._nodeBeingDragged && this._dragOverTreeElement) {
+            var parentNode;
+            var anchorNode;
+
+            if (this._dragOverTreeElement._elementCloseTag) {
+                // Drop onto closing tag -> insert as last child.
+                parentNode = this._dragOverTreeElement.representedObject;
+            } else {
+                var dragTargetNode = this._dragOverTreeElement.representedObject;
+                parentNode = dragTargetNode.parentNode;
+                anchorNode = dragTargetNode;
+            }
+
+            function callback(error, newNodeId)
+            {
+                if (error)
+                    return;
+
+                WebInspector.panels.elements.updateModifiedNodes();
+                var newNode = WebInspector.domAgent.nodeForId(newNodeId);
+                if (newNode)
+                    this.focusedDOMNode = newNode;
+            }
+            this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
+        }
+        
+        this._clearDragOverTreeElementMarker();
+        delete this._nodeBeingDragged;
+    },
+
+    _clearDragOverTreeElementMarker: function()
+    {
+        if (this._dragOverTreeElement) {
+            this._dragOverTreeElement.updateSelection();
+            this._dragOverTreeElement.listItemElement.removeStyleClass("elements-drag-over");
+            delete this._dragOverTreeElement;
+        }
+    },
+
     populateContextMenu: function(contextMenu, event)
     {
-        var listItem = event.target.enclosingNodeOrSelfWithNodeName("LI");
-        if (!listItem || !listItem.treeElement)
+        var treeElement = this._treeElementFromEvent(event);
+        if (!treeElement)
             return false;
 
@@ -269 +399 @@
             function focusElement()
             {
-                WebInspector.panels.elements.switchToAndFocus(listItem.treeElement.representedObject);
+                WebInspector.panels.elements.switchToAndFocus(treeElement.representedObject);
             }
             contextMenu.appendItem(WebInspector.UIString("Reveal in Elements Panel"), focusElement.bind(this));
@@ -279 +409 @@
             if (href)
                 populated = WebInspector.panels.elements.populateHrefContextMenu(contextMenu, event, href);
-            if (tag && listItem.treeElement._populateTagContextMenu) {
+            if (tag && treeElement._populateTagContextMenu) {
                 if (populated)
                     contextMenu.appendSeparator();
-                listItem.treeElement._populateTagContextMenu(contextMenu, event);
+                treeElement._populateTagContextMenu(contextMenu, event);
                 populated = true;
-            } else if (textNode && listItem.treeElement._populateTextContextMenu) {
+            } else if (textNode && treeElement._populateTextContextMenu) {
                 if (populated)
                     contextMenu.appendSeparator();
-                listItem.treeElement._populateTextContextMenu(contextMenu, textNode);
+                treeElement._populateTextContextMenu(contextMenu, textNode);
                 populated = true;
             }
@@ -509 +639 @@
 
         this.updateTitle();
-
         this._preventFollowingLinksOnDoubleClick();
+        this.listItemElement.draggable = true;
     },
 

trunk/Source/WebCore/inspector/front-end/inspector.css

@@ -1222 +1222 @@
 }
 
+.outline-disclosure li.elements-drag-over .selection {
+    display: block;
+    margin-top: -2px;
+    border-top: 2px solid rgb(56, 121, 217);
+}
+
 .outline-disclosure ol:focus li.selected .selection {
     background-color: rgb(56, 121, 217);