git-svn-id: https://svn.webkit.org/repository/webkit/trunk@15001 268f45cc-cd09-0410...
authorkdecker <kdecker@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 24 Jun 2006 00:58:34 +0000 (00:58 +0000)
committerkdecker <kdecker@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 24 Jun 2006 00:58:34 +0000 (00:58 +0000)
WebKitTools/ChangeLog
WebKitTools/Drosera/debugger.css
WebKitTools/Drosera/debugger.html
WebKitTools/Drosera/debugger.js

index 0fc9df0fca51ac90e716a38f88224d4c3a2ca56e..e77519ec860a6f78ee98ea44a63f2c8386d86157 100644 (file)
@@ -1,3 +1,9 @@
+2006-06-23  Kevin Decker         <kdecker@apple.com>
+
+        Reviewed by Tim Hatcher.
+
+        - Made column headers in Drosera resizable.
+
 2006-06-22  Alexey Proskuryakov  <ap@nypop.com>
 
         Reviewed by ggaren.
index 8a5411d9b918d7eec01e7a499e3a8b7d040dc8f0..659044c00a440ccb23524fd486655620d54f32ac 100644 (file)
@@ -205,7 +205,7 @@ td { padding: 3px 7px 3px 9px; height: 15px; box-sizing: border-box; }
 }
 
 .variable {
-    width: 12em;
+    width: 170px;
 }
 
 .column th.scrollCorner {
@@ -214,6 +214,15 @@ td { padding: 3px 7px 3px 9px; height: 15px; box-sizing: border-box; }
     border-right: none;
 }
 
