[DevTools] Dock to left mode.
BUG=134282
Review URL: https://codereview.chromium.org/146733002
git-svn-id: svn://svn.chromium.org/blink/trunk@165820 bbb929c8-8fbe-4397-9dbb-9b2b20218538
diff --git a/Source/devtools/front_end/DockController.js b/Source/devtools/front_end/DockController.js
index 3a767df..5342f7b 100644
--- a/Source/devtools/front_end/DockController.js
+++ b/Source/devtools/front_end/DockController.js
@@ -42,10 +42,16 @@
WebInspector.settings.currentDockState = WebInspector.settings.createSetting("currentDockState", "");
WebInspector.settings.lastDockState = WebInspector.settings.createSetting("lastDockState", "");
+ var states = [WebInspector.DockController.State.DockedToBottom, WebInspector.DockController.State.Undocked, WebInspector.DockController.State.DockedToRight];
+ var titles = [WebInspector.UIString("Dock to main window."), WebInspector.UIString("Undock into separate window."), WebInspector.UIString("Dock to main window.")];
+ if (WebInspector.experimentsSettings.dockToLeft.isEnabled()) {
+ states.push(WebInspector.DockController.State.DockedToLeft);
+ titles.push(WebInspector.UIString("Dock to main window."));
+ }
this._dockToggleButton = new WebInspector.StatusBarStatesSettingButton(
"dock-status-bar-item",
- [WebInspector.DockController.State.DockedToBottom, WebInspector.DockController.State.Undocked, WebInspector.DockController.State.DockedToRight],
- [WebInspector.UIString("Dock to main window."), WebInspector.UIString("Undock into separate window."), WebInspector.UIString("Dock to main window.")],
+ states,
+ titles,
WebInspector.settings.currentDockState,
WebInspector.settings.lastDockState,
this._dockSideChanged.bind(this));
@@ -54,6 +60,7 @@
WebInspector.DockController.State = {
DockedToBottom: "bottom",
DockedToRight: "right",
+ DockedToLeft: "left",
Undocked: "undocked"
}
@@ -79,6 +86,14 @@
},
/**
+ * @return {boolean}
+ */
+ isVertical: function()
+ {
+ return this._dockSide === WebInspector.DockController.State.DockedToRight || this._dockSide === WebInspector.DockController.State.DockedToLeft;
+ },
+
+ /**
* @param {string} dockSide
*/
_dockSideChanged: function(dockSide)
@@ -101,16 +116,25 @@
case WebInspector.DockController.State.DockedToBottom:
body.classList.remove("undocked");
body.classList.remove("dock-to-right");
+ body.classList.remove("dock-to-left");
body.classList.add("dock-to-bottom");
break;
case WebInspector.DockController.State.DockedToRight:
body.classList.remove("undocked");
body.classList.add("dock-to-right");
+ body.classList.remove("dock-to-left");
body.classList.remove("dock-to-bottom");
break;
- case WebInspector.DockController.State.Undocked:
+ case WebInspector.DockController.State.DockedToLeft:
+ body.classList.remove("undocked");
+ body.classList.remove("dock-to-right");
+ body.classList.add("dock-to-left");
+ body.classList.remove("dock-to-bottom");
+ break;
+ case WebInspector.DockController.State.Undocked:
body.classList.add("undocked");
body.classList.remove("dock-to-right");
+ body.classList.remove("dock-to-left");
body.classList.remove("dock-to-bottom");
break;
}
diff --git a/Source/devtools/front_end/ElementsPanel.js b/Source/devtools/front_end/ElementsPanel.js
index 5eadf83..dffcddc 100644
--- a/Source/devtools/front_end/ElementsPanel.js
+++ b/Source/devtools/front_end/ElementsPanel.js
@@ -1187,8 +1187,7 @@
_dockSideChanged: function()
{
- var dockSide = WebInspector.dockController.dockSide();
- var vertically = dockSide === WebInspector.DockController.State.DockedToRight && WebInspector.settings.splitVerticallyWhenDockedToRight.get();
+ var vertically = WebInspector.dockController.isVertical() && WebInspector.settings.splitVerticallyWhenDockedToRight.get();
this._splitVertically(vertically);
},
diff --git a/Source/devtools/front_end/Images/src/statusbarButtonGlyphs.svg b/Source/devtools/front_end/Images/src/statusbarButtonGlyphs.svg
index 3cb16db..92aae01 100644
--- a/Source/devtools/front_end/Images/src/statusbarButtonGlyphs.svg
+++ b/Source/devtools/front_end/Images/src/statusbarButtonGlyphs.svg
@@ -30,7 +30,7 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
- inkscape:window-height="1178"
+ inkscape:window-height="1124"
id="namedview3315"
showgrid="true"
width="640px"
@@ -38,7 +38,7 @@
inkscape:cx="157.49088"
inkscape:cy="65.78401"
inkscape:window-x="0"
- inkscape:window-y="0"
+ inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg2"><inkscape:grid
empspacing="2"
@@ -866,6 +866,7 @@
id="tspan5303"
x="161.33199"
y="146.8199">!</tspan></text>
+
<path
d="m 206,110 2,0 0,2.30275 -0.28334,1.67983 -1.43333,0 L 206,112.30275 206,110 m 0,4.56933 2,0 0,1.43067 -2,0 0,-1"
id="path5364"
@@ -1011,6 +1012,7 @@
x="217.81799"
y="115.13864"
style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;font-family:Serif;-inkscape-font-specification:Serif Bold">i</tspan></text>
+
</g><rect
rx="0.25"
ry="0.25"
@@ -1028,4 +1030,8 @@
inkscape:connector-curvature="0"
id="path4032"
d="m 10.75,140.75 10.5,-17.5"
- style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g></svg>
\ No newline at end of file
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /></g><path
+ inkscape:connector-curvature="0"
+ style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+ id="path190-0"
+ d="m 46,128 7,0 0,8 -7,0 0,-8 z m 9,-2 -14,0 0,12 14,0 0,-12 z" /></svg>
\ No newline at end of file
diff --git a/Source/devtools/front_end/Images/statusbarButtonGlyphs.png b/Source/devtools/front_end/Images/statusbarButtonGlyphs.png
index 9abb072..aebfcec 100644
--- a/Source/devtools/front_end/Images/statusbarButtonGlyphs.png
+++ b/Source/devtools/front_end/Images/statusbarButtonGlyphs.png
Binary files differ
diff --git a/Source/devtools/front_end/Images/statusbarButtonGlyphs2x.png b/Source/devtools/front_end/Images/statusbarButtonGlyphs2x.png
index 18d1cf5..a906726 100644
--- a/Source/devtools/front_end/Images/statusbarButtonGlyphs2x.png
+++ b/Source/devtools/front_end/Images/statusbarButtonGlyphs2x.png
Binary files differ
diff --git a/Source/devtools/front_end/InspectorView.js b/Source/devtools/front_end/InspectorView.js
index 28dea2f..81d3873 100644
--- a/Source/devtools/front_end/InspectorView.js
+++ b/Source/devtools/front_end/InspectorView.js
@@ -54,12 +54,13 @@
this._zoomFactor = WebInspector.zoomFactor();
WebInspector.settings.zoomLevel.addChangeListener(this._onZoomChanged, this);
- this._devtoolsElement = this._splitView.sidebarElement();
- this._devtoolsElement.classList.add("vbox");
+ this._devtoolsView = new WebInspector.View();
+ this._devtoolsView.element.className = "vbox fill";
+ this._splitView.setSidebarView(this._devtoolsView);
this._tabbedPane = new WebInspector.TabbedPane();
this._tabbedPane.setRetainTabOrder(true, WebInspector.moduleManager.orderComparator(WebInspector.Panel, "name", "order"));
- this._splitView.setSidebarView(this._tabbedPane);
+ this._tabbedPane.show(this._devtoolsView.element);
this._toolbarElement = document.createElement("div");
this._toolbarElement.className = "toolbar toolbar-background";
@@ -149,7 +150,7 @@
*/
devtoolsElement: function()
{
- return this._devtoolsElement;
+ return this._devtoolsView.element;
},
/**
@@ -408,17 +409,24 @@
{
var dockSide = WebInspector.dockController.dockSide();
if (dockSide !== WebInspector.DockController.State.Undocked) {
- this._splitView.showBoth();
- var vertical = dockSide === WebInspector.DockController.State.DockedToRight;
+ var vertical = WebInspector.dockController.isVertical();
this._splitView.setVertical(vertical);
if (vertical) {
+ this._splitView.setSecondIsSidebar(dockSide === WebInspector.DockController.State.DockedToRight);
this._splitView.uninstallResizer(this._tabbedPane.headerElement());
this._splitView.installResizer(this._splitView.resizerElement());
} else {
+ this._splitView.setSecondIsSidebar(true);
this._splitView.uninstallResizer(this._splitView.resizerElement());
this._splitView.installResizer(this._tabbedPane.headerElement());
}
+ this._splitView.setMainView(this._overlayView);
+ this._splitView.setSidebarView(this._devtoolsView);
+ this._splitView.showBoth();
} else {
+ this._splitView.setSecondIsSidebar(true);
+ this._splitView.setMainView(this._overlayView);
+ this._splitView.setSidebarView(this._devtoolsView);
this._splitView.showOnlySecond();
this._splitView.uninstallResizer(this._tabbedPane.headerElement());
this._splitView.uninstallResizer(this._splitView.resizerElement());
@@ -441,11 +449,13 @@
_setContentsInsets: function()
{
delete this._setContentsInsetsId;
- // Leave 3px room for resizer.
var sidebarSize = Math.ceil(this._splitView.sidebarSize() * WebInspector.zoomFactor());
var bottom = this._splitView.isVertical() ? 0 : sidebarSize;
- var right = this._splitView.isVertical() ? sidebarSize + 3 : 0;
- InspectorFrontendHost.setContentsInsets(0, 0, bottom, right);
+ // Leave 3px room for resizer.
+ var vertical = this._splitView.isVertical() ? sidebarSize + 3 : 0;
+ var right = this._splitView.isSidebarSecond() ? vertical : 0;
+ var left = this._splitView.isSidebarSecond() ? 0 : vertical;
+ InspectorFrontendHost.setContentsInsets(0, left, bottom, right);
},
_onZoomChanged: function()
diff --git a/Source/devtools/front_end/Settings.js b/Source/devtools/front_end/Settings.js
index 915c7d4..aec1800 100644
--- a/Source/devtools/front_end/Settings.js
+++ b/Source/devtools/front_end/Settings.js
@@ -288,6 +288,7 @@
this.gpuTimeline = this._createExperiment("gpuTimeline", "Show GPU data on timeline");
this.applyCustomStylesheet = this._createExperiment("applyCustomStylesheet", "Allow custom UI themes");
this.workersInMainWindow = this._createExperiment("workersInMainWindow", "Show workers in main window");
+ this.dockToLeft = this._createExperiment("dockToLeft", "Enable dock to left mode");
this._cleanUpSetting();
}
diff --git a/Source/devtools/front_end/SettingsScreen.js b/Source/devtools/front_end/SettingsScreen.js
index 8ef962f..ffd350d 100644
--- a/Source/devtools/front_end/SettingsScreen.js
+++ b/Source/devtools/front_end/SettingsScreen.js
@@ -283,7 +283,8 @@
this._appendDrawerNote(p.lastElementChild);
p.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Show 'Rendering' view in console drawer."), WebInspector.settings.showRenderingViewInDrawer));
this._appendDrawerNote(p.lastElementChild);
- p.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Split panels vertically when docked to right"), WebInspector.settings.splitVerticallyWhenDockedToRight));
+ var splitVerticallyTitle = WebInspector.UIString("Split panels vertically when docked to %s", WebInspector.experimentsSettings.dockToLeft.isEnabled() ? "left or right" : "right");
+ p.appendChild(WebInspector.SettingsUI.createSettingCheckbox(splitVerticallyTitle, WebInspector.settings.splitVerticallyWhenDockedToRight));
p = this._appendSection(WebInspector.UIString("Elements"));
var colorFormatElement = this._createSelectSetting(WebInspector.UIString("Color format"), [
diff --git a/Source/devtools/front_end/SourcesPanel.js b/Source/devtools/front_end/SourcesPanel.js
index 3908a82..feeb237 100644
--- a/Source/devtools/front_end/SourcesPanel.js
+++ b/Source/devtools/front_end/SourcesPanel.js
@@ -1662,8 +1662,7 @@
_dockSideChanged: function()
{
- var dockSide = WebInspector.dockController.dockSide();
- var vertically = dockSide === WebInspector.DockController.State.DockedToRight && WebInspector.settings.splitVerticallyWhenDockedToRight.get();
+ var vertically = WebInspector.dockController.isVertical() && WebInspector.settings.splitVerticallyWhenDockedToRight.get();
this._splitVertically(vertically);
},
diff --git a/Source/devtools/front_end/inspector.css b/Source/devtools/front_end/inspector.css
index 8ddf71c..7a9eb4f 100644
--- a/Source/devtools/front_end/inspector.css
+++ b/Source/devtools/front_end/inspector.css
@@ -588,6 +588,10 @@
-webkit-mask-position: -256px -48px;
}
+button.status-bar-item.dock-status-bar-item.toggled-left .glyph {
+ -webkit-mask-position: -32px -120px;
+}
+
body.undocked .alternate-status-bar-buttons-bar {
margin-left: 1px;
}
@@ -2856,3 +2860,7 @@
body.dock-to-bottom #inspector-split-view > .split-view-resizer {
display: none;
}
+
+#inspector-split-view > .split-view-sidebar {
+ position: relative;
+}
