Bug 482105 - Replace searchbar design images with CSS borders, backgrounds and box shadows. r=mstange, r=rflint

browser/components/search/content/search.xml

@@ -76,20 +76,22 @@
                    showcommentcolumn="true"
                    tabscrolling="true"
                    xbl:inherits="disabled,disableautocomplete,searchengine,src,newlines">
-        <xul:button class="searchbar-engine-button"
-                    type="menu"
-                    anonid="searchbar-engine-button">
-          <xul:image class="searchbar-engine-image" xbl:inherits="src"/>
-          <xul:image class="searchbar-dropmarker-image"/>
-          <xul:menupopup class="searchbar-popup"
-                         anonid="searchbar-popup">
-            <xul:menuseparator/>
-            <xul:menuitem class="open-engine-manager"
-                          anonid="open-engine-manager"
-                          label="&cmd_engineManager.label;"
-                          oncommand="openManager(event);"/>
-          </xul:menupopup>
-        </xul:button>
+        <xul:box>
+          <xul:button class="searchbar-engine-button"
+                      type="menu"
+                      anonid="searchbar-engine-button">
+            <xul:image class="searchbar-engine-image" xbl:inherits="src"/>
+            <xul:image class="searchbar-dropmarker-image"/>
+            <xul:menupopup class="searchbar-popup"
+                           anonid="searchbar-popup">
+              <xul:menuseparator/>
+              <xul:menuitem class="open-engine-manager"
+                            anonid="open-engine-manager"
+                            label="&cmd_engineManager.label;"
+                            oncommand="openManager(event);"/>
+            </xul:menupopup>
+          </xul:button>
+        </xul:box>
         <xul:hbox class="search-go-container">
           <xul:image class="search-go-button"
                      anonid="search-go-button"

browser/themes/gnomestripe/browser/searchbar.css

@@ -5,6 +5,10 @@
   background-color: -moz-field;
 }
 
+.autocomplete-textbox-container {
+  -moz-box-align: stretch;
+}
+
 .textbox-input-box {
   margin: 0;
 }

browser/themes/pinstripe/browser/browser.css

@@ -709,8 +709,12 @@ toolbar[iconsize="small"] #unified-back-forward-button > #back-forward-dropmarke
 /* ::::: nav-bar-inner ::::: */
 
 #urlbar {
-  direction: ltr !important;
-  font: icon !important;
+  direction: ltr;
+}
+
+.searchbar-textbox,
+#urlbar {
+  font: icon;
   width: 7em;
   min-width: 7em;
   -moz-appearance: none;
@@ -728,6 +732,7 @@ toolbar[iconsize="small"] #unified-back-forward-button > #back-forward-dropmarke
   -moz-padding-end: 6px;
 }
 
+.searchbar-textbox[focused="true"],
 #urlbar[focused="true"] {
   -moz-border-top-colors: rgba(0,0,0,.3);
   -moz-border-right-colors: rgba(0,0,0,.2);
@@ -737,6 +742,7 @@ toolbar[iconsize="small"] #unified-back-forward-button > #back-forward-dropmarke
                    @focusRingShadow@;
 }
 
+.searchbar-engine-button,
 #identity-box {
   background: #fff url(navbar-textbox-button.png) bottom repeat-x;
   -moz-background-clip: padding;
@@ -750,6 +756,7 @@ toolbar[iconsize="small"] #unified-back-forward-button > #back-forward-dropmarke
   margin-top: -1px;
   margin-bottom: -1px;
   -moz-margin-start: -1px;
+  -moz-margin-end: 0;
 }
 
 #identity-box:focus:not(:active):not([open="true"]) #page-proxy-stack {
@@ -758,6 +765,13 @@ toolbar[iconsize="small"] #unified-back-forward-button > #back-forward-dropmarke
                    0 0 3px 2px -moz-mac-focusring;
 }
 
+.searchbar-textbox[focused="true"] .searchbar-engine-button,
+#urlbar[focused="true"] > #identity-box {
+  -moz-box-shadow: 0 0 1px -moz-mac-focusring inset;
+}
+
+.searchbar-engine-button[open="true"],
+.searchbar-engine-button:hover:active,
 #identity-box[open="true"],
 #identity-box:hover:active {
   border-style: none;
@@ -767,7 +781,7 @@ toolbar[iconsize="small"] #unified-back-forward-button > #back-forward-dropmarke
   -moz-box-shadow: 0 0 50px rgba(0,0,0,.3) inset,
                    0 3px 3px rgba(0,0,0,.6) inset,
                    2px 0 2px rgba(0,0,0,.3) inset,
-                   0 -2px 2px rgba(0,0,0,.1) inset;
+                   0 -2px 2px rgba(0,0,0,.1) inset !important;
 }
 
 #identity-box.verifiedDomain {
