DevTools: Network panel filter bar overlaps after select resource row.

Source/devtools/front_end/promises/PromisePane.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.PromisePane = function()
 {
     WebInspector.VBox.call(this);
     this.registerRequiredCSS("ui/filter.css");
     this.registerRequiredCSS("promises/promisePane.css");
     this.element.classList.add("promises");
 
     var toolbar = new WebInspector.Toolbar(this.element);
     this._recordButton = new WebInspector.ToolbarButton("", "record-toolbar-item");
     this._recordButton.addEventListener("click", this._recordButtonClicked.bind(this));
     toolbar.appendToolbarItem(this._recordButton);
 
     var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString("Clear"), "clear-toolbar-item");
     clearButton.addEventListener("click", this._clearButtonClicked.bind(this));
     toolbar.appendToolbarItem(clearButton);
+    toolbar.appendSeparator();
 
-    this._filter = new WebInspector.PromisePaneFilter(this._refresh.bind(this));
-    toolbar.appendToolbarItem(this._filter.filterButton());
+    this._promiseStatusFiltersSetting = WebInspector.settings.createSetting("promiseStatusFilters", {});
+    this._hideCollectedPromisesSetting = WebInspector.settings.createSetting("hideCollectedPromises", false);
+
+    this._createFilterBar();
+    toolbar.appendToolbarItem(this._filterBar.filterButton());
 
     var garbageCollectButton = new WebInspector.ToolbarButton(WebInspector.UIString("Collect garbage"), "garbage-collect-toolbar-item");
     garbageCollectButton.addEventListener("click", this._garbageCollectButtonClicked, this);
     toolbar.appendToolbarItem(garbageCollectButton);
 
+    toolbar.appendSeparator();
     var asyncCheckbox = new WebInspector.ToolbarCheckbox(WebInspector.UIString("Async"), WebInspector.UIString("Capture async stack traces"), WebInspector.moduleSetting("enableAsyncStackTraces"));
     toolbar.appendToolbarItem(asyncCheckbox);
 
-    this.element.appendChild(this._filter.filtersContainer());
+    this.element.appendChild(this._filterBar.filtersElement());
 
     this._hiddenByFilterCount = 0;
     this._filterStatusMessageElement = this.element.createChild("div", "promises-filter-status hidden");
     this._filterStatusTextElement = this._filterStatusMessageElement.createChild("span");
     this._filterStatusMessageElement.createTextChild(" ");
     var resetFiltersLink = this._filterStatusMessageElement.createChild("span", "link");
     resetFiltersLink.textContent = WebInspector.UIString("Show all promises.");
     resetFiltersLink.addEventListener("click", this._resetFilters.bind(this), true);
 
     this._dataGridContainer = new WebInspector.VBox();
@@ skipping 67 matching lines @@
             this.asyncCreationStack = details.asyncCreationStack;
         if (details.settlementStack)
             this.settlementStack = details.settlementStack;
         if (details.asyncSettlementStack)
             this.asyncSettlementStack = details.asyncSettlementStack;
     }
 }
 
 
 WebInspector.PromisePane.prototype = {
+    _createFilterBar: function()
+    {
+        this._filterBar = new WebInspector.FilterBar("promisePane");
+
+        this._textFilterUI = new WebInspector.TextFilterUI(true);
+        this._textFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._onFilterChanged, this);
+        this._filterBar.addFilter(this._textFilterUI);
+
+        var statuses = [
+            { name: "pending", label: WebInspector.UIString("Pending") },
+            { name: "resolved", label: WebInspector.UIString("Fulfilled") },
+            { name: "rejected", label: WebInspector.UIString("Rejected") }
+        ];
+        this._statusFilterUI = new WebInspector.NamedBitSetFilterUI(statuses, this._promiseStatusFiltersSetting);
+        this._statusFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._onFilterChanged, this);
+        this._filterBar.addFilter(this._statusFilterUI);
+
+        var hideCollectedCheckbox = new WebInspector.CheckboxFilterUI("hide-collected-promises", WebInspector.UIString("Hide collected promises"), true, this._hideCollectedPromisesSetting);
+        hideCollectedCheckbox.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._onFilterChanged, this);
+        this._filterBar.addFilter(hideCollectedCheckbox);
+    },
+
+    /**
+     * @param {!WebInspector.PromiseDetails} details
+     * @param {!WebInspector.DataGridNode} node
+     * @return {boolean}
+     */
+    _shouldBeVisible: function(details, node)
+    {
+        if (!this._statusFilterUI.accept(details.status))
+            return false;
+
+        if (this._hideCollectedPromisesSetting.get() && details.isGarbageCollected)
+            return false;
+
+        var regex = this._textFilterUI.regex();
+        if (!regex)
+            return true;
+
+        var text = node.dataTextForSearch();
+        regex.lastIndex = 0;
+        return regex.test(text);
+    },
+
+    _onFilterChanged: function()
+    {
+        if (this._filterChangedTimeout)
+            clearTimeout(this._filterChangedTimeout);
+        this._filterChangedTimeout = setTimeout(onTimerFired.bind(this), 100);
+
+        /**
+         * @this {WebInspector.PromisePane}
+         */
+        function onTimerFired()
+        {
+            delete this._filterChangedTimeout;
+            this._refresh();
+        }
+    },
+
     /**
      * @override
      * @return {!Array.<!Element>}
      */
     elementsToRestoreScrollPositionsFor: function()
     {
         return [this._dataGrid.scrollContainer];
     },
 
     /**
@@ skipping 111 matching lines @@
 
     _clearButtonClicked: function()
     {
         this._clear();
         if (this._debuggerModel)
             this._promiseDetailsByDebuggerModel.delete(this._debuggerModel);
     },
 
     _resetFilters: function()
     {
-        this._filter.reset();
+        this._hideCollectedPromisesSetting.set(false);
+        this._promiseStatusFiltersSetting.set({});
+        this._textFilterUI.setValue("");
     },
 
     _updateFilterStatus: function()
     {
         this._filterStatusTextElement.textContent = WebInspector.UIString(this._hiddenByFilterCount === 1 ? "%d promise is hidden by filters." : "%d promises are hidden by filters.", this._hiddenByFilterCount);
         this._filterStatusMessageElement.classList.toggle("hidden", !this._hiddenByFilterCount);
     },
 
     _garbageCollectButtonClicked: function()
     {
@@ skipping 67 matching lines @@
             }
             if (truncated || this._refreshIsNeeded) {
                 this._refresh();
                 return;
             }
 
             var node = /** @type {!WebInspector.DataGridNode} */ (this._promiseIdToNode.get(details.id));
             var wasVisible = !node || !node._isPromiseHidden;
 
             // Check for the fast path on GC events.
