Bug 1223368 - Refactor searchbox style to be consistent across tools. r=fvsch,gl,Honza,nchevobbe
☠☠ backed out by a9241feee65f ☠ ☠
authorTim Nguyen <ntim.bugs@gmail.com>
Sat, 11 May 2019 16:08:13 +0000
changeset 532334 c8a2cbf18f3c8434aa69b21db050fe7af1f19251
parent 532333 53380c05b1dc3494b2260a0b9eceae4a8ea7f049
child 532335 90bd618a94490e24c96157a224f92b68674f46b6
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfvsch, gl, Honza, nchevobbe
bugs1223368
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1223368 - Refactor searchbox style to be consistent across tools. r=fvsch,gl,Honza,nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D28334
devtools/client/dom/content/components/MainFrame.js
devtools/client/dom/content/components/MainToolbar.js
devtools/client/dom/content/dom-view.css
devtools/client/dom/index.html
devtools/client/framework/connect/connect.css
devtools/client/inspector/computed/computed.js
devtools/client/inspector/index.xhtml
devtools/client/inspector/inspector-search.js
devtools/client/inspector/rules/components/ClassListPanel.js
devtools/client/inspector/rules/components/PseudoClassPanel.js
devtools/client/inspector/rules/components/SearchBox.js
devtools/client/inspector/rules/components/Toolbar.js
devtools/client/inspector/rules/rules.js
devtools/client/jsonview/components/JsonToolbar.js
devtools/client/memory/components/Toolbar.js
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/netmonitor/src/assets/styles/Toolbar.css
devtools/client/netmonitor/src/components/PropertiesView.js
devtools/client/netmonitor/src/components/Toolbar.js
devtools/client/shared/components/MdnLink.css
devtools/client/shared/components/SearchBox.js
devtools/client/shared/widgets/VariablesView.jsm
devtools/client/storage/index.xul
devtools/client/themes/common.css
devtools/client/themes/computed.css
devtools/client/themes/inspector.css
devtools/client/themes/memory.css
devtools/client/themes/rules.css
devtools/client/themes/storage.css
devtools/client/themes/toolbars.css
devtools/client/themes/webconsole.css
devtools/client/webconsole/components/FilterBar.js
devtools/client/webconsole/test/components/filter-bar.test.js
--- a/devtools/client/dom/content/components/MainFrame.js
+++ b/devtools/client/dom/content/components/MainFrame.js
@@ -43,17 +43,17 @@ class MainFrame extends Component {
     } = this.props;
 
     return (
       div({className: "mainFrame"},
         MainToolbar({
           dispatch: this.props.dispatch,
           object: this.props.object,
         }),
-        div({className: "treeTableBox"},
+        div({className: "treeTableBox devtools-monospace"},
           DomTree({
             filter,
             object,
             openLink: url => DomProvider.openLink(url),
           })
         )
       )
     );
--- a/devtools/client/dom/content/components/MainToolbar.js
+++ b/devtools/client/dom/content/components/MainToolbar.js
@@ -2,29 +2,24 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 // React
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 
 const { l10n } = require("../utils");
-// Reps
-const { createFactories } = require("devtools/client/shared/react-utils");
 
-const { Toolbar, ToolbarButton } = createFactories(require("devtools/client/jsonview/components/reps/Toolbar"));
-
-// DOM Panel
-const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 // Actions
 const { fetchProperties } = require("../actions/grips");
-
 const { setVisibilityFilter } = require("../actions/filter");
 
 /**
  * This template is responsible for rendering a toolbar
  * within the 'Headers' panel.
  */
 class MainToolbar extends Component {
   static get propTypes() {
@@ -45,30 +40,31 @@ class MainToolbar extends Component {
   }
 
   onSearch(value) {
     this.props.dispatch(setVisibilityFilter(value));
   }
 
   render() {
     return (
-      Toolbar({},
-        ToolbarButton({
+      dom.div({ className: "devtools-toolbar devtools-input-toolbar" },
+        SearchBox({
+          key: "filter",
+          delay: 250,
+          onChange: this.onSearch,
+          placeholder: l10n.getStr("dom.filterDOMPanel"),
+          type: "filter",
+        }),
+        dom.span({ className: "devtools-separator" }),
+        dom.button({
           key: "refresh",
           className: "refresh devtools-button",
           id: "dom-refresh-button",
           title: l10n.getStr("dom.refresh"),
           onClick: this.onRefresh,
         }),
-        SearchBox({
-          key: "filter",
-          delay: 250,
-          onChange: this.onSearch,
-          placeholder: l10n.getStr("dom.filterDOMPanel"),
-          type: "filter",
-        })
       )
     );
   }
 }
 
 // Exports from this module
 module.exports = MainToolbar;
--- a/devtools/client/dom/content/dom-view.css
+++ b/devtools/client/dom/content/dom-view.css
@@ -98,23 +98,16 @@ body {
 
 /******************************************************************************/
 /* Refresh button */
 #dom-refresh-button::before {
   background-image: url("chrome://devtools/skin/images/reload.svg");
 }
 
 /******************************************************************************/
-/* Search box */
-.devtools-searchbox {
-  margin-inline-start: auto; /* Align to the right */
-  flex: none; /* Don't flex */
-}
-
-/******************************************************************************/
 /* Theme Dark */
 
 .theme-dark .treeTable > tbody > tr > td {
   border-bottom: none;
 }
 
 .theme-dark body {
   background-color: var(--theme-body-background);
--- a/devtools/client/dom/index.html
+++ b/devtools/client/dom/index.html
@@ -8,13 +8,13 @@
   <meta charset="utf-8"/>
 
   <link href="resource://devtools/client/dom/content/dom-view.css" rel="stylesheet" />
   <link href="resource://devtools/client/jsonview/css/toolbar.css" rel="stylesheet" />
   <link href="resource://devtools/client/shared/components/tree/TreeView.css" rel="stylesheet" />
 
   <script src="chrome://devtools/content/shared/theme-switching.js"></script>
 </head>
-<body class="theme-body devtools-monospace" role="application">
+<body class="theme-body" role="application">
   <div id="content"></div>
   <script src="./main.js"></script>
 </body>
 </html>
--- a/devtools/client/framework/connect/connect.css
+++ b/devtools/client/framework/connect/connect.css
@@ -48,18 +48,22 @@ label > span {
 #submit:dir(rtl) {
   float: left;
 }
 
 input {
   direction: ltr;
 }
 
+input:not(:focus) {
+  border-color: rgba(255,255,255,0.2);
+}
+
 input:invalid {
-  box-shadow: 0 0 2px 2px #F06;
+  border-color: #F06;
 }
 
 section {
   min-height: 160px;
   margin: 60px 20px;
   display: none; /* By default, hidden */
 }
 
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -522,24 +522,21 @@ CssComputedView.prototype = {
             },
             onCancel: () => {
               reject("_refreshProcess of computed view cancelled");
             },
             onDone: () => {
               this._refreshProcess = null;
               this.noResults.hidden = this.numVisibleProperties > 0;
 
-              if (this.searchField.value.length > 0 &&
-                  !this.numVisibleProperties) {
-                this.searchField.classList
-                                .add("devtools-style-searchbox-no-match");
-              } else {
-                this.searchField.classList
-                                .remove("devtools-style-searchbox-no-match");
-              }
+              const searchBox = this.searchField.parentNode;
+              searchBox.classList.toggle(
+                "devtools-searchbox-no-match",
+                this.searchField.value.length > 0 && !this.numVisibleProperties,
+              );
 
               this.inspector.emit("computed-view-refreshed");
               resolve(undefined);
             },
           }
         );
         this._refreshProcess.schedule();
       });
@@ -584,22 +581,16 @@ CssComputedView.prototype = {
       clearTimeout(this._filterChangedTimeout);
     }
 
     const filterTimeout = (this.searchField.value.length > 0)
       ? FILTER_CHANGED_TIMEOUT : 0;
     this.searchClearButton.hidden = this.searchField.value.length === 0;
 
     this._filterChangedTimeout = setTimeout(() => {
-      if (this.searchField.value.length > 0) {
-        this.searchField.setAttribute("filled", true);
-      } else {
-        this.searchField.removeAttribute("filled");
-      }
-
       this.refreshPanel();
       this._filterChangeTimeout = null;
     }, filterTimeout);
   },
 
   /**
    * Called when the user clicks on the clear button in the filter style search
    * box. Returns true if the search box is cleared and false otherwise.
--- a/devtools/client/inspector/index.xhtml
+++ b/devtools/client/inspector/index.xhtml
@@ -41,18 +41,18 @@
 </head>
 <body class="theme-body" role="application">
   <div class="inspector-responsive-container theme-body inspector"
        data-localization-bundle="devtools/client/locales/inspector.properties">
 
     <!-- Main Panel Content -->
     <div id="inspector-main-content" class="devtools-main-content" style="visibility: hidden;">
       <!-- Toolbar -->
-      <div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true">
-        <div id="inspector-search" class="devtools-searchbox has-clear-btn">
+      <div id="inspector-toolbar" class="devtools-toolbar devtools-input-toolbar" nowindowdrag="true">
+        <div id="inspector-search" class="devtools-searchbox">
           <input id="inspector-searchbox" class="devtools-searchinput"
                  type="search"
                  data-localization="placeholder=inspectorSearchHTML.label3"/>
           <button id="inspector-searchinput-clear" class="devtools-searchinput-clear" hidden="true" tabindex="-1"></button>
         </div>
         <div id="inspector-searchlabel-container" hidden="true">
           <div class="devtools-separator"></div>
           <span id="inspector-searchlabel"></span>
@@ -82,53 +82,53 @@
     <!-- Sidebar Container -->
     <div id="inspector-sidebar-container">
       <div id="inspector-sidebar" hidden="true"></div>
     </div>
 
     <!-- Sidebar Panel Definitions -->
     <div id="tabpanels" style="visibility: collapse">
       <div id="sidebar-panel-ruleview" class="theme-sidebar inspector-tabpanel">
-        <div id="ruleview-toolbar-container" class="devtools-toolbar">
-          <div id="ruleview-toolbar">
-            <div class="devtools-searchbox has-clear-btn">
+        <div id="ruleview-toolbar-container">
+          <div id="ruleview-toolbar" class="devtools-toolbar devtools-input-toolbar">
+            <div class="devtools-searchbox">
               <input id="ruleview-searchbox"
-                     class="devtools-filterinput devtools-rule-searchbox"
+                     class="devtools-filterinput"
                      type="search"
                      data-localization="placeholder=inspector.filterStyles.placeholder"/>
               <button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
             </div>
             <div class="devtools-separator"></div>
             <div id="ruleview-command-toolbar">
               <button id="pseudo-class-panel-toggle" data-localization="title=inspector.togglePseudo.tooltip" class="devtools-button"></button>
               <button id="class-panel-toggle" data-localization="title=inspector.classPanel.toggleClass.tooltip" class="devtools-button"></button>
               <button id="ruleview-add-rule-button" data-localization="title=inspector.addRule.tooltip" class="devtools-button"></button>
               <button id="print-simulation-toggle" data-localization="title=inspector.printSimulation.tooltip" class="devtools-button" hidden="true"></button>
             </div>
           </div>
-          <div id="pseudo-class-panel" class="ruleview-reveal-panel" hidden="true">
+          <div id="pseudo-class-panel" class="theme-toolbar ruleview-reveal-panel" hidden="true">
             <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</label>
             <label><input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</label>
             <label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</label>
             <label><input id="pseudo-focus-within-toggle" type="checkbox" value=":focus-within" tabindex="-1" />:focus-within</label>
           </div>
-          <div id="ruleview-class-panel" class="ruleview-reveal-panel" hidden="true"></div>
+          <div id="ruleview-class-panel" class="theme-toolbar ruleview-reveal-panel" hidden="true"></div>
         </div>
 
         <div id="ruleview-container" class="ruleview">
           <div id="ruleview-container-focusable" tabindex="-1">
           </div>
         </div>
       </div>
 
       <div id="sidebar-panel-computedview" class="theme-sidebar inspector-tabpanel">
-        <div id="computed-toolbar" class="devtools-toolbar">
-          <div class="devtools-searchbox has-clear-btn">
+        <div id="computed-toolbar" class="devtools-toolbar devtools-input-toolbar">
+          <div class="devtools-searchbox">
             <input id="computed-searchbox"
-                   class="devtools-filterinput devtools-rule-searchbox"
+                   class="devtools-filterinput"
                    type="search"
                    data-localization="placeholder=inspector.filterStyles.placeholder"/>
             <button id="computed-searchinput-clear" class="devtools-searchinput-clear"></button>
           </div>
           <input id="browser-style-checkbox"
                  type="checkbox"
                  class="includebrowserstyles"/>
           <label id="browser-style-checkbox-label" for="browser-style-checkbox"
--- a/devtools/client/inspector/inspector-search.js
+++ b/devtools/client/inspector/inspector-search.js
@@ -72,39 +72,41 @@ InspectorSearch.prototype = {
     this.doFullTextSearch(this.searchBox.value, reverse)
         .catch(console.error);
   },
 
   async doFullTextSearch(query, reverse) {
     const lastSearched = this._lastSearched;
     this._lastSearched = query;
 
+    const searchContainer = this.searchBox.parentNode;
+
     if (query.length === 0) {
-      this.searchBox.classList.remove("devtools-style-searchbox-no-match");
+      searchContainer.classList.remove("devtools-searchbox-no-match");
       if (!lastSearched || lastSearched.length > 0) {
         this.emit("search-cleared");
       }
       return;
     }
 
     const res = await this.walker.search(query, { reverse });
 
     // Value has changed since we started this request, we're done.
     if (query !== this.searchBox.value) {
       return;
     }
 
     if (res) {
       this.inspector.selection.setNodeFront(res.node, { reason: "inspectorsearch" });
-      this.searchBox.classList.remove("devtools-style-searchbox-no-match");
+      searchContainer.classList.remove("devtools-searchbox-no-match");
 
       res.query = query;
       this.emit("search-result", res);
     } else {
-      this.searchBox.classList.add("devtools-style-searchbox-no-match");
+      searchContainer.classList.add("devtools-searchbox-no-match");
       this.emit("search-result");
     }
   },
 
   _onInput: function() {
     if (this.searchBox.value.length === 0) {
       this.searchClearButton.hidden = true;
       this._onSearch();
@@ -122,17 +124,17 @@ InspectorSearch.prototype = {
                         ? event.metaKey : event.ctrlKey;
     if (event.keyCode === KeyCodes.DOM_VK_G && modifierKey) {
       this._onSearch(event.shiftKey);
       event.preventDefault();
     }
   },
 
   _onClearSearch: function() {
-    this.searchBox.classList.remove("devtools-style-searchbox-no-match");
+    this.searchBox.parentNode.classList.remove("devtools-searchbox-no-match");
     this.searchBox.value = "";
     this.searchClearButton.hidden = true;
     this.emit("search-cleared");
   },
 };
 
 /**
  * Converts any input box on a page to a CSS selector search and suggestion box.
--- a/devtools/client/inspector/rules/components/ClassListPanel.js
+++ b/devtools/client/inspector/rules/components/ClassListPanel.js
@@ -57,17 +57,17 @@ class ClassListPanel extends PureCompone
     this.props.onSetClassState(target.value, target.checked);
   }
 
   render() {
     return (
       dom.div(
         {
           id: "ruleview-class-panel",
-          className: "ruleview-reveal-panel",
+          className: "theme-toolbar ruleview-reveal-panel",
         },
         dom.input({
           className: "devtools-textinput add-class",
           placeholder: getStr("rule.classPanel.newClass.placeholder"),
           onChange: this.onInputChange,
           onKeyUp: this.onInputKeyUp,
           ref: this.inputRef,
           value: this.state.value,
--- a/devtools/client/inspector/rules/components/PseudoClassPanel.js
+++ b/devtools/client/inspector/rules/components/PseudoClassPanel.js
@@ -30,17 +30,17 @@ class PseudoClassPanel extends PureCompo
 
   render() {
     const { pseudoClasses } = this.props;
 
     return (
       dom.div(
         {
           id: "pseudo-class-panel",
-          className: "ruleview-reveal-panel",
+          className: "theme-toolbar ruleview-reveal-panel",
         },
         Object.entries(pseudoClasses).map(([value, { isChecked, isDisabled }]) => {
           return (
             dom.label({},
               dom.input({
                 key: value,
                 id: `pseudo-${value.slice(1)}-toggle`,
                 checked: isChecked,
--- a/devtools/client/inspector/rules/components/SearchBox.js
+++ b/devtools/client/inspector/rules/components/SearchBox.js
@@ -11,20 +11,20 @@ const { getStr } = require("../utils/l10
 
 class SearchBox extends PureComponent {
   static get propTypes() {
     return {};
   }
 
   render() {
     return (
-      dom.div({ className: "devtools-searchbox has-clear-btn" },
+      dom.div({ className: "devtools-searchbox" },
         dom.input({
           id: "ruleview-searchbox",
-          className: "devtools-filterinput devtools-rule-searchbox",
+          className: "devtools-filterinput",
           placeholder: getStr("rule.filterStyles.placeholder"),
           type: "search",
         }),
         dom.button({
           id: "ruleview-searchinput-clear",
           className: "devtools-searchinput-clear",
         })
       )
--- a/devtools/client/inspector/rules/components/Toolbar.js
+++ b/devtools/client/inspector/rules/components/Toolbar.js
@@ -100,19 +100,22 @@ class Toolbar extends PureComponent {
       isPrintSimulationEnabled,
       isPseudoClassPanelExpanded,
     } = this.state;
 
     return (
       dom.div(
         {
           id: "ruleview-toolbar-container",
-          className: "devtools-toolbar",
         },
-        dom.div({ id: "ruleview-toolbar" },
+        dom.div(
+          {
+            id: "ruleview-toolbar",
+            className: "devtools-toolbar devtools-input-toolbar",
+          },
           SearchBox({}),
           dom.div({ className: "devtools-separator" }),
           dom.div({ id: "ruleview-command-toolbar" },
             dom.button({
               id: "pseudo-class-panel-toggle",
               className: "devtools-button" +
                          (isPseudoClassPanelExpanded ? " checked" : ""),
               onClick: this.onPseudoClassPanelToggle,
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -640,22 +640,16 @@ CssRuleView.prototype = {
       clearTimeout(this._filterChangedTimeout);
     }
 
     const filterTimeout = (this.searchValue.length > 0) ?
                         FILTER_CHANGED_TIMEOUT : 0;
     this.searchClearButton.hidden = this.searchValue.length === 0;
 
     this._filterChangedTimeout = setTimeout(() => {
-      if (this.searchField.value.length > 0) {
-        this.searchField.setAttribute("filled", true);
-      } else {
-        this.searchField.removeAttribute("filled");
-      }
-
       this.searchData = {
         searchPropertyMatch: FILTER_PROP_RE.exec(this.searchValue),
         searchPropertyName: this.searchValue,
         searchPropertyValue: this.searchValue,
         strictSearchValue: "",
         strictSearchPropertyName: false,
         strictSearchPropertyValue: false,
         strictSearchAllValues: false,
@@ -1215,21 +1209,21 @@ CssRuleView.prototype = {
 
       if (container && (rule.pseudoElement || keyframes)) {
         container.appendChild(rule.editor.element);
       } else {
         this.element.appendChild(rule.editor.element);
       }
     }
 
-    if (this.searchValue && !seenSearchTerm) {
-      this.searchField.classList.add("devtools-style-searchbox-no-match");
-    } else {
-      this.searchField.classList.remove("devtools-style-searchbox-no-match");
-    }
+    const searchBox = this.searchField.parentNode;
+    searchBox.classList.toggle(
+      "devtools-searchbox-no-match",
+      this.searchValue && !seenSearchTerm,
+    );
 
     return promise.all(editorReadyPromises);
   },
 
   /**
    * Highlight rules that matches the filter search value and returns a
    * boolean indicating whether or not rules were highlighted.
    *
--- a/devtools/client/jsonview/components/JsonToolbar.js
+++ b/devtools/client/jsonview/components/JsonToolbar.js
@@ -6,16 +6,17 @@
 
 "use strict";
 
 define(function(require, exports, module) {
   const { Component } = require("devtools/client/shared/vendor/react");
   const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
   const { createFactories } = require("devtools/client/shared/react-utils");
+  const { div } = require("devtools/client/shared/vendor/react-dom-factories");
 
   const { SearchBox } = createFactories(require("./SearchBox"));
   const { Toolbar, ToolbarButton } = createFactories(require("./reps/Toolbar"));
 
   /* 100kB file */
   const EXPAND_THRESHOLD = 100 * 1024;
 
   /**
@@ -66,16 +67,17 @@ define(function(require, exports, module
           ),
           ToolbarButton({className: "btn collapse", onClick: this.onCollapse},
             JSONView.Locale.$STR("jsonViewer.CollapseAll")
           ),
           this.props.dataSize > EXPAND_THRESHOLD ? undefined :
           ToolbarButton({className: "btn expand", onClick: this.onExpand},
             JSONView.Locale.$STR("jsonViewer.ExpandAll")
           ),
+          div({className: "devtools-separator"}),
           SearchBox({
             actions: this.props.actions,
           })
         )
       );
     }
   }
 
--- a/devtools/client/memory/components/Toolbar.js
+++ b/devtools/client/memory/components/Toolbar.js
@@ -91,17 +91,17 @@ class Toolbar extends Component {
                 value: displayName,
                 title: tooltip,
               },
               displayName
             ))
           )
         ),
 
-        dom.div({ id: "toolbar-spacer", className: "spacer" }),
+        dom.span({ className: "devtools-separator" }),
 
         dom.input({
           id: "filter",
           type: "search",
           className: "devtools-filterinput",
           placeholder: L10N.getStr("filter.placeholder"),
           title: L10N.getStr("filter.tooltip"),
           onChange: event => setFilterString(event.target.value),
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -97,28 +97,26 @@
   position: relative;
 }
 
 /* Make right td fill available horizontal space */
 .network-monitor .tree-container .treeTable td:last-child {
   width: 100%;
 }
 
-.network-monitor .properties-view .devtools-searchbox,
 .network-monitor .tree-container .treeTable .tree-section,
 .network-monitor .properties-view .raw-headers-container  {
   width: 100%;
   background-color: var(--theme-toolbar-background);
 }
 
 .network-monitor .tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) {
   border-top: 1px solid var(--theme-splitter-color);
 }
 
-.network-monitor .properties-view .devtools-searchbox,
 .network-monitor .tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) {
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .network-monitor .tree-container .treeTable .tree-section > * {
   vertical-align: middle;
 }
 
@@ -234,16 +232,17 @@
   justify-content: space-between;
   padding-inline-end: 3px;
 }
 
 /* Headers tabpanel */
 
 .network-monitor .headers-overview {
   background: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .network-monitor .headers-summary,
 .network-monitor .response-summary {
   display: flex;
   align-items: center;
 }
 
--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -1,54 +1,27 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Toolbar */
 
 .devtools-toolbar {
   display: flex;
-  line-height: 23px;
-}
-
-.devtools-toolbar-container {
-  height: auto;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  border: none;
-  padding: 0;
-}
-
-.devtools-toolbar-group {
-  display: flex;
-  flex: 0 0 auto;
-  flex-wrap: nowrap;
   align-items: center;
 }
 
-.devtools-toolbar-two-rows-1,
-.devtools-toolbar-two-rows-2,
-.devtools-toolbar-single-row {
-  flex-grow: 1;
+#netmonitor-main-toolbar,
+#netmonitor-toolbar-container > .devtools-toolbar {
+  /* @TODO: Remove this in bug 1535956 */
   min-height: var(--primary-toolbar-height);
-  background-color: var(--theme-body-background);
-  border-bottom: 1px solid var(--theme-splitter-color);
-}
-
-.devtools-toolbar-two-rows-1 {
-  width: -moz-available;
-}
-
-.devtools-toolbar-two-rows-2 {
-  justify-content: space-between;
 }
 
 .requests-list-filter-buttons {
-  display: flex;
-  flex-wrap: wrap;
+  white-space: nowrap;
   margin: 0 7px;
 }
 
 .devtools-button.devtools-pause-icon::before,
 .devtools-button.devtools-play-icon::before {
   margin-bottom: 1px;
 }
 
@@ -90,39 +63,15 @@
 .devtools-checkbox-label.devtools-persistlog-checkbox {
   margin-inline-start: 4px;
 }
 
 .devtools-checkbox-label.devtools-cache-checkbox {
   margin-inline-end: 7px;
 }
 
-/* Filter input within the Toolbar */
-
-.devtools-toolbar-group .devtools-filterinput {
-  border: none;
-  box-shadow: none;
-  background-color: var(--theme-body-background);
-}
-
-.devtools-toolbar-group .devtools-searchbox {
-  height: 28px;
-  border: 1px solid transparent;
-}
-
-.devtools-toolbar-group .devtools-searchbox:focus-within {
-  border: 1px solid var(--blue-50);
-  margin-bottom: 0;
-  margin-top: 0;
-  box-shadow: none;
-}
-
-.network-monitor .devtools-toolbar-group .learn-more-link::before {
-  opacity: 0.6;
-}
-
 /* Hide filter input learn more link if there is not enough
    horizontal space. */
 @media (max-width: 590px) {
-  .network-monitor .devtools-searchbox:hover .learn-more-link {
+  .network-monitor .devtools-searchbox .learn-more-link {
     display: none;
   }
 }
--- a/devtools/client/netmonitor/src/components/PropertiesView.js
+++ b/devtools/client/netmonitor/src/components/PropertiesView.js
@@ -223,17 +223,17 @@ class PropertiesView extends Component {
       sectionNames,
       openLink,
       provider,
     } = this.props;
 
     return (
       div({ className: "properties-view" },
         this.shouldRenderSearchBox(object) &&
-          div({ className: "searchbox-section" },
+          div({ className: "devtools-toolbar devtools-input-toolbar" },
             SearchBox({
               delay: FILTER_SEARCH_DELAY,
               type: "filter",
               onChange: this.updateFilterText,
               placeholder: filterPlaceHolder,
             }),
           ),
         div({ className: "tree-container" },
--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -356,17 +356,16 @@ class Toolbar extends Component {
    * Render filter Searchbox.
    */
   renderFilterBox(setRequestFilterText) {
     return (
       SearchBox({
         delay: FILTER_SEARCH_DELAY,
         keyShortcut: SEARCH_KEY_SHORTCUT,
         placeholder: SEARCH_PLACE_HOLDER,
-        plainStyle: true,
         type: "filter",
         ref: "searchbox",
         onChange: setRequestFilterText,
         onFocus: this.onSearchBoxFocus,
         autocompleteProvider: this.autocompleteProvider,
         learnMoreUrl: LEARN_MORE_URL,
         learnMoreTitle: LEARN_MORE_TITLE,
       })
@@ -385,49 +384,50 @@ class Toolbar extends Component {
       browserCacheDisabled,
       recording,
       singleRow,
     } = this.props;
 
     // Render the entire toolbar.
     // dock at bottom or dock at side has different layout
     return singleRow ? (
-      span({ className: "devtools-toolbar devtools-toolbar-container" },
-        span({ className: "devtools-toolbar-group devtools-toolbar-single-row" },
-          this.renderClearButton(clearRequests),
-          this.renderSeparator(),
-          this.renderFilterBox(setRequestFilterText),
-          this.renderSeparator(),
-          this.renderToggleRecordingButton(recording, toggleRecording),
-          this.renderSeparator(),
-          this.renderFilterButtons(requestFilterTypes),
-          this.renderSeparator(),
-          this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
-          this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
-          this.renderSeparator(),
-          this.renderThrottlingMenu(),
-          this.renderHarButton(),
-        )
+      span({
+        id: "netmonitor-main-toolbar",
+        className: "devtools-toolbar devtools-input-toolbar",
+      },
+        this.renderClearButton(clearRequests),
+        this.renderSeparator(),
+        this.renderFilterBox(setRequestFilterText),
+        this.renderSeparator(),
+        this.renderToggleRecordingButton(recording, toggleRecording),
+        this.renderSeparator(),
+        this.renderFilterButtons(requestFilterTypes),
+        this.renderSeparator(),
+        this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
+        this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
+        this.renderSeparator(),
+        this.renderThrottlingMenu(),
+        this.renderHarButton(),
       )
     ) : (
-      span({ className: "devtools-toolbar devtools-toolbar-container" },
-        span({ className: "devtools-toolbar-group devtools-toolbar-two-rows-1" },
+      span({ id: "netmonitor-toolbar-container" },
+        span({ className: "devtools-toolbar devtools-input-toolbar" },
           this.renderClearButton(clearRequests),
           this.renderSeparator(),
           this.renderFilterBox(setRequestFilterText),
           this.renderSeparator(),
           this.renderToggleRecordingButton(recording, toggleRecording),
           this.renderSeparator(),
           this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
           this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
           this.renderSeparator(),
           this.renderThrottlingMenu(),
           this.renderHarButton(),
         ),
-        span({ className: "devtools-toolbar-group devtools-toolbar-two-rows-2" },
+        span({ className: "devtools-toolbar" },
           this.renderFilterButtons(requestFilterTypes)
         )
       )
     );
   }
 }
 
 module.exports = connect(
--- a/devtools/client/shared/components/MdnLink.css
+++ b/devtools/client/shared/components/MdnLink.css
@@ -1,31 +1,28 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Learn more links */
 
 .network-monitor .learn-more-link {
   display: inline-block;
-  vertical-align: middle;
+  line-height: 16px;
 }
 
 .network-monitor .learn-more-link::before {
-  display: block;
-  margin: 0;
   background-image: url(chrome://devtools/skin/images/help.svg);
-  background-position: center;
   background-size: contain;
 }
 
 .network-monitor .tree-container .learn-more-link {
   position: absolute;
   top: 0;
-  inset-inline-start: 6px;
+  inset-inline-start: 2px;
   /* Override devtools-button styles to make this button 20x20,
    * so that the icon is vertically centered in the table row */
-  padding: 2px;
+  padding: 1px 0;
 }
 
 .network-monitor .tree-container tr:not(:hover) .learn-more-link {
   opacity: 0.4;
 }
--- a/devtools/client/shared/components/SearchBox.js
+++ b/devtools/client/shared/components/SearchBox.js
@@ -27,17 +27,16 @@ class SearchBox extends PureComponent {
       keyShortcut: PropTypes.string,
       learnMoreTitle: PropTypes.string,
       learnMoreUrl: PropTypes.string,
       onBlur: PropTypes.func,
       onChange: PropTypes.func.isRequired,
       onFocus: PropTypes.func,
       onKeyDown: PropTypes.func,
       placeholder: PropTypes.string.isRequired,
-      plainStyle: PropTypes.bool,
       type: PropTypes.string.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
@@ -164,57 +163,50 @@ class SearchBox extends PureComponent {
         break;
       case "End":
         autocomplete.jumpToBottom();
         break;
     }
   }
 
   render() {
-    let {
+    const {
       autocompleteProvider,
       learnMoreTitle,
       learnMoreUrl,
       placeholder,
-      plainStyle,
       type = "search",
     } = this.props;
     const { value } = this.state;
     const showAutocomplete = autocompleteProvider && this.state.focused && value !== "";
+    const showLearnMoreLink = learnMoreUrl && value === "";
 
     const inputClassList = [`devtools-${type}input`];
-    if (plainStyle) {
-      inputClassList.push("devtools-plaininput");
-    }
-    if (value !== "") {
-      inputClassList.push("filled");
-      learnMoreUrl = false;
-    }
 
     return dom.div(
-      { className: "devtools-searchbox has-clear-btn" },
+      { className: "devtools-searchbox" },
       dom.input({
         className: inputClassList.join(" "),
         onBlur: this.onBlur,
         onChange: this.onChange,
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown,
         placeholder,
         ref: this.inputRef,
         value,
       }),
+      showLearnMoreLink && MDNLink({
+        title: learnMoreTitle,
+        url: learnMoreUrl,
+      }),
       dom.button({
         className: "devtools-searchinput-clear",
         hidden: value === "",
         onClick: this.onClearButtonClick,
       }),
-      learnMoreUrl && MDNLink({
-        title: learnMoreTitle,
-        url: learnMoreUrl,
-      }),
       showAutocomplete && AutocompletePopup({
         autocompleteProvider,
         filter: value,
         onItemSelected: (itemValue) => {
           this.setState({ value: itemValue });
           this.onChange();
         },
         ref: this.autocompleteRef,
--- a/devtools/client/shared/widgets/VariablesView.jsm
+++ b/devtools/client/shared/widgets/VariablesView.jsm
@@ -419,17 +419,17 @@ VariablesView.prototype = {
     // If searching was already enabled, no need to re-enable it again.
     if (this._searchboxContainer) {
       return;
     }
     const document = this.document;
     const ownerNode = this._parent.parentNode;
 
     const container = this._searchboxContainer = document.createXULElement("hbox");
-    container.className = "devtools-toolbar";
+    container.className = "devtools-toolbar devtools-input-toolbar";
 
     // Hide the variables searchbox container if there are no variables or
     // properties to display.
     container.hidden = !this._store.length;
 
     const searchbox = this._searchboxNode = document.createXULElement("textbox");
     searchbox.className = "variables-view-searchinput devtools-filterinput";
     searchbox.setAttribute("placeholder", this._searchboxPlaceholder);
--- a/devtools/client/storage/index.xul
+++ b/devtools/client/storage/index.xul
@@ -9,17 +9,17 @@
 <?xml-stylesheet href="resource://devtools/client/shared/components/SidebarToggle.css" type="text/css"?>
 
 <!DOCTYPE window [
   <!ENTITY % storageDTD SYSTEM "chrome://devtools/locale/storage.dtd">
   %storageDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-	      xmlns:html="http://www.w3.org/1999/xhtml">
+        xmlns:html="http://www.w3.org/1999/xhtml">
 
   <script src="chrome://devtools/content/shared/theme-switching.js"/>
   <script src="chrome://global/content/globalOverlay.js"/>
   <script src="chrome://global/content/editMenuOverlay.js"/>
 
   <popupset id="storagePopupSet">
     <menupopup id="storage-tree-popup">
       <menuitem id="storage-tree-popup-delete-all"
@@ -42,25 +42,26 @@
                 label="&storage.popupMenu.deleteAllSessionCookiesLabel;"/>
     </menupopup>
   </popupset>
 
   <box flex="1" class="devtools-responsive-container theme-body">
     <vbox id="storage-tree"/>
     <splitter class="devtools-side-splitter"/>
     <vbox flex="1">
-      <hbox id="storage-toolbar" class="devtools-toolbar">
+      <hbox id="storage-toolbar" class="devtools-toolbar devtools-input-toolbar">
+        <textbox id="storage-searchbox"
+                 class="devtools-filterinput"
+                 flex="1"
+                 placeholder="&searchBox.placeholder;"/>
+        <hbox class="devtools-separator"/>
         <html:button id="add-button"
                 class="devtools-button add-button"></html:button>
         <html:button id="refresh-button"
                 class="devtools-button refresh-button"></html:button>
-        <spacer flex="1"/>
-        <textbox id="storage-searchbox"
-                 class="devtools-filterinput"
-                 placeholder="&searchBox.placeholder;"/>
         <html:button class="devtools-button sidebar-toggle" hidden="true"></html:button>
       </hbox>
       <vbox id="storage-table" class="theme-sidebar" flex="1"/>
     </vbox>
     <splitter class="devtools-side-splitter"/>
     <vbox id="storage-sidebar" class="devtools-sidebar-tabs" hidden="true">
       <vbox flex="1"/>
     </vbox>
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -323,16 +323,17 @@ checkbox:-moz-focusring {
   color: var(--theme-icon-color);
   direction: ltr;
   font-size: 11px;
 }
 
 .devtools-button:empty::before {
   content: "";
   display: inline-block;
+  background-position: center;
   background-repeat: no-repeat;
   vertical-align: middle;
 }
 
 .devtools-toolbarbutton:not([label])[checked=true] > .toolbarbutton-icon,
 .devtools-toolbarbutton:not([label])[open=true] > .toolbarbutton-icon,
 .devtools-button.checked:empty::before {
   color: var(--theme-icon-checked-color);
@@ -447,63 +448,35 @@ checkbox:-moz-focusring {
 }
 
 /* Text input */
 
 .devtools-textinput,
 .devtools-searchinput,
 .devtools-filterinput {
   -moz-appearance: none;
-  margin: 1px 3px;
-  border: 1px solid;
-  border-radius: 2px;
-  padding: 4px 6px;
-  border-color: var(--theme-splitter-color);
-  font: message-box;
-  font-size: var(--theme-body-font-size);
-  background-color: white;
-  color: var(--grey-90);
-}
-
-.theme-dark .devtools-textinput,
-.theme-dark .devtools-searchinput,
-.theme-dark .devtools-filterinput {
-  /* in between grey-85 and grey-90 */
-  background-color: #141416;
-  color: var(--grey-20);
-}
-
-:root[platform="mac"] .devtools-textinput,
-:root[platform="mac"] .devtools-searchinput,
-:root[platform="mac"] .devtools-filterinput {
-  border-radius: 20px;
+  margin: 0;
+  padding: 0 4px;
+  font: inherit;
+  border: 1px solid transparent;
+  background-color: var(--theme-body-background);
+  color: var(--theme-body-color);
+  flex-grow: 1;
 }
 
 .devtools-searchinput,
 .devtools-filterinput {
-  padding: 0;
   padding-inline-start: 22px;
-  padding-inline-end: 4px;
   background-position: 7px center;
   background-size: 12px;
   background-repeat: no-repeat;
-  font-size: inherit;
   -moz-context-properties: fill;
   fill: var(--theme-icon-dimmed-color);
 }
 
-/*
- * @TODO : has-clear-btn class was added for bug 1296187 and we should remove it
- *  once we have a standardized search and filter input across the toolboxes.
- */
-.has-clear-btn > .devtools-searchinput,
-.has-clear-btn > .devtools-filterinput {
-  padding-inline-end: 23px;
-}
-
 .devtools-searchinput {
   background-image: url(chrome://devtools/skin/images/search.svg);
 }
 
 .devtools-filterinput {
   background-image: url(chrome://devtools/skin/images/filter-small.svg);
 }
 
@@ -514,136 +487,91 @@ checkbox:-moz-focusring {
   background-position-x: right 7px;
 }
 
 .devtools-searchinput .textbox-input::placeholder,
 .devtools-filterinput .textbox-input::placeholder {
   font-style: normal;
 }
 
-.devtools-plaininput {
-  color: var(--grey-90);
-  border-color: transparent;
-  background-color: transparent;
-}
-
-.theme-dark .devtools-plaininput {
-  color: var(--grey-20);
-}
-
-/* Searchbox is a div container element for a search input element */
+/* Searchbox with extra button(s) (MDN help or clear button) */
 .devtools-searchbox {
   display: inline-flex;
-  flex: 1;
-  height: 23px;
+  flex-grow: 1;
   position: relative;
-  padding: 0 3px;
+  border: 1px solid transparent;
+  height: 100%;
+  box-sizing: border-box;
 }
 
-/* The spacing is accomplished with a padding on the searchbox */
-.devtools-searchbox > .devtools-textinput,
 .devtools-searchbox > .devtools-searchinput,
 .devtools-searchbox > .devtools-filterinput {
-  margin-left: 0;
-  margin-right: 0;
-  width: 100%;
+  /* Let .devtools-searchbox handle the background and border */
+  background-color: transparent;
+  border: none;
+  flex-grow: 1;
 }
 
+.devtools-searchbox:focus-within,
 .devtools-textinput:focus,
 .devtools-searchinput:focus,
 .devtools-filterinput:focus {
-  border-color: var(--theme-focus-border-color-textbox);
-  box-shadow: var(--theme-focus-box-shadow-textbox);
-  transition: all 0.2s ease-in-out;
+  border-color: var(--blue-50);
   outline: none;
 }
 
-.devtools-searchbox .devtools-autocomplete-popup {
-  position: absolute;
-  left: 0;
-  top: 100%;
-  width: 100%;
-  line-height: initial !important;
-  /* See bug - 1414609. z-index is greater than 1000 so that searchbox's z-index
-  is more than z-index of requests-list-headers-wrapper in netmonitor */
-  z-index: 1001;
-}
-
-/* MDN link within the Searchbox */
-.devtools-searchbox .learn-more-link:before {
-  height: 20px;
-}
-
-.devtools-searchbox .learn-more-link {
-  background: transparent !important;
-  cursor: pointer;
-  display: none;
-}
-
-.devtools-searchbox:hover .learn-more-link {
-  display: block;
+.devtools-searchbox-no-match {
+  background-color: var(--searchbox-no-match-background-color);
+  border-color: var(--searchbox-no-match-stroke-color);
 }
 
-/* Don't add 'double spacing' for inputs that are at beginning / end
-   of a toolbar (since the toolbar has it's own spacing). */
-.devtools-toolbar > .devtools-textinput:first-child,
-.devtools-toolbar > .devtools-searchinput:first-child,
-.devtools-toolbar > .devtools-filterinput:first-child {
-  margin-inline-start: 0;
-}
-.devtools-toolbar > .devtools-textinput:last-child,
-.devtools-toolbar > .devtools-searchinput:last-child,
-.devtools-toolbar > .devtools-filterinput:last-child {
-  margin-inline-end: 0;
-}
-.devtools-toolbar > .devtools-searchbox:first-child {
-  padding-inline-start: 0;
-}
-.devtools-toolbar > .devtools-searchbox:last-child {
-  padding-inline-end: 0;
-}
-
-.devtools-rule-searchbox {
-  -moz-box-flex: 1;
-  width: 100%;
-}
-
-.devtools-filterinput:-moz-any([filled],.filled) {
-  background-color: var(--searchbox-background-color);
-  border-color: var(--searchbox-border-color);
-}
-
-.devtools-style-searchbox-no-match {
-  background-color: var(--searchbox-no-match-background-color) !important;
-  border-color: var(--searchbox-no-match-stroke-color) !important;
-}
-
+/* Clear icon within the searchbox */
 .devtools-searchinput-clear {
-  position: absolute;
-  top: calc(50% - 8px);
-  inset-inline-end: 7px;
+  align-self: center;
+  margin: 0 4px;
   padding: 0;
   border: 0;
   width: 16px;
   height: 16px;
   background-color: transparent;
   background-image: url("chrome://devtools/skin/images/search-clear.svg");
   -moz-context-properties: fill, fill-opacity;
   fill: var(--theme-icon-color);
   fill-opacity: 0.8;
 }
 
-.devtools-style-searchbox-no-match + .devtools-searchinput-clear {
+.devtools-searchbox-no-match > .devtools-searchinput-clear {
   fill: var(--searchbox-no-match-stroke-color);
 }
 
 .devtools-searchinput-clear:hover {
   fill-opacity: 1;
 }
 
+/* MDN link within the searchbox */
+.devtools-searchbox .learn-more-link::before {
+  opacity: 0.6;
+}
+
+.devtools-searchbox:not(:hover) .learn-more-link {
+  visibility: hidden;
+}
+
+/* Autocomplete popup within the searchbox */
+.devtools-searchbox .devtools-autocomplete-popup {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  width: 100%;
+  line-height: initial !important;
+  /* See bug - 1414609. z-index is greater than 1000 so that searchbox's z-index
+  is more than z-index of requests-list-headers-wrapper in netmonitor */
+  z-index: 1001;
+}
+
 /* Twisty and checkbox controls */
 
 .theme-twisty {
   width: 14px;
   height: 14px;
   cursor: pointer;
   background-image: url("chrome://devtools/skin/images/arrow.svg");
   background-position: center;
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -43,16 +43,17 @@
   /* Bug 1200073 - extra space before the browser styles checkbox so
      they aren't squished together in a small window. Put also
      an extra space after. */
   margin-inline-start: 5px;
   margin-inline-end: 0;
 }
 
 #browser-style-checkbox-label {
+  white-space: nowrap;
   padding-inline-start: 5px;
   margin-inline-end: 5px;
 }
 
 #computed-property-container {
   -moz-user-select: text;
   overflow-y: auto;
   overflow-x: hidden;
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -69,40 +69,16 @@ window {
   background-image: url("chrome://devtools/skin/images/open-3-pane.svg");
 }
 
 /* Flip the icon horizontally when in RTL mode */
 #inspector-splitter-box .sidebar-toggle:dir(rtl) {
   transform: scaleX(-1);
 }
 
-.devtools-toolbar {
-  background-color: var(--theme-body-background);
-  display: flex;
-}
-
-.devtools-toolbar .devtools-searchbox {
-  border: 1px solid transparent;
-}
-
-.devtools-toolbar .devtools-searchbox:focus-within {
-  border: 1px solid var(--blue-50);
-  margin-bottom: 0;
-  margin-top: 0;
-  box-shadow: none;
-}
-
-.devtools-toolbar .devtools-filterinput,
-.devtools-toolbar .devtools-searchinput {
-  border: none;
-  border-radius: 0 !important;
-  box-shadow: none;
-  background-color: var(--theme-body-background);
-}
-
 #inspector-searchlabel-container {
   display: flex;
 }
 
 #inspector-searchlabel-container[hidden] {
   display: none;
 }
 
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -49,17 +49,18 @@ html, body, #app, #memory-tool {
  */
 
 .devtools-toolbar {
   /**
    * Flex: contains several children, which need to be laid out horizontally,
    * and aligned vertically in the middle of the container.
    */
   display: flex;
-  align-items: center;
+  line-height: initial;
+  align-items: stretch;
 }
 
 .devtools-toolbar > .toolbar-group:nth-of-type(1) {
   /**
    * We want this to be exactly at a `--sidebar-width` distance from the
    * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding.
    */
   flex: 0 0 calc(var(--sidebar-width) - 4px);
@@ -131,18 +132,18 @@ html, body, #app, #memory-tool {
   padding-inline-end: 5px;
 }
 
 .spacer {
   flex: 1;
 }
 
 #filter {
-  align-self: stretch;
-  margin: 2px;
+  box-sizing: border-box;
+  height: 100%;
 }
 
 /**
  * Container (sidebar + main panel)
  */
 
 #memory-tool-container {
   /**
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -35,74 +35,53 @@
   /* Override the min-width from .inspector-tabpanel, as the rule panel can support small
      widths */
   min-width: 100px;
 }
 
 /* Rule View Toolbar */
 
 #ruleview-toolbar-container {
-  flex-direction: column;
-  height: auto;
-  padding: 0;
-}
-
-#ruleview-toolbar {
-  display: flex;
-}
-
-#ruleview-toolbar > .devtools-searchbox:first-child {
-  padding-inline-start: 0;
+  /* @TODO: Bug 1535956 - Use the right CSS variable for this */
+  line-height: calc(24px - 2px);
 }
 
 #ruleview-command-toolbar {
   display: flex;
 }
 
 .ruleview-reveal-panel {
-  background: var(--rule-header-background-color);
-  border-top: 1px solid var(--theme-splitter-color);
+  border-bottom: 1px solid var(--theme-splitter-color);
   display: flex;
   overflow: hidden;
   flex-wrap: wrap;
 }
 
 .ruleview-reveal-panel[hidden] {
   display: none;
 }
 
 .ruleview-reveal-panel label {
   -moz-user-select: none;
   flex-grow: 1;
   display: flex;
   align-items: center;
 }
 
-#ruleview-toolbar,
 #pseudo-class-panel,
 #ruleview-class-panel .classes {
   padding: 0 3px;
 }
 
 /* Class toggle panel */
 
 #ruleview-class-panel {
   flex-direction: column;
 }
 
-#ruleview-class-panel .add-class {
-  border: 1px solid transparent;
-  border-radius: 0;
-  margin: 0;
-}
-
-#ruleview-class-panel .add-class:focus {
-  border: 1px solid var(--blue-50);
-}
-
 #ruleview-class-panel .classes {
   border-top: 1px solid var(--theme-splitter-color);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   max-height: 100px;
   overflow-y: auto;
 }
@@ -667,17 +646,16 @@
 
 .ruleview-selectorhighlighter:active,
 .ruleview-selectorhighlighter.highlighted {
   fill: var(--theme-icon-checked-color);
 }
 
 #ruleview-add-rule-button::before {
   background-image: url("chrome://devtools/skin/images/add.svg");
-  background-position: center;
   background-size: 14px;
 }
 
 #pseudo-class-panel-toggle::before {
   content: ":hov";
 }
 
 #class-panel-toggle::before {
@@ -689,17 +667,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
 }
 
 #print-simulation-toggle::before {
   background-image: url("chrome://devtools/skin/images/rules-view-print-simulation.svg");
-  background-position: center;
   background-size: 14px;
 }
 
 .flash-out {
   animation: flash-out 1s ease-out;
 }
 
 @keyframes flash-out {
--- a/devtools/client/themes/storage.css
+++ b/devtools/client/themes/storage.css
@@ -65,16 +65,26 @@
 
 /* Variables View Sidebar */
 
 #storage-sidebar {
   max-width: 500px;
   min-width: 250px;
 }
 
+/* Toolbar */
+
+/*
+  .devtools-input-toolbar forces display: flex; which does not work
+  properly with XUL. Force XUL flexbox instead.
+*/
+#storage-toolbar {
+  display: -moz-box;
+}
+
 #storage-toolbar .add-button::before {
   background-image: url("chrome://devtools/skin/images/add.svg");
   -moz-user-focus: normal;
 }
 
 #storage-toolbar .refresh-button::before {
   background-image: url("chrome://devtools/skin/images/reload.svg");
   -moz-user-focus: normal;
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -39,16 +39,29 @@
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .devtools-toolbar-bottom {
   border-top-width: 1px;
   border-bottom: none;
 }
 
+/* Input toolbars (toolbars that have a full height text input) */
+
+.devtools-input-toolbar {
+  display: flex;
+  /* @TODO: Remove the !important in bug 1535956 */
+  background-color: var(--theme-body-background) !important;
+  color: inherit;
+}
+
+.devtools-input-toolbar > .devtools-searchbox:first-child {
+  margin-inline-start: -3px; /* This needs to match .devtools-toolbar's padding */
+}
+
 /* Expected space around a separator:
  * -----------------------
  *            4
  * [button] 2 | 2 [button]
  *            4
  * -----------------------
  * We're using a 1px horizontal margin, since buttons already have their own
  * 1px horizontal margin, and margins don't collapse between flex items.
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -611,30 +611,16 @@ a.learn-more-link.webconsole-learn-more-
   height: 100%;
   margin: 0;
 }
 
 #split-console-close-button::before {
   background-image: url(chrome://devtools/skin/images/close.svg);
 }
 
-.webconsole-filterbar-primary .devtools-plaininput {
-  flex: 1 1 100%;
-  align-self: stretch;
-  margin-inline-start: 1px;
-  padding-inline-start: 4px;
-  border: 1px solid transparent;
-}
-
-.devtools-plaininput:focus {
-  border: 1px solid var(--blue-50);
-  transition: all 0.2s ease-in-out;
-  outline: none;
-}
-
 .webconsole-filterbar-primary .filter-checkbox {
   flex-shrink: 0;
   margin: 0 3px;
   display: flex;
   align-items: center;
   -moz-user-select: none;
 }
 
--- a/devtools/client/webconsole/components/FilterBar.js
+++ b/devtools/client/webconsole/components/FilterBar.js
@@ -248,31 +248,31 @@ class FilterBar extends Component {
       hidePersistLogsCheckbox,
       hideShowContentMessagesCheckbox,
       closeSplitConsole,
       showContentMessages,
     } = this.props;
 
     const children = [
       dom.div({
-        className: "devtools-toolbar webconsole-filterbar-primary",
+        className: "devtools-toolbar devtools-input-toolbar webconsole-filterbar-primary",
         key: "primary-bar",
       },
         dom.button({
           className: "devtools-button devtools-clear-icon",
           title: l10n.getStr("webconsole.clearButton.tooltip"),
           onClick: this.onClickMessagesClear,
         }),
         dom.div({
           className: "devtools-separator",
         }),
         dom.div(
-          { className: "devtools-searchbox has-clear-btn" },
+          { className: "devtools-searchbox" },
           dom.input({
-            className: "devtools-plaininput text-filter",
+            className: "devtools-filterinput text-filter",
             type: "search",
             value: filter.text,
             placeholder: l10n.getStr("webconsole.filterInput.placeholder"),
             onInput: this.onSearchInput,
           }),
           dom.button({
             className: "devtools-searchinput-clear clear-button",
             hidden: filter.text == "",
--- a/devtools/client/webconsole/test/components/filter-bar.test.js
+++ b/devtools/client/webconsole/test/components/filter-bar.test.js
@@ -49,21 +49,21 @@ describe("FilterBar component:", () => {
     expect(clearButton.attr("class")).toBe("devtools-button devtools-clear-icon");
     expect(clearButton.attr("title")).toBe("Clear the Web Console output");
 
     // Separator
     expect(toolbar.children().eq(1).attr("class")).toBe("devtools-separator");
 
     // Text filter
     const textInput = toolbar.children().eq(2);
-    expect(textInput.attr("class")).toBe("devtools-searchbox has-clear-btn");
+    expect(textInput.attr("class")).toBe("devtools-searchbox");
 
     // Text filter input
     const textFilter = textInput.children().eq(0);
-    expect(textFilter.attr("class")).toBe("devtools-plaininput text-filter");
+    expect(textFilter.attr("class")).toBe("devtools-filterinput text-filter");
     expect(textFilter.attr("placeholder")).toBe("Filter output");
     expect(textFilter.attr("type")).toBe("search");
     expect(textFilter.attr("value")).toBe("");
 
     // Text filter input clear button
     const textFilterClearButton = textInput.children().eq(1);
     expect(textFilterClearButton.attr("class"))
       .toBe("devtools-searchinput-clear clear-button");
@@ -252,17 +252,17 @@ describe("FilterBar component:", () => {
       type: MESSAGES_CLEAR,
     });
   });
 
   it("sets filter text when text is typed", () => {
     const store = setupStore();
 
     const wrapper = mount(Provider({store}, getFilterBar()));
-    wrapper.find(".devtools-plaininput").simulate("input", { target: { value: "a" } });
+    wrapper.find(".devtools-filterinput").simulate("input", { target: { value: "a" } });
     expect(store.getState().filters.text).toBe("a");
   });
 
   it("toggles persist logs when checkbox is clicked", () => {
     const store = setupStore();
 
     expect(getAllUi(store.getState()).persistLogs).toBe(false);
     expect(prefsService.getBoolPref(PREFS.UI.PERSIST), false);