Bug 462977 - Improve the site button and search button appearance on Windows. ui-r=faaborg, r=rflint
authorDão Gottwald <dao@mozilla.com>
Mon, 04 May 2009 10:03:03 +0200
changeset 27965 e70a8da4b6ffd858ea0cf023f9ec34c05cf3c9f9
parent 27964 0b785f2a7960710a63c71e0b5bf89f377c1cf60e
child 27966 99cdecb3734f171f0480c6fa4b0f5cf20f6f5260
push id6810
push userdgottwald@mozilla.com
push dateMon, 04 May 2009 08:11:52 +0000
treeherdermozilla-central@99cdecb3734f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfaaborg, rflint
bugs462977
milestone1.9.2a1pre
Bug 462977 - Improve the site button and search button appearance on Windows. ui-r=faaborg, r=rflint
browser/themes/winstripe/browser/browser-aero.css
browser/themes/winstripe/browser/browser.css
browser/themes/winstripe/browser/navbar-textbox-buttons-aero.png
browser/themes/winstripe/browser/navbar-textbox-buttons.png
browser/themes/winstripe/browser/searchbar.css
--- a/browser/themes/winstripe/browser/browser-aero.css
+++ b/browser/themes/winstripe/browser/browser-aero.css
@@ -14,49 +14,30 @@
 
 .ac-url-text:-moz-system-metric(windows-default-theme) {
   color: -moz-nativehyperlinktext;
 }
 
 /* ::::: Identity Indicator Styling ::::: */
 
 #urlbar[chromedir="ltr"]:-moz-system-metric(windows-default-theme) {
-  -moz-margin-start: 8px;
+  -moz-margin-start: 9px;
 }
 
 #identity-box[chromedir="ltr"]:-moz-system-metric(windows-default-theme) {
-  -moz-margin-start: -6px;
+  -moz-margin-start: -7px;
 }
 
-#identity-box[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  margin: -4px 0;
-  padding: 3px 2px 3px 3px;
-  background-position: 0 3px;
-  -moz-border-radius-topleft: 14px;
-  -moz-border-radius-bottomleft: 14px;
-}
-#identity-box:hover[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -57px;
-}
-#identity-box.verifiedDomain[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -117px;
-}
-#identity-box.verifiedDomain:hover[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -177px;
-}
-#identity-box.verifiedIdentity[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -237px;
-}
-#identity-box.verifiedIdentity:hover[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -297px;
+#identity-box[chromedir="ltr"]:-moz-system-metric(windows-default-theme) {
+  -moz-border-radius: 11px 0 2px 11px / 15px 0 2px 15px;
 }
 
 /* Match #identity-box[chromedir="ltr"]'s -moz-margin-start */
 #identity-popup[chromedir="ltr"]:-moz-system-metric(windows-default-theme) {
-  -moz-margin-start: 6px;
+  -moz-margin-start: 7px;
 }
 
 /* Bug 413060, comment 16: Vista Aero is a special case where we use a
    tooltip appearance for the address bar popup panels */
 #identity-popup:-moz-system-metric(windows-default-theme),
 #editBookmarkPanel:-moz-system-metric(windows-default-theme) {
   -moz-appearance: tooltip;
   color: InfoText;
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@@ -1661,16 +1661,21 @@ toolbar[mode="text"] > #window-controls 
   width: auto;
 }
 
 #urlbar > .autocomplete-history-dropmarker:hover ,
 #urlbar > .autocomplete-history-dropmarker[open="true"] {
   background: -moz-dialog url(navbar-textbox-buttons.png) repeat-x 0 -60px !important;
 }
 
+#urlbar > .autocomplete-history-dropmarker:hover:active,
+#urlbar > .autocomplete-history-dropmarker[open="true"] {
+  background-position: 0 -120px !important;
+}
+
 #urlbar > .autocomplete-history-dropmarker > .dropmarker-icon {
   margin: 0 5px;
 }
 
 #urlbar[chromedir="ltr"] > .autocomplete-history-dropmarker {
   border-left: 1px solid;
   -moz-border-left-colors: transparent;
 }
