зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1309577 - Make DOM panel use shared searchbox component. r=Honza
MozReview-Commit-ID: 99L9oBeLW4s --HG-- extra : rebase_source : 3fe175e4c72032b93af7df6d6b7e1cbdd0aeea32
This commit is contained in:
Tim Nguyen
Родитель
b2ea88c324
Коммит
210c059b2e
|
|
@ -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"
|
||||
})
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,8 +6,5 @@
|
|||
DevToolsModules(
|
||||
'dom-tree.js',
|
||||
'main-frame.js',
|
||||
'main-toolbar.js',
|
||||
'search-box.css',
|
||||
'search-box.js',
|
||||
'search.svg',
|
||||
'main-toolbar.js'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
До Ширина: | Высота: | Размер: 1.7 KiB |
|
|
@ -96,6 +96,16 @@ body {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
/* Search box */
|
||||
.devtools-searchbox {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.devtools-searchbox:dir(rtl) {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
/* Theme Dark */
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче