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 42e281b4ff14af658ed9f7cb4682dad39d7df8a7..47261026af30020fc6df707ca50cb7507e55da80 100644
--- a/Source/devtools/front_end/InspectorView.js
+++ b/Source/devtools/front_end/InspectorView.js
@@ -39,9 +39,18 @@ WebInspector.InspectorView = function()
     this.element.classList.add("fill", "vbox");
     this.element.setAttribute("spellcheck", false);
 
+    this._splitView = new WebInspector.InspectorView.SplitView();
+    this._splitView.addEventListener(WebInspector.InspectorView.SplitView.Events.LayoutChanged, this._onSplitViewLayout.bind(this));
+    this._splitView.element.id = "inspector-split-view";
+    this._splitView.show(this.element);
+
+    this._overlay = this._splitView.mainElement;

[pfeldman, 2013/11/18 15:07:42]

_overlayElement

[dgozman, 2013/11/21 16:38:51]

Done.

+    this._container = this._splitView.sidebarElement;

[pfeldman, 2013/11/18 15:07:42]

_devtoolsElement

[dgozman, 2013/11/21 16:38:51]

Done.

+    this._container.classList.add("vbox");
+
     this._tabbedPane = new WebInspector.TabbedPane();
     this._tabbedPane.setRetainTabsOrder(true);
-    this._tabbedPane.show(this.element);
+    this._tabbedPane.show(this._container);
 
     var toolbarElement = document.createElement("div");
     toolbarElement.className = "toolbar toolbar-background";
@@ -96,6 +105,14 @@ WebInspector.InspectorView.prototype = {
     },
 
     /**
+     * @return {WebInspector.View}
+     */
+    container: function()

[pfeldman, 2013/11/18 15:07:42]

devtoolsElement

[dgozman, 2013/11/21 16:38:51]

Done.

+    {
+        return this._container;
+    },
+
+    /**
      * @param {WebInspector.PanelDescriptor} panelDescriptor
      */
     addPanel: function(panelDescriptor)
@@ -349,8 +366,59 @@ WebInspector.InspectorView.prototype = {
         this._drawer.resize();
     },
 
+    _onSplitViewLayout: function()
+    {
+        // FIXME: make drawer a view.

[pfeldman, 2013/11/18 15:07:42]

Yes!

+        this._drawer.resize();
+    },
+
     __proto__: WebInspector.View.prototype
-}
+};
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.SplitView}
+ */
+WebInspector.InspectorView.SplitView = function()

[pfeldman, 2013/11/18 15:07:42]

Not sure you need it, InspectorView is not that huge, just inline it.

[dgozman, 2013/11/21 16:38:51]

Done.

+{
+    WebInspector.SplitView.call(this, false, "InspectorViewContentsSize", 300, 300);
+    this.setSecondIsSidebar(true);
+    this.setSidebarElementConstraints(150, 50);
+    this.setMainElementConstraints(50, 50);
+    this._update();
+    WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._update.bind(this));
+};
+
+WebInspector.InspectorView.SplitView.Events = {
+    LayoutChanged: "LayoutChanged"
+};
+
+WebInspector.InspectorView.SplitView.prototype = {
+    _update: function()
+    {
+        if (WebInspector.useOverlayContentsLayout()) {
+            this.showBoth();
+            this.setVertical(WebInspector.dockController.dockSide() === WebInspector.DockController.State.DockedToRight);
+        } else {
+            this.showOnlySecond();
+        }
+    },
+
+    onLayoutUpdated: function(size)
+    {
+        this.dispatchEventToListeners(WebInspector.InspectorView.SplitView.Events.LayoutChanged);
+
+        if (!WebInspector.useOverlayContentsLayout())
+            return;
+        // Leave 2px room for resizer.
+        var bottom = this.isVertical() ? 0 : this.sidebarSize() + 2;
+        var right = this.isVertical() ? this.sidebarSize() + 2 : 0;
+        InspectorFrontendHost.setContentsOffsets(0, 0, right, bottom);
+    },
+
+    __proto__: WebInspector.SplitView.prototype
+};
 
 /**
  * @type {WebInspector.InspectorView}