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

Source/devtools/front_end/elements/ElementsTreeOutline.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 53 matching lines @@
     this._eventSupport = new WebInspector.Object();
 
     this._visible = false;
 
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     this._contextMenuCallback = contextMenuCallback;
     this._setPseudoClassCallback = setPseudoClassCallback;
     this._createNodeDecorators();
 }
 
+/** @typedef {{node: !WebInspector.DOMNode, isCut: boolean}} */
+WebInspector.ElementsTreeOutline.ClipboardData;
+
 /**
  * @enum {string}
  */
 WebInspector.ElementsTreeOutline.Events = {
     SelectedNodeChanged: "SelectedNodeChanged",
     ElementsTreeUpdated: "ElementsTreeUpdated"
 }
 
 /**
  * @const
@@ skipping 53 matching lines @@
     wireToDOMModel: function()
     {
         this._elementsTreeUpdater = new WebInspector.ElementsTreeUpdater(this._target.domModel, this);
     },
 
     unwireFromDOMModel: function()
     {
         if (this._elementsTreeUpdater)
             this._elementsTreeUpdater.dispose();
     },
+
+    /**
+     * @param {?WebInspector.ElementsTreeOutline.ClipboardData} data
+     */
+    _setClipboardData: function(data)
+    {
+        if (this._clipboardNodeData) {
+            var treeElement = this.findTreeElement(this._clipboardNodeData.node);
+            if (treeElement)
+                treeElement.setInClipboard(false);
+            delete this._clipboardNodeData;
+        }
+
+        if (data) {
+            var treeElement = this.findTreeElement(data.node);
+            if (treeElement)
+                treeElement.setInClipboard(true);
+            this._clipboardNodeData = data;
+        }
+    },
+
+    _cutNode: function()
+    {
+        this.handleCopyOrCutEvent(true);
+    },
+
+    _copyNode: function()
+    {
+        this.handleCopyOrCutEvent(false);
+    },
+
+    _pasteNode: function()
+    {
+        this.handlePasteEvent();
+    },
+
+    /**
+     * @param {boolean} isCut
+     * @param {!Event=} event
+     */
+    handleCopyOrCutEvent: function(isCut, event)
+    {
+        this._setClipboardData(null);
+        var currentFocusElement = WebInspector.currentFocusElement();
+        if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement))
+            return;
+
+        // Don't prevent the normal copy if the user has a selection.
+        if (!window.getSelection().isCollapsed)
+            return;
+
+        var selectedNode = this.selectedDOMNode();
+        if (!selectedNode)
+            return;
+
+        if (event) {
+            event.clipboardData.clearData();
+            event.preventDefault();
+        }
+        selectedNode.copyNode();
+        this._setClipboardData({node: selectedNode, isCut: isCut});
+    },
+
+    /**
+     * @return {boolean}
+     */
+    _canPaste: function()
+    {
+        if (!this._clipboardNodeData)
+            return false;
+
+        // Don't prevent the normal copy if the user has a selection.
+        if (!window.getSelection().isCollapsed)
+            return false;
+
+        var currentFocusElement = WebInspector.currentFocusElement();
+        if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement))
+            return false;
+
+        var targetNode = this.selectedDOMNode();
+        if (!targetNode)
+            return false;
+
+        var node = this._clipboardNodeData.node;
+        if (this._clipboardNodeData.isCut && (node === targetNode || node.isAncestor(targetNode)))

[aandrey, 2014/07/25 13:32:54]

node.isSelfOrAncestor(targetNode)

[apavlov, 2014/07/25 15:04:47]

This works for ordinary DOM Node's, not our WI.DOMNode's

+            return false;
+
+        if (targetNode.target() !== node.target())
+            return false;
+        return true;
+    },
+
+    /**
+     * @param {!Event=} event
+     */
+    handlePasteEvent: function(event)
+    {
+        if (!this._canPaste())
+            return;
+
+        if (this._clipboardNodeData.isCut) {
+            this._clipboardNodeData.node.moveTo(this.selectedDOMNode(), null, expandCallback.bind(this));
+            this._setClipboardData(null);
+        } else {
+            this._clipboardNodeData.node.copyTo(this.selectedDOMNode(), null, expandCallback.bind(this));
+        }
+
+        if (event)
+            event.preventDefault();
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {!DOMAgent.NodeId} nodeId
+         * @this {WebInspector.ElementsTreeOutline}
+         */
+        function expandCallback(error, nodeId)
+        {
+            if (error)
+                return;
+            var pastedNode = this._domModel.nodeForId(nodeId);
+            if (!pastedNode)
+                return;
+            this.selectDOMNode(pastedNode);
+        }
+    },
+
     /**
      * @param {boolean} visible
      */
     setVisible: function(visible)
     {
         this._visible = visible;
         if (!this._visible)
             return;
 
         this._updateModifiedNodes();
@@ skipping 186 matching lines @@
 
     /**
      * @param {?WebInspector.DOMNode} node
      * @param {boolean} omitFocus
      */
     _revealAndSelectNode: function(node, omitFocus)
     {
         if (this._suppressRevealAndSelect)
             return;
 
+        this._updateModifiedNodes();
+
         if (!this._includeRootDOMNode && node === this.rootDOMNode && this.rootDOMNode)
             node = this.rootDOMNode.firstChild;
         if (!node)
             return;
         var treeElement = this.createTreeElementFor(node);
         if (!treeElement)
             return;
 
         treeElement.revealAndSelect(omitFocus);
     },
@@ skipping 550 matching lines @@
         // Preserve the semantic of node by following the order of updates for hide and show.
         if (show) {
             for (var i = 0, size = this._highlightResult.length; i < size; ++i)
                 updateEntryShow(this._highlightResult[i]);
         } else {
             for (var i = (this._highlightResult.length - 1); i >= 0; --i)
                 updateEntryHide(this._highlightResult[i]);
         }
     },
 
