DevTools: move styles sidebar toolbar into StylesSidebarPane

third_party/WebKit/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 50 matching lines @@
     // FIXME: crbug.com/425984
     if (Common.moduleSetting('domWordWrap').get())
       this._contentElement.classList.add('elements-wrap');
     Common.moduleSetting('domWordWrap').addChangeListener(this._domWordWrapSettingChanged.bind(this));
 
     crumbsContainer.id = 'elements-crumbs';
     this._breadcrumbs = new Elements.ElementsBreadcrumbs();
     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();
 
     /** @type {!Array.<!Elements.ElementsTreeOutline>} */
     this._treeOutlines = [];
     /** @type {!Map<!Elements.ElementsTreeOutline, !Element>} */
     this._treeOutlineHeaders = new Map();
     SDK.targetManager.observeModels(SDK.DOMModel, this);
     SDK.targetManager.addEventListener(
         SDK.TargetManager.Events.NameChanged,
@@ skipping 15 matching lines @@
   /**
    * @param {!SDK.CSSProperty} cssProperty
    */
   _revealProperty(cssProperty) {
     return this.sidebarPaneView.showView(this._stylesViewToReveal).then(() => {
       this._stylesWidget.revealProperty(/** @type {!SDK.CSSProperty} */ (cssProperty));
     });
   }
 
   /**
-   * @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
    * @return {?UI.ViewLocation}
    */
   resolveLocation(locationName) {
     return this.sidebarPaneView;
   }
 
   /**
    * @param {?UI.Widget} widget
    * @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);
+    this._stylesWidget.showToolbarPane(widget, toggle);
   }
 
   /**
-   * @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;
-      }
-    }
-  }
-
-  /**
    * @override
    * @param {!SDK.DOMModel} domModel
    */
   modelAdded(domModel) {
     var treeOutline = new Elements.ElementsTreeOutline(domModel, true, true);
     treeOutline.setWordWrap(Common.moduleSetting('domWordWrap').get());
     treeOutline.wireToDOMModel();
     treeOutline.addEventListener(
         Elements.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
     treeOutline.addEventListener(
@@ skipping 605 matching lines @@
 
     var extensionSidebarPanes = Extensions.extensionServer.sidebarPanes();
     if (this.sidebarPaneView) {
       this.sidebarPaneView.tabbedPane().detach();
       this._splitWidget.uninstallResizer(this.sidebarPaneView.tabbedPane().headerElement());
     }
 
     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();
     computedStylePanesWrapper.element.classList.add('style-panes-wrapper');
     this._computedStyleWidget.show(computedStylePanesWrapper.element);
 
     /**
      * @param {boolean} inComputedStyle
      * @this {Elements.ElementsPanel}
      */
@@ skipping 28 matching lines @@
       this._splitWidget.installResizer(tabbedPane.headerElement());
 
     var stylesView = new UI.SimpleView(Common.UIString('Styles'));
     this.sidebarPaneView.appendView(stylesView);
     if (splitMode === Elements.ElementsPanel._splitMode.Horizontal) {
       // Styles and computed are merged into a single tab.
       stylesView.element.classList.add('flex-auto');
 
       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');
       computedStylePanesWrapper.show(computedView.element);
 
       tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, tabSelected, this);
       this.sidebarPaneView.appendView(computedView);
     }
     this._stylesViewToReveal = stylesView;
 
@@ skipping 166 matching lines @@
    * @param {!SDK.DOMNode} node
    * @return {?{title: string, color: string}}
    */
   decorate(node) {
     return {
       color: 'orange',
       title: Common.UIString('Element state: %s', ':' + node.domModel().cssModel().pseudoState(node).join(', :'))
     };
   }
 };