DevTools: [Elements] Implement shortcut-based node cut-copy-pasting

Source/devtools/front_end/elements/ElementsPanel.js

Index: Source/devtools/front_end/elements/ElementsPanel.js
diff --git a/Source/devtools/front_end/elements/ElementsPanel.js b/Source/devtools/front_end/elements/ElementsPanel.js
index 60de05b1e725616d8b25ee328a1b87bbcbef4f36..ef93c3da035b36407036c11028b055ff1755da99 100644
--- a/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/Source/devtools/front_end/elements/ElementsPanel.js
@@ -254,7 +254,7 @@ WebInspector.ElementsPanel.prototype = {
         if (!node || !node.target().cssModel.forcePseudoState(node, pseudoClass, enable))
             return;
 
-        this._targetToTreeOutline.get(node.target()).updateOpenCloseTags(node);
+        this._treeOutlineForNode(node).updateOpenCloseTags(node);
         this._metricsPaneEdited();
         this._stylesPaneEdited();
 
@@ -458,8 +458,7 @@ WebInspector.ElementsPanel.prototype = {
         if (!selectedNode)
             return;
 
-        var treeOutline = this._targetToTreeOutline.get(selectedNode.target());
-        var treeElement = treeOutline.findTreeElement(selectedNode);
+        var treeElement = this._treeElementForNode(selectedNode);
         if (treeElement)
             treeElement.updateSelection(); // Recalculate selection highlight dimensions.
     },
@@ -621,8 +620,7 @@ WebInspector.ElementsPanel.prototype = {
 
         this._searchableView.updateCurrentMatchIndex(index);
 
-        var treeOutline = this._targetToTreeOutline.get(searchResult.target);
-        var treeElement = treeOutline.findTreeElement(searchResult.node);
+        var treeElement = this._treeElementForNode(searchResult.node);
         if (treeElement) {
             treeElement.highlightSearchResults(this._searchQuery);
             treeElement.reveal();
@@ -1197,8 +1195,69 @@ WebInspector.ElementsPanel.prototype = {
         treeOutline.handleShortcut(event);
     },
 
+    /**
+     * @param {!Event} event
+     */
     handleCopyEvent: function(event)
     {
+        this._handleCopyOrCutEvent(event, false);
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    handleCutEvent: function(event)
+    {
+        this._handleCopyOrCutEvent(event, true);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @return {?WebInspector.ElementsTreeOutline}
+     */
+    _treeOutlineForNode: function(node)
+    {
+        return this._targetToTreeOutline.get(node.target()) || null;
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @return {?WebInspector.ElementsTreeElement}
+     */
+    _treeElementForNode: function(node)
+    {
+        var treeOutline = this._treeOutlineForNode(node);
+        return /** @type {?WebInspector.ElementsTreeElement} */ (treeOutline.findTreeElement(node));
+    },
+
+    /**
+     * @param {?WebInspector.DOMNode} node
+     */
+    _setNodeInClipboard: function(node)
+    {
+        var treeElement;
+        if (!node) {
+            if (this._clipboardNodeData) {
+                treeElement = this._treeElementForNode(this._clipboardNodeData.node);
+                if (treeElement)
+                    treeElement.setInClipboard(false);
+            }
+            delete this._clipboardNodeData;
+            return;
+        }
+        treeElement = this._treeElementForNode(node);
+        if (treeElement)
+            treeElement.setInClipboard(true);
+    },
+
+    /**
+     * @param {!Event} event
+     * @param {boolean} isCut
+     */
+    _handleCopyOrCutEvent: function(event, isCut)
+    {
+        this._setNodeInClipboard(null);
+        delete this._clipboardNodeData;

[aandrey, 2014/07/18 05:30:04]

remove

[apavlov, 2014/07/18 09:02:07]

Done.

         var currentFocusElement = WebInspector.currentFocusElement();
         if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement))
             return;
@@ -1206,9 +1265,63 @@ WebInspector.ElementsPanel.prototype = {
         // Don't prevent the normal copy if the user has a selection.
         if (!window.getSelection().isCollapsed)
             return;
+
+        var selectedNode = this.selectedDOMNode();
+        if (!selectedNode)
+            return;
+
         event.clipboardData.clearData();
         event.preventDefault();
-        this.selectedDOMNode().copyNode();
+        selectedNode.copyNode();
+        this._clipboardNodeData = {node: selectedNode, isCut: isCut};
+        this._setNodeInClipboard(selectedNode);
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    handlePasteEvent: function(event)
+    {
+        if (!this._clipboardNodeData)
+            return;
+
+        // Don't prevent the normal copy if the user has a selection.
+        if (!window.getSelection().isCollapsed)
+            return;
+
+        var currentFocusElement = WebInspector.currentFocusElement();
+        if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement))
+            return;
+
+        var targetNode = this.selectedDOMNode();
+        if (!targetNode)
+            return;
+
+        var node = this._clipboardNodeData.node;
+        if (targetNode.target() !== node.target())
+            return;
+
+        event.preventDefault();
+        if (this._clipboardNodeData.isCut)
+            node.moveTo(targetNode, null, expandCallback);

[aandrey, 2014/07/18 05:30:05]

will it work for consecutive paste events? should "move" be executed only first
time, or prevent the second paste w/o copy/cut?

[apavlov, 2014/07/18 09:02:07]

Thanks, I knew I had missed something for this case. Let's forbid consecutive
pastes after a cut.

+        else
+            node.copyTo(targetNode, null, true, expandCallback);
+
+        var treeOutline = this._treeOutlineForNode(targetNode);
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!DOMAgent.NodeId} nodeId
+         */
+        function expandCallback(error, nodeId)
+        {
+            if (error)
+                return;
+            var pastedNode = targetNode.target().domModel.nodeForId(nodeId);
+            if (!pastedNode)
+                return;
+            treeOutline.selectDOMNode(pastedNode);
+        }
     },
 
     /**