Reviewed by Tim Hatcher.
authorpewtermoose <pewtermoose@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 24 Jun 2007 19:22:55 +0000 (19:22 +0000)
committerpewtermoose <pewtermoose@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 24 Jun 2007 19:22:55 +0000 (19:22 +0000)
        Bug 14265: Cannot resize columns in webinspector
        http://bugs.webkit.org/show_bug.cgi?id=14265

        * page/inspector/inspector.css:
        * page/inspector/inspector.html:
        * page/inspector/inspector.js:

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

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

index a69cfb7..76f1991 100644 (file)
@@ -1,3 +1,14 @@
+2007-06-24  Matt Lilek  <pewtermoose@gmail.com>
+
+        Reviewed by Tim Hatcher.
+
+        Bug 14265: Cannot resize columns in webinspector
+        http://bugs.webkit.org/show_bug.cgi?id=14265
+
+        * page/inspector/inspector.css:
+        * page/inspector/inspector.html:
+        * page/inspector/inspector.js:
+
 2007-06-23  Adam Roben  <aroben@apple.com>
 
         Silence a build warning about not finding `num-cpus`
index 53c2ec2..cbf8cfa 100644 (file)
@@ -274,11 +274,20 @@ body.inactive #sidebar {
     height: 21px;
     border-top: 1px solid #bbb;
     -webkit-box-sizing: border-box;
-    background-image: url(Images/sidebarResizeWidget.png), url(Images/sidebarStatusAreaBackground.png);
+    background-image: url(Images/sidebarStatusAreaBackground.png);
     background-position: right, center;
     background-repeat: no-repeat, repeat-x;
 }
 
+#statusbar #sidebarResizeWidget {
+    display: block;
+    float: right;
+    width: 17px;
+    height: 20px;
+    background: url(Images/sidebarResizeWidget.png) right no-repeat;
+    cursor: col-resize;
+}
+
 #statusbar button {
     -webkit-apearance: none;
     vertical-align: top;
index 520d3a4..d99d19e 100644 (file)
@@ -49,7 +49,10 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <div id="sidebar" class="focusable focused">
         <ol id="list"></ol>
         <ol id="status"></ol>
-        <div id="statusbar"><button id="statusToggle"></button><button id="attachToggle"></button></div>
+        <div id="statusbar">
+            <button id="statusToggle"></button><button id="attachToggle"></button>
+            <span id="sidebarResizeWidget"></span>
+        </div>
     </div>
     <div id="searchResults" class="focusable"></div>
     <div id="main" class="focusable blurred"></div>
index cac0194..2c72272 100644 (file)
@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2006, 2007 Apple Inc.  All rights reserved.
+ * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -235,6 +236,7 @@ WebInspector.loaded = function(event)
 
     document.getElementById("attachToggle").addEventListener("click", function(event) { WebInspector.toggleAttach() }, true);
     document.getElementById("statusToggle").addEventListener("click", function(event) { WebInspector.toggleStatusArea() }, true);
+    document.getElementById("sidebarResizeWidget").addEventListener("mousedown", WebInspector.sidebarResizerDragStart, true);
 
     document.body.addStyleClass("detached");
 
@@ -430,6 +432,67 @@ WebInspector.toggleStatusArea = function()
     this.showingStatusArea = !this.showingStatusArea;
 }
 
+WebInspector.sidebarResizerDragStart = function(event)
+{
+    WebInspector.dividerDragStart(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.sidebarResizerDrag = function(event)
+{
+    var sidebar = document.getElementById("sidebar");
+    if (sidebar.dragging == true) {
+        var main = document.getElementById("main");
+
+        var x = event.clientX + window.scrollX;
+        var delta = sidebar.dragLastX - x;
+        var newWidth = WebInspector.constrainedWidthFromElement(x, main);
+
+        if (x == newWidth)
+            sidebar.dragLastX = x;
+
+        sidebar.style.width = newWidth + "px";
+        main.style.left = newWidth + "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;
+    document.addEventListener("mousemove", dividerDrag, true);
+    document.addEventListener("mouseup", dividerDragEnd, true);
+    document.body.style.cursor = cursor;
+    event.preventDefault();
+}
+
+WebInspector.dividerDragEnd = function(element, dividerDrag, dividerDragEnd, event) 
+{
+    element.dragging = false;
+    document.removeEventListener("mousemove", dividerDrag, true);
+    document.removeEventListener("mouseup", dividerDragEnd, true);
+    document.body.style.removeProperty("cursor");
+}
+
+WebInspector.constrainedWidthFromElement = function(width, element, constrainLeft, constrainRight) 
+{
+    if (constrainLeft === undefined) constrainLeft = 0.25;
+    if (constrainRight === undefined) constrainRight = 0.75;
+
+    if (width < element.clientWidth * constrainLeft)
+        width = 200;
+    else if (width > element.clientWidth * constrainRight)
+        width = element.clientWidth * constrainRight;
+
+    return width;
+}
+
 WebInspector.back = function()
 {
     if (this.currentBackForwardIndex <= 0) {