Changeset 28093 in webkit

Timestamp:

Nov 27, 2007 5:12:22 PM (16 years ago)

Author:

timothy@apple.com

Message:

Reviewed by Sam Weinig.

Bug 16165: Dragging the inspector toolbar should move the window
​http://bugs.webkit.org/show_bug.cgi?id=16165

• page/inspector/DocumentPanel.js: Call the new drag functions, and cleanup code.
• page/inspector/inspector.css: Only make the toolbar transparent in detached mode.
• page/inspector/inspector.js: Call the new drag functions, and cleanup code. Add toolbar drag functions that move the window.

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• page/inspector/DocumentPanel.js (modified) (1 diff)
• page/inspector/inspector.css (modified) (1 diff)
• page/inspector/inspector.js (modified) (3 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+2007-11-27  Timothy Hatcher  <timothy@apple.com>
+
+        Reviewed by Sam Weinig.
+
+        Bug 16165: Dragging the inspector toolbar should move the window
+        http://bugs.webkit.org/show_bug.cgi?id=16165
+
+        * page/inspector/DocumentPanel.js: Call the new drag functions, and cleanup code.
+        * page/inspector/inspector.css: Only make the toolbar transparent in detached mode.
+        * page/inspector/inspector.js: Call the new drag functions, and cleanup code. Add
+          toolbar drag functions that move the window.
+
 2007-11-27  Antti Koivisto  <antti@apple.com>
 

trunk/WebCore/page/inspector/DocumentPanel.js

@@ -699 +699 @@
     rightSidebarResizerDragStart: function(event)
     {
-        var panel = this; 
-        WebInspector.dividerDragStart(this.views.dom.sidebarElement, function(event) { panel.rightSidebarResizerDrag(event) }, function(event) { panel.rightSidebarResizerDragEnd(event) }, event, "col-resize");
+        if (this.sidebarDragEventListener || this.sidebarDragEndEventListener)
+            return this.rightSidebarResizerDragEnd(event);
+
+        this.sidebarDragEventListener = this.rightSidebarResizerDrag.bind(this);
+        this.sidebarDragEndEventListener = this.rightSidebarResizerDragEnd.bind(this);
+        WebInspector.elementDragStart(this.views.dom.sidebarElement, this.sidebarDragEventListener, this.sidebarDragEndEventListener, event, "col-resize");
     },
 
     rightSidebarResizerDragEnd: function(event)
     {
-        var panel = this;
-        WebInspector.dividerDragEnd(this.views.dom.sidebarElement, function(event) { panel.rightSidebarResizerDrag(event) }, function(event) { panel.rightSidebarResizerDragEnd(event) }, event);
+        WebInspector.elementDragEnd(this.views.dom.sidebarElement, this.sidebarDragEventListener, this.sidebarDragEndEventListener, event);
+        delete this.sidebarDragEventListener;
+        delete this.sidebarDragEndEventListener;
     },
 
     rightSidebarResizerDrag: function(event)
     {
-        var rightSidebar = this.views.dom.sidebarElement;
-        if (rightSidebar.dragging == true) {
-            var x = event.clientX + window.scrollX;
-
-            var leftSidebarWidth = window.getComputedStyle(document.getElementById("sidebar")).getPropertyCSSValue("width").getFloatValue(CSSPrimitiveValue.CSS_PX);
-            var newWidth = Number.constrain(window.innerWidth - x, 100, window.innerWidth - leftSidebarWidth - 100);
-
-            if (x == newWidth)
-                rightSidebar.dragLastX = x;
-
-            rightSidebar.style.width = newWidth + "px";
-            this.views.dom.sideContentElement.style.right = newWidth + "px";
-            this.views.dom.sidebarResizeElement.style.right = (newWidth - 3) + "px";
-
-            this.updateTreeSelection();
-            this.updateBreadcrumbSizes();
-
-            event.preventDefault();
-        }
+        var x = event.pageX;
+
+        var leftSidebarWidth = document.getElementById("sidebar").offsetWidth;
+        var newWidth = Number.constrain(window.innerWidth - x, 100, window.innerWidth - leftSidebarWidth - 100);
+
+        this.views.dom.sidebarElement.style.width = newWidth + "px";
+        this.views.dom.sideContentElement.style.right = newWidth + "px";
+        this.views.dom.sidebarResizeElement.style.right = (newWidth - 3) + "px";
+
+        this.updateTreeSelection();
+        this.updateBreadcrumbSizes();
+
+        event.preventDefault();
     }
 }

