DevTools: follow-up to view introduction, fix styles css.

BUG=630355
NOTRY=true

Review-Url: https://codereview.chromium.org/2175903002
Cr-Commit-Position: refs/heads/master@{#407293}

third_party/WebKit/LayoutTests/http/tests/inspector/network/network-choose-preview-view-expected.txt

@@ -24,7 +24,7 @@ Its previewer type: SearchableView > widget vbox json-view
 Running: testXMLWithUnknownMime
 Creating a NetworkRequest with mimeType: text/foobar
 Content: <bar><foo/></bar>
-Its previewer type: SearchableView > widget vbox
+Its previewer type: SearchableView > widget vbox view
 
 Running: testXMLWithError500
 Creating a NetworkRequest with mimeType: text/xml
@@ -34,12 +34,12 @@ Its previewer type: SearchableView > widget shadow-xml-view source-code
 Running: testUnknownMimeTextWithError500
 Creating a NetworkRequest with mimeType: text/foobar
 Content: Foo Bar
-Its previewer type: SearchableView > widget vbox
+Its previewer type: SearchableView > widget vbox view
 
 Running: testBinaryImageFile
 Creating a NetworkRequest with mimeType: image/png
 Content: Bin**NULL**ary
 File**NULL****NULL**
-Its previewer type: SearchableView > widget vbox
+Its previewer type: SearchableView > widget vbox view
 
 Running: testBinaryBlankImageFile
 Creating a NetworkRequest with mimeType: image/png

third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css

@@ -171,6 +171,10 @@
     border-top: 0 none;
 }
 
+.style-panes-wrapper {
+    overflow: auto;
+}
+
 .styles-section.read-only {
     background-color: #eee;
 }
@@ -740,6 +744,10 @@ li.editing .enabled-button {
     padding-left: 10px;
 }
 
+.view > .toolbar {
+    border-bottom: 1px solid #eee;
+}
+
 .events-pane .section:not(:first-of-type) {
     border-top: 1px solid rgb(231, 231, 231);
 }

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

@@ -132,17 +132,22 @@ WebInspector.SidebarTabbedPane = function()
     this.element.classList.add("sidebar-pane-container", "sidebar-tabbed-pane");
 }
 
+WebInspector.SidebarTabbedPane._toolbarSymbol = Symbol("toolbar");
+
 WebInspector.SidebarTabbedPane.prototype = {
     /**
      * @param {!WebInspector.View} pane
      */
     addPane: function(pane)
     {
-        var title = pane.title();
+        // Detach first to trigger toolbar cleanup.
+        pane.detach();
 
+        var title = pane.title();
         var toolbarItems = pane.toolbarItems();
         if (toolbarItems.length) {
             var toolbar = new WebInspector.Toolbar("");
+            pane[WebInspector.SidebarTabbedPane._toolbarSymbol] = toolbar;
             pane.element.insertBefore(toolbar.element, pane.element.firstChild);
             for (var item of toolbarItems)
                 toolbar.appendToolbarItem(item);
@@ -152,6 +157,19 @@ WebInspector.SidebarTabbedPane.prototype = {
         pane.setRevealCallback(this.selectTab.bind(this, title));
     },
 
+    /**
+     * @param {!WebInspector.Widget} widget
+     * @override
+     */
+    childWasDetached: function(widget)
+    {
+        WebInspector.TabbedPane.prototype.childWasDetached.call(this, widget);
+
+        var toolbar = widget[WebInspector.SidebarTabbedPane._toolbarSymbol];
+        if (toolbar)
+            toolbar.element.remove();
+    },
+
     /**
      * @param {!WebInspector.View} pane
      * @param {boolean} visible

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

@@ -94,6 +94,8 @@ WebInspector.Widget.prototype = {
      */
     shouldHideOnDetach: function()
     {
+        if (!this.element.parentElement)
+            return false;
         if (this._hideOnDetach)
             return true;
         for (var child of this._children) {
@@ -694,6 +696,7 @@ WebInspector.VBoxWithResizeCallback.prototype = {
 WebInspector.View = function(title, isWebComponent)
 {
     WebInspector.VBox.call(this, isWebComponent);
+    this.element.classList.add("view");
     this._title = title;
     /** @type {!Array<!WebInspector.ToolbarItem>} */
     this._toolbarItems = [];

third_party/WebKit/Source/devtools/front_end/ui/sidebarPane.css

@@ -27,10 +27,6 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar-pane-container {
-    overflow: auto;
-}
-
 .sidebar-pane-container .info {
     text-align: center;
     font-style: italic;
@@ -86,10 +82,6 @@
     -webkit-mask-position: -20px -96px;
 }
 
-.sidebar-pane-container .toolbar {
-    border-bottom: 1px solid #eee;
-}
-
 .sidebar-pane-container .toolbar > * {
     pointer-events: auto;
 }