+    /**
+     * @param {boolean} inClipboard
+     */
+    setInClipboard: function(inClipboard)
+    {
+        if (this._inClipboard === inClipboard)
+            return;
+        this._inClipboard = inClipboard;
+        this.listItemElement.classList.toggle("in-clipboard", inClipboard);
+    },
+
     get hovered()
     {
         return this._hovered;
     },
 
     set hovered(x)
     {
         if (this._hovered === x)
             return;
 
@@ skipping 513 matching lines @@
     },
 
     _populateNodeContextMenu: function(contextMenu)
     {
         // Add free-form node-related actions.
         var openTagElement = this.treeOutline.getCachedTreeElement(this.representedObject) || this;
         var isEditable = this.hasEditableNode();
         if (isEditable && !this._editing)
             contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), openTagElement._editAsHTML.bind(openTagElement));
         var isShadowRoot = this.representedObject.isShadowRoot();
-        if (!isShadowRoot)
-            contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
 
         // Place it here so that all "Copy"-ing items stick together.
         if (this.representedObject.nodeType() === Node.ELEMENT_NODE)
             contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy CSS path" : "Copy CSS Path"), this._copyCSSPath.bind(this));
         if (!isShadowRoot)
             contextMenu.appendItem(WebInspector.UIString("Copy XPath"), this._copyXPath.bind(this));
+        if (!isShadowRoot) {
+            var treeOutline = this.treeOutline;
+            contextMenu.appendItem(WebInspector.UIString("Copy"), treeOutline._copyNode.bind(treeOutline));

[aandrey, 2014/07/25 13:32:54]

This callbacks should always work regardless of the window.getSelection() result
and WebInspector.isBeingEdited(). Also it should work on the node, for which the
context menu was open, not for the selectedDOMNode.

[apavlov, 2014/07/25 15:04:47]

Done

+            contextMenu.appendItem(WebInspector.UIString("Cut"), treeOutline._cutNode.bind(treeOutline));
+            if (treeOutline._canPaste())
+                contextMenu.appendItem(WebInspector.UIString("Paste"), treeOutline._pasteNode.bind(treeOutline));

[aandrey, 2014/07/25 13:32:54]

maybe always append this option, but make disabled if cannot paste

[apavlov, 2014/07/25 15:04:47]

Done.

+        }
+
         if (isEditable)
             contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Delete node" : "Delete Node"), this.remove.bind(this));
     },
 
     _startEditing: function()
     {
         if (this.treeOutline.selectedDOMNode() !== this._node)
             return;
 
         var listItem = this._listItemNode;
@@ skipping 866 matching lines @@
          */
         function commitChange(initialValue, value)
         {
             if (initialValue !== value)
                 node.setOuterHTML(value, selectNode);
         }
 
         node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
     },
 
-    _copyHTML: function()
-    {
-        this._node.copyNode();
-    },
-
     _copyCSSPath: function()
     {
         InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.cssPath(this._node, true));
     },
 
     _copyXPath: function()
     {
         InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.xPath(this._node, true));
     },
 
@@ skipping 263 matching lines @@
 
         this._treeOutline._fireElementsTreeUpdated(nodes);
     },
 
     _reset: function()
     {
         this._treeOutline.rootDOMNode = null;
         this._treeOutline.selectDOMNode(null, false);
         this._domModel.hideDOMNodeHighlight();
         this._recentlyModifiedNodes.clear();
+        delete this._treeOutline._clipboardNodeData;
     }
 }
 
 /**
  * @constructor
  * @param {boolean} isUpdated
  * @param {!WebInspector.DOMNode=} parent
  */
 WebInspector.ElementsTreeUpdater.UpdateEntry = function(isUpdated, parent)
 {
@@ skipping 23 matching lines @@
         var treeOutline = new WebInspector.ElementsTreeOutline(node.target(), false, false);
         treeOutline.rootDOMNode = node;
         treeOutline.element.classList.add("outline-disclosure");
         if (!treeOutline.children[0].hasChildren)
             treeOutline.element.classList.add("single-node");
         treeOutline.setVisible(true);
         treeOutline.element.treeElementForTest = treeOutline.children[0];
         return treeOutline.element;
     }
 }