Bug 1309577 - Make DOM panel use shared searchbox component. r=Honza

MozReview-Commit-ID: 99L9oBeLW4s

--HG--
extra : rebase_source : 3fe175e4c72032b93af7df6d6b7e1cbdd0aeea32

devtools/client/dom/content/components/main-toolbar.js

@@ -14,7 +14,7 @@ const { createFactories } = require("devtools/client/shared/components/reps/rep-
 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");
@@ -52,7 +52,10 @@ var MainToolbar = React.createClass({
           l10n.getStr("dom.refresh")
         ),
         SearchBox({
-          onSearch: this.onSearch
+          delay: 250,
+          onChange: this.onSearch,
+          placeholder: l10n.getStr("dom.filterDOMPanel"),
+          type: "filter"
         })
       )
     );

devtools/client/dom/content/components/moz.build

@@ -6,8 +6,5 @@
 DevToolsModules(
     'dom-tree.js',
     'main-frame.js',
-    'main-toolbar.js',
+    'main-toolbar.js'
-    'search-box.css',
-    'search-box.js',
-    'search.svg',
 )

devtools/client/dom/content/components/search-box.css

@@ -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;
-}

devtools/client/dom/content/components/search-box.js

@@ -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;

devtools/client/dom/content/components/search.svg

@@ -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>

devtools/client/dom/content/dom-view.css

@@ -96,6 +96,16 @@ body {
   font-weight: bold;
 }
 
+/******************************************************************************/
+/* Search box */
+.devtools-searchbox {
+  float: right;
+}
+
+.devtools-searchbox:dir(rtl) {
+  float: left;
+}
+
 /******************************************************************************/
 /* Theme Dark */
 

devtools/client/themes/common.css

@@ -585,7 +585,7 @@ checkbox:-moz-focusring {
 
 /* Searchbox is a div container element for a search input element */
 .devtools-searchbox {
-  display: flex;
+  display: inline-flex;
   flex: 1;
   height: 23px;
   position: relative;
@@ -598,6 +598,7 @@ checkbox:-moz-focusring {
 .devtools-searchbox > .devtools-filterinput {
   margin-left: 0;
   margin-right: 0;
+  width: 100%;
 }
 
 .devtools-textinput:focus,
@@ -633,7 +634,8 @@ checkbox:-moz-focusring {
   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);
 }