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

BUG=431761

Review URL: https://codereview.chromium.org/713053002

git-svn-id: svn://svn.chromium.org/blink/trunk@185229 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/devtools.gyp

@@ -335,7 +335,7 @@
                         'inputs': [
                             '<@(_script_name)',
                             '<@(_input_stylesheet)',
-                            '<@(devtools_core_base_files)',
+                            '<@(devtools_core_css_files)',
                         ],
                         'search_path': [ 'front_end' ],
                         'outputs': ['<(PRODUCT_DIR)/resources/inspector/devtools.css'],
@@ -352,7 +352,7 @@
                         'inputs': [
                             '<@(_script_name)',
                             '<@(_input_stylesheet)',
-                            '<@(devtools_core_base_files)',
+                            '<@(devtools_core_css_files)',
                         ],
                         'search_path': [ 'front_end' ],
                         'outputs': ['<(PRODUCT_DIR)/resources/inspector/inspector.css'],
@@ -369,7 +369,7 @@
                         'inputs': [
                             '<@(_script_name)',
                             '<@(_input_stylesheet)',
-                            '<@(devtools_core_base_files)',
+                            '<@(devtools_core_css_files)',
                         ],
                         'search_path': [ 'front_end' ],
                         'outputs': ['<(PRODUCT_DIR)/resources/inspector/toolbox.css'],

third_party/WebKit/Source/devtools/front_end/splitView.css

@@ -62,6 +62,14 @@
     z-index: 500;
 }
 
+.split-view.hbox.split-view-first-is-sidebar {
+    flex-direction: row-reverse !important;
+}
+
+.split-view.vbox.split-view-first-is-sidebar {
+    flex-direction: column-reverse !important;
+}
+
 .split-view-resizer-border {
     pointer-events: none;
 }

third_party/WebKit/Source/devtools/front_end/ui/SplitView.js

@@ -52,13 +52,8 @@ WebInspector.SplitView = function(isVertical, secondIsSidebar, settingName, defa
 
     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);
@@ -202,16 +197,7 @@ WebInspector.SplitView.prototype = {
         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;
     },
 
@@ -284,7 +270,11 @@ WebInspector.SplitView.prototype = {
          */
         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");
@@ -336,7 +326,8 @@ WebInspector.SplitView.prototype = {
         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);

third_party/WebKit/Source/devtools/front_end/ui/View.js

@@ -102,6 +102,20 @@ WebInspector.View.prototype = {
         return this._isShowing;
     },
 
+    /**
+     * @return {boolean}
+     */
+    _shouldHideOnDetach: function()
+    {
+        if (this._hideOnDetach)
+            return true;
+        for (var child of this._children) {
+            if (child._shouldHideOnDetach())
+                return true;
+        }
+        return false;
+    },
+
     setHideOnDetach: function()
     {
         this._hideOnDetach = true;
@@ -268,7 +282,7 @@ WebInspector.View.prototype = {
         if (this._parentIsShowing())
             this._processWillHide();
 
-        if (this._hideOnDetach && !overrideHideOnDetach) {
+        if (!overrideHideOnDetach && this._shouldHideOnDetach()) {
             this.element.classList.remove("visible");
             this._visible = false;
             if (this._parentIsShowing())