Web Inspector: Simplify SplitView to rely more on CSS
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 13 Feb 2013 13:15:25 +0000 (13:15 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 13 Feb 2013 13:15:25 +0000 (13:15 +0000)
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):

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

Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/SidebarView.js
Source/WebCore/inspector/front-end/SplitView.js
Source/WebCore/inspector/front-end/TimelinePanel.js
Source/WebCore/inspector/front-end/cssNamedFlows.css
Source/WebCore/inspector/front-end/splitView.css
Source/WebCore/inspector/front-end/timelinePanel.css

index a63aa63afef282505723c0f92436da842b66bb24..6fad4fc195635ec16c680badc7b4fcc09c174b71 100644 (file)
@@ -1,3 +1,53 @@
+2013-02-13  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Simplify SplitView to rely more on CSS
+        https://bugs.webkit.org/show_bug.cgi?id=109426
+
+        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):
+
 2013-02-13  Kentaro Hara  <haraken@chromium.org>
 
         Unreviewed, rolling out r142730.
index 84eb953cb5e0659010d64c232bea4dd44ed3e0b0..d54e02f5bfc44c869664d87431180565aacf20c7 100644 (file)
@@ -46,7 +46,6 @@ WebInspector.SidebarView = function(sidebarPosition, sidebarWidthSettingName, de
 
     this._sidebarPosition = sidebarPosition || WebInspector.SidebarView.SidebarPosition.Start;
     this.setSecondIsSidebar(this._sidebarPosition === WebInspector.SidebarView.SidebarPosition.End);
-    this._updateSidebarElementStyle();
 }
 
 WebInspector.SidebarView.EventTypes = {
@@ -78,38 +77,6 @@ WebInspector.SidebarView.prototype = {
         return this.isSidebarSecond() ? this.secondElement() : this.firstElement();
     },
 
-    _updateSidebarElementStyle: function()
-    {
-        this.sidebarElement.removeStyleClass("split-view-sidebar-left");
-        this.sidebarElement.removeStyleClass("split-view-sidebar-right");
-        this.sidebarElement.removeStyleClass("split-view-sidebar-top");
-        this.sidebarElement.removeStyleClass("split-view-sidebar-bottom");
-
-        if (this._sidebarPosition === WebInspector.SidebarView.SidebarPosition.Start) {
-            if (this.isVertical())
-                this.sidebarElement.addStyleClass("split-view-sidebar-left");
-            else
-                this.sidebarElement.addStyleClass("split-view-sidebar-top");
-        } else {
-            if (this.isVertical())
-                this.sidebarElement.addStyleClass("split-view-sidebar-right");
-            else
-                this.sidebarElement.addStyleClass("split-view-sidebar-bottom");
-        }
-    },
-
-    /**
-     * @param {boolean} isVertical
-     */
-    setVertical: function(isVertical)
-    {
-        if (this.isVertical() === isVertical)
-            return;
-
-        WebInspector.SplitView.prototype.setVertical.call(this, isVertical);
-        this._updateSidebarElementStyle();
-    },
-
     /**
      * @param {number} width
      */
index 164d17e180778b7e7c5a0c568b2773f7c6c02dbb..e7c2ffcb46347b6a9239c9abeb83be0471492d1f 100644 (file)
@@ -43,7 +43,10 @@ WebInspector.SplitView = function(isVertical, sidebarSizeSettingName, defaultSid
     this.element.className = "split-view";
 
     this._firstElement = this.element.createChild("div", "split-view-contents");
+    this._firstElement.addStyleClass("split-view-contents-first");
+
     this._secondElement = this.element.createChild("div", "split-view-contents");
+    this._secondElement.addStyleClass("split-view-contents-second");
 
     this._resizerElement = this.element.createChild("div", "split-view-resizer");
     this.installResizer(this._resizerElement);
@@ -91,33 +94,9 @@ WebInspector.SplitView.prototype = {
      */
     _innerSetVertical: function(isVertical)
     {
+        this.element.removeStyleClass(this._isVertical ? "split-view-vertical" : "split-view-horizontal");
         this._isVertical = isVertical;
-
-        this._removeAllLayoutProperties();
-
-        if (isVertical) {
-            this._firstElement.style.left = 0;
-            this._secondElement.style.right = 0;
-            this._firstElement.style.removeProperty("top");
-            this._secondElement.style.removeProperty("bottom");
-        } else {
-            this._firstElement.style.top = 0;
-            this._secondElement.style.bottom = 0;
-            this._firstElement.style.removeProperty("left");
-            this._secondElement.style.removeProperty("right");
-        }
-
-        var oldDirection = (isVertical ? "horizontal" : "vertical");
-        var newDirection = (isVertical ? "vertical" : "horizontal");
-
-        this._firstElement.removeStyleClass("split-view-contents-" + oldDirection);
-        this._firstElement.addStyleClass("split-view-contents-" + newDirection);
-
-        this._secondElement.removeStyleClass("split-view-contents-" + oldDirection);
-        this._secondElement.addStyleClass("split-view-contents-" + newDirection);
-
-        this._resizerElement.removeStyleClass("split-view-resizer-" + oldDirection);
-        this._resizerElement.addStyleClass("split-view-resizer-" + newDirection);
+        this.element.addStyleClass(this._isVertical ? "split-view-vertical" : "split-view-horizontal");
     },
   
     _updateLayout: function()
@@ -157,7 +136,9 @@ WebInspector.SplitView.prototype = {
      */
     setSecondIsSidebar: function(secondIsSidebar)
     {
+        this.sidebarElement.removeStyleClass("split-view-sidebar");
         this._secondIsSidebar = secondIsSidebar;
+        this.sidebarElement.addStyleClass("split-view-sidebar");
     },
 
     /**
@@ -190,16 +171,6 @@ WebInspector.SplitView.prototype = {
         sideB.removeStyleClass("maximized");
         this._removeAllLayoutProperties();
 
-        this._firstElement.style.right = 0;
-        this._firstElement.style.bottom = 0;
-        this._firstElement.style.width = "100%";
-        this._firstElement.style.height = "100%";
-
-        this._secondElement.style.left = 0;
-        this._secondElement.style.top = 0;
-        this._secondElement.style.width = "100%";
-        this._secondElement.style.height = "100%";
-
         this._isShowingOne = true;
         this.setResizable(false);
         this.doResize();
@@ -211,7 +182,7 @@ WebInspector.SplitView.prototype = {
         this._firstElement.style.removeProperty("bottom");
         this._firstElement.style.removeProperty("width");
         this._firstElement.style.removeProperty("height");
-  
+
         this._secondElement.style.removeProperty("left");
         this._secondElement.style.removeProperty("top");
         this._secondElement.style.removeProperty("width");
index 3c7736492329cf23aff1a341ec65011647eda267..6377c16895d7f6f19ac27631bc4ee102d24e83da 100644 (file)
@@ -59,8 +59,10 @@ WebInspector.TimelinePanel = function()
     this.element.addEventListener("contextmenu", this._contextMenu.bind(this), false);
     this.element.tabIndex = 0;
 
+    this.element.addStyleClass("split-view-vertical");
+
     this._sidebarBackgroundElement = document.createElement("div");
-    this._sidebarBackgroundElement.className = "sidebar split-view-sidebar-left timeline-sidebar-background";
+    this._sidebarBackgroundElement.className = "sidebar split-view-sidebar split-view-contents-first timeline-sidebar-background";
     this.element.appendChild(this._sidebarBackgroundElement);
 
     this.createSidebarViewWithTree();
index d090b2e949f86a9a23206a20999dcfcf885e31e5..f3387d5fd011fd5d93919dca37b20dce100b49b4 100644 (file)
@@ -27,8 +27,7 @@
  * OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.css-named-flow-collections-view .split-view-sidebar-left {
-    border-right: 1px solid rgb(163, 163, 163);
+.css-named-flow-collections-view .split-view-sidebar {
     overflow-x: hidden;
 }
 
@@ -46,7 +45,7 @@
     width: 100%;
 }
 
-.css-named-flow-collections-view .split-view-sidebar-left .sidebar-content {
+.css-named-flow-collections-view .split-view-sidebar .sidebar-content {
     bottom: 0px;
     left: 0px;
     padding: 0px;
@@ -55,7 +54,7 @@
     top: 23px;
 }
 
-.css-named-flow-collections-view .split-view-sidebar-left .selection {
+.css-named-flow-collections-view .split-view-sidebar .selection {
     margin-left: -12px;
     z-index: 0;
 }
@@ -64,7 +63,7 @@
     position: relative;
 }
 
-.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 {
+.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 {
     cursor: default;
     float: left;
     height: 10px;
@@ -75,7 +74,7 @@
     z-index: 1;
 }
 
-.css-named-flow-collections-view .split-view-sidebar-left .named-flow-overflow::before {
+.css-named-flow-collections-view .split-view-sidebar .named-flow-overflow::before {
     content: url(Images/namedFlowOverflow.png);
     margin: 2px 3px 0px -13px;
 }
index 7b08a7e076a40b48fb6db0e97390fca4e82edc91..21973f7a6e227722dedaeda292fb523bb4882487 100644 (file)
     cursor: default;
 }
 
-.split-view-contents.split-view-contents-vertical {
+.split-view-contents.maximized {
+    width: 100%;
+    height: 100%;
+}
+
+.split-view-vertical .split-view-contents {
     top: 0;
     bottom: 0;
 }
 
-.split-view-contents.split-view-contents-horizontal {
+.split-view-vertical .split-view-contents-first {
     left: 0;
+}
+
+.split-view-vertical .split-view-contents-first.maximized {
     right: 0;
 }
 
-.split-view-sidebar-left {
-    border-right: 1px solid rgb(64%, 64%, 64%);
+.split-view-vertical .split-view-contents-second {
+    right: 0;
 }
 
-.split-view-sidebar-left.maximized {
-    border-right: none;
+.split-view-vertical .split-view-contents-second.maximized {
+    left: 0;
 }
 
-.split-view-sidebar-right {
-    border-left: 1px solid rgb(64%, 64%, 64%);
+.split-view-horizontal .split-view-contents {
+    left: 0;
+    right: 0;
 }
 
-.split-view-sidebar-right.maximized {
-    border-right: none;
+.split-view-horizontal .split-view-contents-first {
+    top: 0;
 }
 
-.split-view-sidebar-top {
-    border-bottom: 1px solid rgb(64%, 64%, 64%);
+.split-view-horizontal .split-view-contents-first.maximized {
+    bottom: 0;
 }
 
-.split-view-sidebar-top.maximized {
-    border-bottom: none;
+.split-view-horizontal .split-view-contents-second {
+    bottom: 0;
 }
 
-.split-view-sidebar-bottom {
-    border-top: 1px solid rgb(64%, 64%, 64%);
+.split-view-horizontal .split-view-contents-second.maximized {
+    top: 0;
 }
 
-.split-view-sidebar-bottom.maximized {
-    border-top: none;
+.split-view-vertical .split-view-sidebar.split-view-contents-first:not(.maximized) {
+    border-right: 1px solid rgb(64%, 64%, 64%);
+}
+
+.split-view-vertical .split-view-sidebar.split-view-contents-second:not(.maximized) {
+    border-left: 1px solid rgb(64%, 64%, 64%);
+}
+
+.split-view-horizontal .split-view-sidebar.split-view-contents-first:not(.maximized) {
+    border-bottom: 1px solid rgb(64%, 64%, 64%);
+}
+
+.split-view-horizontal .split-view-sidebar.split-view-contents-second:not(.maximized) {
+    border-top: 1px solid rgb(64%, 64%, 64%);
 }
 
-.split-view-resizer.split-view-resizer-vertical {
+.split-view-vertical .split-view-resizer {
     position: absolute;
     top: 0;
     bottom: 0;
     cursor: ew-resize;
 }
 
-.split-view-resizer.split-view-resizer-horizontal {
+.split-view-horizontal .split-view-resizer {
     position: absolute;
     left: 0;
     right: 0;
index c7e881a5d97390583720ab6647fd66f930943865..d6e28896eccfaac260fc1fee551656692e4dfd8a 100644 (file)
@@ -45,7 +45,7 @@
     bottom: auto;
 }
 
-.timeline .split-view-resizer {
+.timeline.split-view-vertical .split-view-resizer {
     top: 20px;
 }
 
     overflow-x: hidden;
 }
 
-#timeline-container .split-view-sidebar-left {
+#timeline-container .split-view-sidebar {
     z-index: 1;
 }