Web Inspector: Allow SplitView to keep the sidebar size as a fraction of the containe...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 11 Feb 2013 12:15:58 +0000 (12:15 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 11 Feb 2013 12:15:58 +0000 (12:15 +0000)
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):

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

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

index cdaa0e81e6ac0c00d78ef65f5a13db46c86d12ff..80ffadd129c5e81ae43bd40664d6873c406e4018 100644 (file)
@@ -1,3 +1,21 @@
+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>
 
         Web Inspector: highlight DOM nodes on hover while debugging
index 1743bad9141134676e72a943b73fc422a0873fcc..164d17e180778b7e7c5a0c568b2773f7c6c02dbb 100644 (file)
@@ -52,6 +52,10 @@ WebInspector.SplitView = function(isVertical, sidebarSizeSettingName, defaultSid
     this._savedSidebarWidth = defaultSidebarWidth || 200;
     this._savedSidebarHeight = defaultSidebarHeight || this._savedSidebarWidth;
 
+    if (0 < this._savedSidebarWidth && this._savedSidebarWidth < 1 &&
+        0 < this._savedSidebarHeight && this._savedSidebarHeight < 1)
+        this._useFraction = true;
+    
     this._sidebarSizeSettingName = sidebarSizeSettingName;
 
     this._secondIsSidebar = true;
@@ -217,6 +221,11 @@ WebInspector.SplitView.prototype = {
         this._resizerElement.style.removeProperty("right");
         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");
     },
 
     showBoth: function()
@@ -279,8 +288,10 @@ WebInspector.SplitView.prototype = {
     _updateTotalSize: function()
     {
         this._totalSize = this._isVertical ? this.element.offsetWidth : this.element.offsetHeight;
+        if (this._useFraction)
+            this._sidebarSize = this._lastSidebarSize();
     },
-  
+
     /**
      * @param {number} size
      */
@@ -291,28 +302,38 @@ WebInspector.SplitView.prototype = {
 
         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";
             }
         }
 
@@ -414,7 +435,11 @@ WebInspector.SplitView.prototype = {
     {
         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;
     },
 
     /**
@@ -422,6 +447,9 @@ WebInspector.SplitView.prototype = {
      */
     _saveSidebarSize: function(size)
     {
+        if (this._useFraction)
+            size /= this._totalSize;
+
         if (this._isVertical)
             this._savedSidebarWidth = size;
         else