- Revision
- 142738
- Author
- [email protected]
- Date
- 2013-02-13 05:15:25 -0800 (Wed, 13 Feb 2013)
Log Message
Web Inspector: Simplify SplitView to rely more on CSS
https://bugs.webkit.org/show_bug.cgi?id=109426
Patch by Vladislav Kaznacheev <[email protected]> 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):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (142737 => 142738)
--- trunk/Source/WebCore/ChangeLog 2013-02-13 12:57:21 UTC (rev 142737)
+++ trunk/Source/WebCore/ChangeLog 2013-02-13 13:15:25 UTC (rev 142738)
@@ -1,3 +1,53 @@
+2013-02-13 Vladislav Kaznacheev <[email protected]>
+
+ 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 <[email protected]>
Unreviewed, rolling out r142730.
Modified: trunk/Source/WebCore/inspector/front-end/SidebarView.js (142737 => 142738)
--- trunk/Source/WebCore/inspector/front-end/SidebarView.js 2013-02-13 12:57:21 UTC (rev 142737)
+++ trunk/Source/WebCore/inspector/front-end/SidebarView.js 2013-02-13 13:15:25 UTC (rev 142738)
@@ -46,7 +46,6 @@
this._sidebarPosition = sidebarPosition || WebInspector.SidebarView.SidebarPosition.Start;
this.setSecondIsSidebar(this._sidebarPosition === WebInspector.SidebarView.SidebarPosition.End);
- this._updateSidebarElementStyle();
}
WebInspector.SidebarView.EventTypes = {
@@ -78,39 +77,7 @@
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
*/
setMinimumSidebarWidth: function(width)
Modified: trunk/Source/WebCore/inspector/front-end/SplitView.js (142737 => 142738)
--- trunk/Source/WebCore/inspector/front-end/SplitView.js 2013-02-13 12:57:21 UTC (rev 142737)
+++ trunk/Source/WebCore/inspector/front-end/SplitView.js 2013-02-13 13:15:25 UTC (rev 142738)
@@ -43,7 +43,10 @@
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 @@
*/
_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 @@
*/
setSecondIsSidebar: function(secondIsSidebar)
{
+ this.sidebarElement.removeStyleClass("split-view-sidebar");
this._secondIsSidebar = secondIsSidebar;
+ this.sidebarElement.addStyleClass("split-view-sidebar");
},
/**
@@ -190,16 +171,6 @@
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 @@
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");
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (142737 => 142738)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2013-02-13 12:57:21 UTC (rev 142737)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2013-02-13 13:15:25 UTC (rev 142738)
@@ -59,8 +59,10 @@
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();
Modified: trunk/Source/WebCore/inspector/front-end/cssNamedFlows.css (142737 => 142738)
--- trunk/Source/WebCore/inspector/front-end/cssNamedFlows.css 2013-02-13 12:57:21 UTC (rev 142737)
+++ trunk/Source/WebCore/inspector/front-end/cssNamedFlows.css 2013-02-13 13:15:25 UTC (rev 142738)
@@ -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;
}
Modified: trunk/Source/WebCore/inspector/front-end/splitView.css (142737 => 142738)
--- trunk/Source/WebCore/inspector/front-end/splitView.css 2013-02-13 12:57:21 UTC (rev 142737)
+++ trunk/Source/WebCore/inspector/front-end/splitView.css 2013-02-13 13:15:25 UTC (rev 142738)
@@ -41,49 +41,70 @@
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-resizer.split-view-resizer-vertical {
+.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-vertical .split-view-resizer {
position: absolute;
top: 0;
bottom: 0;
@@ -92,7 +113,7 @@
cursor: ew-resize;
}
-.split-view-resizer.split-view-resizer-horizontal {
+.split-view-horizontal .split-view-resizer {
position: absolute;
left: 0;
right: 0;
Modified: trunk/Source/WebCore/inspector/front-end/timelinePanel.css (142737 => 142738)
--- trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2013-02-13 12:57:21 UTC (rev 142737)
+++ trunk/Source/WebCore/inspector/front-end/timelinePanel.css 2013-02-13 13:15:25 UTC (rev 142738)
@@ -45,7 +45,7 @@
bottom: auto;
}
-.timeline .split-view-resizer {
+.timeline.split-view-vertical .split-view-resizer {
top: 20px;
}
@@ -166,7 +166,7 @@
overflow-x: hidden;
}
-#timeline-container .split-view-sidebar-left {
+#timeline-container .split-view-sidebar {
z-index: 1;
}
