Changeset 244946 in webkit

Timestamp:

May 3, 2019 7:45:08 PM (5 years ago)

Author:

Devin Rousso

Message:

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:

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (1 diff)
• UserInterface/Views/DOMTreeOutline.js (modified) (3 diffs)
• UserInterface/Views/GeneralStyleDetailsSidebarPanel.js (modified) (1 diff)
• UserInterface/Views/LogContentView.js (modified) (2 diffs)
• UserInterface/Views/QuickConsole.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -349 +349 @@
 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";

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

@@ -486 +486 @@
             return false;
 
+        event.dataTransfer.effectAllowed = "copyMove";
+        event.dataTransfer.setData(DOMTreeOutline.DOMNodeIdDragType, treeElement.representedObject.id);
+
         if (!this._isValidDragSourceOrTarget(treeElement))
             return false;
@@ -493 +496 @@
 
         event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
-        event.dataTransfer.effectAllowed = "copyMove";
         this._nodeBeingDragged = treeElement.representedObject;
 
@@ -649 +651 @@
     SelectedNodeChanged: "dom-tree-outline-selected-node-changed"
 };
+
+WI.DOMTreeOutline.DOMNodeIdDragType = "web-inspector/dom-node-id";

trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.js

@@ -464 +464 @@
 
 WI.GeneralStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
-WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType = "text/classname";
+WI.GeneralStyleDetailsSidebarPanel.ToggledClassesDragType = "web-inspector/css-class";

trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js

@@ -48 +48 @@
         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);
 
@@ -616 +618 @@
             event.stopPropagation();
             event.preventDefault();
+        }
+    }
+
+    _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();
+            });
         }
     }

trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js

@@ -47 +47 @@
         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");
@@ -170 +172 @@
         event.preventDefault();
         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();
+            });
+        }
     }