Reviewed by Sam Weinig.
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 28 Nov 2007 01:12:22 +0000 (01:12 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 28 Nov 2007 01:12:22 +0000 (01:12 +0000)
        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.

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

WebCore/ChangeLog
WebCore/page/inspector/DocumentPanel.js
WebCore/page/inspector/inspector.css
WebCore/page/inspector/inspector.js

index 0d3a14c..ddcc9a0 100644 (file)
@@ -1,3 +1,15 @@
+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>
 
         Reviewed by Mitz.
index 7505aff..770f9ba 100644 (file)
@@ -698,37 +698,36 @@ WebInspector.DocumentPanel.prototype = {
 
     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);
+        var x = event.pageX;
 
-            if (x == newWidth)
-                rightSidebar.dragLastX = x;
+        var leftSidebarWidth = document.getElementById("sidebar").offsetWidth;
+        var newWidth = Number.constrain(window.innerWidth - x, 100, window.innerWidth - leftSidebarWidth - 100);
 
-            rightSidebar.style.width = newWidth + "px";
-            this.views.dom.sideContentElement.style.right = newWidth + "px";
-            this.views.dom.sidebarResizeElement.style.right = (newWidth - 3) + "px";
+        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();
+        this.updateTreeSelection();
+        this.updateBreadcrumbSizes();
 
-            event.preventDefault();
-        }
+        event.preventDefault();
     }
 }
 
index bcb50ed..897fe85 100644 (file)
@@ -68,7 +68,7 @@ iframe, a img {
     -webkit-background-size: auto 135%;
 }
 
-.platform-mac-leopard #toolbar {
+body.detached.platform-mac-leopard #toolbar {
     background: transparent !important;
 }
 
index 36b5284..7f0a89c 100644 (file)
@@ -223,7 +223,8 @@ var WebInspector = {
 
 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"));
     this.fileOutline.expandTreeElementsWhenArrowing = true;
@@ -286,6 +287,9 @@ WebInspector.loaded = function()
     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");
 
     InspectorController.loaded();
@@ -540,86 +544,125 @@ WebInspector.toggleStatusArea = function()
     this.showingStatusArea = !this.showingStatusArea;
 }
 
+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);
+    var x = event.pageX;
 
-        if (x == newWidth)
-            sidebar.dragLastX = x;
+    // 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);
 
-        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";
+    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();
+    if (WebInspector.currentPanel && WebInspector.currentPanel.resize)
+        WebInspector.currentPanel.resize();
 
-        event.preventDefault();
-    }
+    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();
-    }
+    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.dividerDragStart = function(element, dividerDrag, dividerDragEnd, event, cursor) 
+WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor) 
 {
-    element.dragging = true;
-    element.dragLastY = event.clientY + window.scrollY;
-    element.dragLastX = event.clientX + window.scrollX;
+    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) 
+WebInspector.elementDragEnd = function(element, dividerDrag, elementDragEnd, event) 
 {
-    element.dragging = false;
     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();
 }
 
 WebInspector.back = function()