@@ -1763,96 +1768,83 @@ toolbarbutton.bookmark-item[dragover="tr
 #urlbar[chromedir="ltr"]:-moz-system-metric(windows-default-theme) {
   -moz-margin-start: 6px;
 }
 
 #urlbar > .autocomplete-textbox-container {
   -moz-box-align: stretch;
 }
 
-#identity-box {  
-  overflow: -moz-hidden-unscrollable;
-}
-
-#identity-box[chromedir="ltr"]:-moz-system-metric(windows-default-theme) {
-  -moz-margin-start: -4px;
-  border-right: 1px solid ThreeDShadow;
-}
-
-#identity-box.verifiedDomain[chromedir="ltr"]:-moz-system-metric(windows-default-theme) ,
-#identity-box.verifiedIdentity[chromedir="ltr"]:-moz-system-metric(windows-default-theme) {
-  border-right: 1px solid ThreeDDarkShadow;
-}
-
-#identity-box > hbox {
+#identity-box {
   background: -moz-dialog url(navbar-textbox-buttons.png) repeat-x;
   color: -moz-dialogText;
-  border-left: 2px solid;
-  border-right: 2px solid;
-  -moz-border-left-colors: ThreeDShadow rgba(255, 255, 255, 0.2);
-  -moz-border-right-colors: ThreeDShadow rgba(255, 255, 255, 0.2);
-  padding: 0 1px;
+  border: 1px none ThreeDShadow;
+  -moz-border-end-style: solid;
+  -moz-box-shadow: 1px 1px 0 rgba(255,255,255,.3) inset,
+                   0 -1px 0 rgba(255,255,255,.2) inset;
 }
-#identity-box[chromedir="ltr"]:not(:-moz-system-metric(windows-default-theme)) > hbox {
-  border-left: 1px solid;
-  -moz-border-left-colors: rgba(255, 255, 255, 0.2);
+#identity-box[chromedir="rtl"] {
+  -moz-border-start-style: solid;
 }
-#identity-box[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  margin: -11px -10px -11px 0;
-  padding: 10px 12px 10px 3px;
-  border-top: 1px solid ThreeDDarkShadow;
-  border-bottom: 1px solid ThreeDDarkShadow;
-  border-right-style: none;
-  -moz-border-radius-topleft: 21px;
-  -moz-border-radius-bottomleft: 21px;
-  -moz-border-left-colors: ThreeDDarkShadow rgba(255, 255, 255, 0.4);
-  background-position: 0 10px;
+#identity-box[chromedir="ltr"]:-moz-system-metric(windows-default-theme) {
+  -moz-border-radius: 6px 0 2px 6px / 15px 0 2px 15px;
+  margin: -1px 0;
+  -moz-margin-start: -4px;
+  -moz-padding-start: 2px;
+  border-style: solid;
+  -moz-border-end-color: rgba(0,0,0,.05);
+}
+
+#identity-box.verifiedDomain,
+#identity-box.verifiedIdentity {
+  border-color: rgba(0,0,0,.2) !important;
+  color: white;
+}
+
+#identity-box.verifiedDomain[open="true"],
+#identity-box.verifiedDomain:hover:active,
+#identity-box.verifiedIdentity[open="true"],
+#identity-box.verifiedIdentity:hover:active {
+  border-color: rgba(0,0,0,.2) rgba(0,0,0,.4) !important;
 }
 
-#identity-box:hover > hbox {
+#identity-box:hover {
   background-position: 0 -60px;
-  -moz-border-left-colors: ThreeDShadow rgba(255, 255, 255, 0.4);
-  -moz-border-right-colors: ThreeDShadow rgba(255, 255, 255, 0.4);
-}
-#identity-box:hover[chromedir="ltr"] > hbox {
-  -moz-border-left-colors: rgba(255, 255, 255, 0.4);
-}
-#identity-box:hover[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -50px;
-  -moz-border-left-colors: ThreeDDarkShadow rgba(255, 255, 255, 0.6);
 }
 
-#identity-box.verifiedDomain > hbox {
+#identity-box[open="true"],
+#identity-box:hover:active {
   background-position: 0 -120px;
-  color: white;
+  -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.2) inset;
 }
-#identity-box.verifiedDomain[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -110px;
+
+#identity-box.verifiedDomain {
+  background-position: 0 -180px;
 }
 
-#identity-box.verifiedDomain:hover > hbox {
-  background-position: 0 -180px;
+#identity-box.verifiedDomain:hover {
+  background-position: 0 -240px;
 }
-#identity-box.verifiedDomain:hover[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -170px;
+
+#identity-box.verifiedDomain[open="true"],
+#identity-box.verifiedDomain:hover:active {
+  background-position: 0 -300px;
 }
 
-#identity-box.verifiedIdentity > hbox {
-  background-position: 0 -240px;
-  color: white;
-}
-#identity-box.verifiedIdentity[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -230px;
+#identity-box.verifiedIdentity {
+  background-position: 0 -360px;
 }
 
-#identity-box.verifiedIdentity:hover > hbox {
-  background-position: 0 -300px;
+#identity-box.verifiedIdentity:hover {
+  background-position: 0 -420px;
 }
-#identity-box.verifiedIdentity:hover[chromedir="ltr"]:-moz-system-metric(windows-default-theme) > hbox {
-  background-position: 0 -290px;
+
+#identity-box.verifiedIdentity[open="true"],
+#identity-box.verifiedIdentity:hover:active {
+  background-position: 0 -480px;
 }
 
 #identity-box:focus {
   outline: 1px dotted -moz-DialogText;
   outline-offset: -3px;
 }
 
 #identity-box.verifiedDomain:focus ,
