Changeset 140333 in webkit


Ignore:
Timestamp:
Jan 21, 2013 7:32:47 AM (11 years ago)
Author:
commit-queue@webkit.org
Message:

[Inspector] Layout Elements panel in a single column when docked right.
​https://bugs.webkit.org/show_bug.cgi?id=107129

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

If the Inspector is docked right, the style panes in the Elements panel
are put below the DOM tree pane, not to the right. This behavior
is experimental (hidden behind a new flag "elementsPanelSingleColumn").

No new tests.

  • inspector/front-end/DockController.js:

(WebInspector.DockController.prototype.dockSide):
(WebInspector.DockController.prototype._updateUI):
(WebInspector.DockController.prototype._toggleDockState):

  • inspector/front-end/ElementsPanel.js:

(WebInspector.ElementsPanel.prototype.onResize):
(WebInspector.ElementsPanel.prototype._onDockStateChanged):
(WebInspector.ElementsPanel.prototype._sidebarPosition):

  • inspector/front-end/Panel.js:

(WebInspector.Panel.prototype.createSidebarView):

  • inspector/front-end/Settings.js:

(WebInspector.ExperimentsSettings):

  • inspector/front-end/SidebarView.js:

(WebInspector.SidebarView):
(WebInspector.SidebarView.prototype.get mainElement):
(WebInspector.SidebarView.prototype.get sidebarElement):
(WebInspector.SidebarView.prototype._setSidebarElementStyle):
(WebInspector.SidebarView.prototype.setSidebarPosition):
(WebInspector.SidebarView.prototype._innerSetSidebarPosition):
(WebInspector.SidebarView.prototype.setMinimumSidebarHeight):
(WebInspector.SidebarView.prototype.setMinimumMainHeightPercent):
(WebInspector.SidebarView.prototype.applyConstraints):
(WebInspector.SidebarView.prototype.hideMainElement):
(WebInspector.SidebarView.prototype.hideSidebarElement):

  • inspector/front-end/SplitView.js:

(WebInspector.SplitView):

  • inspector/front-end/splitView.css:

(.split-view-sidebar-top):
(.split-view-sidebar-top.maximized):
(.split-view-sidebar-bottom):
(.split-view-sidebar-bottom.maximized):

