Web Inspector: DOM: dragging a node to the console should log the node
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 4 May 2019 02:45:08 +0000 (02:45 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 4 May 2019 02:45:08 +0000 (02:45 +0000)
https://bugs.webkit.org/show_bug.cgi?id=197330

Reviewed by Timothy Hatcher.

* UserInterface/Views/DOMTreeOutline.js:
(WI.DOMTreeOutline.prototype._ondragstart):
* UserInterface/Views/LogContentView.js:
(WI.LogContentView):
(WI.LogContentView.prototype._handleDragOver): Added.
(WI.LogContentView.prototype._handleDrop): Added.
* UserInterface/Views/QuickConsole.js:
(WI.QuickConsole):
(WI.QuickConsole.prototype._handleDragOver): Added.
(WI.QuickConsole.prototype._handleDrop): Added.

* UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:
Drive-by: update the format to be more unique.
* Localizations/en.lproj/localizedStrings.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@244946 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/LogContentView.js
Source/WebInspectorUI/UserInterface/Views/QuickConsole.js

index 97206c8..c84b918 100644 (file)
@@ -1,5 +1,28 @@
 2019-05-03  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: DOM: dragging a node to the console should log the node
+        https://bugs.webkit.org/show_bug.cgi?id=197330
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/DOMTreeOutline.js:
+        (WI.DOMTreeOutline.prototype._ondragstart):
+        * UserInterface/Views/LogContentView.js:
+        (WI.LogContentView):
+        (WI.LogContentView.prototype._handleDragOver): Added.
+        (WI.LogContentView.prototype._handleDrop): Added.
+        * UserInterface/Views/QuickConsole.js:
+        (WI.QuickConsole):
+        (WI.QuickConsole.prototype._handleDragOver): Added.
+        (WI.QuickConsole.prototype._handleDrop): Added.
+
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:
+        Drive-by: update the format to be more unique.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2019-05-03  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: DOM: rename "low power" to "display composited"
         https://bugs.webkit.org/show_bug.cgi?id=197296
 
index 50b23c2..5046616 100644 (file)
@@ -348,6 +348,8 @@ localizedStrings["Domain"] = "Domain";
 localizedStrings["Done"] = "Done";
 localizedStrings["Download"] = "Download";
 localizedStrings["Download Web Archive"] = "Download Web Archive";
+localizedStrings["Dropped Element"] = "Dropped Element";
+localizedStrings["Dropped Node"] = "Dropped Node";
 localizedStrings["Duplicate property"] = "Duplicate property";
 localizedStrings["Duration"] = "Duration";
 localizedStrings["Duration: %s"] = "Duration: %s";
index 7a09139..668f8ea 100644 (file)
@@ -485,6 +485,9 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
         if (!treeElement)
             return false;
 
+        event.dataTransfer.effectAllowed = "copyMove";
+        event.dataTransfer.setData(DOMTreeOutline.DOMNodeIdDragType, treeElement.representedObject.id);
+
         if (!this._isValidDragSourceOrTarget(treeElement))
             return false;
 
@@ -492,7 +495,6 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
             return false;
 
         event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
-        event.dataTransfer.effectAllowed = "copyMove";
         this._nodeBeingDragged = treeElement.representedObject;
 
         WI.domManager.hideDOMNodeHighlight();
@@ -648,3 +650,5 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
 WI.DOMTreeOutline.Event = {
     SelectedNodeChanged: "dom-tree-outline-selected-node-changed"
 };
+
+WI.DOMTreeOutline.DOMNodeIdDragType = "web-inspector/dom-node-id";
index f09a95c..a100045 100644 (file)
@@ -463,4 +463,4 @@ WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName = "filter-sec
 WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
 
 WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
-WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType = "text/classname";
+WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType = "web-inspector/css-class";
index feebd4b..35924ae 100644 (file)
@@ -47,6 +47,8 @@ WI.LogContentView = class LogContentView extends WI.ContentView
         this.messagesElement.addEventListener("keydown", this._keyDown.bind(this));
         this.messagesElement.addEventListener("keypress", this._keyPress.bind(this));
         this.messagesElement.addEventListener("dragstart", this._ondragstart.bind(this), true);
+        this.messagesElement.addEventListener("dragover", this._handleDragOver.bind(this));
+        this.messagesElement.addEventListener("drop", this._handleDrop.bind(this));
         this.element.appendChild(this.messagesElement);
 
         this.prompt = WI.quickConsole.prompt;
@@ -618,6 +620,32 @@ WI.LogContentView = class LogContentView extends WI.ContentView
         }
     }
 
+    _handleDragOver(event)
+    {
+        if (event.dataTransfer.types.includes(WI.DOMTreeOutline.DOMNodeIdDragType)) {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+        }
+    }
+
+    _handleDrop(event)
+    {
+        let domNodeId = event.dataTransfer.getData(WI.DOMTreeOutline.DOMNodeIdDragType);
+        if (domNodeId) {
+            event.preventDefault();
+
+            let domNode = WI.domManager.nodeForId(domNodeId);
+            WI.RemoteObject.resolveNode(domNode, WI.RuntimeManager.ConsoleObjectGroup)
+            .then((remoteObject) => {
+                let text = domNode.nodeType() === Node.ELEMENT_NODE ? WI.UIString("Dropped Element") : WI.UIString("Dropped Node");
+                const addSpecialUserLogClass = true;
+                WI.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, addSpecialUserLogClass);
+
+                this.prompt.focus();
+            });
+        }
+    }
+
     handleEvent(event)
     {
         switch (event.type) {
index 5187b30..01eea3d 100644 (file)
@@ -46,6 +46,8 @@ WI.QuickConsole = class QuickConsole extends WI.View
 
         this.element.classList.add("quick-console");
         this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+        this.element.addEventListener("dragover", this._handleDragOver.bind(this));
+        this.element.addEventListener("drop", this._handleDrop.bind(this), true); // Ensure that dropping a DOM node doesn't copy text.
 
         this.prompt = new WI.ConsolePrompt(null, "text/javascript");
         this.addSubview(this.prompt);
@@ -171,6 +173,32 @@ WI.QuickConsole = class QuickConsole extends WI.View
         this.prompt.focus();
     }
 
+    _handleDragOver(event)
+    {
+        if (event.dataTransfer.types.includes(WI.DOMTreeOutline.DOMNodeIdDragType)) {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+        }
+    }
+
+    _handleDrop(event)
+    {
+        let domNodeId = event.dataTransfer.getData(WI.DOMTreeOutline.DOMNodeIdDragType);
+        if (domNodeId) {
+            event.preventDefault();
+
+            let domNode = WI.domManager.nodeForId(domNodeId);
+            WI.RemoteObject.resolveNode(domNode, WI.RuntimeManager.ConsoleObjectGroup)
+            .then((remoteObject) => {
+                let text = domNode.nodeType() === Node.ELEMENT_NODE ? WI.UIString("Dropped Element") : WI.UIString("Dropped Node");
+                const addSpecialUserLogClass = true;
+                WI.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, addSpecialUserLogClass);
+
+                this.prompt.focus();
+            });
+        }
+    }
+
     _executionContextPathComponentsToDisplay()
     {
         // If we are in the debugger the console will use the active call frame, don't show the selector.