trunk/WebCore/page/inspector/inspector.css

@@ -69 +69 @@
 }
 
-.platform-mac-leopard #toolbar {
+body.detached.platform-mac-leopard #toolbar {
     background: transparent !important;
 }

trunk/WebCore/page/inspector/inspector.js

@@ -224 +224 @@
 WebInspector.loaded = function()
 {
-    document.body.addStyleClass("platform-" + InspectorController.platform());
+    var platform = InspectorController.platform();
+    document.body.addStyleClass("platform-" + platform);
 
     this.fileOutline = new TreeOutline(document.getElementById("list"));
@@ -286 +287 @@
     document.getElementById("sidebarResizer").addEventListener("mousedown", this.sidebarResizerDragStart, true);
     document.getElementById("searchResultsResizer").addEventListener("mousedown", this.searchResultsResizerDragStart, true);
+
+    if (platform === "mac-leopard")
+        document.getElementById("toolbar").addEventListener("mousedown", this.toolbarDragStart, true);
 
     document.body.addStyleClass("detached");
@@ -541 +545 @@
 }
 
+WebInspector.toolbarDragStart = function(event)
+{
+    var toolbar = document.getElementById("toolbar");
+    if (event.target !== toolbar || WebInspector.attached)
+        return;
+
+    toolbar.lastScreenX = event.screenX;
+    toolbar.lastScreenY = event.screenY;
+
+    document.addEventListener("mousemove", WebInspector.toolbarDrag, true);
+    document.addEventListener("mouseup", WebInspector.toolbarDragEnd, true);
+    document.body.style.cursor = "default";
+
+    event.preventDefault();
+}
+
+WebInspector.toolbarDragEnd = function(event)
+{
+    var toolbar = document.getElementById("toolbar");
+    delete toolbar.lastScreenX;
+    delete toolbar.lastScreenY;
+
+    document.removeEventListener("mousemove", WebInspector.toolbarDrag, true);
+    document.removeEventListener("mouseup", WebInspector.toolbarDragEnd, true);
+    document.body.style.removeProperty("cursor");
+
+    event.preventDefault();
+}
+
+WebInspector.toolbarDrag = function(event)
+{
+    var toolbar = document.getElementById("toolbar");
+
+    var x = event.screenX - toolbar.lastScreenX;
+    var y = event.screenY - toolbar.lastScreenY;
+
+    toolbar.lastScreenX = event.screenX;
+    toolbar.lastScreenY = event.screenY;
+
+    window.moveBy(x, y);
+
+    event.preventDefault();
+}
+
 WebInspector.sidebarResizerDragStart = function(event)
 {
-    WebInspector.dividerDragStart(document.getElementById("sidebar"), WebInspector.sidebarResizerDrag, WebInspector.sidebarResizerDragEnd, event, "col-resize");
+    WebInspector.elementDragStart(document.getElementById("sidebar"), WebInspector.sidebarResizerDrag, WebInspector.sidebarResizerDragEnd, event, "col-resize");
 }
 
 WebInspector.sidebarResizerDragEnd = function(event)
 {
-    WebInspector.dividerDragEnd(document.getElementById("sidebar"), WebInspector.sidebarResizerDrag, WebInspector.sidebarResizerDragEnd, event);
+    WebInspector.elementDragEnd(document.getElementById("sidebar"), WebInspector.sidebarResizerDrag, WebInspector.sidebarResizerDragEnd, event);
 }
 
 WebInspector.sidebarResizerDrag = function(event)
 {
-    var sidebar = document.getElementById("sidebar");
-    if (sidebar.dragging == true) {
-        var x = event.clientX + window.scrollX;
-
-        // FIXME: We can should come up with a better hueristic for constraining the size
-        // of the sidebar.
-        var newWidth = Number.constrain(x, 100, window.innerWidth - 100);
-
-        if (x == newWidth)
-            sidebar.dragLastX = x;
-
-        sidebar.style.width = newWidth + "px";
-        document.getElementById("sidebarResizer").style.left = (newWidth - 3) + "px";
-        document.getElementById("main").style.left = newWidth + "px";
-        document.getElementById("toolbarButtons").style.left = newWidth + "px";
-
-        if (WebInspector.currentPanel && WebInspector.currentPanel.resize)
-            WebInspector.currentPanel.resize();
-
-        event.preventDefault();
-    }
+    var x = event.pageX;
+
+    // FIXME: We can should come up with a better hueristic for constraining the size of the sidebar.
+    var newWidth = Number.constrain(x, 100, window.innerWidth - 100);
+
+    document.getElementById("sidebar").style.width = newWidth + "px";
+    document.getElementById("sidebarResizer").style.left = (newWidth - 3) + "px";
+    document.getElementById("main").style.left = newWidth + "px";
+    document.getElementById("toolbarButtons").style.left = newWidth + "px";
+
+    if (WebInspector.currentPanel && WebInspector.currentPanel.resize)
+        WebInspector.currentPanel.resize();
+
+    event.preventDefault();
 }
 
 WebInspector.searchResultsResizerDragStart = function(event)
 {
-    WebInspector.dividerDragStart(document.getElementById("searchResults"), WebInspector.searchResultsResizerDrag, WebInspector.searchResultsResizerDragEnd, event, "row-resize");
+    WebInspector.elementDragStart(document.getElementById("searchResults"), WebInspector.searchResultsResizerDrag, WebInspector.searchResultsResizerDragEnd, event, "row-resize");
 }
 
 WebInspector.searchResultsResizerDragEnd = function(event)
 {
-    WebInspector.dividerDragEnd(document.getElementById("searchResults"), WebInspector.searchResultsResizerDrag, WebInspector.searchResultsResizerDragEnd, event);
+    WebInspector.elementDragEnd(document.getElementById("searchResults"), WebInspector.searchResultsResizerDrag, WebInspector.searchResultsResizerDragEnd, event);
 }
 
 WebInspector.searchResultsResizerDrag = function(event)
 {
-    var searchResults = document.getElementById("searchResults");
-    if (searchResults.dragging == true) {
-        var y = event.clientY - document.getElementById("main").offsetTop;
-        var newHeight = Number.constrain(y, 100, window.innerHeight - 100);
-
-        if (y == newHeight)
-            searchResults.dragLastY = y;
-
-        WebInspector.searchResultsHeight = newHeight;
-        searchResults.style.height = WebInspector.searchResultsHeight + "px";
-        document.getElementById("panels").style.top = newHeight + "px";
-        document.getElementById("searchResultsResizer").style.top = (newHeight - 3) + "px";
-        event.preventDefault();
-    }
-}
-
-WebInspector.dividerDragStart = function(element, dividerDrag, dividerDragEnd, event, cursor) 
-{
-    element.dragging = true;
-    element.dragLastY = event.clientY + window.scrollY;
-    element.dragLastX = event.clientX + window.scrollX;
+    var y = event.pageY - document.getElementById("main").offsetTop;
+    var newHeight = Number.constrain(y, 100, window.innerHeight - 100);
+
+    WebInspector.searchResultsHeight = newHeight;
+
+    document.getElementById("searchResults").style.height = WebInspector.searchResultsHeight + "px";
+    document.getElementById("panels").style.top = newHeight + "px";
+    document.getElementById("searchResultsResizer").style.top = (newHeight - 3) + "px";
+
+    event.preventDefault();
+}
+
+WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor) 
+{
+    if (WebInspector.draggingElement)
+        return elementDragEnd(event);
+
+    WebInspector.draggingElement = true;
+
     document.addEventListener("mousemove", dividerDrag, true);
-    document.addEventListener("mouseup", dividerDragEnd, true);
+    document.addEventListener("mouseup", elementDragEnd, true);
     document.body.style.cursor = cursor;
+
     event.preventDefault();
 }
 
-WebInspector.dividerDragEnd = function(element, dividerDrag, dividerDragEnd, event) 
-{
-    element.dragging = false;
+WebInspector.elementDragEnd = function(element, dividerDrag, elementDragEnd, event) 
+{
     document.removeEventListener("mousemove", dividerDrag, true);
-    document.removeEventListener("mouseup", dividerDragEnd, true);
+    document.removeEventListener("mouseup", elementDragEnd, true);
     document.body.style.removeProperty("cursor");
+
+    delete WebInspector.draggingElement;
+
+    event.preventDefault();
 }