Bug 575403 - Tweaks to the search box CSS [r=mfinkle]
authorMatt Brubeck <mbrubeck@mozilla.com>
Wed, 20 Oct 2010 15:57:59 -0700
changeset 66887 01ced8dd31aba7d8e4797fe4edc8b6d71b51795b
parent 66886 cf14560d6f88f7e57736e1a6bdce00fa56e9de98
child 66888 a8c3e4d14c03f42233fde45c89b827f7d9b89c80
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs575403
Bug 575403 - Tweaks to the search box CSS [r=mfinkle]
mobile/chrome/content/browser.xul
mobile/themes/core/browser.css
mobile/themes/core/platform.css
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -285,18 +285,18 @@
             </vbox>
           </vbox>
         </scrollbox>
 
         <!-- popup for content navigator helper -->
         <vbox id="content-navigator" class="window-width" top="0" spacer="content-navigator-spacer">
           <arrowscrollbox id="form-helper-autofill" collapsed="true" align="center" flex="1" orient="horizontal"
                           onclick="FormHelperUI.doAutoComplete(event.target);"/>
-          <textbox id="select-helper-textbox" class="content-navigator-item" oncommand="SelectHelperUI.filter(this.value)" type="search" flex="1" hidden="true"/>
-          <textbox id="find-helper-textbox" class="content-navigator-item" oncommand="FindHelperUI.search(this.value)" oninput="FindHelperUI.updateCommands(this.value);" type="search" flex="1"/>
+          <textbox id="select-helper-textbox" class="search-bar content-navigator-item" oncommand="SelectHelperUI.filter(this.value)" type="search" flex="1" hidden="true"/>
+          <textbox id="find-helper-textbox" class="search-bar content-navigator-item" oncommand="FindHelperUI.search(this.value)" oninput="FindHelperUI.updateCommands(this.value);" type="search" flex="1"/>
         </vbox>
       </stack>
 
       <!-- Right toolbar -->
       <vbox class="panel-dark">
         <!-- Because of the stack + fixed position of the urlbar when it is in
              locked mode the event on the top-right part of the urlbar are
              swallow by this spacer, but not with the mousethrough attribute
@@ -392,17 +392,17 @@
                 <richlistitem id="addons-local" class="section-header" align="center" nohighlight="true">
                   <label value="&addonsLocal.label;" flex="1"/>
                   <spacer flex="1"/>
                   <button id="addons-update-all" label="&addonsUpdate.label;" hidden="true"
                           oncommand="ExtensionsView.updateAll();"/>
                 </richlistitem>
                 <richlistitem id="addons-repo" class="section-header" nohighlight="true">
                   <label value="&addonsRepo.label;" flex="1"/>
-                  <textbox id="addons-search-text" placeholder="&addonsSearch2.emptytext;" type="search" searchbutton="false"
+                  <textbox id="addons-search-text" class="search-bar" placeholder="&addonsSearch2.emptytext;" type="search" searchbutton="false"
                            oncommand="ExtensionsView.getAddonsFromRepo(this.value);" onkeypress="if (event.keyCode == event.DOM_VK_RETURN) this.blur();"/>
                 </richlistitem>
               </richlistbox>
             </notificationbox>
           </vbox>
 
           <vbox id="downloads-container" flex="1">
             <richlistbox id="downloads-list" flex="1" onselect="this.ensureSelectedElementIsVisible()">
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -127,18 +127,16 @@ toolbarbutton.urlbar-button {
 
 #urlbar-container[mode="edit"] > #identity-box {
   visibility: collapse;
 }
 
 #urlbar-container[mode="edit"] > #urlbar-edit {
   border-left: none;
   border-right: 1px solid rgba(0,0,0,0.5);
-  background-color: #f9f9f9;
-  background: url("chrome://browser/skin/images/textbox-bg.png") top left repeat-x;
 }
 
 #urlbar-container[mode="edit"] > #urlbar-edit:-moz-locale-dir(ltr) {
   -moz-border-radius-topleft: 8px;
   -moz-border-radius-bottomleft: 8px;
 }
 
 #urlbar-container[mode="edit"] > #urlbar-edit:-moz-locale-dir(rtl) {
@@ -224,18 +222,20 @@ toolbarbutton.urlbar-button {
   padding: 0 !important;
   border-radius: 0;
   border: 0 solid transparent;
   border-left: 1px solid white;
   border-right: 1px solid white;
   background: transparent;
 }
 
-#urlbar-edit:not([open]):hover:active {
-  background-color: #8db8d8;
+#urlbar-edit[open],
+#urlbar-edit:hover:active {
+  background-color: #f9f9f9;
+  background: url("chrome://browser/skin/images/textbox-bg.png") top left repeat-x;
 }
 
 #urlbar-edit > hbox > .textbox-input-box {
   margin: 0;
 }
 
 #urlbar-edit > hbox > hbox > .textbox-input {
   min-height: 60px;
@@ -1177,22 +1177,16 @@ pageaction:not([image]) > hbox >.pageact
 
 /* navigator popup -------------------------------------------------------------- */
 #content-navigator,
 #content-navigator > #select-container > #select-spacer,
 #content-navigator > #select-container > #select-container-inner > #select-buttons {
   display: none;
 }
 
-#find-helper-textbox {
-  border: 2px solid transparent;
-  background-color: #f9f9f9;
-  background: url("chrome://browser/skin/images/textbox-bg.png") top left repeat-x;
-}
-
 #find-helper-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
   background: rgb(255,200,200);
 }
 
 #content-navigator[type="find"],
 #content-navigator[type="form"] {
   display: -moz-box;
 }
--- a/mobile/themes/core/platform.css
+++ b/mobile/themes/core/platform.css
@@ -78,16 +78,22 @@ textbox:not([type="number"]) {
   -moz-border-bottom-colors: -moz-initial;
   -moz-border-left-colors: -moz-initial;
 }
 
 textbox[isempty="true"] {
   color: gray;
 }
 
+textbox.search-bar {
+  border: 2px solid transparent;
+  background-color: #f9f9f9;
+  background: url("chrome://browser/skin/images/textbox-bg.png") top left repeat-x;
+}
+
 /* sidebars spacer --------------------------------------------------------- */
 .sidebar-spacer {
   background-color: #767973;
 }
 
 /* dialog popups ----------------------------------------------------------- */
 .dialog-dark {
   color: #fff;