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;
+        }
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     */
+    _cutNode: function(node)

[aandrey, 2014/07/25 15:44:27]

remove this in favor of .bind(..., true)?

[apavlov, 2014/07/25 16:09:56]

Done.

+    {
+        this._performCopyOrCut(true, node);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     */
+    _copyNode: function(node)

[aandrey, 2014/07/25 15:44:27]

ditto

[apavlov, 2014/07/25 16:09:56]

Done.

+    {
+        this._performCopyOrCut(false, node);
+    },
+
+    /**
+     * @param {boolean} isCut
+     * @param {!Event} event
+     */
+    handleCopyOrCutKeyboardEvent: function(isCut, event)
+    {
+        this._setClipboardData(null);

[aandrey, 2014/07/25 15:44:26]

should it be after all the returns?

[apavlov, 2014/07/25 16:09:57]

Nope. We don't want users to go dizzy about having a node AND some unrelated
text in the clipboard. A copy or cut shortcut will clear the clipboard up front
and then, perhaps, put something in there.

+
+        // Do not interfere with text editing.
+        var currentFocusElement = WebInspector.currentFocusElement();
+        if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement))
+            return;
+
+        var targetNode = this.selectedDOMNode();
+        if (!targetNode)
+            return;
+
+        if (isCut && (targetNode.isShadowRoot() || targetNode.ancestorUserAgentShadowRoot()))
+            return;
+
+        event.clipboardData.clearData();
+        event.preventDefault();
+        this._performCopyOrCut(isCut, targetNode);
+    },
+
+    /**
+     * @param {boolean} isCut
+     * @param {?WebInspector.DOMNode} node
+     */
+    _performCopyOrCut: function(isCut, node)
+    {
+        node.copyNode();
+        this._setClipboardData({node: node, isCut: isCut});

[aandrey, 2014/07/25 15:44:27]

nit: spaces after { and before }

[apavlov, 2014/07/25 16:09:57]

Done.

+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} targetNode
+     * @return {boolean}
+     */
+    _canPaste: function(targetNode)
+    {
+        if (targetNode.isShadowRoot() || targetNode.ancestorUserAgentShadowRoot())
+            return false;
+
+        if (!this._clipboardNodeData)
+            return false;
+
+        var node = this._clipboardNodeData.node;
+        if (this._clipboardNodeData.isCut && (node === targetNode || node.isAncestor(targetNode)))
+            return false;
+
+        if (targetNode.target() !== node.target())
+            return false;
+        return true;
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} targetNode
+     */
+    _pasteNode: function(targetNode)

[aandrey, 2014/07/25 15:44:26]

remove this (looks like the code would be a lot simpler w/o these 3 intermediate
functions)?

[apavlov, 2014/07/25 16:09:57]

Done.

+    {
+        this._performPaste(targetNode);
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    handlePasteKeyboardEvent: function(event)
+    {
+        // Do not interfere with text editing.
+        var currentFocusElement = WebInspector.currentFocusElement();
+        if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement))
+            return;
+
+        var targetNode = this.selectedDOMNode();
+        if (!targetNode || !this._canPaste(targetNode))
+            return;
+
+        event.preventDefault();

[aandrey, 2014/07/25 15:44:27]

maybe event.consume(false); ?

[apavlov, 2014/07/25 16:09:57]

true, since we need to preventDefault(). Done.

+        this._performPaste(targetNode);
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} targetNode
+     */
+    _performPaste: function(targetNode)
+    {
+        if (this._clipboardNodeData.isCut) {
+            this._clipboardNodeData.node.moveTo(targetNode, null, expandCallback.bind(this));
+            this._setClipboardData(null);
+        } else {
+            this._clipboardNodeData.node.copyTo(targetNode, null, expandCallback.bind(this));
+        }
+
+        /**
+         * @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 243 matching lines @@
         var commentNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-comment");
         contextMenu.appendApplicableItems(event.target);
         if (textNode) {
             contextMenu.appendSeparator();
             treeElement._populateTextContextMenu(contextMenu, textNode);
         } else if (isTag) {
             contextMenu.appendSeparator();
             treeElement._populateTagContextMenu(contextMenu, event);
         } else if (commentNode) {
             contextMenu.appendSeparator();
-            treeElement._populateNodeContextMenu(contextMenu, textNode);
+            treeElement._populateNodeContextMenu(contextMenu);
         } else if (isPseudoElement) {
             treeElement._populateScrollIntoView(contextMenu);
         } else if (treeElement._node.isShadowRoot()) {
             this.treeOutline._populateContextMenu(contextMenu, treeElement._node);
         }
     },
 
     _updateModifiedNodes: function()
     {
         if (this._elementsTreeUpdater)
@@ skipping 286 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, this.representedObject));
+            contextMenu.appendItem(WebInspector.UIString("Cut"), treeOutline._cutNode.bind(treeOutline, this.representedObject), !this.hasEditableNode());
+            contextMenu.appendItem(WebInspector.UIString("Paste"), treeOutline._pasteNode.bind(treeOutline, this.representedObject), !treeOutline._canPaste(this.representedObject));
+        }
+
         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;
     }
 }