Location:
trunk/Source/WebCore
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r140332 r140333  
     12013-01-21  Vladislav Kaznacheev  <kaznacheev@chromium.org>
     2
     3        [Inspector] Layout Elements panel in a single column when docked right.
     4        https://bugs.webkit.org/show_bug.cgi?id=107129
     5
     6        Reviewed by Pavel Feldman.
     7
     8        If the Inspector is docked right, the style panes in the Elements panel
     9        are put below the DOM tree pane, not to the right. This behavior
     10        is experimental (hidden behind a new flag "elementsPanelSingleColumn").
     11
     12        No new tests.
     13
     14        * inspector/front-end/DockController.js:
     15        (WebInspector.DockController.prototype.dockSide):
     16        (WebInspector.DockController.prototype._updateUI):
     17        (WebInspector.DockController.prototype._toggleDockState):
     18        * inspector/front-end/ElementsPanel.js:
     19        (WebInspector.ElementsPanel.prototype.onResize):
     20        (WebInspector.ElementsPanel.prototype._onDockStateChanged):
     21        (WebInspector.ElementsPanel.prototype._sidebarPosition):
     22        * inspector/front-end/Panel.js:
     23        (WebInspector.Panel.prototype.createSidebarView):
     24        * inspector/front-end/Settings.js:
     25        (WebInspector.ExperimentsSettings):
     26        * inspector/front-end/SidebarView.js:
     27        (WebInspector.SidebarView):
     28        (WebInspector.SidebarView.prototype.get mainElement):
     29        (WebInspector.SidebarView.prototype.get sidebarElement):
     30        (WebInspector.SidebarView.prototype._setSidebarElementStyle):
     31        (WebInspector.SidebarView.prototype.setSidebarPosition):
     32        (WebInspector.SidebarView.prototype._innerSetSidebarPosition):
     33        (WebInspector.SidebarView.prototype.setMinimumSidebarHeight):
     34        (WebInspector.SidebarView.prototype.setMinimumMainHeightPercent):
     35        (WebInspector.SidebarView.prototype.applyConstraints):
     36        (WebInspector.SidebarView.prototype.hideMainElement):
     37        (WebInspector.SidebarView.prototype.hideSidebarElement):
     38        * inspector/front-end/SplitView.js:
     39        (WebInspector.SplitView):
     40        * inspector/front-end/splitView.css:
     41        (.split-view-sidebar-top):
     42        (.split-view-sidebar-top.maximized):
     43        (.split-view-sidebar-bottom):
     44        (.split-view-sidebar-bottom.maximized):
     45
    1462013-01-21  Yury Semikhatsky  <yurys@chromium.org>
    247

  • trunk/Source/WebCore/inspector/front-end/DockController.js

    r139188 r140333  
    3131/**
    3232 * @constructor
     33 * @extends {WebInspector.Object}
    3334 */
    3435WebInspector.DockController = function()
    … …  
    5152}
    5253
     54WebInspector.DockController.EventTypes = {
     55    StateChanged: "StateChanged"
     56}
     57
    5358WebInspector.DockController.prototype = {
    5459    /**
    … …  
    5863    {
    5964        return this._dockToggleButton.element;
     65    },
     66
     67    /**
     68     * @return {string}
     69     */
     70    dockSide: function()
     71    {
     72      return this._dockSide;
    6073    },
    6174
    … …  
    136149        this._decorateButtonForTargetState(this._dockToggleButton, lastState);
    137150        this._decorateButtonForTargetState(this._dockToggleButtonOption, sides[0]);
     151
     152        this.dispatchEventToListeners(WebInspector.DockController.EventTypes.StateChanged, this._dockSide);
    138153    },
    139154
    … …  
    177192        }
    178193        InspectorFrontendHost.requestSetDockSide(action);
    179     }
    180 }
     194    },
     195
     196    __proto__: WebInspector.Object.prototype
     197}
     198
     199/**
     200 * @type {?WebInspector.DockController}
     201 */
     202WebInspector.dockController = null;

  • trunk/Source/WebCore/inspector/front-end/ElementsPanel.js

    r139427 r140333  
    4848    this.setHideOnDetach();
    4949
     50    WebInspector.dockController.addEventListener(WebInspector.DockController.EventTypes.StateChanged, this._onDockStateChanged.bind(this));
     51
    5052    const initialSidebarWidth = 325;
    5153    const minimumContentWidthPercent = 34;
    52     this.createSidebarView(this.element, WebInspector.SidebarView.SidebarPosition.Right, initialSidebarWidth);
     54    const initialSidebarHeight = 325;
     55    const minimumContentHeightPercent = 34;
     56    this.createSidebarView(this.element, this._sidebarPosition(), initialSidebarWidth, initialSidebarHeight);
    5357    this.splitView.setMinimumSidebarWidth(Preferences.minElementsSidebarWidth);
    5458    this.splitView.setMinimumMainWidthPercent(minimumContentWidthPercent);
     59    this.splitView.setMinimumSidebarHeight(Preferences.minElementsSidebarHeight);
     60    this.splitView.setMinimumMainHeightPercent(minimumContentHeightPercent);
    5561
    5662    this.contentElement = this.splitView.mainElement;
    … …  
    167173        this.treeOutline.updateSelection();
    168174        this.updateBreadcrumbSizes();
     175        if (WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked)
     176            this.splitView.setSidebarPosition(this._sidebarPosition());
     177    },
     178
     179    _onDockStateChanged: function()
     180    {
     181        if (WebInspector.dockController.dockSide() === WebInspector.DockController.State.Undocked)
     182            this.splitView.setSidebarPosition(this._sidebarPosition());
     183    },
     184
     185    /**
     186     * @return {string}
     187     */
     188    _sidebarPosition: function()
     189    {
     190        if (WebInspector.experimentsSettings.elementsPanelSingleColumn.isEnabled() &&
     191            WebInspector.dockController.dockSide() === WebInspector.DockController.State.DockedToRight)
     192            return WebInspector.SidebarView.SidebarPosition.Bottom;
     193
     194        return WebInspector.SidebarView.SidebarPosition.Right;
    169195    },
    170196

  • trunk/Source/WebCore/inspector/front-end/Panel.js

    r138244 r140333  
    153153     * @param {string=} position
    154154     * @param {number=} defaultWidth
    155      */
    156     createSidebarView: function(parentElement, position, defaultWidth)
     155     * @param {number=} defaultHeight
     156     */
     157    createSidebarView: function(parentElement, position, defaultWidth, defaultHeight)
    157158    {
    158159        if (this.splitView)
    … …  
    162163            parentElement = this.element;
    163164
    164         this.splitView = new WebInspector.SidebarView(position || WebInspector.SidebarView.SidebarPosition.Left, this._sidebarWidthSettingName(), defaultWidth);
     165        this.splitView = new WebInspector.SidebarView(position || WebInspector.SidebarView.SidebarPosition.Left, this._sidebarWidthSettingName(), defaultWidth, defaultHeight);
    165166        this.splitView.show(parentElement);
    166167        this.splitView.addEventListener(WebInspector.SidebarView.EventTypes.Resized, this.sidebarResized.bind(this));

  • trunk/Source/WebCore/inspector/front-end/Settings.js

    r140124 r140333  
    3434    minConsoleHeight: 75,
    3535    minSidebarWidth: 100,
     36    minSidebarHeight: 75,
    3637    minElementsSidebarWidth: 200,
     38    minElementsSidebarHeight: 200,
    3739    minScriptsSidebarWidth: 200,
    3840    styleRulesExpandedState: {},
    … …  
    211213    this.showOverridesInDrawer = this._createExperiment("showOverridesInDrawer", "Show Overrides in drawer");
    212214    this.fileSystemProject = this._createExperiment("fileSystemProject", "File system folders in Sources Panel");
     215    this.elementsPanelSingleColumn = this._createExperiment("elementsPanelSingleColumn", "Single-column elements panel layout when docked to right");
    213216
    214217    this._cleanUpSetting();

  • trunk/Source/WebCore/inspector/front-end/SidebarView.js

    r139996 r140333  
    3333 * @param {string=} sidebarWidthSettingName
    3434 * @param {number=} defaultSidebarWidth
     35 * @param {number=} defaultSidebarHeight
    3536 */
    36 WebInspector.SidebarView = function(sidebarPosition, sidebarWidthSettingName, defaultSidebarWidth)
     37WebInspector.SidebarView = function(sidebarPosition, sidebarWidthSettingName, defaultSidebarWidth, defaultSidebarHeight)
    3738{
    38     WebInspector.SplitView.call(this, true, sidebarWidthSettingName, defaultSidebarWidth || 200);
     39    WebInspector.SplitView.call(this, true, sidebarWidthSettingName, defaultSidebarWidth, defaultSidebarHeight);
    3940
    4041    this._leftElement = this.firstElement();
    … …  
    4445    this._minimumMainWidthPercent = 50;
    4546
    46     this._mainElementHidden = false;
    47     this._sidebarElementHidden = false;
     47    this._minimumSidebarHeight = Preferences.minSidebarHeight;
     48    this._minimumMainHeightPercent = 50;
    4849
    4950    this._innerSetSidebarPosition(sidebarPosition || WebInspector.SidebarView.SidebarPosition.Left);
    50     this.setSecondIsSidebar(sidebarPosition !== WebInspector.SidebarView.SidebarPosition.Left);
    5151}
    5252
    … …  
    6060WebInspector.SidebarView.SidebarPosition = {
    6161    Left: "Left",
    62     Right: "Right"
     62    Right: "Right",
     63    Top: "Top",
     64    Bottom: "Bottom"
    6365}
    6466
    6567WebInspector.SidebarView.prototype = {
    6668    /**
    67      * @return {boolean}
    68      */
    69     _hasLeftSidebar: function()
    70     {
    71         return this._sidebarPosition === WebInspector.SidebarView.SidebarPosition.Left;
    72     },
    73 
    74     /**
    7569     * @return {Element}
    7670     */
    7771    get mainElement()
    7872    {
    79         return this._hasLeftSidebar() ? this._rightElement : this._leftElement;
     73        return this.isSidebarSecond() ? this.firstElement() : this.secondElement();
    8074    },
    8175
    … …  
    8579    get sidebarElement()
    8680    {
    87         return this._hasLeftSidebar() ? this._leftElement : this._rightElement;
     81        return this.isSidebarSecond() ? this.secondElement() : this.firstElement();
     82    },
     83
     84    /**
     85     * @param {string} styleClass
     86     */
     87    _setSidebarElementStyle: function(styleClass)
     88    {
     89      this.sidebarElement.removeStyleClass("split-view-sidebar-left");
     90      this.sidebarElement.removeStyleClass("split-view-sidebar-right");
     91      this.sidebarElement.removeStyleClass("split-view-sidebar-top");
     92      this.sidebarElement.removeStyleClass("split-view-sidebar-bottom");
     93
     94      this.sidebarElement.addStyleClass(styleClass);
    8895    },
    8996
    … …  
    9198     * @param {string} sidebarPosition
    9299     */
     100    setSidebarPosition: function(sidebarPosition)
     101    {
     102        if (this.sidebarPosition_ === sidebarPosition)
     103            return;
     104
     105        this._innerSetSidebarPosition(sidebarPosition);
     106    },
     107
     108    /**
     109     * @param {string} sidebarPosition
     110     */
    93111    _innerSetSidebarPosition: function(sidebarPosition)
    94112    {
    95         this._sidebarPosition = sidebarPosition;
    96 
    97         if (this._hasLeftSidebar()) {
    98             this._leftElement.addStyleClass("split-view-sidebar-left");
    99             this._rightElement.removeStyleClass("split-view-sidebar-right");
    100         } else {
    101             this._rightElement.addStyleClass("split-view-sidebar-right");
    102             this._leftElement.removeStyleClass("split-view-sidebar-left");
     113        this.sidebarPosition_ = sidebarPosition;
     114
     115        switch (sidebarPosition) {
     116        case WebInspector.SidebarView.SidebarPosition.Left:
     117            this.setSecondIsSidebar(false);
     118            this._setSidebarElementStyle("split-view-sidebar-left");
     119            this.setVertical(true);
     120            break;
     121        case WebInspector.SidebarView.SidebarPosition.Right:
     122            this.setSecondIsSidebar(true);
     123            this._setSidebarElementStyle("split-view-sidebar-right");
     124            this.setVertical(true);
     125            break;
     126        case WebInspector.SidebarView.SidebarPosition.Top:
     127            this.setSecondIsSidebar(false);
     128            this._setSidebarElementStyle("split-view-sidebar-top");
     129            this.setVertical(false);
     130            break;
     131        case WebInspector.SidebarView.SidebarPosition.Bottom:
     132            this.setSecondIsSidebar(true);
     133            this._setSidebarElementStyle("split-view-sidebar-bottom");
     134            this.setVertical(false);
     135            break;
    103136        }
    104137    },
    … …  
    113146
    114147    /**
     148     * @param {number} height
     149     */
     150    setMinimumSidebarHeight: function(height)
     151    {
     152        this._minimumSidebarHeight = height;
     153    },
     154
     155    /**
    115156     * @param {number} widthPercent
    116157     */
    … …  
    118159    {
    119160        this._minimumMainWidthPercent = widthPercent;
     161    },
     162
     163    /**
     164     * @param {number} heightPercent
     165     */
     166    setMinimumMainHeightPercent: function(heightPercent)
     167    {
     168        this._minimumMainHeightPercent = heightPercent;
    120169    },
    121170
    … …  
    147196    applyConstraints: function(size)
    148197    {
    149         var offsetWidth = this.element.offsetWidth;
    150         return offsetWidth ? Number.constrain(size, this._minimumSidebarWidth, offsetWidth * (100 - this._minimumMainWidthPercent) / 100) : size;
     198        var minSidebarSize = this.isVertical() ? this._minimumSidebarWidth : this._minimumSidebarHeight;
     199        var minMainSizePercent = this.isVertical() ? this._minimumMainWidthPercent : this._minimumMainHeightPercent;
     200        return Number.constrain(size, minSidebarSize, this.totalSize() * (100 - minMainSizePercent) / 100);
    151201    },
    152202
    153203    hideMainElement: function()
    154204    {
    155         if (this._hasLeftSidebar())
     205        if (this.isSidebarSecond())
     206            this.showOnlySecond();
     207        else
     208            this.showOnlyFirst();
     209    },
     210
     211    showMainElement: function()
     212    {
     213        this.showBoth();
     214    },
     215
     216    hideSidebarElement: function()
     217    {
     218        if (this.isSidebarSecond())
    156219            this.showOnlyFirst();
    157220        else
    … …  
    159222    },
    160223
    161     showMainElement: function()
     224    showSidebarElement: function()
    162225    {
    163226        this.showBoth();
    164227    },
    165228
    166     hideSidebarElement: function()
    167     {
    168         if (this._hasLeftSidebar())
    169             this.showOnlySecond();
    170         else
    171             this.showOnlyFirst();
    172     },
    173 
    174     showSidebarElement: function()
    175     {
    176         this.showBoth();
    177     },
    178 
    179229    /**
    180230     * @return {Array.<Element>}

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

    r140304 r140333  
    4444
    4545    this._firstElement = this.element.createChild("div", "split-view-contents");
    46 
    4746    this._secondElement = this.element.createChild("div", "split-view-contents");
    4847

  • trunk/Source/WebCore/inspector/front-end/splitView.css

    r134031 r140333  
    6868}
    6969
     70.split-view-sidebar-top {
     71    border-bottom: 1px solid rgb(64%, 64%, 64%);
     72}
     73
     74.split-view-sidebar-top.maximized {
     75    border-bottom: none;
     76}
     77
     78.split-view-sidebar-bottom {
     79    border-top: 1px solid rgb(64%, 64%, 64%);
     80}
     81
     82.split-view-sidebar-bottom.maximized {
     83    border-top: none;
     84}
     85
    7086.split-view-resizer.split-view-resizer-vertical {
    7187    position: absolute;
Note: See TracChangeset for help on using the changeset viewer.