@@ -786,17 +800,31 @@ toolbar[iconsize="small"] #unified-back-forward-button > #back-forward-dropmarke
   display: none;
 }
 
+.searchbar-textbox > .autocomplete-textbox-container > .textbox-input-box,
 #urlbar > .autocomplete-textbox-container > .textbox-input-box {
-  -moz-border-radius-topleft: 100%;
-  -moz-border-radius-bottomleft: 100%;
   -moz-margin-end: 0;
   -moz-margin-start: -16px;
   background-color: -moz-field;
   -moz-padding-start: 10px;
+  height: 20px;
+}
+
+.searchbar-textbox:-moz-locale-dir(ltr) > .autocomplete-textbox-container > .textbox-input-box,
+#urlbar > .autocomplete-textbox-container > .textbox-input-box {
+  -moz-border-radius-topleft: 100%;
+  -moz-border-radius-bottomleft: 100%;
   -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3) inset,
                    1px 0 0 rgba(0,0,0,.2) inset;
 }
 
+.searchbar-textbox:-moz-locale-dir(rtl) > .autocomplete-textbox-container > .textbox-input-box {
+  -moz-border-radius-topright: 100%;
+  -moz-border-radius-bottomright: 100%;
+  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.3) inset,
+                   -1px 0 0 rgba(0,0,0,.2) inset;
+}
+
+.searchbar-textbox[focused="true"]:-moz-locale-dir(ltr) > .autocomplete-textbox-container > .textbox-input-box,
 #urlbar[focused="true"] > .autocomplete-textbox-container > .textbox-input-box {
   -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3) inset,
                    1px 0 0 rgba(0,0,0,.2) inset,
@@ -804,8 +832,11 @@ toolbar[iconsize="small"] #unified-back-forward-button > #back-forward-dropmarke
                    1px 0 1px -moz-mac-focusring inset;
 }
 
-#urlbar[focused="true"] > #identity-box {
-  -moz-box-shadow: 0 0 1px -moz-mac-focusring inset;
+.searchbar-textbox[focused="true"]:-moz-locale-dir(rtl) > .autocomplete-textbox-container > .textbox-input-box {
+  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.3) inset,
+                   -1px 0 0 rgba(0,0,0,.2) inset,
+                   -2px 0 0 -moz-field inset,
+                   -1px 0 1px -moz-mac-focusring inset;
 }
 
 #urlbar-icons {

browser/themes/pinstripe/browser/jar.mn

@@ -106,17 +106,3 @@ browser.jar:
   skin/classic/browser/tabbrowser/tabbrowser-tabs-bkgnd.png              (tabbrowser/tabbrowser-tabs-bkgnd.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png                   (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/tabbrowser/tab-bkgnd.png                          (tabbrowser/tab-bkgnd.png)
-  skin/classic/browser/urlbar/endcap.png                                 (urlbar/endcap.png)
-  skin/classic/browser/urlbar/endcap-rtl.png                             (urlbar/endcap-rtl.png)
-  skin/classic/browser/urlbar/endcap-focused.png                         (urlbar/endcap-focused.png)
-  skin/classic/browser/urlbar/endcap-focused-rtl.png                     (urlbar/endcap-focused-rtl.png)
-  skin/classic/browser/urlbar/startcap.png                               (urlbar/startcap.png)
-  skin/classic/browser/urlbar/startcap-rtl.png                           (urlbar/startcap-rtl.png)
-  skin/classic/browser/urlbar/startcap-focused.png                       (urlbar/startcap-focused.png)
-  skin/classic/browser/urlbar/startcap-focused-rtl.png                   (urlbar/startcap-focused-rtl.png)
-  skin/classic/browser/urlbar/startcap-active.png                        (urlbar/startcap-active.png)
-  skin/classic/browser/urlbar/startcap-active-rtl.png                    (urlbar/startcap-active-rtl.png)
-  skin/classic/browser/urlbar/startcap-active-focused.png                (urlbar/startcap-active-focused.png)
-  skin/classic/browser/urlbar/startcap-active-focused-rtl.png            (urlbar/startcap-active-focused-rtl.png)
-  skin/classic/browser/urlbar/textfield-mid.png                          (urlbar/textfield-mid.png)
-  skin/classic/browser/urlbar/textfield-mid-focused.png                  (urlbar/textfield-mid-focused.png)

browser/themes/pinstripe/browser/searchbar.css

@@ -1,27 +1,3 @@
-/* *** pinstripe *** */
-
-.searchbar-textbox {
-  -moz-appearance: none;
-  font: icon;
-  height: 28px;
-  width: 5em;
-  margin: 0 3px 1px;
-  min-width: 5em;
-  border: none;
-  background-color: transparent;
-}
-
-.searchbar-textbox > .autocomplete-textbox-container > .textbox-input-box {
-  background: url("chrome://browser/skin/urlbar/textfield-mid.png") repeat-x;
-  padding: 0;
-  margin: 0;
-  -moz-margin-start: 45px;
-}
-
-.searchbar-textbox[focused="true"] > .autocomplete-textbox-container > .textbox-input-box {
-  background-image: url("chrome://browser/skin/urlbar/textfield-mid-focused.png");
-}
-
 .searchbar-engine-image {
   width: 16px;
   height: 16px;
@@ -30,47 +6,8 @@
 }
 
 .searchbar-engine-button {
-  background: url("chrome://browser/skin/urlbar/startcap.png") center center no-repeat;
   -moz-appearance: none;
-  height: 28px;
-  min-width: 45px;
-  border: 0;
-  -moz-box-align: center;
-  margin: 0;
-  -moz-margin-start: -45px;
-  padding: 0;
-}
-
-.searchbar-engine-button:-moz-locale-dir(rtl) {
-  background-image: url("chrome://browser/skin/urlbar/startcap-rtl.png");
-}
-
-.searchbar-textbox[focused="true"] > .searchbar-engine-button {
-  background-image: url("chrome://browser/skin/urlbar/startcap-focused.png");
-}
-
-.searchbar-textbox[focused="true"] > .searchbar-engine-button:-moz-locale-dir(rtl) {
-  background-image: url("chrome://browser/skin/urlbar/startcap-focused-rtl.png");
-}
-
-.searchbar-engine-button:hover:active,
-.searchbar-engine-button[open="true"] {
-  background-image: url("chrome://browser/skin/urlbar/startcap-active.png") !important;
-}
-
-.searchbar-engine-button:hover:active:-moz-locale-dir(rtl),
-.searchbar-engine-button[open="true"]:-moz-locale-dir(rtl) {
-  background-image: url("chrome://browser/skin/urlbar/startcap-active-rtl.png") !important;
-}
-
-.searchbar-textbox[focused="true"] > .searchbar-engine-button:active,
-.searchbar-textbox[focused="true"] > .searchbar-engine-button[open="true"] {
-  background-image: url("chrome://browser/skin/urlbar/startcap-active-focused.png") !important;
-}
-
-.searchbar-textbox[focused="true"] > .searchbar-engine-button:-moz-locale-dir(rtl):active,
-.searchbar-textbox[focused="true"] > .searchbar-engine-button[open="true"]:-moz-locale-dir(rtl) {
-  background-image: url("chrome://browser/skin/urlbar/startcap-active-focused-rtl.png") !important;
+  min-width: 0;
 }
 
 .searchbar-engine-button > .button-box {
@@ -81,7 +18,11 @@
 }
 
 .searchbar-engine-button[addengines="true"] > .button-box {
-  background: transparent url(chrome://browser/skin/Search-addengines.png) no-repeat 25px 50%;
+  background: transparent url(chrome://browser/skin/Search-addengines.png) no-repeat right center;
+}
+
+.searchbar-textbox:-moz-locale-dir(rtl) .searchbar-engine-button[addengines="true"] > .button-box {
+  background-position: left center;
 }
 
 .searchbar-dropmarker-image {
@@ -92,26 +33,8 @@
 
 .search-go-container {
   -moz-box-align: center;
-  background: url("chrome://browser/skin/urlbar/endcap.png") no-repeat right top;
-  -moz-padding-end: 5px;
-}
-
-.search-go-container:-moz-locale-dir(rtl) {
-  background-image: url("chrome://browser/skin/urlbar/endcap-rtl.png");
-}
-
-.searchbar-textbox[focused="true"] > .search-go-container {
-  background-image: url("chrome://browser/skin/urlbar/endcap-focused.png");
-}
-
-.searchbar-textbox[focused="true"] > .search-go-container:-moz-locale-dir(rtl) {
-  background: url("chrome://browser/skin/urlbar/endcap-focused-rtl.png") no-repeat left top;
 }
 
 .search-go-button {
-  padding: 1px;
   list-style-image: url("chrome://browser/skin/Search.png");
-  margin: 0;
-  padding: 0;
-  -moz-padding-end: 6px;
 }

browser/themes/winstripe/browser/searchbar.css

@@ -4,6 +4,10 @@
   min-width: 6em;
 }
 
+.autocomplete-textbox-container {
+  -moz-box-align: stretch;
+}
+
 .searchbar-textbox:-moz-system-metric(windows-default-theme) {
   -moz-appearance: none;
   border-width: 1px;
@@ -33,8 +37,6 @@
   margin: 0;
   -moz-margin-end: 3px;
   padding: 0;
-  height: 1.23em;
-  min-height: 20px;
   -moz-box-align: center;
   background: -moz-dialog url(navbar-textbox-buttons.png) repeat-x;
   border: 0 solid;