+#variableColumnResizer { 
+    position: absolute;
+    top: 0;
+    left: 168px;
+    width: 4px;
+    height: 16px;
+    cursor: move;
+}
+
 .column th {
     background: url(glossyHeader.png) repeat-x;
     border-right: 1px solid #d9d9d9;
index 714ef00337381b2d21fda91e59749c3be2adde81..45dc9dd0d6272d36ddb1e4477c57336e10b6b478 100644 (file)
@@ -53,7 +53,8 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 <div id="infoDivider"></div>
 <div id="variables">
 <table id="variablesTableHeader">
-<tr class="column"><th class="variable" onmousedown="headerMouseDown(this);" onmouseup="headerMouseUp(this);" onmouseout="headerMouseOut(this);">Variable</th><th onmousedown="headerMouseDown(this);" onmouseup="headerMouseUp(this);" onmouseout="headerMouseOut(this);">Value</th><th class="scrollCorner"></th></tr>
+<tr class="column"><th class="variable" id ="variable" onmousedown="headerMouseDown(this);" onmouseup="headerMouseUp(this);" onmouseout="headerMouseOut(this);">Variable<div id="variableColumnResizer"></div>
+</th><th onmousedown="headerMouseDown(this);" onmouseup="headerMouseUp(this);" onmouseout="headerMouseOut(this);">Value</th><th class="scrollCorner"></th></tr>
 </table>
 <div id="variablesBody">
 <div class="infoBackground"></div>
index d521da7abdf96346bdab1695033d4a3411a452b0..d0696d66813fec8407a55d16f3c0185f3235c66e 100644 (file)
@@ -32,6 +32,7 @@ var currentRow = null;
 var currentStack = null;
 var previousFiles = new Array();
 var nextFiles = new Array();
+var isResizingColumn = false;
 
 function sleep(numberMillis) {
     var now = new Date();
@@ -43,8 +44,18 @@ function sleep(numberMillis) {
     }
 }
 
+function columnResizerMouseOver(element) {
+    element.style.cursor = "move";
+}
+
+function columnResizerMouseOut(element) {
+
+    element.style.cursor = "arrow";
+}
+
 function headerMouseDown(element) {
-    element.style.background = "url(glossyHeaderPressed.png) repeat-x";
+    if (!isResizingColumn) 
+        element.style.background = "url(glossyHeaderPressed.png) repeat-x";
 }
 
 function headerMouseUp(element) {
@@ -72,6 +83,16 @@ function infoDividerDragStart(event) {
     dividerDragStart(document.getElementById("infoDivider"), infoDividerDrag, infoDividerDragEnd, event);
 }
 
+function columnResizerDragStart(event) {
+    isResizingColumn = true;
+    dividerDragStart(document.getElementById("variableColumnResizer"), columnResizerDrag, columnResizerDragEnd, event);
+}
+
+function columnResizerDragEnd(event) {
+    isResizingColumn = false;
+    dividerDragEnd(document.getElementById("variableColumnResizer"), columnResizerDrag, columnResizerDragEnd, event);
+}
+
 function infoDividerDragEnd(event) {
     dividerDragEnd(document.getElementById("infoDivider"), infoDividerDrag, infoDividerDragEnd);
 }
@@ -86,6 +107,39 @@ function dividerDragEnd(element, dividerDrag, dividerDragEnd, event) {
     document.removeEventListener("mouseup", dividerDragEnd, true);
 }
 
+function columnResizerDrag(event) {
+    var element = document.getElementById("variableColumnResizer");
+    if (element.dragging == true) {
+        var main = document.getElementById("rightPane");
+        var variableColumn = document.getElementById("variable");
+        var x = event.clientX + window.scrollX;
+        var delta = element.dragLastX - x;
+        var newWidth = constrainedWidthFromElement(variableColumn.clientWidth - delta, main);
+        variableColumn.style.width = newWidth + "px";
+        element.style.left = newWidth + "px";
+        element.dragLastX = x;
+        event.preventDefault();
+    }
+}
+
+function constrainedWidthFromElement(width, element) {
+    if (width < element.clientWidth * 0.25)
+        width = element.clientWidth * 0.25;
+    else if (width > element.clientWidth * 0.75)
+        width = element.clientWidth * 0.75;
+
+    return width;
+}
+
+function constrainedHeightFromElement(height, element) {
+    if (height < element.clientHeight * 0.25)
+        height = element.clientHeight * 0.25;
+    else if (height > element.clientHeight * 0.75)
+        height = element.clientHeight * 0.75;
+
+    return height;
+}
+
 function infoDividerDrag(event) {
     var element = document.getElementById("infoDivider");
     if (document.getElementById("infoDivider").dragging == true) {
@@ -94,13 +148,7 @@ function infoDividerDrag(event) {
         var rightPane = document.getElementById("rightPane");
         var x = event.clientX + window.scrollX;
         var delta = element.dragLastX - x;
-
-        var newWidth = leftPane.clientWidth - delta;
-        if (newWidth < main.clientWidth * 0.25)
-            newWidth = main.clientWidth * 0.25;
-        else if (newWidth > main.clientWidth * 0.75)
-            newWidth = main.clientWidth * 0.75;
-
+        var newWidth = constrainedWidthFromElement(leftPane.clientWidth - delta, main);
         leftPane.style.width = newWidth + "px";
         rightPane.style.left = newWidth + "px";
         element.dragLastX = x;
@@ -116,16 +164,9 @@ function dividerDrag(event) {
         var bottom = document.getElementById("body");
         var y = event.clientY + window.scrollY;
         var delta = element.dragLastY - y;
-
-        var newHeight = top.clientHeight - delta;
-        if (newHeight < main.clientHeight * 0.25)
-            newHeight = main.clientHeight * 0.25;
-        else if (newHeight > main.clientHeight * 0.75)
-            newHeight = main.clientHeight * 0.75;
-
+        var newHeight = constrainedHeightFromElement(top.clientHeight - delta, main);
         top.style.height = newHeight + "px";
         bottom.style.top = newHeight + "px";
-
         element.dragLastY = y;
         event.preventDefault();
     }
@@ -134,6 +175,7 @@ function dividerDrag(event) {
 function loaded() {
     document.getElementById("divider").addEventListener("mousedown", sourceDividerDragStart, false);
     document.getElementById("infoDivider").addEventListener("mousedown", infoDividerDragStart, false);
+    document.getElementById("variableColumnResizer").addEventListener("mousedown", columnResizerDragStart, false);
 }
 
 function isPaused() {