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

Source/devtools/front_end/elements/ElementsPanel.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 236 matching lines @@
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {string} pseudoClass
      * @param {boolean} enable
      */
     _setPseudoClassForNode: function(node, pseudoClass, enable)
     {
         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();
 
         WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction, {
             action: WebInspector.UserMetrics.UserActionNames.ForcedElementState,
             selector: WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false),
             enabled: enable,
             state: pseudoClass
         });
     },
@@ skipping 183 matching lines @@
     {
         if (event.data)
             this.contentElement.classList.remove("nowrap");
         else
             this.contentElement.classList.add("nowrap");
 
         var selectedNode = this.selectedDOMNode();
         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.
     },
 
     switchToAndFocus: function(node)
     {
         // Reset search restore.
         this._searchableView.cancelSearch();
         WebInspector.inspectorView.setCurrentPanel(this);
         this.selectDOMNode(node, true);
@@ skipping 141 matching lines @@
         }
 
         if (typeof searchResult.node === "undefined") {
             // No data for slot, request it.
             searchResult.target.domModel.searchResult(searchResult.index, searchCallback.bind(this));
             return;
         }
 
         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();
             var matches = treeElement.listItemElement.getElementsByClassName("highlighted-search-result");
             if (matches.length)
                 matches[0].scrollIntoViewIfNeeded();
         }
     },
 
     _hideSearchHighlights: function()
@@ skipping 554 matching lines @@
 
         if (!treeOutline.editing()) {
             handleUndoRedo.call(this, treeOutline);
             if (event.handled)
                 return;
         }
 
         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;
 
         // 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);
+        }
+    },
+
+    /**
      * @param {!WebInspector.DOMNode} node
      * @return {!WebInspector.DOMNode}
      */
     _leaveUserAgentShadowDOM: function(node)
     {
         var userAgentShadowRoot = node.ancestorUserAgentShadowRoot();
         return userAgentShadowRoot ? /** @type {!WebInspector.DOMNode} */ (userAgentShadowRoot.parentNode) : node;
     },
 
     /**
@@ skipping 276 matching lines @@
         /**
          * @suppressReceiverCheck
          * @this {Element}
          */
         function parentElement()
         {
             return this.parentElement;
         }
     }
 }