Changeset 26922 in webkit

Timestamp:

Oct 23, 2007 11:11:16 AM (17 years ago)

Author:

weinig

Message:

Reviewed by Tim Hatcher.

Add resizing of the DOM view right sidebar. This allows us to actually see the values now.

• page/inspector/ResourcePanel.js:
• page/inspector/inspector.css:
• page/inspector/inspector.js:
• page/inspector/utilities.js:

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• page/inspector/ResourcePanel.js (modified) (2 diffs)
• page/inspector/inspector.css (modified) (1 diff)
• page/inspector/inspector.js (modified) (2 diffs)
• page/inspector/utilities.js (modified) (1 diff)

trunk/WebCore/ChangeLog

@@ +1 @@
+2007-10-23  Sam Weinig  <sam@webkit.org>
+
+        Reviewed by Tim Hatcher.
+
+        Add resizing of the DOM view right sidebar.  This allows us to actually see the values now.
+
+        * page/inspector/ResourcePanel.js:
+        * page/inspector/inspector.css:
+        * page/inspector/inspector.js:
+        * page/inspector/utilities.js:
+
 2007-10-23  David Hyatt  <hyatt@apple.com>
 

trunk/WebCore/page/inspector/ResourcePanel.js

@@ -272 +272 @@
             this.views.dom.contentElement.treeContentElement.appendChild(this.views.dom.contentElement.treeListElement);
 
+            this.views.dom.contentElement.resizeArea = document.createElement("div");
+            this.views.dom.contentElement.resizeArea.className = "sidebarResizeArea";
+            this.views.dom.contentElement.resizeArea.addEventListener("mousedown", function(event) { panel.rightSidebarResizerDragStart(event) }, false);
+
             this.views.dom.contentElement.appendChild(this.views.dom.contentElement.sideContentElement);
             this.views.dom.contentElement.appendChild(this.views.dom.contentElement.sidebarElement);
+            this.views.dom.contentElement.appendChild(this.views.dom.contentElement.resizeArea);
 
             this.rootDOMNode = this.resource.documentNode;
@@ -998 +1003 @@
         if (this.domTreeOutline && this.currentView && this.currentView === this.views.dom)
             this.domTreeOutline.handleKeyEvent(event);
+    },
+
+    rightSidebarResizerDragStart: function(event)
+    {
+        var panel = this; 
+        WebInspector.dividerDragStart(this.views.dom.contentElement.sidebarElement, function(event) { panel.rightSidebarResizerDrag(event) }, function(event) { panel.rightSidebarResizerDragEnd(event) }, event, "col-resize");
+    },
+
+    rightSidebarResizerDragEnd: function(event)
+    {
+        var panel = this;
+        WebInspector.dividerDragEnd(this.views.dom.contentElement.sidebarElement, function(event) { panel.rightSidebarResizerDrag(event) }, function(event) { panel.rightSidebarResizerDragEnd(event) }, event);
+    },
+
+    rightSidebarResizerDrag: function(event)
+    {
+        var rightSidebar = this.views.dom.contentElement.sidebarElement;
+        if (rightSidebar.dragging == true) {
+            var x = event.clientX + window.scrollX;
+
+            var leftSidebarWidth = document.defaultView.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.contentElement.sideContentElement.style.right = newWidth + "px";
+            this.views.dom.contentElement.resizeArea.style.right = (newWidth - 3) + "px";
+            event.preventDefault();
+        }
     }
 }

trunk/WebCore/page/inspector/inspector.css

@@ -1925 +1925 @@
     margin-bottom: -35px;
 }
+
+.sidebarResizeArea {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 222px;
+    width: 5px;
+    z-index: 100;
+    cursor: col-resize;
+}

trunk/WebCore/page/inspector/inspector.js

@@ -454 +454 @@
 
         var x = event.clientX + window.scrollX;
-        var newWidth = WebInspector.constrainedWidthOfSidebar(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);
 
         if (x == newWidth)
@@ -483 +486 @@
     document.removeEventListener("mouseup", dividerDragEnd, true);
     document.body.style.removeProperty("cursor");
-}
-
-WebInspector.constrainedWidthOfSidebar = function(width, minWidth, maxWidth) 
-{
-    // FIXME: We can should come up with a better hueristic for constraining the size
-    // of the sidebar.
-    if (typeof minWidth == "undefined")
-        minWidth = 100;
-    if (typeof maxWidth == "undefined")
-        maxWidth = window.innerWidth - 100;
-
-    if (width < minWidth)
-        width = minWidth;
-    else if (width > maxWidth)
-        width = maxWidth;
-
-    return width;
 }
 

trunk/WebCore/page/inspector/utilities.js

@@ -591 +591 @@
     var megabytes = kilobytes / 1024;
     return (Math.round(megabytes * 1000) / 1000) + "MB";
+}
+
+Number.constrain = function(num, min, max)
+{
+    if (num < min)
+        num = min;
+    else if (num > max)
+        num = max;
+    return num;
 }