Devtools UX: Add elements toolbar with breadcrumbs

Source/devtools/front_end/elements/ElementsPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * 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
@@ skipping 30 matching lines @@
 
     this._splitWidget = new WebInspector.SplitWidget(true, true, "elementsPanelSplitViewState", 325, 325);
     this._splitWidget.addEventListener(WebInspector.SplitWidget.Events.SidebarSizeChanged, this._updateTreeOutlineVisibleWidth.bind(this));
     this._splitWidget.show(this.element);
 
     this._searchableView = new WebInspector.SearchableView(this);
     this._searchableView.setMinimumSize(25, 19);
     this._searchableView.setPlaceholder(WebInspector.UIString("Find by string, selector, or XPath"));
     var stackElement = this._searchableView.element;
 
+    this._contentElement = createElement("div");
+    var crumbsContainer = createElement("div");
+    if (Runtime.experiments.isEnabled("materialDesign")) {
+        this._toolbar = this._createElementsToolbar();
+        var toolbar = stackElement.createChild("div", "elements-topbar hbox");
+        toolbar.appendChild(crumbsContainer);
+        toolbar.appendChild(this._toolbar.element);
+        stackElement.appendChild(this._contentElement);
+    } else {
+        stackElement.appendChild(this._contentElement);
+        stackElement.appendChild(crumbsContainer);
+    }
+
     this._elementsPanelTreeOutilneSplit = new WebInspector.SplitWidget(false, true, "treeOutlineAnimationTimelineWidget", 300, 300);
     this._elementsPanelTreeOutilneSplit.hideSidebar();
     this._elementsPanelTreeOutilneSplit.setMainWidget(this._searchableView);
     this._splitWidget.setMainWidget(this._elementsPanelTreeOutilneSplit);
 
-    this._contentElement = stackElement.createChild("div");
     this._contentElement.id = "elements-content";
     // FIXME: crbug.com/425984
     if (WebInspector.moduleSetting("domWordWrap").get())
         this._contentElement.classList.add("elements-wrap");
     WebInspector.moduleSetting("domWordWrap").addChangeListener(this._domWordWrapSettingChanged.bind(this));
 
-    var crumbsContainer = stackElement.createChild("div");
     crumbsContainer.id = "elements-crumbs";
     this._breadcrumbs = new WebInspector.ElementsBreadcrumbs();
     this._breadcrumbs.show(crumbsContainer);
     this._breadcrumbs.addEventListener(WebInspector.ElementsBreadcrumbs.Events.NodeSelected, this._crumbNodeSelected, this);
 
     this.sidebarPanes = {};
     /** @type !Array<!WebInspector.ElementsSidebarViewWrapperPane> */
     this._elementsSidebarViewWrappers = [];
     var sharedSidebarModel = new WebInspector.SharedSidebarModel();
     this.sidebarPanes.platformFonts = WebInspector.PlatformFontsWidget.createSidebarWrapper(sharedSidebarModel);
@@ skipping 28 matching lines @@
     WebInspector.targetManager.observeTargets(this);
     WebInspector.moduleSetting("showUAShadowDOM").addChangeListener(this._showUAShadowDOMChanged.bind(this));
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
     WebInspector.targetManager.addModelListener(WebInspector.CSSStyleModel, WebInspector.CSSStyleModel.Events.PseudoStateForced, this._pseudoStateForced, this);
     WebInspector.extensionServer.addEventListener(WebInspector.ExtensionServer.Events.SidebarPaneAdded, this._extensionSidebarPaneAdded, this);
 }
 
 WebInspector.ElementsPanel._elementsSidebarViewTitleSymbol = Symbol("title");
 
 WebInspector.ElementsPanel.prototype = {
+    /**
+     * @return {!WebInspector.Toolbar}
+     */
+    _createElementsToolbar: function()
+    {
+        var toolbar = new WebInspector.ExtensibleToolbar("elements-toolbar");
+        toolbar.element.classList.add("elements-toolbar");
+        toolbar.appendToolbarItem(new WebInspector.ToolbarSeparator());
+        return toolbar;
+    },
+
     _loadSidebarViews: function()
     {
         var extensions = self.runtime.extensions("@WebInspector.Widget");
 
         for (var i = 0; i < extensions.length; ++i) {
             var descriptor = extensions[i].descriptor();
             if (descriptor["location"] !== "elements-panel")
                 continue;
 
             var title = WebInspector.UIString(descriptor["title"]);
@@ skipping 995 matching lines @@
 WebInspector.ElementsPanelFactory.prototype = {
     /**
      * @override
      * @return {!WebInspector.Panel}
      */
     createPanel: function()
     {
         return WebInspector.ElementsPanel.instance();
     }
 }