index 7dbd378fe5f9c441a752c1a0ed5edda5ce896cad..bd9fab143f8f72ad3924da9f657155e3c73fe71f
GIT binary patch
literal 764
zc$@+J0t5YtP)<h;3K|Lk000e1NJLTq000F500JBc1^@s6J}G3M00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L03N{r03N{s!)a7g00007bV*G`2iXG+
z4G<tTTjYQM00MkTL_t(&-tF1Hj?+L82Jl^bZRc{ATyTyefPw<$HM|OMbI*V%u0@C{
zPe4JB5HCOjWoXl&M8b~Oe|Bh&=H@HrSi(tYwu$u9ti5(NpLZQgMDNY5mKe|+5mgMW
zwKYRyOogx(V<pA|!|iq(7={o!)V)KOImjxFF+IaHO<P%Ik|ZA8&p~#~q9_<zB6=!2
z`@NzzZU4SmBKj=Ox)%L5;ZM6k=w)GbrvT*L_xpX24gOA9*UAtk7(5YtOjv7SD)Rf8
zWf{NrJkRTh!N;Q)p*C&zkafnGrT78eiRV0wi-3^CDDQqQu8bHbej=1*X&Ek;OIGbx
zt5wQyHk<Lv-EPN+wApOf;B8r!Q}h*2M1xmU{6ElMzxhIc-raS5;MleU$HoKnURv4s
z9$*714^0o!`}sQ%Ytu3BZpKrD6M&Nk0OtVnvfwzGJC5Tr)A^~Wcm#BBpZ$pGJ`5o1
zdK7>j;h`grRRb!kdO!#&e^vox-HVSP>*fVYuoHmO5y0{k-~!-i;m~3)1p#=L>ikqx
zJVw?nUR_6J9c3s0GZcV1NQM?vhG2!Eij#I|Iez{A4V=9=2beuXcmXhfgjRqHj_C*l
zV15B^NcN=A`KhRQj6Lktr>mGfY#+eZvg3bm8rPx-YD0@wfF9rwgVwx8ujW#N5-bi!
z2n%udLg%NV;!)Oh>&NSu?j3<x^8rLqLk++HunslY?S?}{r8OT=)+H!yTpVU%lpa$j
zt)k*z$hyn*WlVRQTH%VtW}wnKv|Tme)f^F_?J8JR4*dYK?j_2)+vB9)3$t)@!8f0L
uwPuZRW{kq>4B;ul6X7v+(kdz*34Z}$+6m$9v|@Px0000<MNUMnLSTZes8PWH
index 90d87a04dbe07fa68ce4424c620fb45f8dc37b69..c5341ef7c66e1867f9899c45ddb4c94271fe9377
GIT binary patch
literal 748
zc$@+30u%j-P)<h;3K|Lk000e1NJLTq000F500JBc1^@s6J}G3M00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L03N{r03N{s!)a7g00007bV*G`2iXG+
z4FfiyU=Tw900L}DL_t(&-tCybZqz^!#&_0h`+T{;$y7+_&~-F<7Ak}&;1zfv%Ct1R
z11}JIauN-?B8m^mXP^J<&}Y7rCh>(xXr}z>o0+w}{=8#i=5Ov!cn2adb1fhd?FDqs
z)d=p@uvWuH!0mP$1&lHFD7{CQIqH<oxk11rNjja<dw)RpbJW$$^ISk;=GVIJPYNw8
z{(TTLe^+~5hu%&2YPSd;bY^ug1C;5z-7e}De=o1=bPzfiYy>|OL<C(?-p@2m<+W#7
zwx6*0>F}U}78Xz7b<Vk!`UBmo_dK+Vh#;$>KK;2`Ibogni%^y&3AkFVggUI(>qNli
zaw(NnRmml7HXE^cD$DX2dc^0d#TzvEe?a<t`HLT(9u6Y|H~`p<5IUu@kJ_4mx$yI*
zlQ7Ll!Yua)0%bn)N_eCZAtgxfyJ(x%puuS{ynVTtlHNoB_sEx8q&xzVf3mh_kG$@x
z8jvpm<tzZVnWaEkq(C`Okt+s5jhs$to7SMg6P)Yby!$fcT*s72=%|p8`~sxAIf9^O
z<N%Iv16mUDy4!6dp-+HWC1(kMb6{4<0w}{dfWGkBnnhy!)1bk}IM;o6^>s>mJG5xD
z1OsC?AQ(F|7k6le?Uapr21mH-n`_`p88WLpMKGWt6e+<G@Q5-4H4^}B(;75*0<Zh@
z;^UO`I@V~k1P0iS05;s9xwu6$Y^!W^;9kNXf3DEaG2~!r4wNB7gKefvp9NSm)ittB
zYtY~cX4s4O7kuKH0pUPIN@aA6CesL%1Arq^R=;n-Xo-Hf(HVe#4yRqDM1w6>7D{NF
e)}X;hf`0+R{r$K4<DvHe0000<MNUMnLSTZuK~KT}
--- a/browser/themes/winstripe/browser/searchbar.css
+++ b/browser/themes/winstripe/browser/searchbar.css
@@ -33,28 +33,34 @@
   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;
-  border-right-width: 1px;
+  -moz-border-end-width: 1px;
   -moz-border-right-colors: ThreeDShadow;
+  -moz-border-left-colors: ThreeDShadow;
+  -moz-box-shadow: 1px 1px 0 rgba(255,255,255,.4) inset,
+                   0 -1px 0 rgba(255,255,255,.4) inset;
+}
+
+.searchbar-engine-button:-moz-system-metric(windows-default-theme)[chromedir="ltr"] {
+  -moz-border-right-colors: rgba(0,0,0,.05);
 }
 
 .searchbar-engine-button:hover {
   background-position: 0 -60px;
 }
 
-.searchbar-engine-button[chromedir="rtl"] {
-  border-right-width: 0;
-  border-left-width: 1px;
-  -moz-border-left-colors: ThreeDShadow;
+.searchbar-engine-button[open="true"] {
+  background-position: 0 -120px;
+  -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.2) inset;
 }
 
 .searchbar-engine-button > .button-box {
   -moz-appearance: none;
   padding: 0;
   -moz-padding-end: 3px;
   border: 0;
 }