Changeset 140304 in webkit


Ignore:
Timestamp:
Jan 20, 2013 11:38:14 PM (11 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Allow SplitView to change orientation after the construction.
https://bugs.webkit.org/show_bug.cgi?id=107263

Added SplitView.prototype.setIsVertical to change the orientation on the fly.
Instead of passing default sidebar size to the constructor the client
may now pass separate defaults for the sidebar width and height. Passing
just one default works as before.

Patch by Vladislav Kaznacheev <kaznacheev@chromium.org> on 2013-01-20
Reviewed by Pavel Feldman.

No new tests.

  • inspector/front-end/SplitView.js:

(WebInspector.SplitView):
(WebInspector.SplitView.prototype.isVertical):
(WebInspector.SplitView.prototype.setIsVertical):
(WebInspector.SplitView.prototype._innerSetIsVertical):
(WebInspector.SplitView.prototype._updateLayout):
(WebInspector.SplitView.prototype.isSidebarSecond):
(WebInspector.SplitView.prototype.showBoth):
(WebInspector.SplitView.prototype._updateTotalSize):
(WebInspector.SplitView.prototype._innerSetSidebarSize):
(WebInspector.SplitView.prototype.wasShown):
(WebInspector.SplitView.prototype.onResize):
(WebInspector.SplitView.prototype.installResizer):
(WebInspector.SplitView.prototype._onDragStart):
(WebInspector.SplitView.prototype._sizeSetting):
(WebInspector.SplitView.prototype._lastSidebarSize):
(WebInspector.SplitView.prototype.get _saveSidebarSize):

Location:
trunk/Source/WebCore
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r140303 r140304  
     12013-01-20  Vladislav Kaznacheev  <kaznacheev@chromium.org>
     2
     3        Web Inspector: Allow SplitView to change orientation after the construction.
     4        https://bugs.webkit.org/show_bug.cgi?id=107263
     5
     6        Added SplitView.prototype.setIsVertical to change the orientation on the fly.
     7        Instead of passing default sidebar size to the constructor the client
     8        may now pass separate defaults for the sidebar width and height. Passing
     9        just one default works as before.
     10
     11        Reviewed by Pavel Feldman.
     12
     13        No new tests.
     14
     15        * inspector/front-end/SplitView.js:
     16        (WebInspector.SplitView):
     17        (WebInspector.SplitView.prototype.isVertical):
     18        (WebInspector.SplitView.prototype.setIsVertical):
     19        (WebInspector.SplitView.prototype._innerSetIsVertical):
     20        (WebInspector.SplitView.prototype._updateLayout):
     21        (WebInspector.SplitView.prototype.isSidebarSecond):
     22        (WebInspector.SplitView.prototype.showBoth):
     23        (WebInspector.SplitView.prototype._updateTotalSize):
     24        (WebInspector.SplitView.prototype._innerSetSidebarSize):
     25        (WebInspector.SplitView.prototype.wasShown):
     26        (WebInspector.SplitView.prototype.onResize):
     27        (WebInspector.SplitView.prototype.installResizer):
     28        (WebInspector.SplitView.prototype._onDragStart):
     29        (WebInspector.SplitView.prototype._sizeSetting):
     30        (WebInspector.SplitView.prototype._lastSidebarSize):
     31        (WebInspector.SplitView.prototype.get _saveSidebarSize):
     32
    1332013-01-20  Kentaro Hara  <haraken@chromium.org>
    234
  • trunk/Source/WebCore/inspector/front-end/SplitView.js

    r134031 r140304  
    3232 * @param {boolean} isVertical
    3333 * @param {string=} sidebarSizeSettingName
    34  * @param {number=} defaultSidebarSize
     34 * @param {number=} defaultSidebarWidth
     35 * @param {number=} defaultSidebarHeight
    3536 */
    36 WebInspector.SplitView = function(isVertical, sidebarSizeSettingName, defaultSidebarSize)
     37WebInspector.SplitView = function(isVertical, sidebarSizeSettingName, defaultSidebarWidth, defaultSidebarHeight)
    3738{
    3839    WebInspector.View.call(this);
    39     this._isVertical = isVertical;
    4040
    4141    this.registerRequiredCSS("splitView.css");
     
    4343    this.element.className = "split-view";
    4444
    45     this._firstElement = document.createElement("div");
    46     this._firstElement.className = "split-view-contents split-view-contents-" + (isVertical ? "vertical" : "horizontal");
    47     if (isVertical)
    48         this._firstElement.style.left = 0;
    49     else
    50         this._firstElement.style.top = 0;
    51     this.element.appendChild(this._firstElement);
    52 
    53     this._secondElement = document.createElement("div");
    54     this._secondElement.className = "split-view-contents split-view-contents-" + (isVertical ? "vertical" : "horizontal");
    55     if (isVertical)
    56         this._secondElement.style.right = 0;
    57     else
    58         this._secondElement.style.bottom = 0;
    59     this.element.appendChild(this._secondElement);
    60 
    61     this._resizerElement = document.createElement("div");
    62     this._resizerElement.className = "split-view-resizer split-view-resizer-" + (isVertical ? "vertical" : "horizontal");
     45    this._firstElement = this.element.createChild("div", "split-view-contents");
     46
     47    this._secondElement = this.element.createChild("div", "split-view-contents");
     48
     49    this._resizerElement = this.element.createChild("div", "split-view-resizer");
    6350    this.installResizer(this._resizerElement);
    6451    this._resizable = true;
    65     this.element.appendChild(this._resizerElement);
    66 
    67     defaultSidebarSize = defaultSidebarSize || 200;
    68     this._savedSidebarSize = defaultSidebarSize;
     52
     53    this._savedSidebarWidth = defaultSidebarWidth || 200;
     54    this._savedSidebarHeight = defaultSidebarHeight || this._savedSidebarWidth;
    6955
    7056    this._sidebarSizeSettingName = sidebarSizeSettingName;
    71     if (this._sidebarSizeSettingName)
    72         WebInspector.settings[this._sidebarSizeSettingName] = WebInspector.settings.createSetting(this._sidebarSizeSettingName, undefined);
    7357
    7458    this._secondIsSidebar = true;
     59
     60    this._innerSetVertical(isVertical);
    7561}
    7662
    7763WebInspector.SplitView.prototype = {
    7864    /**
     65     * @return {boolean}
     66     */
     67    isVertical: function()
     68    {
     69        return this._isVertical;
     70    },
     71
     72    /**
     73     * @param {boolean} isVertical
     74     */
     75    setVertical: function(isVertical)
     76    {
     77        if (this._isVertical === isVertical)
     78            return;
     79
     80        this._innerSetVertical(isVertical);
     81
     82        if (this.isShowing())
     83            this._updateLayout();
     84    },
     85
     86    /**
     87     * @param {boolean} isVertical
     88     */
     89    _innerSetVertical: function(isVertical)
     90    {
     91        this._isVertical = isVertical;
     92
     93        this._removeAllLayoutProperties();
     94
     95        if (isVertical) {
     96            this._firstElement.style.left = 0;
     97            this._secondElement.style.right = 0;
     98            this._firstElement.style.removeProperty("top");
     99            this._secondElement.style.removeProperty("bottom");
     100        } else {
     101            this._firstElement.style.top = 0;
     102            this._secondElement.style.bottom = 0;
     103            this._firstElement.style.removeProperty("left");
     104            this._secondElement.style.removeProperty("right");
     105        }
     106
     107        var oldDirection = (isVertical ? "horizontal" : "vertical");
     108        var newDirection = (isVertical ? "vertical" : "horizontal");
     109
     110        this._firstElement.removeStyleClass("split-view-contents-" + oldDirection);
     111        this._firstElement.addStyleClass("split-view-contents-" + newDirection);
     112
     113        this._secondElement.removeStyleClass("split-view-contents-" + oldDirection);
     114        this._secondElement.addStyleClass("split-view-contents-" + newDirection);
     115
     116        this._resizerElement.removeStyleClass("split-view-resizer-" + oldDirection);
     117        this._resizerElement.addStyleClass("split-view-resizer-" + newDirection);
     118    },
     119 
     120    _updateLayout: function()
     121    {
     122        this._updateTotalSize();
     123
     124        delete this._sidebarSize;  // Force update.
     125        this.setSidebarSize(this._lastSidebarSize());
     126    },
     127
     128    /**
    79129     * @return {Element}
    80130     */
     
    90140    {
    91141        return this._secondElement;
     142    },
     143
     144    /**
     145     * @return {boolean}
     146     */
     147    isSidebarSecond: function()
     148    {
     149        return this._secondIsSidebar;
    92150    },
    93151
     
    156214        this._secondElement.style.removeProperty("width");
    157215        this._secondElement.style.removeProperty("height");
     216
     217        this._resizerElement.style.removeProperty("left");
     218        this._resizerElement.style.removeProperty("right");
     219        this._resizerElement.style.removeProperty("top");
     220        this._resizerElement.style.removeProperty("bottom");
    158221    },
    159222
     
    166229        this._secondElement.removeStyleClass("maximized");
    167230
    168         // Force update
    169         delete this._sidebarSize;
    170         this.setSidebarSize(this._lastSidebarSize());
     231        this._updateLayout();
    171232
    172233        this.setResizable(true);
     
    217278    },
    218279
     280    _updateTotalSize: function()
     281    {
     282        this._totalSize = this._isVertical ? this.element.offsetWidth : this.element.offsetHeight;
     283    },
     284 
    219285    /**
    220286     * @param {number} size
     
    234300                this._resizerElement.style.right = size - resizerWidth / 2 + "px";
    235301            } else {
    236                 this._firstElement.style.width = size + "px";;
    237                 this._secondElement.style.left = size + "px";;
     302                this._firstElement.style.width = size + "px";
     303                this._secondElement.style.left = size + "px";
    238304                this._resizerElement.style.left = size - resizerWidth / 2 + "px";
    239305            }
     
    242308           
    243309            if (this._secondIsSidebar) {
    244                 this._firstElement.style.bottom = size + "px";;
    245                 this._secondElement.style.height = size + "px";;
     310                this._firstElement.style.bottom = size + "px";
     311                this._secondElement.style.height = size + "px";
    246312                this._resizerElement.style.bottom = size - resizerHeight / 2 + "px";
    247313            } else {
    248                 this._firstElement.style.height = size + "px";;
    249                 this._secondElement.style.top = size + "px";;
     314                this._firstElement.style.height = size + "px";
     315                this._secondElement.style.top = size + "px";
    250316                this._resizerElement.style.top = size - resizerHeight / 2 + "px";
    251317            }
     
    271337    wasShown: function()
    272338    {
    273         this._totalSize = this._isVertical ? this.element.offsetWidth : this.element.offsetHeight;
    274         this.setSidebarSize(this._lastSidebarSize());
     339        this._updateLayout();
    275340    },
    276341
    277342    onResize: function()
    278343    {
    279         var oldTotalSize = this._totalSize;
    280         this._totalSize = this._isVertical ? this.element.offsetWidth : this.element.offsetHeight;
     344        this._updateTotalSize();
    281345    },
    282346
     
    318382    installResizer: function(resizerElement)
    319383    {
    320         WebInspector.installDragHandle(resizerElement, this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), this._isVertical ? "ew-resize" : "ns-resize");
     384        resizerElement.addEventListener("mousedown", this._onDragStart.bind(this), false);
     385    },
     386
     387    /**
     388     *
     389     * @param {Event} event
     390     */
     391    _onDragStart: function(event)
     392    {
     393        WebInspector._elementDragStart(this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), this._isVertical ? "ew-resize" : "ns-resize", event);
     394    },
     395
     396    /**
     397     * @return {WebInspector.Setting}
     398     */
     399    _sizeSetting: function()
     400    {
     401        if (!this._sidebarSizeSettingName)
     402            return null;
     403
     404        var settingName = this._sidebarSizeSettingName + (this._isVertical ? "" : "H");
     405        if (!WebInspector.settings[settingName])
     406            WebInspector.settings[settingName] = WebInspector.settings.createSetting(settingName, undefined);
     407
     408        return WebInspector.settings[settingName];
    321409    },
    322410
     
    326414    _lastSidebarSize: function()
    327415    {
    328         return this._sidebarSizeSettingName ? WebInspector.settings[this._sidebarSizeSettingName].get() || this._savedSidebarSize : this._savedSidebarSize;
     416        var sizeSetting = this._sizeSetting();
     417        var size = sizeSetting ? sizeSetting.get() : 0;
     418        return size || (this._isVertical ? this._savedSidebarWidth : this._savedSidebarHeight);
    329419    },
    330420
     
    334424    _saveSidebarSize: function(size)
    335425    {
    336         this._savedSidebarSize = size;
    337         if (!this._sidebarSizeSettingName)
    338             return;
    339 
    340         WebInspector.settings[this._sidebarSizeSettingName].set(this._savedSidebarSize);
     426        if (this._isVertical)
     427            this._savedSidebarWidth = size;
     428        else
     429            this._savedSidebarHeight = size;
     430
     431        var sizeSetting = this._sizeSetting();
     432        if (sizeSetting)
     433            sizeSetting.set(size);
    341434    },
    342435
Note: See TracChangeset for help on using the changeset viewer.