Changeset 142452 in webkit

Timestamp:

Feb 11, 2013 4:15:58 AM (11 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Allow SplitView to keep the sidebar size as a fraction of the container size
​https://bugs.webkit.org/show_bug.cgi?id=109414

Patch by Vladislav Kaznacheev <​kaznacheev@chromium.org> on 2013-02-11
Reviewed by Vsevolod Vlasov.

SplitView now interprets defaultSidebarWidth and defaultSidebarHeight values between 0 and 1 as
fractions of the total container size. The sidebar then will grow or shrink along with the container.
When the sidebar is resized manually the updated ratio is stored in the settings.

• inspector/front-end/SplitView.js:

(WebInspector.SplitView):
(WebInspector.SplitView.prototype._removeAllLayoutProperties):
(WebInspector.SplitView.prototype._updateTotalSize):
(WebInspector.SplitView.prototype._innerSetSidebarSize):
(WebInspector.SplitView.prototype._saveSidebarSize):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/SplitView.js (modified) (6 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-02-11  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Allow SplitView to keep the sidebar size as a fraction of the container size
+        https://bugs.webkit.org/show_bug.cgi?id=109414
+
+        Reviewed by Vsevolod Vlasov.
+
+        SplitView now interprets defaultSidebarWidth and defaultSidebarHeight values between 0 and 1 as
+        fractions of the total container size. The sidebar then will grow or shrink along with the container.
+        When the sidebar is resized manually the updated ratio is stored in the settings.
+
+        * inspector/front-end/SplitView.js:
+        (WebInspector.SplitView):
+        (WebInspector.SplitView.prototype._removeAllLayoutProperties):
+        (WebInspector.SplitView.prototype._updateTotalSize):
+        (WebInspector.SplitView.prototype._innerSetSidebarSize):
+        (WebInspector.SplitView.prototype._saveSidebarSize):
+
 2013-02-11  Pavel Feldman  <pfeldman@chromium.org>
 

trunk/Source/WebCore/inspector/front-end/SplitView.js

@@ -53 +53 @@
     this._savedSidebarHeight = defaultSidebarHeight || this._savedSidebarWidth;
 
+    if (0 < this._savedSidebarWidth && this._savedSidebarWidth < 1 &&
+        0 < this._savedSidebarHeight && this._savedSidebarHeight < 1)
+        this._useFraction = true;
+    
     this._sidebarSizeSettingName = sidebarSizeSettingName;
 
@@ -218 +222 @@
         this._resizerElement.style.removeProperty("top");
         this._resizerElement.style.removeProperty("bottom");
+
+        this._resizerElement.style.removeProperty("margin-left");
+        this._resizerElement.style.removeProperty("margin-right");
+        this._resizerElement.style.removeProperty("margin-top");
+        this._resizerElement.style.removeProperty("margin-bottom");
     },
 
@@ -280 +289 @@
     {
         this._totalSize = this._isVertical ? this.element.offsetWidth : this.element.offsetHeight;
-    },
-  
+        if (this._useFraction)
+            this._sidebarSize = this._lastSidebarSize();
+    },
+
     /**
      * @param {number} size
@@ -291 +302 @@
 
         this._removeAllLayoutProperties();
+
+        var sizeValue;
+        if (this._useFraction)
+            sizeValue = (size / this._totalSize) * 100 + "%";
+        else
+            sizeValue = size + "px";
 
         if (this._isVertical) {
             var resizerWidth = this._resizerElement.offsetWidth;
             if (this._secondIsSidebar) {
-                this._firstElement.style.right = size + "px";
-                this._secondElement.style.width = size + "px";
-                this._resizerElement.style.right = size - resizerWidth / 2 + "px";
+                this._firstElement.style.right = sizeValue;
+                this._secondElement.style.width = sizeValue;
+                this._resizerElement.style.right = sizeValue;
+                this._resizerElement.style.marginRight = -resizerWidth / 2 + "px";
             } else {
-                this._firstElement.style.width = size + "px";
-                this._secondElement.style.left = size + "px";
-                this._resizerElement.style.left = size - resizerWidth / 2 + "px";
+                this._firstElement.style.width = sizeValue;
+                this._secondElement.style.left = sizeValue;
+                this._resizerElement.style.left = sizeValue;
+                this._resizerElement.style.marginLeft = -resizerWidth / 2 + "px";
             }
         } else {
             var resizerHeight = this._resizerElement.offsetHeight;
-           
+
             if (this._secondIsSidebar) {
-                this._firstElement.style.bottom = size + "px";
-                this._secondElement.style.height = size + "px";
-                this._resizerElement.style.bottom = size - resizerHeight / 2 + "px";
+                this._firstElement.style.bottom = sizeValue;
+                this._secondElement.style.height = sizeValue;
+                this._resizerElement.style.bottom = sizeValue;
+                this._resizerElement.style.marginBottom = -resizerHeight / 2 + "px";
             } else {
-                this._firstElement.style.height = size + "px";
-                this._secondElement.style.top = size + "px";
-                this._resizerElement.style.top = size - resizerHeight / 2 + "px";
+                this._firstElement.style.height = sizeValue;
+                this._secondElement.style.top = sizeValue;
+                this._resizerElement.style.top = sizeValue;
+                this._resizerElement.style.marginTop = -resizerHeight / 2 + "px";
             }
         }
@@ -415 +436 @@
         var sizeSetting = this._sizeSetting();
         var size = sizeSetting ? sizeSetting.get() : 0;
-        return size || (this._isVertical ? this._savedSidebarWidth : this._savedSidebarHeight);
+        if (!size)
+             size = this._isVertical ? this._savedSidebarWidth : this._savedSidebarHeight;
+        if (this._useFraction)
+            size *= this._totalSize;
+        return size;
     },
 
@@ -423 +448 @@
     _saveSidebarSize: function(size)
     {
+        if (this._useFraction)
+            size /= this._totalSize;
+
         if (this._isVertical)
             this._savedSidebarWidth = size;