Bug 1296187 - Don't overlap inspector-searchinput-clear with text. r=gl
authorSteve Chung <schung@mozilla.com>
Tue, 30 Aug 2016 18:41:26 +0800
changeset 313144 a1e635fc39e261b45e5799809a051b6b51a10f59
parent 313143 d3d05b94bc1bd2cb443109cd8b5700cefaf41f09
child 313145 62bde80d230d3e1f52d1faaf3769dc5682905525
push id32127
push usercbook@mozilla.com
push dateThu, 08 Sep 2016 10:52:18 +0000
treeherderautoland@d00937cdf44d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1296187
milestone51.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1296187 - Don't overlap inspector-searchinput-clear with text. r=gl MozReview-Commit-ID: HJgOFhgOaAP
devtools/client/inspector/inspector.xul
devtools/client/themes/common.css
--- a/devtools/client/inspector/inspector.xul
+++ b/devtools/client/inspector/inspector.xul
@@ -35,17 +35,17 @@
       <html:div id="inspector-toolbar"
         class="devtools-toolbar"
         nowindowdrag="true">
         <html:button id="inspector-element-add-button"
           title="&inspectorAddNode.label;"
           class="devtools-button" />
         <html:div class="devtools-toolbar-spacer" />
         <html:span id="inspector-searchlabel" />
-        <html:div id="inspector-search" class="devtools-searchbox">
+        <html:div id="inspector-search" class="devtools-searchbox has-clear-btn">
           <html:input id="inspector-searchbox" class="devtools-searchinput"
                       type="search"
                       placeholder="&inspectorSearchHTML.label3;"/>
           <html:button id="inspector-searchinput-clear" class="devtools-searchinput-clear" tabindex="-1"></html:button>
         </html:div>
         <html:button id="inspector-eyedropper-toggle"
                      title="&inspectorEyeDropper.label;"
                      class="devtools-button command-button-invertable" />
@@ -68,17 +68,17 @@
            hidden="true" />
     </vbox>
 
     <!-- Sidebar panel definitions -->
     <html:div xmlns="http://www.w3.org/1999/xhtml" id="tabpanels" style="visibility:collapse">
       <html:div id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel">
         <html:div id="ruleview-toolbar-container" class="devtools-toolbar">
           <html:div id="ruleview-toolbar">
-            <html:div class="devtools-searchbox">
+            <html:div class="devtools-searchbox has-clear-btn">
               <html:input id="ruleview-searchbox"
                           class="devtools-filterinput devtools-rule-searchbox"
                           type="search"
                           placeholder="&filterStylesPlaceholder;"/>
               <html:button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
             </html:div>
             <html:div id="ruleview-command-toolbar">
               <html:button id="ruleview-add-rule-button" title="&addRuleButtonTooltip;" class="devtools-button"></html:button>
@@ -95,17 +95,17 @@
         <html:div id="ruleview-container" class="ruleview">
           <html:div id="ruleview-container-focusable" tabindex="-1">
           </html:div>
         </html:div>
       </html:div>
 
       <html:div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel">
         <html:div id="computedview-toolbar" class="devtools-toolbar">
-          <html:div class="devtools-searchbox">
+          <html:div class="devtools-searchbox has-clear-btn">
             <html:input id="computedview-searchbox"
                         class="devtools-filterinput devtools-rule-searchbox"
                         type="search"
                         placeholder="&filterStylesPlaceholder;"/>
             <html:button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
           </html:div>
           <html:label id="browser-style-checkbox-label" for="browser-style-checkbox">
             <html:input id="browser-style-checkbox"
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -522,16 +522,25 @@ checkbox:-moz-focusring {
   padding-inline-start: 22px;
   padding-inline-end: 4px;
   background-position: 8px center;
   background-size: 11px 11px;
   background-repeat: no-repeat;
   font-size: inherit;
 }
 
+/*
+ * @TODO : has-clear-btn class was added for bug 1296187 and we should remove it
+ *  once we have a standardized search and filter input across the toolboxes.
+ */
+.has-clear-btn > .devtools-searchinput,
+.has-clear-btn > .devtools-filterinput {
+  padding-inline-end: 23px;
+}
+
 .devtools-searchinput {
   background-image: var(--magnifying-glass-image);
 }
 
 .devtools-filterinput {
   background-image: url(images/filter.svg#filterinput);
 }
 
@@ -609,17 +618,16 @@ checkbox:-moz-focusring {
 .devtools-rule-searchbox {
   -moz-box-flex: 1;
   width: 100%;
 }
 
 .devtools-rule-searchbox[filled] {
   background-color: var(--searchbox-background-color);
   border-color: var(--searchbox-border-color);
-  padding-inline-end: 23px;
 }
 
 .devtools-style-searchbox-no-match {
   background-color: var(--searcbox-no-match-background-color) !important;
   border-color: var(--searcbox-no-match-border-color) !important;
 }
 
 .devtools-searchinput-clear {