DevTools: migrate sidebar pane's titleElement to use Toolbar.

Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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 22 matching lines @@
  * @param {function()} requestShowCallback
  */
 WebInspector.StylesSidebarPane = function(requestShowCallback)
 {
     WebInspector.ElementsSidebarPane.call(this, WebInspector.UIString("Styles"));
 
     this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
     WebInspector.moduleSetting("colorFormat").addChangeListener(this.update.bind(this));
     WebInspector.moduleSetting("textEditorIndent").addChangeListener(this.update.bind(this));
 
-    var toolbar = new WebInspector.ExtensibleToolbar("styles-sidebarpane-toolbar", this.titleElement);
+    var toolbar = new WebInspector.ExtensibleToolbar("styles-sidebarpane-toolbar", this.element, true);
     toolbar.element.classList.add("styles-pane-toolbar");
-    if (!Runtime.experiments.isEnabled("materialDesign"))
-        toolbar.makeNarrow();
 
     this._requestShowCallback = requestShowCallback;
-    var toolbarPaneContainer = this.bodyElement.createChild("div", "styles-sidebar-toolbar-pane-container");
+    var toolbarPaneContainer = this.element.createChild("div", "styles-sidebar-toolbar-pane-container");
     this._toolbarPaneElement = toolbarPaneContainer.createChild("div", "styles-sidebar-toolbar-pane");
-    this._sectionsContainer = this.bodyElement.createChild("div");
+    this._sectionsContainer = this.element.createChild("div");
 
     this._stylesPopoverHelper = new WebInspector.StylesPopoverHelper();
 
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
     this.element.classList.add("styles-pane");
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
     this._keyDownBound = this._keyDown.bind(this);
     this._keyUpBound = this._keyUp.bind(this);
 }
@@ skipping 755 matching lines @@
     },
 
     /**
      * @param {?WebInspector.Widget} widget
      */
     _startToolbarPaneAnimation: function(widget)
     {
         if (widget === this._currentToolbarPane)
             return;
 
+        if (widget && this._currentToolbarPane) {
+            this._currentToolbarPane.detach();
+            widget.show(this._toolbarPaneElement);
+            this._currentToolbarPane = widget;
+            return;
+        }
+
         this._animatedToolbarPane = widget;
 
         if (this._currentToolbarPane)
             this._toolbarPaneElement.style.animationName = 'styles-element-state-pane-slideout';
         else if (widget)
             this._toolbarPaneElement.style.animationName = 'styles-element-state-pane-slidein';
 
         if (widget)
             widget.show(this._toolbarPaneElement);
 
@@ skipping 139 matching lines @@
 WebInspector.StylePropertiesSection = function(parentPane, styleRule)
 {
     this._parentPane = parentPane;
     this.styleRule = styleRule;
     this.editable = styleRule.editable();
 
     var rule = styleRule.rule();
     this.element = createElementWithClass("div", "styles-section matched-styles monospace");
     this.element._section = this;
 
-    this.titleElement = this.element.createChild("div", "styles-section-title " + (rule ? "styles-selector" : ""));
+    this._titleElement = this.element.createChild("div", "styles-section-title " + (rule ? "styles-selector" : ""));
 
     this.propertiesTreeOutline = new TreeOutline();
     this.propertiesTreeOutline.element.classList.add("style-properties", "monospace");
     this.propertiesTreeOutline.section = this;
     this.element.appendChild(this.propertiesTreeOutline.element);
 
     var selectorContainer = createElement("div");
     this._selectorElement = createElementWithClass("span", "selector");
     this._selectorElement.textContent = styleRule.selectorText();
     selectorContainer.appendChild(this._selectorElement);
@@ skipping 23 matching lines @@
         if (rule.isUserAgent || rule.isInjected) {
             this.editable = false;
         } else {
             // Check this is a real CSSRule, not a bogus object coming from WebInspector.BlankStylePropertiesSection.
             if (rule.styleSheetId)
                 this.navigable = !!rule.resourceURL();
         }
     }
 
     this._selectorRefElement = createElementWithClass("div", "styles-section-subtitle");
-    this._mediaListElement = this.titleElement.createChild("div", "media-list media-matches");
+    this._mediaListElement = this._titleElement.createChild("div", "media-list media-matches");
     this._updateMediaList();
     this._updateRuleOrigin();
     selectorContainer.insertBefore(this._selectorRefElement, selectorContainer.firstChild);
-    this.titleElement.appendChild(selectorContainer);
+    this._titleElement.appendChild(selectorContainer);
     this._selectorContainer = selectorContainer;
 
     if (this.navigable)
         this.element.classList.add("navigable");
 
     if (!this.editable)
         this.element.classList.add("read-only");
 
     this._markSelectorMatches();
     this.onpopulate();
@@ skipping 2211 matching lines @@
 
     /**
      * @override
      * @return {?WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }