[DevTools] Dock to left mode.

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 36 matching lines @@
     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._updateSplitView.bind(this));
 
     this._splitView.element.id = "inspector-split-view";
     this._splitView.show(this.element);
 
     this._overlayView = new WebInspector.ViewWithResizeCallback(this._onOverlayResized.bind(this));
     this._splitView.setMainView(this._overlayView);
     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();

[pfeldman, 2014/01/24 13:22:57]

I've seen this too many times. Lets extract WebInspector.VBox please.

[dgozman, 2014/01/24 14:03:49]

Do you mean we should switch current usages to WebInspector.VBox too. Then it
would be a separate big patch.

+    this._devtoolsView.element.classList.add("vbox", "fill");

[pfeldman, 2014/01/24 13:22:57]

.className = "fill vbox";

[dgozman, 2014/01/24 14:03:49]

Done.

+    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";
     var headerElement = this._tabbedPane.headerElement();
     headerElement.parentElement.insertBefore(this._toolbarElement, headerElement);
 
     this._leftToolbarElement = this._toolbarElement.createChild("div", "toolbar-controls-left");
     this._toolbarElement.appendChild(headerElement);
     this._rightToolbarElement = this._toolbarElement.createChild("div", "toolbar-controls-right");
 
@@ skipping 69 matching lines @@
     drawer: function()
     {
         return this._drawer;
     },
 
     /**
      * @return {!Element}
      */
     devtoolsElement: function()
     {
-        return this._devtoolsElement;
+        return this._devtoolsView.element;
     },
 
     /**
      * @param {!WebInspector.PanelDescriptor} panelDescriptor
      */
     addPanel: function(panelDescriptor)
     {
         var panelName = panelDescriptor.name();
         this._panelDescriptors[panelName] = panelDescriptor;
         this._tabbedPane.appendTab(panelName, panelDescriptor.title(), new WebInspector.View());
@@ skipping 238 matching lines @@
     {
         // FIXME: make drawer a view.
         this.doResize();
         this._drawer.resize();
     },
 
     _updateSplitView: function()
     {
         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();
         }
     },
 
     _onOverlayResized: function()
     {
         var dockSide = WebInspector.dockController.dockSide();
         if (dockSide !== WebInspector.DockController.State.Undocked) {
             if (this._setContentsInsetsId)
                 window.cancelAnimationFrame(this._setContentsInsetsId);
             this._setContentsInsetsId = window.requestAnimationFrame(this._setContentsInsets.bind(this));
         }
 
         // FIXME: make drawer a view.
         this._drawer.resize();
     },
 
     _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()
     {
         this._updateConstraints();
         var zoomFactor = WebInspector.zoomFactor();
         if (zoomFactor !== this._zoomFactor)
             this._splitView.setSidebarSize(this._splitView.sidebarSize() * this._zoomFactor / zoomFactor, true);
         this._zoomFactor = zoomFactor;
     },
@@ skipping 78 matching lines @@
         this._tabbedPane.headerResized();
     },
 
     __proto__: WebInspector.View.prototype
 };
 
 /**
  * @type {!WebInspector.InspectorView}
  */
 WebInspector.inspectorView;