--- a/devtools/client/dom/content/components/main-toolbar.js
+++ b/devtools/client/dom/content/components/main-toolbar.js
@@ -9,17 +9,17 @@
 const React = require("devtools/client/shared/vendor/react");
 const { l10n } = require("../utils");
 
 // Reps
 const { createFactories } = require("devtools/client/shared/components/reps/rep-utils");
 const { Toolbar, ToolbarButton } = createFactories(require("devtools/client/jsonview/components/reps/toolbar"));
 
 // DOM Panel
-const SearchBox = React.createFactory(require("../components/search-box"));
+const SearchBox = React.createFactory(require("devtools/client/shared/components/search-box"));
 
 // Actions
 const { fetchProperties } = require("../actions/grips");
 const { setVisibilityFilter } = require("../actions/filter");
 
 // Shortcuts
 const PropTypes = React.PropTypes;
 
@@ -47,17 +47,20 @@ var MainToolbar = React.createClass({
     return (
       Toolbar({},
         ToolbarButton({
           className: "btn refresh",
           onClick: this.onRefresh},
           l10n.getStr("dom.refresh")
         ),
         SearchBox({
-          onSearch: this.onSearch
+          delay: 250,
+          onChange: this.onSearch,
+          placeholder: l10n.getStr("dom.filterDOMPanel"),
+          type: "filter"
         })
       )
     );
   }
 });
 
 // Exports from this module
 module.exports = MainToolbar;

--- a/devtools/client/dom/content/components/moz.build
+++ b/devtools/client/dom/content/components/moz.build
@@ -1,13 +1,10 @@
 # vim: set filetype=python:
 # 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/.
 
 DevToolsModules(
     'dom-tree.js',
     'main-frame.js',
-    'main-toolbar.js',
-    'search-box.css',
-    'search-box.js',
-    'search.svg',
+    'main-toolbar.js'
 )

deleted file mode 100644
--- a/devtools/client/dom/content/components/search-box.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* 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/. */
-
-/******************************************************************************/
-/* Search Box */
-.dom-searchbox {
-  float: right;
-}
-
-.dom-searchbox:dir(rtl) {
-  float: left;
-}

deleted file mode 100644
--- a/devtools/client/dom/content/components/search-box.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
-/* 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";
-
-const React = require("devtools/client/shared/vendor/react");
-const { l10n } = require("../utils");
-
-// For smooth incremental searching (in case the user is typing quickly).
-const searchDelay = 250;
-
-// Shortcuts
-const { input } = React.DOM;
-const PropTypes = React.PropTypes;
-
-/**
- * This object represents a search box located at the
- * top right corner of the application.
- */
-var SearchBox = React.createClass({
-  displayName: "SearchBox",
-
-  propTypes: {
-    onSearch: PropTypes.func,
-  },
-
-  componentWillUnmount: function () {
-    // Clean up an existing timeout.
-    if (this.searchTimeout) {
-      window.clearTimeout(this.searchTimeout);
-    }
-  },
-
-  onSearch: function (event) {
-    let searchBox = event.target;
-
-    // Clean up an existing timeout before creating a new one.
-    if (this.searchTimeout) {
-      window.clearTimeout(this.searchTimeout);
-    }
-
-    // Execute the search after a timeout. It makes the UX
-    // smoother if the user is typing quickly.
-    this.searchTimeout = window.setTimeout(() => {
-      this.searchTimeout = null;
-      this.props.onSearch(searchBox.value);
-    }, searchDelay);
-  },
-
-  render: function () {
-    return (
-      input({
-        className: "dom-searchbox devtools-filterinput",
-        placeholder: l10n.getStr("dom.filterDOMPanel"),
-        onChange: this.onSearch
-      })
-    );
-  }
-});
-
-// Exports from this module
-module.exports = SearchBox;

deleted file mode 100644
--- a/devtools/client/dom/content/components/search.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <linearGradient id="a">
-      <stop offset="0" stop-color="#427dc2"/>
-      <stop offset="1" stop-color="#5e9fce"/>
-    </linearGradient>
-    <linearGradient id="b">
-      <stop offset="0" stop-color="#2f5d93"/>
-      <stop offset="1" stop-color="#3a87bd"/>
-    </linearGradient>
-    <filter id="c" width="1.239" height="1.241" x="-.12" y="-.12" color-interpolation-filters="sRGB">
-      <feGaussianBlur stdDeviation=".637"/>
-    </filter>
-    <linearGradient id="d" x1="4.094" x2="4.094" y1="13.423" y2="2.743" xlink:href="#a" gradientUnits="userSpaceOnUse"/>
-    <linearGradient id="e" x1="8.711" x2="8.711" y1="13.58" y2="2.566" xlink:href="#b" gradientUnits="userSpaceOnUse"/>
-  </defs>
-  <path fill="#fff" stroke="#fff" stroke-width="1.5" d="M10.14 1.656c-2.35 0-4.25 1.9-4.25 4.25 0 .752.19 1.45.532 2.063L1.61 12.78l1.562 1.564 4.78-4.78c.64.384 1.387.592 2.19.592 2.35 0 4.25-1.9 4.25-4.25s-1.9-4.25-4.25-4.25zm0 1.532c1.504 0 2.72 1.214 2.72 2.718s-1.216 2.72-2.72 2.72c-1.503 0-2.718-1.216-2.718-2.72 0-1.504 1.215-2.718 2.72-2.718z" stroke-linejoin="round" filter="url(#c)"/>
-  <path fill="url(#d)" stroke="url(#e)" stroke-width=".6" d="M10 2C7.79 2 6 3.79 6 6c0 .828.256 1.612.688 2.25l-4.875 4.875 1.062 1.063L7.75 9.31C8.388 9.745 9.172 10 10 10c2.21 0 4-1.79 4-4s-1.79-4-4-4zm0 1c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3z" stroke-linejoin="round"/>
-</svg>

--- a/devtools/client/dom/content/dom-view.css
+++ b/devtools/client/dom/content/dom-view.css
@@ -92,16 +92,26 @@ body {
 }
 
 .treeTable .ordinalLabel {
   color: SlateBlue;
   font-weight: bold;
 }
 
 /******************************************************************************/
+/* Search box */
+.devtools-searchbox {
+  float: right;
+}
+
+.devtools-searchbox:dir(rtl) {
+  float: left;
+}
+
+/******************************************************************************/
 /* Theme Dark */
 
 .theme-dark .treeTable > tbody > tr > td {
   border-bottom: none;
 }
 
 .theme-dark body {
   background-color: var(--theme-body-background);

--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -580,29 +580,30 @@ checkbox:-moz-focusring {
 }
 
 .theme-dark .devtools-plaininput {
   color: var(--theme-highlight-gray);
 }
 
 /* Searchbox is a div container element for a search input element */
 .devtools-searchbox {
-  display: flex;
+  display: inline-flex;
   flex: 1;
   height: 23px;
   position: relative;
   padding: 0 3px;
 }
 
 /* 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%;
 }
 
 .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;
@@ -628,17 +629,18 @@ checkbox:-moz-focusring {
   padding-inline-end: 0;
 }
 
 .devtools-rule-searchbox {
   -moz-box-flex: 1;
   width: 100%;
 }
 
-.devtools-rule-searchbox[filled] {
+.devtools-searchinput:-moz-any([filled],.filled),
+.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(--searcbox-no-match-background-color) !important;
   border-color: var(--searcbox-no-match-border-color) !important;
 }