[DevTools] Add minimum size to WebInspector.View.

Source/devtools/front_end/SplitView.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  * 1. Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *
@@ skipping 76 matching lines @@
     Both: "Both",
     OnlyMain: "OnlyMain",
     OnlySidebar: "OnlySidebar"
 }
 
 WebInspector.SplitView.Events = {
     SidebarSizeChanged: "SidebarSizeChanged",
     ShowModeChanged: "ShowModeChanged"
 }
 
+WebInspector.SplitView.MinPadding = 20;
+
 WebInspector.SplitView.prototype = {
     /**
      * @return {boolean}
      */
     isVertical: function()
     {
         return this._isVertical;
     },
 
     /**
@@ skipping 18 matching lines @@
         this.element.classList.remove(this._isVertical ? "hbox" : "vbox");
         this._isVertical = isVertical;
         this.element.classList.add(this._isVertical ? "hbox" : "vbox");
         delete this._resizerElementSize;
         this._sidebarSize = -1;
         this._restoreSidebarSizeFromSettings();
         if (this._shouldSaveShowMode)
             this._restoreAndApplyShowModeFromSettings();
         this._updateShowHideSidebarButton();
         this._updateResizersClass();
+        this.invalidateMinimumSize();
     },
 
     /**
      * @param {boolean=} animate
      */
     _updateLayout: function(animate)
     {
         delete this._totalSize; // Lazy update.
-        this._innerSetSidebarSize(this._preferredSidebarSize(), false, animate);
+        this._innerSetSidebarSize(this._preferredSidebarSize(), !!animate);
     },
 
     /**
      * @return {!Element}
      */
     mainElement: function()
     {
         return this._mainElement;
     },
 
@@ skipping 183 matching lines @@
     {
         this._resizable = resizable;
         this._updateResizersClass();
     },
 
     /**
      * @param {number} size
      */
     setSidebarSize: function(size)
     {
-        this._innerSetSidebarSize(size);
-        this._saveSidebarSizeToSettings();
+        this._savedSidebarSize = size;
+        this._saveSetting();
+        this._innerSetSidebarSize(size, false);
     },
 
     /**
      * @return {number}
      */
     sidebarSize: function()
     {
         return Math.max(0, this._sidebarSize);
     },
 
@@ skipping 10 matching lines @@
 
     /**
      * @param {string} showMode
      */
     _updateShowMode: function(showMode)
     {
         this._showMode = showMode;
         this._saveShowModeToSettings();
         this._updateShowHideSidebarButton();
         this.dispatchEventToListeners(WebInspector.SplitView.Events.ShowModeChanged, showMode);
+        this.invalidateMinimumSize();
     },
 
     /**
      * @param {number} size
-     * @param {boolean=} ignoreConstraints
-     * @param {boolean=} animate
+     * @param {boolean} animate
      */
-    _innerSetSidebarSize: function(size, ignoreConstraints, animate)
+    _innerSetSidebarSize: function(size, animate)
     {
-        if (this._showMode !== WebInspector.SplitView.ShowMode.Both) {
-            this._sidebarSize = size;
+        if (this._showMode !== WebInspector.SplitView.ShowMode.Both || !this.isShowing())
             return;
-        }
 
-        if (!ignoreConstraints)
-            size = this._applyConstraints(size);
+        size = this._applyConstraints(size);
         if (this._sidebarSize === size)
             return;
 
-        if (size < 0) {
-            // Never apply bad values, fix it upon onResize instead.
-            return;
-        }
-
         this._removeAllLayoutProperties();
 
         var sizeValue = (size / WebInspector.zoomManager.zoomFactor()) + "px";
         this.sidebarElement().style.flexBasis = sizeValue;
 
         if (!this._resizerElementSize)
             this._resizerElementSize = this._isVertical ? this._resizerElement.offsetWidth : this._resizerElement.offsetHeight;
 
         // Position resizer.
         if (this._isVertical) {
@@ skipping 100 matching lines @@
             window.cancelAnimationFrame(this._animationFrameHandle);
             delete this._animationFrameHandle;
         }
         if (this._animationCallback) {
             this._animationCallback();
             delete this._animationCallback;
         }
     },
 
     /**
-     * @param {number=} minWidth
-     * @param {number=} minHeight
-     */
-    setSidebarElementConstraints: function(minWidth, minHeight)
-    {
-        if (typeof minWidth === "number")
-            this._minimumSidebarWidth = minWidth;
-        if (typeof minHeight === "number")
-            this._minimumSidebarHeight = minHeight;
-    },
-
-    /**
-     * @param {number=} minWidth
-     * @param {number=} minHeight
-     */
-    setMainElementConstraints: function(minWidth, minHeight)
-    {
-        if (typeof minWidth === "number")
-            this._minimumMainWidth = minWidth;
-        if (typeof minHeight === "number")
-            this._minimumMainHeight = minHeight;
-    },
-
-    /**
      * @param {number} sidebarSize
      * @return {number}
      */
     _applyConstraints: function(sidebarSize)
     {
-        const minPadding = 20;
         var totalSize = this.totalSize();
-        var minimumSiderbarSizeContraint = this.isVertical() ? this._minimumSidebarWidth : this._minimumSidebarHeight;
-        var from = minimumSiderbarSizeContraint || 0;
-        if (typeof minimumSiderbarSizeContraint !== "number")
-            from = Math.max(from, minPadding);
 
-        var minimumMainSizeConstraint = this.isVertical() ? this._minimumMainWidth : this._minimumMainHeight;
-        var minMainSize = minimumMainSizeConstraint || 0;
-        if (typeof minimumMainSizeConstraint !== "number")
-            minMainSize = Math.max(minMainSize, minPadding);
+        var size = this._sidebarView.minimumSize();
+        var from = this.isVertical() ? size.width : size.height;
+        if (!from)
+            from = WebInspector.SplitView.MinPadding;
+
+        size = this._mainView.minimumSize();
+        var minMainSize = this.isVertical() ? size.width : size.height;
+        if (!minMainSize)
+            minMainSize = WebInspector.SplitView.MinPadding;
 
         var to = totalSize - minMainSize;
         if (from <= to)
             return Number.constrain(sidebarSize, from, to);
 
-        return -1;
+        // If we don't have enough space (which is a very rare case), prioritize main view.
+        return Math.max(0, to);
     },
 
     wasShown: function()
     {
         this._forceUpdateLayout();
         WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
     },
 
     willHide: function()
     {
         WebInspector.zoomManager.removeEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
     },
 
     onResize: function()
     {
         this._updateLayout();
     },
 
+    onLayout: function()
+    {
+        this._updateLayout();
+    },
+
+    /**
+     * @return {!Size}
+     */
+    calculateMinimumSize: function()
+    {
+        if (this._showMode === WebInspector.SplitView.ShowMode.OnlyMain)
+            return this._mainView.minimumSize();
+        if (this._showMode === WebInspector.SplitView.ShowMode.OnlySidebar)
+            return this._sidebarView.minimumSize();
+
+        var mainSize = this._mainView.minimumSize();
+        var sidebarSize = this._sidebarView.minimumSize();
+        var min = WebInspector.SplitView.MinPadding;
+        if (this._isVertical)

[vsevik, 2014/03/25 13:26:04]

Does it mean we should also invalidateMinimumSize in setVertical?

[dgozman, 2014/03/25 14:13:58]

It's already done.

+            return new Size((mainSize.width || min) + (sidebarSize.width || min), Math.max(mainSize.height, sidebarSize.height));
+        else
+            return new Size(Math.max(mainSize.width, sidebarSize.width), (mainSize.height || min) + (sidebarSize.height || min));
+    },
+
     /**
      * @param {!MouseEvent} event
      * @return {boolean}
      */
     _startResizerDragging: function(event)
     {
         if (!this._resizable)
             return false;
 
         var dipEventPosition = (this._isVertical ? event.pageX : event.pageY) * WebInspector.zoomManager.zoomFactor();
         this._dragOffset = (this._secondIsSidebar ? this.totalSize() - this._sidebarSize : this._sidebarSize) - dipEventPosition;
         return true;
     },
 
     /**
      * @param {!MouseEvent} event
      */
     _resizerDragging: function(event)
     {
         var dipEventPosition = (this._isVertical ? event.pageX : event.pageY) * WebInspector.zoomManager.zoomFactor();
         var newOffset = dipEventPosition + this._dragOffset;
         var newSize = (this._secondIsSidebar ? this.totalSize() - newOffset : newOffset);
-        this.setSidebarSize(newSize);
+        var constrainedSize = this._applyConstraints(newSize);
+        this._savedSidebarSize = constrainedSize;
+        this._saveSetting();
+        this._innerSetSidebarSize(constrainedSize, false);
         event.preventDefault();
     },
 
     /**
      * @param {!MouseEvent} event
      */
     _endResizerDragging: function(event)
     {
         delete this._dragOffset;
-        this._saveSidebarSizeToSettings();
     },
 
     hideDefaultResizer: function()
     {
         this.uninstallResizer(this._resizerElement);
     },
 
     /**
      * @param {!Element} resizerElement
      */
@@ skipping 112 matching lines @@
             break;
         case WebInspector.SplitView.ShowMode.OnlyMain:
             this.hideSidebar();
             break;
         case WebInspector.SplitView.ShowMode.OnlySidebar:
             this.hideMain();
             break;
         }
     },
 
