DevTools: added "overlayContents" mode, where DevTools content is placed around and underneath inse…

Source/devtools/front_end/InspectorView.js

Index: Source/devtools/front_end/InspectorView.js
diff --git a/Source/devtools/front_end/InspectorView.js b/Source/devtools/front_end/InspectorView.js
index a9e4272650ae15748205e1c4460f39b60512d76a..ba4a6b758bfa10445882156569c970a384124897 100644
--- a/Source/devtools/front_end/InspectorView.js
+++ b/Source/devtools/front_end/InspectorView.js
@@ -39,18 +39,32 @@ WebInspector.InspectorView = function()
     this.element.classList.add("fill", "vbox", "inspector-view");
     this.element.setAttribute("spellcheck", false);
 
+    this._splitView = new WebInspector.SplitView(false, "InspectorViewContentsSize", 300, 300);

[pfeldman, 2013/12/05 15:44:06]

"InspectorView.splitView"

[dgozman, 2013/12/06 16:17:13]

Done.

+    this._splitView.setSecondIsSidebar(true);
+    this._splitView.setSidebarElementConstraints(150, 50);
+    this._splitView.setMainElementConstraints(50, 50);
+    WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._updateSplitView.bind(this));
+    this._splitView.addEventListener(WebInspector.SplitView.Events.LayoutChanged, this._onSplitViewLayout.bind(this));

[pfeldman, 2013/12/05 15:44:06]

var overlayView = new
WebInspector.ViewWithResizeCallback(this._onOverlayResized.bind(this)));
overlayView.show(this._overlayElement);

[dgozman, 2013/12/06 16:17:13]

Done.

+
+    this._splitView.element.id = "inspector-split-view";
+    this._splitView.show(this.element);
+
+    this._overlayElement = this._splitView.mainElement;
+    this._devtoolsElement = this._splitView.sidebarElement;
+    this._devtoolsElement.classList.add("vbox");

[pfeldman, 2013/12/05 15:44:06]

we typically use addStyleClass there.

+
     this._tabbedPane = new WebInspector.TabbedPane();
     this._tabbedPane.setRetainTabsOrder(true);
-    this._tabbedPane.show(this.element);
+    this._tabbedPane.show(this._devtoolsElement);
 
-    var toolbarElement = document.createElement("div");
-    toolbarElement.className = "toolbar toolbar-background";
+    this._toolbarElement = document.createElement("div");
+    this._toolbarElement.className = "toolbar toolbar-background";
     var headerElement = this._tabbedPane.headerElement();
-    headerElement.parentElement.insertBefore(toolbarElement, headerElement);
+    headerElement.parentElement.insertBefore(this._toolbarElement, headerElement);
 
-    this._leftToolbarElement = toolbarElement.createChild("div", "toolbar-controls-left");
-    toolbarElement.appendChild(headerElement);
-    this._rightToolbarElement = toolbarElement.createChild("div", "toolbar-controls-right");
+    this._leftToolbarElement = this._toolbarElement.createChild("div", "toolbar-controls-left");
+    this._toolbarElement.appendChild(headerElement);
+    this._rightToolbarElement = this._toolbarElement.createChild("div", "toolbar-controls-right");
 
     this._errorWarningCountElement = this._rightToolbarElement.createChild("div", "hidden");
     this._errorWarningCountElement.id = "error-warning-count";
@@ -68,6 +82,8 @@ WebInspector.InspectorView = function()
     this._openBracketIdentifiers = ["U+005B", "U+00DB"].keySet();
     this._closeBracketIdentifiers = ["U+005D", "U+00DD"].keySet();
     this._lastActivePanelSetting = WebInspector.settings.createSetting("lastActivePanel", "elements");
+
+    this._updateSplitView();
 }
 
 WebInspector.InspectorView.prototype = {
@@ -96,6 +112,14 @@ WebInspector.InspectorView.prototype = {
     },
 
     /**
+     * @return {Element}
+     */
+    devtoolsElement: function()
+    {
+        return this._devtoolsElement;
+    },
+
+    /**
      * @param {WebInspector.PanelDescriptor} panelDescriptor
      */
     addPanel: function(panelDescriptor)
@@ -357,8 +381,39 @@ WebInspector.InspectorView.prototype = {
         this._drawer.resize();
     },
 
+    _updateSplitView: function()
+    {
+        if (WebInspector.useOverlayContentsLayout()) {
+            this._splitView.showBoth();
+            var vertical = WebInspector.dockController.dockSide() === WebInspector.DockController.State.DockedToRight;
+            this._splitView.setVertical(vertical);
+            if (vertical) {
+                this._splitView.uninstallResizer(this._tabbedPane.headerElement());
+                this._splitView.installResizer(this._splitView.resizerElement());
+            } else {
+                this._splitView.uninstallResizer(this._splitView.resizerElement());
+                this._splitView.installResizer(this._tabbedPane.headerElement());
+            }
+        } else {
+            this._splitView.showOnlySecond();
+        }
+    },
+
+    _onSplitViewLayout: function()
+    {
+        if (WebInspector.useOverlayContentsLayout()) {
+            // Leave 3px room for resizer.
+            var bottom = this._splitView.isVertical() ? 0 : this._splitView.sidebarSize();
+            var right = this._splitView.isVertical() ? this._splitView.sidebarSize() + 3 : 0;
+            InspectorFrontendHost.setContentsOffsets(0, 0, right, bottom);
+        }
+
+        // FIXME: make drawer a view.
+        this._drawer.resize();
+    },
+
     __proto__: WebInspector.View.prototype
-}
+};
 
 /**
  * @type {WebInspector.InspectorView}