-            if (eventType === "gc" && node && node.parent && !this._filter.shouldHideCollectedPromises())
+            if (eventType === "gc" && node && node.parent && !this._hideCollectedPromisesSetting.get())
                 node.update(details);
             else
                 this._attachDataGridNode(details);
 
-            var isVisible = this._filter.shouldBeVisible(details, /** @type {!WebInspector.DataGridNode} */(this._promiseIdToNode.get(details.id)));
+            var isVisible = this._shouldBeVisible(details, /** @type {!WebInspector.DataGridNode} */(this._promiseIdToNode.get(details.id)));
             if (wasVisible !== isVisible) {
                 this._hiddenByFilterCount += wasVisible ? 1 : -1;
                 this._updateFilterStatus();
             }
         }
     },
 
     /**
      * @param {!WebInspector.PromiseDetails} details
      */
     _attachDataGridNode: function(details)
     {
         var node = this._createDataGridNode(details);
         var parentNode = this._findVisibleParentNodeDetails(details);
         if (parentNode !== node.parent)
             parentNode.appendChild(node);
-        if (this._filter.shouldBeVisible(details, node))
+        if (this._shouldBeVisible(details, node))
             parentNode.expanded = true;
         else
             node.remove();
     },
 
     /**
      * @param {!WebInspector.PromiseDetails} details
      * @return {!WebInspector.DataGridNode}
      */
     _findVisibleParentNodeDetails: function(details)
     {
         var promiseIdToDetails = /** @type {!Map.<number, !WebInspector.PromiseDetails>} */ (this._promiseDetailsByDebuggerModel.get(this._debuggerModel));
         var currentDetails = details;
         while (currentDetails) {
             var parentId = currentDetails.parentId;
             if (typeof parentId !== "number")
                 break;
             currentDetails = promiseIdToDetails.get(parentId);
             if (!currentDetails)
                 break;
             var node = this._promiseIdToNode.get(currentDetails.id);
-            if (node && this._filter.shouldBeVisible(currentDetails, node))
+            if (node && this._shouldBeVisible(currentDetails, node))
                 return node;
         }
         return this._dataGrid.rootNode();
     },
 
     /**
      * @param {!WebInspector.PromiseDetails} details
      * @return {!WebInspector.DataGridNode}
      */
     _createDataGridNode: function(details)
@@ skipping 19 matching lines @@
 
         var rootNode = this._dataGrid.rootNode();
         var promiseIdToDetails = /** @type {!Map.<number, !WebInspector.PromiseDetails>} */ (this._promiseDetailsByDebuggerModel.get(this._debuggerModel));
 
         var nodesToInsert = { __proto__: null };
         // The for..of loop iterates in insertion order.
         for (var pair of promiseIdToDetails) {
             var id = /** @type {number} */ (pair[0]);
             var details = /** @type {!WebInspector.PromiseDetails} */ (pair[1]);
             var node = this._createDataGridNode(details);
-            node._isPromiseHidden = !this._filter.shouldBeVisible(details, node);
+            node._isPromiseHidden = !this._shouldBeVisible(details, node);
             if (node._isPromiseHidden) {
                 ++this._hiddenByFilterCount;
                 continue;
             }
             nodesToInsert[id] = { details: details, node: node };
         }
 
         for (var id in nodesToInsert) {
             var node = nodesToInsert[id].node;
             var details = nodesToInsert[id].details;
@@ skipping 283 matching lines @@
             WebInspector.beautifyFunctionName(details.callFrame ? details.callFrame.functionName : ""),
             this._callFrameAnchorTextForSearch(details.callFrame),
             this._callFrameAnchorTextForSearch(details.settlementStack ? details.settlementStack[0] : null),
             this._ttsCellText().replace(/\u2009/g, " ") // \u2009 is a thin space.
         ];
         return texts.join(" ");
     },
 
     __proto__: WebInspector.ViewportDataGridNode.prototype
 }
-
-/**
- * @constructor
- * @param {function()} filterChanged
- */
-WebInspector.PromisePaneFilter = function(filterChanged)
-{
-    this._filterChangedCallback = filterChanged;
-    this._filterBar = new WebInspector.FilterBar();
-
-    this._filtersContainer = createElementWithClass("div", "promises-filters-header hidden");
-    this._filtersContainer.appendChild(this._filterBar.filtersElement());
-    this._filterBar.addEventListener(WebInspector.FilterBar.Events.FiltersToggled, this._onFiltersToggled, this);
-    this._filterBar.setName("promisePane");
-
-    this._textFilterUI = new WebInspector.TextFilterUI(true);
-    this._textFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._onFilterChanged, this);
-    this._filterBar.addFilter(this._textFilterUI);
-
-    var statuses = [
-        { name: "pending", label: WebInspector.UIString("Pending") },
-        { name: "resolved", label: WebInspector.UIString("Fulfilled") },
-        { name: "rejected", label: WebInspector.UIString("Rejected") }
-    ];
-    this._promiseStatusFiltersSetting = WebInspector.settings.createSetting("promiseStatusFilters", {});
-    this._statusFilterUI = new WebInspector.NamedBitSetFilterUI(statuses, this._promiseStatusFiltersSetting);
-    this._statusFilterUI.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._onFilterChanged, this);
-    this._filterBar.addFilter(this._statusFilterUI);
-
-    this._hideCollectedPromisesSetting = WebInspector.settings.createSetting("hideCollectedPromises", false);
-    var hideCollectedCheckbox = new WebInspector.CheckboxFilterUI("hide-collected-promises", WebInspector.UIString("Hide collected promises"), true, this._hideCollectedPromisesSetting);
-    hideCollectedCheckbox.addEventListener(WebInspector.FilterUI.Events.FilterChanged, this._onFilterChanged, this);
-    this._filterBar.addFilter(hideCollectedCheckbox);
-}
-
-WebInspector.PromisePaneFilter.prototype = {
-    /**
-     * @return {!WebInspector.ToolbarButton}
-     */
-    filterButton: function()
-    {
-        return this._filterBar.filterButton();
-    },
-
-    /**
-     * @return {!Element}
-     */
-    filtersContainer: function()
-    {
-        return this._filtersContainer;
-    },
-
-    /**
-     * @return {boolean}
-     */
-    shouldHideCollectedPromises: function()
-    {
-        return this._hideCollectedPromisesSetting.get();
-    },
-
-    /**
-     * @param {!WebInspector.PromiseDetails} details
-     * @param {!WebInspector.DataGridNode} node
-     * @return {boolean}
-     */
-    shouldBeVisible: function(details, node)
-    {
-        if (!this._statusFilterUI.accept(details.status))
-            return false;
-
-        if (this.shouldHideCollectedPromises() && details.isGarbageCollected)
-            return false;
-
-        var regex = this._textFilterUI.regex();
-        if (!regex)
-            return true;
-
-        var text = node.dataTextForSearch();
-        regex.lastIndex = 0;
-        return regex.test(text);
-    },
-
-    /**
-     * @param {!WebInspector.Event} event
-     */
-    _onFiltersToggled: function(event)
-    {
-        var toggled = /** @type {boolean} */ (event.data);
-        this._filtersContainer.classList.toggle("hidden", !toggled);
-    },
-
-    _onFilterChanged: function()
-    {
-        if (this._filterChangedTimeout)
-            clearTimeout(this._filterChangedTimeout);
-        this._filterChangedTimeout = setTimeout(onTimerFired.bind(this), 100);
-
-        /** @this {WebInspector.PromisePaneFilter} */
-        function onTimerFired()
-        {
-            delete this._filterChangedTimeout;
-            this._filterChangedCallback();
-        }
-    },
-
-    reset: function()
-    {
-        this._hideCollectedPromisesSetting.set(false);
-        this._promiseStatusFiltersSetting.set({});
-        this._textFilterUI.setValue("");
-    }
-}