DevTools: move styles sidebar toolbar into StylesSidebarPane

third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

Index: third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js b/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
index dfdab46c1dc9d731f4517f572fb2c9f1ebd727ac..631b7a37bb94b4cd2c812ffa9b3a46cbacd56063 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
@@ -68,21 +68,10 @@ Elements.ElementsPanel = class extends UI.Panel {
     this._breadcrumbs.show(crumbsContainer);
     this._breadcrumbs.addEventListener(Elements.ElementsBreadcrumbs.Events.NodeSelected, this._crumbNodeSelected, this);
 
-    /** @type {?UI.Widget} */
-    this._currentToolbarPane = null;
-    /** @type {?UI.Widget} */
-    this._animatedToolbarPane = null;
-    /** @type {?UI.Widget} */
-    this._pendingWidget = null;
-    /** @type {?UI.ToolbarToggle} */
-    this._pendingWidgetToggle = null;
-
     this._stylesWidget = new Elements.StylesSidebarPane();
     this._computedStyleWidget = new Elements.ComputedStyleWidget();
     this._metricsWidget = new Elements.MetricsSidebarPane();
 
-    this._stylesSidebarToolbar = this._createStylesSidebarToolbar();
-
     Common.moduleSetting('sidebarPosition').addChangeListener(this._updateSidebarPosition.bind(this));
     this._updateSidebarPosition();
 
@@ -117,26 +106,6 @@ Elements.ElementsPanel = class extends UI.Panel {
     });
   }
 
-  /**
-   * @return {!Element}
-   */
-  _createStylesSidebarToolbar() {
-    var container = createElementWithClass('div', 'styles-sidebar-pane-toolbar-container');
-    var hbox = container.createChild('div', 'hbox styles-sidebar-pane-toolbar');
-    var filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box');
-    var filterInput = Elements.StylesSidebarPane.createPropertyFilterElement(
-        Common.UIString('Filter'), hbox, this._stylesWidget.onFilterChanged.bind(this._stylesWidget));
-    UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString('Filter Styles'));
-    filterContainerElement.appendChild(filterInput);
-    var toolbar = new UI.Toolbar('styles-pane-toolbar', hbox);
-    toolbar.makeToggledGray();
-    toolbar.appendLocationItems('styles-sidebarpane-toolbar');
-    var toolbarPaneContainer = container.createChild('div', 'styles-sidebar-toolbar-pane-container');
-    this._toolbarPaneElement = createElementWithClass('div', 'styles-sidebar-toolbar-pane');
-    toolbarPaneContainer.appendChild(this._toolbarPaneElement);
-    return container;
-  }
-
   /**
    * @override
    * @param {string} locationName
@@ -151,67 +120,7 @@ Elements.ElementsPanel = class extends UI.Panel {
    * @param {?UI.ToolbarToggle} toggle
    */
   showToolbarPane(widget, toggle) {

[dgozman, 2017/06/05 21:07:23]

Why this method is still here?

[luoe, 2017/06/05 21:31:30]

It's still used by some providers:
-
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front...
-
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front...

Maybe Classes/ElementStatePaneWidget shouldn't be extensions, or we should have
a way to specify ToolbarPaneRadioButtons?

[dgozman, 2017/06/06 21:43:06]

Let's add a TODO to remove this.

[luoe, 2017/06/06 22:00:01]

Done.

-    if (this._pendingWidgetToggle)
-      this._pendingWidgetToggle.setToggled(false);
-    this._pendingWidgetToggle = toggle;
-
-    if (this._animatedToolbarPane)
-      this._pendingWidget = widget;
-    else
-      this._startToolbarPaneAnimation(widget);
-
-    if (widget && toggle)
-      toggle.setToggled(true);
-  }
-
-  /**
-   * @param {?UI.Widget} widget
-   */
-  _startToolbarPaneAnimation(widget) {
-    if (widget === this._currentToolbarPane)
-      return;
-
-    if (widget && this._currentToolbarPane) {
-      this._currentToolbarPane.detach();
-      widget.show(this._toolbarPaneElement);
-      this._currentToolbarPane = widget;
-      this._currentToolbarPane.focus();
-      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);
-
-    var listener = onAnimationEnd.bind(this);
-    this._toolbarPaneElement.addEventListener('animationend', listener, false);
-
-    /**
-     * @this {Elements.ElementsPanel}
-     */
-    function onAnimationEnd() {
-      this._toolbarPaneElement.style.removeProperty('animation-name');
-      this._toolbarPaneElement.removeEventListener('animationend', listener, false);
-
-      if (this._currentToolbarPane)
-        this._currentToolbarPane.detach();
-
-      this._currentToolbarPane = this._animatedToolbarPane;
-      if (this._currentToolbarPane)
-        this._currentToolbarPane.focus();
-      this._animatedToolbarPane = null;
-
-      if (this._pendingWidget) {
-        this._startToolbarPaneAnimation(this._pendingWidget);
-        this._pendingWidget = null;
-      }
-    }
+    this._stylesWidget.showToolbarPane(widget, toggle);
   }
 
   /**
@@ -840,11 +749,8 @@ Elements.ElementsPanel = class extends UI.Panel {
     this._splitWidget.setVertical(this._splitMode === Elements.ElementsPanel._splitMode.Vertical);
     this.showToolbarPane(null /* widget */, null /* toggle */);
 
-    var matchedStylesContainer = new UI.VBox();
-    matchedStylesContainer.element.appendChild(this._stylesSidebarToolbar);
     var matchedStylePanesWrapper = new UI.VBox();
     matchedStylePanesWrapper.element.classList.add('style-panes-wrapper');
-    matchedStylePanesWrapper.show(matchedStylesContainer.element);
     this._stylesWidget.show(matchedStylePanesWrapper.element);
 
     var computedStylePanesWrapper = new UI.VBox();
@@ -893,12 +799,12 @@ Elements.ElementsPanel = class extends UI.Panel {
 
       var splitWidget = new UI.SplitWidget(true, true, 'stylesPaneSplitViewState', 215);
       splitWidget.show(stylesView.element);
-      splitWidget.setMainWidget(matchedStylesContainer);
+      splitWidget.setMainWidget(matchedStylePanesWrapper);
       splitWidget.setSidebarWidget(computedStylePanesWrapper);
     } else {
       // Styles and computed are in separate tabs.
       stylesView.element.classList.add('flex-auto', 'metrics-and-styles');
-      matchedStylesContainer.show(stylesView.element);
+      matchedStylePanesWrapper.show(stylesView.element);
 
       var computedView = new UI.SimpleView(Common.UIString('Computed'));
       computedView.element.classList.add('composite', 'fill', 'metrics-and-computed');