From 140ea4f78b8d748d200203138174badaec9d5f4c Mon Sep 17 00:00:00 2001 From: Iris Hsiao Date: Fri, 12 May 2017 10:13:19 +0800 Subject: [PATCH] Backed out changeset d5d0e32f5904 (bug 1354504) for devtool perma-failing in browser_net_filter-flags.js. a=backout --HG-- extra : amend_source : 150de2fdee4a5695703ad5937a5c1131929643c1 --- .../netmonitor/src/components/toolbar.js | 3 +- devtools/client/netmonitor/src/constants.js | 14 -- .../netmonitor/src/utils/filter-text-utils.js | 17 ++- devtools/client/netmonitor/webpack.config.js | 1 - .../shared/components/autocomplete-popup.js | 122 ------------------ devtools/client/shared/components/moz.build | 1 - .../client/shared/components/search-box.js | 87 +------------ devtools/client/themes/common.css | 88 +++++++------ 8 files changed, 70 insertions(+), 263 deletions(-) delete mode 100644 devtools/client/shared/components/autocomplete-popup.js diff --git a/devtools/client/netmonitor/src/components/toolbar.js b/devtools/client/netmonitor/src/components/toolbar.js index f3148d141b9f..343b34d563e1 100644 --- a/devtools/client/netmonitor/src/components/toolbar.js +++ b/devtools/client/netmonitor/src/components/toolbar.js @@ -12,7 +12,7 @@ const { } = require("devtools/client/shared/vendor/react"); const { connect } = require("devtools/client/shared/vendor/react-redux"); const Actions = require("../actions/index"); -const { FILTER_SEARCH_DELAY, FILTER_FLAGS } = require("../constants"); +const { FILTER_SEARCH_DELAY } = require("../constants"); const { getDisplayedRequestsSummary, getRequestFilterTypes, @@ -109,7 +109,6 @@ const Toolbar = createClass({ placeholder: SEARCH_PLACE_HOLDER, type: "filter", onChange: setRequestFilterText, - autocompleteList: FILTER_FLAGS.map((item) => `${item}:`), }), button({ className: toggleButtonClassName.join(" "), diff --git a/devtools/client/netmonitor/src/constants.js b/devtools/client/netmonitor/src/constants.js index d6e069371607..b74f29f58ac5 100644 --- a/devtools/client/netmonitor/src/constants.js +++ b/devtools/client/netmonitor/src/constants.js @@ -158,19 +158,6 @@ const HEADERS = [ } ]; -const HEADER_FILTERS = HEADERS - .filter(h => h.canFilter) - .map(h => h.filterKey || h.name); - -const FILTER_FLAGS = [ - ...HEADER_FILTERS, - "mime-type", - "larger-than", - "is", - "has-response-header", - "regexp", -]; - const REQUESTS_WATERFALL = { BACKGROUND_TICKS_MULTIPLE: 5, // ms BACKGROUND_TICKS_SCALES: 3, @@ -193,7 +180,6 @@ const general = { EVENTS, FILTER_SEARCH_DELAY: 200, HEADERS, - FILTER_FLAGS, SOURCE_EDITOR_SYNTAX_HIGHLIGHT_MAX_SIZE: 51200, // 50 KB in bytes REQUESTS_WATERFALL, }; diff --git a/devtools/client/netmonitor/src/utils/filter-text-utils.js b/devtools/client/netmonitor/src/utils/filter-text-utils.js index 7a0972b53592..280e5d085359 100644 --- a/devtools/client/netmonitor/src/utils/filter-text-utils.js +++ b/devtools/client/netmonitor/src/utils/filter-text-utils.js @@ -30,8 +30,23 @@ "use strict"; -const { FILTER_FLAGS } = require("../constants"); +const { HEADERS } = require("../constants"); const { getFormattedIPAndPort } = require("./format-utils"); +const HEADER_FILTERS = HEADERS + .filter(h => h.canFilter) + .map(h => h.filterKey || h.name); + +const FILTER_FLAGS = [ + ...HEADER_FILTERS, + "set-cookie-domain", + "set-cookie-name", + "set-cookie-value", + "mime-type", + "larger-than", + "is", + "has-response-header", + "regexp", +]; /* The function `parseFilters` is from: diff --git a/devtools/client/netmonitor/webpack.config.js b/devtools/client/netmonitor/webpack.config.js index f0c7fb0dd03a..059c249fa2de 100644 --- a/devtools/client/netmonitor/webpack.config.js +++ b/devtools/client/netmonitor/webpack.config.js @@ -42,7 +42,6 @@ let webpackConfig = { "devtools/client/framework/menu": "devtools-modules/src/menu", "devtools/client/framework/menu-item": path.join(__dirname, "../../client/framework/menu-item"), "devtools/client/locales": path.join(__dirname, "../../client/locales/en-US"), - "devtools/client/shared/components/autocomplete-popup": path.join(__dirname, "../../client/shared/components/autocomplete-popup"), "devtools/client/shared/components/reps/reps": path.join(__dirname, "../../client/shared/components/reps/reps"), "devtools/client/shared/components/search-box": path.join(__dirname, "../../client/shared/components/search-box"), "devtools/client/shared/components/splitter/draggable": path.join(__dirname, "../../client/shared/components/splitter/draggable"), diff --git a/devtools/client/shared/components/autocomplete-popup.js b/devtools/client/shared/components/autocomplete-popup.js deleted file mode 100644 index 17e6b03541e4..000000000000 --- a/devtools/client/shared/components/autocomplete-popup.js +++ /dev/null @@ -1,122 +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/. */ - -"use strict"; - -const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react"); - -module.exports = createClass({ - displayName: "AutocompletePopup", - - propTypes: { - list: PropTypes.array.isRequired, - filter: PropTypes.string.isRequired, - onItemSelected: PropTypes.func.isRequired, - }, - - getInitialState() { - return this.computeState(this.props); - }, - - componentWillReceiveProps(nextProps) { - if (this.props.filter === nextProps.filter) { - return; - } - this.setState(this.computeState(nextProps)); - }, - - componentDidUpdate() { - if (this.refs.selected) { - this.refs.selected.scrollIntoView(false); - } - }, - - computeState({ filter, list }) { - let filteredList = list.filter((item) => { - return item.toLowerCase().startsWith(filter.toLowerCase()) - && item.toLowerCase() !== filter.toLowerCase(); - }).sort(); - let selectedIndex = filteredList.length == 1 ? 0 : -1; - - return { filteredList, selectedIndex }; - }, - - /** - * Use this method to select the top-most item - * This method is public, called outside of the autocomplete-popup component. - */ - jumpToTop() { - this.setState({ selectedIndex: 0 }); - }, - - /** - * Use this method to select the bottom-most item - * This method is public. - */ - jumpToBottom() { - let selectedIndex = this.state.filteredList.length - 1; - this.setState({ selectedIndex }); - }, - - /** - * Increment the selected index with the provided increment value. Will cycle to the - * beginning/end of the list if the index exceeds the list boundaries. - * This method is public. - * - * @param {number} increment - No. of hops in the direction - */ - jumpBy(increment = 1) { - let { filteredList, selectedIndex } = this.state; - let nextIndex = selectedIndex + increment; - if (increment > 0) { - // Positive cycling - nextIndex = nextIndex > filteredList.length - 1 ? 0 : nextIndex; - } else if (increment < 0) { - // Inverse cycling - nextIndex = nextIndex < 0 ? filteredList.length - 1 : nextIndex; - } - this.setState({selectedIndex: nextIndex}); - }, - - /** - * Submit the currently selected item to the onItemSelected callback - * This method is public. - */ - select() { - if (this.refs.selected) { - this.props.onItemSelected(this.refs.selected.textContent); - } - }, - - onMouseDown(e) { - e.preventDefault(); - this.setState({ selectedIndex: Number(e.target.dataset.index) }, this.select); - }, - - render() { - let { filteredList } = this.state; - - return filteredList.length > 0 && dom.div( - { className: "devtools-autocomplete-popup devtools-monospace" }, - dom.ul( - { className: "devtools-autocomplete-listbox" }, - filteredList.map((item, i) => { - let isSelected = this.state.selectedIndex == i; - let itemClassList = ["autocomplete-item"]; - - if (isSelected) { - itemClassList.push("autocomplete-selected"); - } - return dom.li({ - key: i, - "data-index": i, - className: itemClassList.join(" "), - ref: isSelected ? "selected" : null, - onMouseDown: this.onMouseDown, - }, item); - }) - ) - ); - } -}); diff --git a/devtools/client/shared/components/moz.build b/devtools/client/shared/components/moz.build index c19c20153fd3..0d67e90b553a 100644 --- a/devtools/client/shared/components/moz.build +++ b/devtools/client/shared/components/moz.build @@ -12,7 +12,6 @@ DIRS += [ ] DevToolsModules( - 'autocomplete-popup.js', 'frame.js', 'h-split-box.js', 'notification-box.css', diff --git a/devtools/client/shared/components/search-box.js b/devtools/client/shared/components/search-box.js index 3e085707aaf8..159865e9fc8b 100644 --- a/devtools/client/shared/components/search-box.js +++ b/devtools/client/shared/components/search-box.js @@ -6,9 +6,8 @@ "use strict"; -const { DOM: dom, createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react"); +const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react"); const KeyShortcuts = require("devtools/client/shared/key-shortcuts"); -const AutocompletePopup = createFactory(require("devtools/client/shared/components/autocomplete-popup")); /** * A generic search box component for use across devtools @@ -21,20 +20,12 @@ module.exports = createClass({ keyShortcut: PropTypes.string, onChange: PropTypes.func, placeholder: PropTypes.string, - type: PropTypes.string, - autocompleteList: PropTypes.array, - }, - - getDefaultProps() { - return { - autocompleteList: [], - }; + type: PropTypes.string }, getInitialState() { return { - value: "", - focused: false, + value: "" }; }, @@ -65,9 +56,7 @@ module.exports = createClass({ onChange() { if (this.state.value !== this.refs.input.value) { - this.setState({ - value: this.refs.input.value, - }); + this.setState({ value: this.refs.input.value }); } if (!this.props.delay) { @@ -93,59 +82,8 @@ module.exports = createClass({ this.onChange(); }, - onFocus() { - this.setState({ focused: true }); - }, - - onBlur() { - this.setState({ focused: false }); - }, - - onKeyDown(e) { - let { autocompleteList } = this.props; - let { autocomplete } = this.refs; - - if (autocompleteList.length == 0) { - return; - } - - switch (e.key) { - case "ArrowDown": - autocomplete.jumpBy(1); - break; - case "ArrowUp": - autocomplete.jumpBy(-1); - break; - case "PageDown": - autocomplete.jumpBy(5); - break; - case "PageUp": - autocomplete.jumpBy(-5); - break; - case "Enter": - case "Tab": - e.preventDefault(); - autocomplete.select(); - break; - case "Escape": - e.preventDefault(); - this.onBlur(); - break; - case "Home": - autocomplete.jumpToTop(); - break; - case "End": - autocomplete.jumpToBottom(); - break; - } - }, - render() { - let { - type = "search", - placeholder, - autocompleteList - } = this.props; + let { type = "search", placeholder } = this.props; let { value } = this.state; let divClassList = ["devtools-searchbox", "has-clear-btn"]; let inputClassList = [`devtools-${type}input`]; @@ -158,27 +96,14 @@ module.exports = createClass({ dom.input({ className: inputClassList.join(" "), onChange: this.onChange, - onFocus: this.onFocus, - onBlur: this.onBlur, - onKeyDown: this.onKeyDown, placeholder, ref: "input", - value, + value }), dom.button({ className: "devtools-searchinput-clear", hidden: value == "", onClick: this.onClearButtonClick - }), - autocompleteList.length > 0 && this.state.focused && - AutocompletePopup({ - list: autocompleteList, - filter: value, - ref: "autocomplete", - onItemSelected: (itemValue) => { - this.setState({ value: itemValue }); - this.onChange(); - } }) ); } diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css index 8f9550156532..1d9d05ef17bb 100644 --- a/devtools/client/themes/common.css +++ b/devtools/client/themes/common.css @@ -82,13 +82,35 @@ html|button, html|select { background-color: transparent; border-radius: 4px; padding: 1px 0; - cursor: default; +} + +.devtools-autocomplete-listbox .autocomplete-selected { + background-color: rgba(0,0,0,0.2); +} + +.devtools-autocomplete-listbox.dark-theme .autocomplete-selected, +.devtools-autocomplete-listbox.dark-theme .autocomplete-item:hover { + background-color: rgba(0,0,0,0.5); +} + +.devtools-autocomplete-listbox.dark-theme .autocomplete-selected > .autocomplete-value, +.devtools-autocomplete-listbox:focus.dark-theme .autocomplete-selected > .initial-value { + color: hsl(208,100%,60%); +} + +.devtools-autocomplete-listbox.dark-theme .autocomplete-selected > span { + color: #eee; +} + +.devtools-autocomplete-listbox.dark-theme .autocomplete-item > span { + color: #ccc; } .devtools-autocomplete-listbox .autocomplete-item > .initial-value, .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value { margin: 0; padding: 0; + cursor: default; } .devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count { @@ -98,60 +120,52 @@ html|button, html|select { /* Rest of the dark and light theme */ .devtools-autocomplete-popup, -.CodeMirror-hints, -.CodeMirror-Tern-tooltip { - border: 1px solid hsl(210,24%,90%); - background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%)); - box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset; -} - -.theme-dark .devtools-autocomplete-popup, .theme-dark .CodeMirror-hints, .theme-dark .CodeMirror-Tern-tooltip { border: 1px solid hsl(210,11%,10%); background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%)); - box-shadow: none; +} + +.devtools-autocomplete-popup.light-theme, +.light-theme .CodeMirror-hints, +.light-theme .CodeMirror-Tern-tooltip { + border: 1px solid hsl(210,24%,90%); + background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%)); +} + +.devtools-autocomplete-popup.light-theme { + box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset; } .theme-firebug .devtools-autocomplete-popup { border-color: var(--theme-splitter-color); border-radius: 5px; font-size: var(--theme-autompletion-font-size); +} + +.devtools-autocomplete-popup.firebug-theme { background: var(--theme-body-background); } -.devtools-autocomplete-listbox .autocomplete-selected, -.devtools-autocomplete-listbox .autocomplete-item:hover { +.devtools-autocomplete-listbox.firebug-theme .autocomplete-selected, +.devtools-autocomplete-listbox.firebug-theme .autocomplete-item:hover, +.devtools-autocomplete-listbox.light-theme .autocomplete-selected, +.devtools-autocomplete-listbox.light-theme .autocomplete-item:hover { background-color: rgba(128,128,128,0.3); } -.theme-dark .devtools-autocomplete-listbox .autocomplete-selected, -.theme-dark .devtools-autocomplete-listbox .autocomplete-item:hover { - background-color: rgba(0,0,0,0.5); -} - -.devtools-autocomplete-listbox .autocomplete-selected > .autocomplete-value, -.devtools-autocomplete-listbox:focus .autocomplete-selected > .initial-value { +.devtools-autocomplete-listbox.firebug-theme .autocomplete-selected > .autocomplete-value, +.devtools-autocomplete-listbox:focus.firebug-theme .autocomplete-selected > .initial-value, +.devtools-autocomplete-listbox.light-theme .autocomplete-selected > .autocomplete-value, +.devtools-autocomplete-listbox:focus.light-theme .autocomplete-selected > .initial-value { color: #222; } -.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > .autocomplete-value, -.theme-dark .devtools-autocomplete-listbox:focus .autocomplete-selected > .initial-value { - color: hsl(208,100%,60%); -} - -.devtools-autocomplete-listbox .autocomplete-item > span { +.devtools-autocomplete-listbox.firebug-theme .autocomplete-item > span, +.devtools-autocomplete-listbox.light-theme .autocomplete-item > span { color: #666; } -.theme-dark .devtools-autocomplete-listbox .autocomplete-item > span { - color: #ccc; -} - -.theme-dark .devtools-autocomplete-listbox .autocomplete-selected > span { - color: #eee; -} - /* Autocomplete list clone used for accessibility. */ .devtools-autocomplete-list-aria-clone { @@ -479,14 +493,6 @@ checkbox:-moz-focusring { outline: none; } -.devtools-searchbox .devtools-autocomplete-popup { - position: absolute; - top: 100%; - width: 100%; - line-height: initial !important; - z-index: 999; -} - /* 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,