DevTools: move search in styles out of experimental. It proved to be stable.

R=apavlov@chromium.org

Review URL: https://codereview.chromium.org/211193004

git-svn-id: svn://svn.chromium.org/blink/trunk@169959 bbb929c8-8fbe-4397-9dbb-9b2b20218538

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

@@ -90,9 +90,9 @@ WebInspector.ElementsPanel = function()
     this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNodeId.bind(this));
 
     this._matchedStylesFilterBoxContainer = document.createElement("div");
-    this._matchedStylesFilterBoxContainer.className = "filter-box-container inspector-footer status-bar";
+    this._matchedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
     this._computedStylesFilterBoxContainer = document.createElement("div");
-    this._computedStylesFilterBoxContainer.className = "filter-box-container inspector-footer status-bar";
+    this._computedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
     this.sidebarPanes.styles.setFilterBoxContainers(this._matchedStylesFilterBoxContainer, this._computedStylesFilterBoxContainer);
 
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
@@ -1268,10 +1268,8 @@ WebInspector.ElementsPanel.prototype = {
             computedPane.show(computedStylePanesWrapper);
             computedPane.setExpandCallback(expandComposite);
 
-            if (WebInspector.experimentsSettings.cssStyleSearch.isEnabled()) {
             splitView.mainElement().appendChild(this._matchedStylesFilterBoxContainer);
             splitView.sidebarElement().appendChild(this._computedStylesFilterBoxContainer);
-            }
 
             this.sidebarPaneView.addPane(compositePane);
         } else {
@@ -1289,10 +1287,8 @@ WebInspector.ElementsPanel.prototype = {
 
             this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
 
-            if (WebInspector.experimentsSettings.cssStyleSearch.isEnabled()) {
             stylesPane.bodyElement.appendChild(this._matchedStylesFilterBoxContainer);
             computedPane.bodyElement.appendChild(this._computedStylesFilterBoxContainer);
-            }
 
             this.sidebarPaneView.addPane(stylesPane);
             this.sidebarPaneView.addPane(computedPane);

third_party/WebKit/Source/devtools/front_end/Settings.js

@@ -289,7 +289,6 @@ WebInspector.ExperimentsSettings = function(experimentsEnabled)
     this.timelineFlameChart = this._createExperiment("timelineFlameChart", "Enable FlameChart mode in Timeline");
     this.heapSnapshotStatistics = this._createExperiment("heapSnapshotStatistics", "Show memory breakdown statistics in heap snapshots");
     this.timelineNoLiveUpdate = this._createExperiment("timelineNoLiveUpdate", "Timeline w/o live update");
-    this.cssStyleSearch = this._createExperiment("cssStyleSearch", "Enable Styles search and Computed style filtering");
     this.powerProfiler = this._createExperiment("powerProfiler", "Enable power mode in Timeline");
 
     this._cleanUpSetting();

third_party/WebKit/Source/devtools/front_end/StylesSidebarPane.js

@@ -186,9 +186,6 @@ WebInspector.StylesSidebarPane.prototype = {
      */
     setFilterBoxContainers: function(matchedStylesElement, computedStylesElement)
     {
-        if (!WebInspector.experimentsSettings.cssStyleSearch.isEnabled())
-            return;
-
         matchedStylesElement.appendChild(this._createCSSFilterControl());
         this._computedStylePane.setFilterBoxContainer(computedStylesElement);
     },
@@ -209,23 +206,6 @@ WebInspector.StylesSidebarPane.prototype = {
             this._filterRegex = regex;
         }
 
-        filterInput.addEventListener("keydown", tabHandler.bind(this), false);
-
-        /**
-         * @param {?Event} event
-         * @this {WebInspector.StylesSidebarPane}
-         */
-        function tabHandler(event)
-        {
-            if (event.keyIdentifier !== "U+0009")
-                return;
-
-            event.consume(true);
-            var firstSection = this.sections[0][1];
-            if (!firstSection)
-                return;
-            firstSection._moveEditorFromSelector(event.shiftKey ? "backward" : "forward");
-        }
         return filterInput;
     },
 
@@ -892,7 +872,6 @@ WebInspector.StylesSidebarPane.prototype = {
         var input = document.createElement("input");
         input.type = "text";
         input.placeholder = isComputedStyleFilter ? WebInspector.UIString("Filter") : WebInspector.UIString("Find in Styles");
-        input.className = "filter-box toolbar-search-control search-replace";
         var boundSearchHandler = searchHandler.bind(this);
 
         /**
@@ -902,6 +881,7 @@ WebInspector.StylesSidebarPane.prototype = {
         {
             var regex = input.value ? new RegExp(input.value.escapeForRegExp(), "i") : null;
             filterCallback(regex);
+            input.parentNode.classList.toggle("styles-filter-engaged", !!input.value);
             this._updateFilter(isComputedStyleFilter);
         }
         input.addEventListener("input", boundSearchHandler, false);
@@ -934,7 +914,7 @@ WebInspector.StylesSidebarPane.prototype = {
                 var section = sections[i];
                 if (isComputedStyleFilter !== !!section.computedStyle)
                     continue;
-                section.updateFilter();
+                section._updateFilter();
             }
         }
     },
@@ -1371,11 +1351,19 @@ WebInspector.StylePropertiesSection.prototype = {
         }
     },
 
-    updateFilter: function()
+    _updateFilter: function()
     {
+        if (this.styleRule.isAttribute)
+            return;
+        var regex = this._parentPane.filterRegex();
+        var hideRule = regex && !regex.test(this.element.textContent);
+        this.element.classList.toggle("hidden", hideRule);
+        if (hideRule)
+            return;
+
         var children = this.propertiesTreeOutline.children;
         for (var i = 0; i < children.length; ++i)
-            children[i].updateFilter();
+            children[i]._updateFilter();
 
         if (this.styleRule.rule)
             this._markSelectorHighlights();
@@ -1736,11 +1724,11 @@ WebInspector.ComputedStylePropertiesSection.prototype = {
         this.populated = false;
     },
 
-    updateFilter: function()
+    _updateFilter: function()
     {
         var children = this.propertiesTreeOutline.children;
         for (var i = 0; i < children.length; ++i)
-            children[i].updateFilter();
+            children[i]._updateFilter();
     },
 
     onpopulate: function()
@@ -2150,10 +2138,10 @@ WebInspector.StylePropertyTreeElementBase.prototype = {
         }
         if (this.property.inactive)
             this.listItemElement.classList.add("inactive");
-        this.updateFilter();
+        this._updateFilter();
     },
 
-    updateFilter: function()
+    _updateFilter: function()
     {
         var regEx = this.parentPane().filterRegex();
         this.listItemElement.classList.toggle("filter-match", !!regEx && (regEx.test(this.property.name) || regEx.test(this.property.value)));
@@ -2396,7 +2384,7 @@ WebInspector.ComputedStylePropertyTreeElement.prototype = {
         return this._stylesPane._computedStylePane;
     },
 
-    updateFilter: function()
+    _updateFilter: function()
     {
         var regEx = this.parentPane().filterRegex();
         this.listItemElement.classList.toggle("hidden", !!regEx && (!regEx.test(this.property.name) && !regEx.test(this.property.value)));

third_party/WebKit/Source/devtools/front_end/elementsPanel.css

@@ -609,12 +609,22 @@
     position: absolute;
 }
 
-input.filter-box {
+.sidebar-pane-filter-box {
+    display: flex;
+    border-top: 1px solid rgb(191, 191, 191);
+    flex-basis: 19px;
+}
+
+.sidebar-pane-filter-box > input {
     outline: none !important;
+    border: none;
+    width: 100%;
+    margin: 0 4px;
+    background: transparent;
 }
 
-.sidebar-pane .filter-box-container > .filter-box {
-    margin: 1px 1px 1px 2px;
+.styles-filter-engaged {
+    background-color: rgba(255, 255, 0, 0.5);
 }
 
 .sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar {