From 74f0c77146f153f2c69d9819f7f0a213ed6041d1 Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Tue, 16 Apr 2019 10:17:24 -0400 Subject: [PATCH] Bug 1544082 - Match the markup and rules toolbar design to the new filter toolbar style. r=mtigley Differential Revision: https://phabricator.services.mozilla.com/D27704 --- devtools/client/inspector/index.xhtml | 12 ++++-- devtools/client/inspector/inspector.js | 6 +++ .../client/inspector/rules/components/Toolbar.js | 1 + devtools/client/themes/inspector.css | 49 ++++++++++++++-------- devtools/client/themes/rules.css | 29 ++++++++----- 5 files changed, 64 insertions(+), 33 deletions(-) diff --git a/devtools/client/inspector/index.xhtml b/devtools/client/inspector/index.xhtml index db3a5ea3785a..592e78b6d531 100644 --- a/devtools/client/inspector/index.xhtml +++ b/devtools/client/inspector/index.xhtml @@ -48,16 +48,19 @@ +
diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js index f9ee4fd56c13..4d881250e16b 100644 --- a/devtools/client/inspector/inspector.js +++ b/devtools/client/inspector/inspector.js @@ -427,6 +427,8 @@ Inspector.prototype = { setupSearchBox: function() { this.searchBox = this.panelDoc.getElementById("inspector-searchbox"); this.searchClearButton = this.panelDoc.getElementById("inspector-searchinput-clear"); + this.searchResultsContainer = + this.panelDoc.getElementById("inspector-searchlabel-container"); this.searchResultsLabel = this.panelDoc.getElementById("inspector-searchlabel"); this.searchBox.addEventListener("focus", () => { @@ -466,6 +468,10 @@ Inspector.prototype = { } else { str = INSPECTOR_L10N.getStr("inspector.searchResultsNone"); } + + this.searchResultsContainer.hidden = false; + } else { + this.searchResultsContainer.hidden = true; } this.searchResultsLabel.textContent = str; diff --git a/devtools/client/inspector/rules/components/Toolbar.js b/devtools/client/inspector/rules/components/Toolbar.js index 8b6f640ffd25..935cbf3d5d7a 100644 --- a/devtools/client/inspector/rules/components/Toolbar.js +++ b/devtools/client/inspector/rules/components/Toolbar.js @@ -89,6 +89,7 @@ class Toolbar extends PureComponent { }, dom.div({ id: "ruleview-toolbar" }, SearchBox({}), + dom.div({ className: "devtools-separator" }), dom.div({ id: "ruleview-command-toolbar" }, dom.button({ id: "ruleview-add-rule-button", diff --git a/devtools/client/themes/inspector.css b/devtools/client/themes/inspector.css index a5d015ae73da..8607228cdbf5 100644 --- a/devtools/client/themes/inspector.css +++ b/devtools/client/themes/inspector.css @@ -69,34 +69,47 @@ window { background-image: url("chrome://devtools/skin/images/open-3-pane.svg"); } -/* Use flex layout for the Inspector toolbar. For now, it's done - specifically for the Inspector toolbar since general rule applied - on .devtools-toolbar breaks breadcrumbs and also toolbars in other - panels (e.g. webconsole, debugger), these are not ready for HTML - layout yet. */ -#inspector-toolbar.devtools-toolbar { +.devtools-toolbar { + background-color: var(--theme-body-background); display: flex; } -#inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer { - flex-grow: 1; - display: inline-block; +.devtools-toolbar .devtools-searchbox { + border: 1px solid transparent; } -/* Add element toolbar button */ -#inspector-element-add-button::before { - background-image: url("chrome://devtools/skin/images/add.svg"); - list-style-image: url("chrome://devtools/skin/images/add.svg"); - -moz-user-focus: normal; +.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; } #inspector-searchlabel { - overflow: hidden; - margin-inline-end: 2px; + padding: 0 3px; } -#inspector-search { - flex: unset; +/* Add element toolbar button */ +#inspector-element-add-button::before { + background-image: url("chrome://devtools/skin/images/add.svg"); + list-style-image: url("chrome://devtools/skin/images/add.svg"); + -moz-user-focus: normal; } /* Eyedropper toolbar button */ diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css index 54f54b8bb18f..12b52208dda5 100644 --- a/devtools/client/themes/rules.css +++ b/devtools/client/themes/rules.css @@ -39,9 +39,9 @@ /* Rule View Toolbar */ #ruleview-toolbar-container { - display: flex; flex-direction: column; height: auto; + padding: 0; } #ruleview-toolbar { @@ -57,6 +57,8 @@ } .ruleview-reveal-panel { + background: var(--rule-header-background-color); + border-top: 1px solid var(--theme-splitter-color); display: flex; overflow: hidden; flex-wrap: wrap; @@ -73,28 +75,33 @@ align-items: center; } +#ruleview-toolbar, +#pseudo-class-panel, +#ruleview-class-panel .classes { + padding: 0 3px; +} + /* Class toggle panel */ -#ruleview-class-panel:not([hidden]) { - /* The class panel can contain 0 to N classes, so we can't hardcode a height here like - we do for the pseudo-class panel. Unfortunately, that means we don't get the height - transition when toggling the panel */ + +#ruleview-class-panel { flex-direction: column; } #ruleview-class-panel .add-class { - margin: 0; - border-width: 0 0 1px 0; - padding: 2px 6px; + 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; -} - -#ruleview-class-panel .classes { max-height: 100px; overflow-y: auto; } -- 2.11.4.GIT