DevTools: do not detach views that should be hidden upon detach.

Source/devtools/front_end/ui/SplitView.js

 /*
  * Copyright (C) 2012 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:
  *
  * 1. Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *
@@ skipping 34 matching lines @@
     this._mainView = new WebInspector.VBox();
     this._mainElement = this._mainView.element;
     this._mainElement.className = "split-view-contents split-view-main vbox"; // Override
 
     this._sidebarView = new WebInspector.VBox();
     this._sidebarElement = this._sidebarView.element;
     this._sidebarElement.className = "split-view-contents split-view-sidebar vbox"; // Override
 
     this._resizerElement = this.element.createChild("div", "split-view-resizer");
     this._resizerElement.createChild("div", "split-view-resizer-border");
-    if (secondIsSidebar) {
-        this._mainView.show(this.element);
-        this._sidebarView.show(this.element);
-    } else {
-        this._sidebarView.show(this.element);
-        this._mainView.show(this.element);
-    }
+    this._mainView.show(this.element);
+    this._sidebarView.show(this.element);
 
     this._resizerWidget = new WebInspector.ResizerWidget();
     this._resizerWidget.setEnabled(true);
     this._resizerWidget.addEventListener(WebInspector.ResizerWidget.Events.ResizeStart, this._onResizeStart, this);
     this._resizerWidget.addEventListener(WebInspector.ResizerWidget.Events.ResizeUpdate, this._onResizeUpdate, this);
     this._resizerWidget.addEventListener(WebInspector.ResizerWidget.Events.ResizeEnd, this._onResizeEnd, this);
 
     this._defaultSidebarWidth = defaultSidebarWidth || 200;
     this._defaultSidebarHeight = defaultSidebarHeight || this._defaultSidebarWidth;
     this._constraintsInDip = !!constraintsInDip;
@@ skipping 119 matching lines @@
     showMode: function()
     {
         return this._showMode;
     },
 
     /**
      * @param {boolean} secondIsSidebar
      */
     setSecondIsSidebar: function(secondIsSidebar)
     {
         this._mainElement.classList.toggle("split-view-contents-first", secondIsSidebar);

[dgozman, 2014/11/11 10:46:42]

I wonder why don't we remove these classes.

[pfeldman, 2014/11/11 12:49:59]

dunno.

         this._mainElement.classList.toggle("split-view-contents-second", !secondIsSidebar);
         this._sidebarElement.classList.toggle("split-view-contents-first", !secondIsSidebar);
         this._sidebarElement.classList.toggle("split-view-contents-second", secondIsSidebar);
-
-        // Make sure second is last in the children array.
-        if (secondIsSidebar) {
-            if (this._sidebarElement.parentElement && this._sidebarElement.nextSibling)
-                this.element.appendChild(this._sidebarElement);
-        } else {
-            if (this._mainElement.parentElement && this._mainElement.nextSibling)
-                this.element.appendChild(this._mainElement);
-        }
-
+        this.element.classList.toggle("split-view-first-is-sidebar", !secondIsSidebar);
         this._secondIsSidebar = secondIsSidebar;
     },
 
     /**
      * @return {?string}
      */
     sidebarSide: function()
     {
         if (this._showMode !== WebInspector.SplitView.ShowMode.Both)
             return null;
@@ skipping 52 matching lines @@
      */
     _showOnly: function(sideToShow, sideToHide, animate)
     {
         this._cancelAnimation();
 
         /**
          * @this {WebInspector.SplitView}
          */
         function callback()
         {
-            sideToShow.show(this.element);
+            // Make sure main is first in the children list.
+            if (sideToShow === this._mainView)
+                this._mainView.show(this.element, this._sidebarView.element);
+            else
+                this._sidebarView.show(this.element);
             sideToHide.detach();
             sideToShow.element.classList.add("maximized");
             sideToHide.element.classList.remove("maximized");
             this._resizerElement.classList.add("hidden");
             this._removeAllLayoutProperties();
         }
 
         if (animate) {
             this._animate(true, callback.bind(this));
         } else {
@@ skipping 31 matching lines @@
     showBoth: function(animate)
     {
        if (this._showMode === WebInspector.SplitView.ShowMode.Both)
             animate = false;
 
         this._cancelAnimation();
         this._mainElement.classList.remove("maximized");
         this._sidebarElement.classList.remove("maximized");
         this._resizerElement.classList.remove("hidden");
 
-        this._mainView.show(this.element);
+        // Make sure main is the first in the children list.
+        this._mainView.show(this.element, this._sidebarView.element);
         this._sidebarView.show(this.element);
         // Order views in DOM properly.
         this.setSecondIsSidebar(this._secondIsSidebar);
 
         this._sidebarSize = -1;
         this.setResizable(true);
         this._updateShowMode(WebInspector.SplitView.ShowMode.Both);
         this._updateLayout(animate);
     },
 
@@ skipping 528 matching lines @@
         this._showHideSidebarButton.state = sidebarHidden ? "show" : "hide";
         this._showHideSidebarButton.element.classList.toggle("top-sidebar-show-hide-button", !this.isVertical() && !this.isSidebarSecond());
         this._showHideSidebarButton.element.classList.toggle("right-sidebar-show-hide-button", this.isVertical() && this.isSidebarSecond());
         this._showHideSidebarButton.element.classList.toggle("bottom-sidebar-show-hide-button", !this.isVertical() && this.isSidebarSecond());
         this._showHideSidebarButton.element.classList.toggle("left-sidebar-show-hide-button", this.isVertical() && !this.isSidebarSecond());
         this._showHideSidebarButton.title = sidebarHidden ? WebInspector.UIString("Show %s", this._showHideSidebarButtonTitle) : WebInspector.UIString("Hide %s", this._showHideSidebarButtonTitle);
     },
 
     __proto__: WebInspector.View.prototype
 }