Bug 1287508 - Part 5: Fix CSS rules and classes for the FilterBar. r=ntim

--HG--
extra : rebase_source : e3f0a6f19924add27a8899e90c9c2eefd5c084b3

devtools/client/themes/toolbars.css

@@ -248,8 +248,7 @@
 
 .devtools-button[checked]:empty::before,
 .devtools-button[open]:empty::before,
-.devtools-button.active::before,
-.theme-light .devtools-button.active::before,
+.devtools-button.checked::before,
 .devtools-toolbarbutton:not([label])[checked=true] > image,
 .devtools-toolbarbutton:not([label])[open=true] > image {
   filter: var(--checked-icon-filter);
@@ -390,6 +389,15 @@
   font-style: normal;
 }
 
+.devtools-plaininput {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.theme-dark .devtools-plaininput {
+  color: var(--theme-highlight-gray);
+}
+
 /* Searchbox is a div container element for a search input element */
 .devtools-searchbox {
   display: flex;
@@ -679,7 +687,7 @@
   background-color: var(--theme-selection-background-semitransparent);
 }
 
-.menu-filter-button:not(:active).active {
+.menu-filter-button:not(:active).checked {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }

devtools/client/themes/webconsole.css

@@ -660,7 +660,6 @@ a.learn-more-link.webconsole-learn-more-link {
   display: flex;
 }
 
-.webconsole-filterbar-primary .devtools-plain-input {
+.webconsole-filterbar-primary .devtools-plaininput {
   flex: 1 1 100%;
-  border-color: transparent;
 }

devtools/client/webconsole/new-console-output/components/filter-bar.js

@@ -58,12 +58,12 @@ const FilterBar = createClass({
       }),
       dom.button({
         className: "devtools-button devtools-filter-icon" + (
-          configFilterBarVisible ? " active" : ""),
+          configFilterBarVisible ? " checked" : ""),
         title: "Toggle filter bar",
         onClick: this.onToggleFilterConfigBarButtonClick
       }),
       dom.input({
-        className: "devtools-plain-input",
+        className: "devtools-plaininput",
         type: "search",
         value: filter.searchText,
         placeholder: "Filter output",

devtools/client/webconsole/new-console-output/components/filter-toggle-button.js

@@ -37,7 +37,7 @@ const FilterToggleButton = createClass({
 
     let classList = ["menu-filter-button"];
     if (active) {
-      classList.push("active");
+      classList.push("checked");
     }
 
     return dom.button({