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:

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

diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 6cb2db63537372f1d4966420936e8c30afda0faa..5137a8f2025397c969dcdbca1d5694b609d709bd 100644 (file)
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,14 @@
+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>
 
         Get basic hit testing right for transforms.

diff --git a/WebCore/page/inspector/ResourcePanel.js b/WebCore/page/inspector/ResourcePanel.js
index 082c3036747edf1b8755da19a527f776cc8e9d62..23a6277b67776ddd6d35accd693b5eda4185c4c3 100644 (file)
--- a/WebCore/page/inspector/ResourcePanel.js
+++ b/WebCore/page/inspector/ResourcePanel.js
@@ -271,8 +271,13 @@ WebInspector.ResourcePanel.prototype = {
             this.views.dom.contentElement.sideContentElement.appendChild(this.views.dom.contentElement.crumbsElement);
             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;
         } else if (this.resource.category === WebInspector.resourceCategories.images) {
@@ -997,6 +1002,37 @@ WebInspector.ResourcePanel.prototype = {
     {
         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();
+        }
     }
 }
 

diff --git a/WebCore/page/inspector/inspector.css b/WebCore/page/inspector/inspector.css
index b89ef856e5c3fc63f4eb5b218ead0ff595e0120d..76b2fbe1563b39ab70bef76c74e925f1dfc4894c 100644 (file)
--- a/WebCore/page/inspector/inspector.css
+++ b/WebCore/page/inspector/inspector.css
@@ -1924,3 +1924,13 @@ body.inactive #sidebar li.selected {
     margin-top: -10px;
     margin-bottom: -35px;
 }
+
+.sidebarResizeArea {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 222px;
+    width: 5px;
+    z-index: 100;
+    cursor: col-resize;
+}

diff --git a/WebCore/page/inspector/inspector.js b/WebCore/page/inspector/inspector.js
index 24606a6b4d47a68df7d48cbf336c4fd699ed82e0..6bc19035b49d0025321302a570b8d52477c4470a 100644 (file)
--- a/WebCore/page/inspector/inspector.js
+++ b/WebCore/page/inspector/inspector.js
@@ -453,7 +453,10 @@ WebInspector.sidebarResizerDrag = function(event)
         var buttonContainer = document.getElementById("viewbuttons");
 
         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)
             sidebar.dragLastX = x;
@@ -484,23 +487,6 @@ WebInspector.dividerDragEnd = function(element, dividerDrag, dividerDragEnd, eve
     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;
-}
-
 WebInspector.back = function()
 {
     if (this.currentBackForwardIndex <= 0) {

diff --git a/WebCore/page/inspector/utilities.js b/WebCore/page/inspector/utilities.js
index 2aab4f393e8576ba07e229e5661ca748b85eb10f..0bfd25288ddb144636385fb5fd890250ad206896 100644 (file)
--- a/WebCore/page/inspector/utilities.js
+++ b/WebCore/page/inspector/utilities.js
@@ -592,6 +592,15 @@ Number.bytesToString = function(bytes)
     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;
+}
+
 HTMLTextAreaElement.prototype.moveCursorToEnd = function()
 {
     var length = this.value.length;