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", "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";
 
     this._drawer = new WebInspector.Drawer(this);
     this.appendToRightToolbar(this._drawer.toggleButtonElement());
 
     this._history = [];
     this._historyIterator = -1;
     document.addEventListener("keydown", this._keyDown.bind(this), false);
     document.addEventListener("keypress", this._keyPress.bind(this), false);
     this._panelDescriptors = {};
 
     // Windows and Mac have two different definitions of '[' and ']', so accept both of each.
     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 = {
     /**
      * @param {Element} element
      */
     appendToLeftToolbar: function(element)
     {
         this._leftToolbarElement.appendChild(element);
     },
 
     /**
      * @param {Element} element
      */
     appendToRightToolbar: function(element)
     {
         this._rightToolbarElement.appendChild(element);
     },
 
     /**
      * @return {WebInspector.Drawer}
      */
     drawer: function()
     {
         return this._drawer;
     },
 
     /**
+     * @return {Element}
+     */
+    devtoolsElement: function()
+    {
+        return this._devtoolsElement;
+    },
+
+    /**
      * @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 241 matching lines @@
         this._historyIterator = this._history.length - 1;
     },
 
     onResize: function()
     {
         // FIXME: make drawer a view.
         this.doResize();
         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}
  */
 WebInspector.inspectorView = null;