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

Source/devtools/front_end/InspectorView.js

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 21 matching lines @@
  * @constructor
  * @extends {WebInspector.View}
  */
 WebInspector.InspectorView = function()
 {
     WebInspector.View.call(this);
     this.markAsRoot();
     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";
     var headerElement = this._tabbedPane.headerElement();
     headerElement.parentElement.insertBefore(toolbarElement, headerElement);
 
     this._leftToolbarElement = toolbarElement.createChild("div", "toolbar-controls-left");
     toolbarElement.appendChild(headerElement);
     this._rightToolbarElement = toolbarElement.createChild("div", "toolbar-controls-right");
 
@@ skipping 34 matching lines @@
 
     /**
      * @return {WebInspector.Drawer}
      */
     drawer: function()
     {
         return this._drawer;
     },
 
     /**
+     * @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)
     {
         var panelName = panelDescriptor.name();
         this._panelDescriptors[panelName] = panelDescriptor;
         this._tabbedPane.appendTab(panelName, panelDescriptor.title(), new WebInspector.View());
         if (this._lastActivePanelSetting.get() === panelName)
             this._tabbedPane.selectTab(panelName);
     },
@@ skipping 233 matching lines @@
         this._historyIterator = this._history.length - 1;
     },
 
     onResize: function()
     {
         // FIXME: make drawer a view.
         this.doResize();
         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}
  */
 WebInspector.inspectorView = null;