Changeset 23753 in webkit

Timestamp:

Jun 24, 2007 12:22:55 PM (17 years ago)

Author:

pewtermoose

Message:

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:

Location:

trunk/WebCore

Files:

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

trunk/WebCore/ChangeLog

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

trunk/WebCore/page/inspector/inspector.css

@@ -275 +275 @@
     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;
 }
 

trunk/WebCore/page/inspector/inspector.html

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

trunk/WebCore/page/inspector/inspector.js

@@ -1 +1 @@
 /*
  * 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
@@ -236 +237 @@
     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");
@@ -429 +431 @@
 {
     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;
 }