-    _saveSidebarSizeToSettings: function()
-    {
-        if (this._sidebarSize < 0)
-            return;
-
-        this._savedSidebarSize = this._sidebarSize;
-        this._saveSetting();
-    },
-
     _saveShowModeToSettings: function()
     {
         this._savedShowMode = this._showMode;
         this._saveSetting();
     },
 
     _saveSetting: function()
     {
         var setting = this._setting();
         if (!setting)
@@ skipping 64 matching lines @@
         this._showHideSidebarButton.state = sidebarHidden ? "show" : "hide";
         this._showHideSidebarButton.element.classList.toggle("top-sidebar-show-hide-button", !this.isVertical() && !this.isSidebarSecond());
         this._showHideSidebarButton.element.classList.toggle("right-sidebar-show-hide-button", this.isVertical() && this.isSidebarSecond());
         this._showHideSidebarButton.element.classList.toggle("bottom-sidebar-show-hide-button", !this.isVertical() && this.isSidebarSecond());
         this._showHideSidebarButton.element.classList.toggle("left-sidebar-show-hide-button", this.isVertical() && !this.isSidebarSecond());
         this._showHideSidebarButton.title = sidebarHidden ? WebInspector.UIString("Show %s", this._showHideSidebarButtonTitle) : WebInspector.UIString("Hide %s", this._showHideSidebarButtonTitle);
     },
 
     __proto__: WebInspector.View.prototype
 }