Changeset 142738 in webkit


Ignore:
Timestamp:
Feb 13, 2013 5:15:25 AM (11 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Simplify SplitView to rely more on CSS
​https://bugs.webkit.org/show_bug.cgi?id=109426

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

Simplified Javascript code by moving large part of the layout logic into CSS rules. The patch is larger than it
should be because one of the clients (TimelinePanel) is breaking SplitView incapsulation by reparenting its
resizer.

No new tests.

  • inspector/front-end/SidebarView.js:

(WebInspector.SidebarView):

  • inspector/front-end/SplitView.js:

(WebInspector.SplitView):
(WebInspector.SplitView.prototype._innerSetVertical):
(WebInspector.SplitView.prototype.setSecondIsSidebar):
(WebInspector.SplitView.prototype._showOnly):
(WebInspector.SplitView.prototype._removeAllLayoutProperties):

  • inspector/front-end/TimelinePanel.js:
  • inspector/front-end/cssNamedFlows.css:

(.css-named-flow-collections-view .split-view-sidebar):
(.css-named-flow-collections-view .split-view-sidebar .sidebar-content):
(.css-named-flow-collections-view .split-view-sidebar .selection):
(.css-named-flow-collections-view .split-view-sidebar .named-flow-overflow::before, .css-named-flow-collections-view .region-empty:before, .css-named-flow-collections-view .region-fit::before, .css-named-flow-collections-view .region-overset::before):
(.css-named-flow-collections-view .split-view-sidebar .named-flow-overflow::before):

  • inspector/front-end/splitView.css:

(.split-view-contents.maximized):
(.split-view-vertical .split-view-contents):
(.split-view-vertical .split-view-contents-first):
(.split-view-vertical .split-view-contents-first.maximized):
(.split-view-vertical .split-view-contents-second):
(.split-view-vertical .split-view-contents-second.maximized):
(.split-view-horizontal .split-view-contents):
(.split-view-horizontal .split-view-contents-first):
(.split-view-horizontal .split-view-contents-first.maximized):
(.split-view-horizontal .split-view-contents-second):
(.split-view-horizontal .split-view-contents-second.maximized):
(.split-view-vertical .split-view-sidebar.split-view-contents-first:not(.maximized)):
(.split-view-vertical .split-view-sidebar.split-view-contents-second:not(.maximized)):
(.split-view-horizontal .split-view-sidebar.split-view-contents-first:not(.maximized)):
(.split-view-horizontal .split-view-sidebar.split-view-contents-second:not(.maximized)):
(.split-view-vertical .split-view-resizer):
(.split-view-horizontal .split-view-resizer):

  • inspector/front-end/timelinePanel.css:

(.timeline.split-view-vertical .split-view-resizer):
(#timeline-container .split-view-sidebar):

Location:
trunk/Source/WebCore
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r142737 r142738  
     12013-02-13  Vladislav Kaznacheev  <kaznacheev@chromium.org>
     2
     3        Web Inspector: Simplify SplitView to rely more on CSS
     4        https://bugs.webkit.org/show_bug.cgi?id=109426
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        Simplified Javascript code by moving large part of the layout logic into CSS rules. The patch is larger than it
     9        should be because one of the clients (TimelinePanel) is breaking SplitView incapsulation by reparenting its
     10        resizer.
     11
     12        No new tests.
     13
     14        * inspector/front-end/SidebarView.js:
     15        (WebInspector.SidebarView):
     16        * inspector/front-end/SplitView.js:
     17        (WebInspector.SplitView):
     18        (WebInspector.SplitView.prototype._innerSetVertical):
     19        (WebInspector.SplitView.prototype.setSecondIsSidebar):
     20        (WebInspector.SplitView.prototype._showOnly):
     21        (WebInspector.SplitView.prototype._removeAllLayoutProperties):
     22        * inspector/front-end/TimelinePanel.js:
     23        * inspector/front-end/cssNamedFlows.css:
     24        (.css-named-flow-collections-view .split-view-sidebar):
     25        (.css-named-flow-collections-view .split-view-sidebar .sidebar-content):
     26        (.css-named-flow-collections-view .split-view-sidebar .selection):
     27        (.css-named-flow-collections-view .split-view-sidebar .named-flow-overflow::before, .css-named-flow-collections-view .region-empty:before, .css-named-flow-collections-view .region-fit::before, .css-named-flow-collections-view .region-overset::before):
     28        (.css-named-flow-collections-view .split-view-sidebar .named-flow-overflow::before):
     29        * inspector/front-end/splitView.css:
     30        (.split-view-contents.maximized):
     31        (.split-view-vertical .split-view-contents):
     32        (.split-view-vertical .split-view-contents-first):
     33        (.split-view-vertical .split-view-contents-first.maximized):
     34        (.split-view-vertical .split-view-contents-second):
     35        (.split-view-vertical .split-view-contents-second.maximized):
     36        (.split-view-horizontal .split-view-contents):
     37        (.split-view-horizontal .split-view-contents-first):
     38        (.split-view-horizontal .split-view-contents-first.maximized):
     39        (.split-view-horizontal .split-view-contents-second):
     40        (.split-view-horizontal .split-view-contents-second.maximized):
     41        (.split-view-vertical .split-view-sidebar.split-view-contents-first:not(.maximized)):
     42        (.split-view-vertical .split-view-sidebar.split-view-contents-second:not(.maximized)):
     43        (.split-view-horizontal .split-view-sidebar.split-view-contents-first:not(.maximized)):
     44        (.split-view-horizontal .split-view-sidebar.split-view-contents-second:not(.maximized)):
     45        (.split-view-vertical .split-view-resizer):
     46        (.split-view-horizontal .split-view-resizer):
     47        * inspector/front-end/timelinePanel.css:
     48        (.timeline.split-view-vertical .split-view-resizer):
     49        (#timeline-container .split-view-sidebar):
     50
    1512013-02-13  Kentaro Hara  <haraken@chromium.org>
    252

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

    r142132 r142738  
    4747    this._sidebarPosition = sidebarPosition || WebInspector.SidebarView.SidebarPosition.Start;
    4848    this.setSecondIsSidebar(this._sidebarPosition === WebInspector.SidebarView.SidebarPosition.End);
    49     this._updateSidebarElementStyle();
    5049}
    5150
    … …  
    7776    {
    7877        return this.isSidebarSecond() ? this.secondElement() : this.firstElement();
    79     },
    80 
    81     _updateSidebarElementStyle: function()
    82     {
    83         this.sidebarElement.removeStyleClass("split-view-sidebar-left");
    84         this.sidebarElement.removeStyleClass("split-view-sidebar-right");
    85         this.sidebarElement.removeStyleClass("split-view-sidebar-top");
    86         this.sidebarElement.removeStyleClass("split-view-sidebar-bottom");
    87 
    88         if (this._sidebarPosition === WebInspector.SidebarView.SidebarPosition.Start) {
    89             if (this.isVertical())
    90                 this.sidebarElement.addStyleClass("split-view-sidebar-left");
    91             else
    92                 this.sidebarElement.addStyleClass("split-view-sidebar-top");
    93         } else {
    94             if (this.isVertical())
    95                 this.sidebarElement.addStyleClass("split-view-sidebar-right");
    96             else
    97                 this.sidebarElement.addStyleClass("split-view-sidebar-bottom");
    98         }
    99     },
    100 
    101     /**
    102      * @param {boolean} isVertical
    103      */
    104     setVertical: function(isVertical)
    105     {
    106         if (this.isVertical() === isVertical)
    107             return;
    108 
    109         WebInspector.SplitView.prototype.setVertical.call(this, isVertical);
    110         this._updateSidebarElementStyle();
    11178    },
    11279

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

    r142452 r142738  
    4444
    4545    this._firstElement = this.element.createChild("div", "split-view-contents");
     46    this._firstElement.addStyleClass("split-view-contents-first");
     47
    4648    this._secondElement = this.element.createChild("div", "split-view-contents");
     49    this._secondElement.addStyleClass("split-view-contents-second");
    4750
    4851    this._resizerElement = this.element.createChild("div", "split-view-resizer");
    … …  
    9295    _innerSetVertical: function(isVertical)
    9396    {
     97        this.element.removeStyleClass(this._isVertical ? "split-view-vertical" : "split-view-horizontal");
    9498        this._isVertical = isVertical;
    95 
    96         this._removeAllLayoutProperties();
    97 
    98         if (isVertical) {
    99             this._firstElement.style.left = 0;
    100             this._secondElement.style.right = 0;
    101             this._firstElement.style.removeProperty("top");
    102             this._secondElement.style.removeProperty("bottom");
    103         } else {
    104             this._firstElement.style.top = 0;
    105             this._secondElement.style.bottom = 0;
    106             this._firstElement.style.removeProperty("left");
    107             this._secondElement.style.removeProperty("right");
    108         }
    109 
    110         var oldDirection = (isVertical ? "horizontal" : "vertical");
    111         var newDirection = (isVertical ? "vertical" : "horizontal");
    112 
    113         this._firstElement.removeStyleClass("split-view-contents-" + oldDirection);
    114         this._firstElement.addStyleClass("split-view-contents-" + newDirection);
    115 
    116         this._secondElement.removeStyleClass("split-view-contents-" + oldDirection);
    117         this._secondElement.addStyleClass("split-view-contents-" + newDirection);
    118 
    119         this._resizerElement.removeStyleClass("split-view-resizer-" + oldDirection);
    120         this._resizerElement.addStyleClass("split-view-resizer-" + newDirection);
     99        this.element.addStyleClass(this._isVertical ? "split-view-vertical" : "split-view-horizontal");
    121100    },
    122101 
    … …  
    158137    setSecondIsSidebar: function(secondIsSidebar)
    159138    {
     139        this.sidebarElement.removeStyleClass("split-view-sidebar");
    160140        this._secondIsSidebar = secondIsSidebar;
     141        this.sidebarElement.addStyleClass("split-view-sidebar");
    161142    },
    162143
    … …  
    191172        this._removeAllLayoutProperties();
    192173
    193         this._firstElement.style.right = 0;
    194         this._firstElement.style.bottom = 0;
    195         this._firstElement.style.width = "100%";
    196         this._firstElement.style.height = "100%";
    197 
    198         this._secondElement.style.left = 0;
    199         this._secondElement.style.top = 0;
    200         this._secondElement.style.width = "100%";
    201         this._secondElement.style.height = "100%";
    202 
    203174        this._isShowingOne = true;
    204175        this.setResizable(false);
    … …  
    212183        this._firstElement.style.removeProperty("width");
    213184        this._firstElement.style.removeProperty("height");
    214  
     185
    215186        this._secondElement.style.removeProperty("left");
    216187        this._secondElement.style.removeProperty("top");

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

    r142626 r142738  
    6060    this.element.tabIndex = 0;
    6161
     62    this.element.addStyleClass("split-view-vertical");
     63
    6264    this._sidebarBackgroundElement = document.createElement("div");
    63     this._sidebarBackgroundElement.className = "sidebar split-view-sidebar-left timeline-sidebar-background";
     65    this._sidebarBackgroundElement.className = "sidebar split-view-sidebar split-view-contents-first timeline-sidebar-background";
    6466    this.element.appendChild(this._sidebarBackgroundElement);
    6567

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

    r128778 r142738  
    2828 */
    2929
    30 .css-named-flow-collections-view .split-view-sidebar-left {
    31     border-right: 1px solid rgb(163, 163, 163);
     30.css-named-flow-collections-view .split-view-sidebar {
    3231    overflow-x: hidden;
    3332}
    … …  
    4746}
    4847
    49 .css-named-flow-collections-view .split-view-sidebar-left .sidebar-content {
     48.css-named-flow-collections-view .split-view-sidebar .sidebar-content {
    5049    bottom: 0px;
    5150    left: 0px;
    … …  
    5655}
    5756
    58 .css-named-flow-collections-view .split-view-sidebar-left .selection {
     57.css-named-flow-collections-view .split-view-sidebar .selection {
    5958    margin-left: -12px;
    6059    z-index: 0;
    … …  
    6564}
    6665
    67 .css-named-flow-collections-view .split-view-sidebar-left .named-flow-overflow::before, .css-named-flow-collections-view .region-empty:before, .css-named-flow-collections-view .region-fit::before, .css-named-flow-collections-view .region-overset::before {
     66.css-named-flow-collections-view .split-view-sidebar .named-flow-overflow::before, .css-named-flow-collections-view .region-empty:before, .css-named-flow-collections-view .region-fit::before, .css-named-flow-collections-view .region-overset::before {
    6867    cursor: default;
    6968    float: left;
    … …  
    7675}
    7776
    78 .css-named-flow-collections-view .split-view-sidebar-left .named-flow-overflow::before {
     77.css-named-flow-collections-view .split-view-sidebar .named-flow-overflow::before {
    7978    content: url(Images/namedFlowOverflow.png);
    8079    margin: 2px 3px 0px -13px;

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

    r140333 r142738  
    4242}
    4343
    44 .split-view-contents.split-view-contents-vertical {
     44.split-view-contents.maximized {
     45    width: 100%;
     46    height: 100%;
     47}
     48
     49.split-view-vertical .split-view-contents {
    4550    top: 0;
    4651    bottom: 0;
    4752}
    4853
    49 .split-view-contents.split-view-contents-horizontal {
     54.split-view-vertical .split-view-contents-first {
     55    left: 0;
     56}
     57
     58.split-view-vertical .split-view-contents-first.maximized {
     59    right: 0;
     60}
     61
     62.split-view-vertical .split-view-contents-second {
     63    right: 0;
     64}
     65
     66.split-view-vertical .split-view-contents-second.maximized {
     67    left: 0;
     68}
     69
     70.split-view-horizontal .split-view-contents {
    5071    left: 0;
    5172    right: 0;
    5273}
    5374
    54 .split-view-sidebar-left {
     75.split-view-horizontal .split-view-contents-first {
     76    top: 0;
     77}
     78
     79.split-view-horizontal .split-view-contents-first.maximized {
     80    bottom: 0;
     81}
     82
     83.split-view-horizontal .split-view-contents-second {
     84    bottom: 0;
     85}
     86
     87.split-view-horizontal .split-view-contents-second.maximized {
     88    top: 0;
     89}
     90
     91.split-view-vertical .split-view-sidebar.split-view-contents-first:not(.maximized) {
    5592    border-right: 1px solid rgb(64%, 64%, 64%);
    5693}
    5794
    58 .split-view-sidebar-left.maximized {
    59     border-right: none;
    60 }
    61 
    62 .split-view-sidebar-right {
     95.split-view-vertical .split-view-sidebar.split-view-contents-second:not(.maximized) {
    6396    border-left: 1px solid rgb(64%, 64%, 64%);
    6497}
    6598
    66 .split-view-sidebar-right.maximized {
    67     border-right: none;
    68 }
    69 
    70 .split-view-sidebar-top {
     99.split-view-horizontal .split-view-sidebar.split-view-contents-first:not(.maximized) {
    71100    border-bottom: 1px solid rgb(64%, 64%, 64%);
    72101}
    73102
    74 .split-view-sidebar-top.maximized {
    75     border-bottom: none;
    76 }
    77 
    78 .split-view-sidebar-bottom {
     103.split-view-horizontal .split-view-sidebar.split-view-contents-second:not(.maximized) {
    79104    border-top: 1px solid rgb(64%, 64%, 64%);
    80105}
    81106
    82 .split-view-sidebar-bottom.maximized {
    83     border-top: none;
    84 }
    85 
    86 .split-view-resizer.split-view-resizer-vertical {
     107.split-view-vertical .split-view-resizer {
    87108    position: absolute;
    88109    top: 0;
    … …  
    93114}
    94115
    95 .split-view-resizer.split-view-resizer-horizontal {
     116.split-view-horizontal .split-view-resizer {
    96117    position: absolute;
    97118    left: 0;

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

    r142626 r142738  
    4646}
    4747
    48 .timeline .split-view-resizer {
     48.timeline.split-view-vertical .split-view-resizer {
    4949    top: 20px;
    5050}
    … …  
    167167}
    168168
    169 #timeline-container .split-view-sidebar-left {
     169#timeline-container .split-view-sidebar {
    170170    z-index: 1;
    171171}
Note: See TracChangeset for help on using the changeset viewer.