Bug 1402315 - Part 1: Implement the new photon style for the search/filter input. r=gl
MozReview-Commit-ID: 2Sy9OpgUVCg
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -85,16 +85,17 @@
<div id="ruleview-toolbar">
<div class="devtools-searchbox has-clear-btn">
<input id="ruleview-searchbox"
class="devtools-filterinput devtools-rule-searchbox"
type="search"
data-localization="placeholder=inspector.filterStyles.placeholder"/>
<button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
</div>
+ <div class="devtools-separator"></div>
<div id="ruleview-command-toolbar">
<button id="ruleview-add-rule-button" data-localization="title=inspector.addRule.tooltip" class="devtools-button"></button>
<button id="pseudo-class-panel-toggle" data-localization="title=inspector.togglePseudo.tooltip" class="devtools-button"></button>
<button id="class-panel-toggle" data-localization="title=inspector.classPanel.toggleClass.tooltip" class="devtools-button"></button>
</div>
</div>
<div id="pseudo-class-panel" class="ruleview-reveal-panel" hidden="true">
<label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</label>
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -387,27 +387,19 @@ checkbox:-moz-focusring {
/* Text input */
.devtools-textinput,
.devtools-searchinput,
.devtools-filterinput {
-moz-appearance: none;
margin: 1px 3px;
- border: 1px solid;
- border-radius: 2px;
padding: 4px 6px;
- border-color: var(--theme-splitter-color);
font: message-box;
-}
-
-:root[platform="mac"] .devtools-textinput,
-:root[platform="mac"] .devtools-searchinput,
-:root[platform="mac"] .devtools-filterinput {
- border-radius: 20px;
+ border: none;
}
.devtools-searchinput,
.devtools-filterinput {
padding: 0;
padding-inline-start: 22px;
padding-inline-end: 4px;
background-position: 8px center;
@@ -460,17 +452,16 @@ checkbox:-moz-focusring {
}
/* Searchbox is a div container element for a search input element */
.devtools-searchbox {
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;
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -43,20 +43,16 @@
flex-direction: column;
height: auto;
}
#ruleview-toolbar {
display: flex;
}
-#ruleview-toolbar > .devtools-searchbox:first-child {
- padding-inline-start: 0px;
-}
-
#ruleview-command-toolbar {
display: flex;
}
.ruleview-reveal-panel {
display: flex;
overflow: hidden;
}