Bug 559034 - New Mac location bar and search bar style. r=dao
authorMarkus Stange <mstange@themasta.com>
Tue, 22 Jun 2010 22:29:22 +0200
changeset 44150 8864df07eda6661b6191c0cb024d589119ce0ed1
parent 44149 abf5d9735a0d459e8768ac0810264b53c3067cd7
child 44151 200f9be1c8e580cd23db77c4cdc79a19429db2bb
push id13994
push usermstange@themasta.com
push dateTue, 22 Jun 2010 20:30:09 +0000
treeherdermozilla-central@8864df07eda6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs559034
milestone1.9.3a6pre
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 559034 - New Mac location bar and search bar style. r=dao
browser/themes/pinstripe/browser/browser.css
browser/themes/pinstripe/browser/jar.mn
browser/themes/pinstripe/browser/searchbar-dropmarker.png
browser/themes/pinstripe/browser/searchbar.css
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@@ -628,137 +628,98 @@ toolbar[iconsize="small"][mode="icons"] 
 #minimize-button,
 #close-button,
 #fullscreen-button ~ #window-controls > #restore-button {
   display: none;
 }
 
 /* ::::: nav-bar-inner ::::: */
 
-#urlbar {
-  direction: ltr;
-}
-
-.searchbar-textbox,
-#urlbar {
+#urlbar,
+.searchbar-textbox {
   font: icon;
   width: 7em;
   min-width: 7em;
   -moz-appearance: none;
-  -moz-border-radius: 100%;
   border: 0;
-  padding: 1px;
-  background: -moz-linear-gradient(top, rgba(0,0,0,.55), rgba(0,0,0,.27));
-  -moz-box-shadow: @loweredShadow@;
+  -moz-box-shadow: 0 1px rgba(255, 255, 255, 0.2);
   margin: 0 4px;
+  padding: 0;
+  border: 1px solid transparent;
+  background: -moz-linear-gradient(#D6D6D6, #D6D6D6 1px, #F7F7F7 1px, #F7F7F7 2px, #FFF 2px, #FFF),
+              -moz-linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.2));
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
 }
 
-.searchbar-textbox[focused="true"],
-#urlbar[focused="true"] {
-  -moz-box-shadow: 0 0 3px 2px -moz-mac-focusring;
-  background: -moz-mac-focusring -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,.1));
-}
-
-.search-go-container,
-#urlbar > .autocomplete-history-dropmarker {
-  -moz-padding-end: 6px;
-  -moz-border-radius: 100%;
-}
-
-#urlbar > .autocomplete-history-dropmarker {
-  width: 22px;
+#urlbar:-moz-window-inactive,
+.searchbar-textbox:-moz-window-inactive {
+  background-image: -moz-linear-gradient(#D6D6D6, #D6D6D6 1px, #F7F7F7 1px, #F7F7F7 2px, #FFF 2px, #FFF),
+                    -moz-linear-gradient(@toolbarbuttonInactiveBorderColor@, @toolbarbuttonInactiveBorderColor@);
 }
 
-.search-go-container:-moz-locale-dir(ltr),
-#urlbar > .autocomplete-history-dropmarker {
-  -moz-border-radius-topleft: 0;
-  -moz-border-radius-bottomleft: 0;
-}
-
-.search-go-container:-moz-locale-dir(rtl) {
-  -moz-border-radius-topright: 0;
-  -moz-border-radius-bottomright: 0;
+#urlbar[focused="true"],
+.searchbar-textbox[focused="true"] {
+  background-color: -moz-mac-focusring;
+  background-image: -moz-linear-gradient(#D6D6D6, #D6D6D6 1px, #F7F7F7 1px, #F7F7F7 2px, #FFF 2px, #FFF),
+                    -moz-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1));
+  -moz-box-shadow: @focusRingShadow@;
 }
 
-.searchbar-engine-button,
-#identity-box {
-  background: @toolbarbuttonBackground@;
-  color: black;
-  -moz-padding-start: 6px;
-  -moz-padding-end: 16px;
-  -moz-border-radius: 100%;
-  margin: 0;
-  -moz-box-shadow: 0 1px rgba(0,0,0,.3);
+#urlbar {
+  -moz-border-radius: @toolbarbuttonCornerRadius@;
+  direction: ltr;
+  -moz-padding-end: 3px;
 }
 
-.searchbar-textbox[focused="true"] .searchbar-engine-button,
-#urlbar[focused="true"] > #identity-box {
-  -moz-box-shadow: none;
+#identity-box {
+  margin: 1px;
+  -moz-border-radius: 2px;
+  padding: 1px;
+  -moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  text-shadow: 0 1px rgba(255, 255, 255, 0.2);
 }
 
-#identity-box:focus:not(:active):not([open="true"]) #page-proxy-stack {
-  -moz-border-radius: 4px;
+
+#identity-box:focus:not(:active):not([open="true"]) {
   -moz-box-shadow: 0 0 3px 1px -moz-mac-focusring inset,
                    0 0 3px 2px -moz-mac-focusring;
 }
 
-.searchbar-engine-button[open="true"],
-.searchbar-engine-button:hover:active,
-#identity-box[open="true"],
-#identity-box:hover:active {
-  margin-top: -1px;
-  margin-bottom: -1px;
-  -moz-margin-start: -1px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  -moz-padding-start: 7px;
-  -moz-box-shadow: @toolbarbuttonPressedInnerShadow@,
-                   0 0 0 20px rgba(0,0,0,.2) inset !important;
+#identity-box {
+  color: white;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
+  -moz-margin-end: 3px;
+}
+
+#identity-box {
+  background-image: -moz-linear-gradient(#FFF, #DDD);
+}
+
+#identity-box:active:hover,
+#identity-box[open="true"] {
+  -moz-box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.35),
+                   inset 0 0 0 20px rgba(0, 0, 0, 0.06);
 }
 
 #identity-box.verifiedDomain {
-  background-image: -moz-linear-gradient(top, #E8F2F9, #AED4EA 1px, #87ACCF 50%, #749CC5 50%, #4B6CA4);
+  background-image: -moz-linear-gradient(#588EC6, #3C68AE);
 }
 
 #identity-box.verifiedIdentity {
-  background-image: -moz-linear-gradient(top, #EBF8D2, #D3EEA1 1px, #AAD77B 50%, #96CB60 50%, #6EB142);
+  background-image: -moz-linear-gradient(#84BB40, #5BA020);
 }
 
 #identity-icon-labels {
-  margin: 0 4px;
-}
-
-.searchbar-textbox > .autocomplete-textbox-container > .textbox-input-box,
-#urlbar > .autocomplete-textbox-container > .textbox-input-box {
-  -moz-margin-end: 0;
-  -moz-margin-start: -16px;
-  -moz-padding-start: 10px;
-  height: 20px;
-  -moz-border-radius: 100%;
+  margin: 0 4px 1px;
 }
 
-.searchbar-textbox > .autocomplete-textbox-container > .textbox-input-box,
-#urlbar > .autocomplete-textbox-container > .textbox-input-box,
-.search-go-container,
-#urlbar-icons,
-#urlbar > .autocomplete-history-dropmarker {
-  background: -moz-linear-gradient(#D6D6D6, #D6D6D6 1px, #F7F7F7 1px, #F7F7F7 2px, #FFF 2px, #FFF);
-}
-
-.searchbar-textbox:-moz-locale-dir(ltr) > .autocomplete-textbox-container > .textbox-input-box,
 #urlbar > .autocomplete-textbox-container > .textbox-input-box {
-  -moz-border-radius-topright: 0;
-  -moz-border-radius-bottomright: 0;
-  -moz-box-shadow: 1px 0 rgba(0,0,0,.4) inset;
-}
-
-.searchbar-textbox:-moz-locale-dir(rtl) > .autocomplete-textbox-container > .textbox-input-box {
-  -moz-border-radius-topleft: 0;
-  -moz-border-radius-bottomleft: 0;
-  -moz-box-shadow: -1px 0 rgba(0,0,0,.4) inset;
+  -moz-margin-start: 0;
+  padding: 3px 0 2px;
 }
 
 #urlbar-icons {
   -moz-box-align: center;
 }
 
 #urlbar-search-splitter {
   min-width: 8px;
@@ -773,19 +734,25 @@ toolbar[iconsize="small"][mode="icons"] 
 #urlbar-throbber {
   width: 16px;
   height: 16px;
   margin: 0px;
   padding: 0px;
 }
 
 #page-proxy-stack {
+  width: 18px;
+  height: 16px;
+  padding: 0 1px;
+}
+
+#identity-box.verifiedIdentity > hbox > #page-proxy-stack,
+#identity-box.verifiedDomain > hbox > #page-proxy-stack {
   width: 24px;
-  height: 20px;
-  padding: 2px 4px;
+  padding: 0 4px;
 }
 
 #identity-box.verifiedIdentity > hbox > #page-proxy-stack,
 #identity-box.verifiedDomain > hbox > #page-proxy-stack {
   background: url(urlbar-favicon-glow.png) center center no-repeat;
 }
 
 #page-proxy-favicon:not([src]) {
@@ -799,25 +766,21 @@ toolbar[iconsize="small"][mode="icons"] 
 #urlbar-throbber {
   list-style-image: url("chrome://browser/skin/places/searching_16.png");
 }
 
 #wrapper-urlbar-container[place="palette"] {
   max-width: 20em;
 }
 
-#wrapper-urlbar-container #identity-icon-labels,
-#wrapper-urlbar-container .autocomplete-history-dropmarker > .dropmarker-icon {
+#wrapper-urlbar-container > * > * > * > * > #identity-icon-labels,
+#wrapper-urlbar-container > * > * > .autocomplete-history-dropmarker {
   display: none;
 }
 
-#wrapper-urlbar-container .autocomplete-history-dropmarker {
-  width: 10px;
-}
-
 #urlbar-display {
   margin-top: -2px;
   margin-bottom: -2px;
   padding-top: 3px;
   padding-bottom: 2px;
   -moz-padding-end: 3px;
   color: GrayText;
   -moz-border-end: 1px solid #AAA;
@@ -1835,18 +1798,18 @@ toolbarbutton.chevron > .toolbarbutton-m
 }
 
 /* Popup Bounding Box */
 #identity-popup,
 #notification-popup {
   -moz-appearance: none;
   -moz-window-shadow: none;
   background-color: transparent;
-  margin-top: -4px;
-  margin-left: -15px;
+  margin-top: -3px;
+  margin-left: -23px;
   min-width: 280px;
   -moz-border-image: url(chrome://browser/skin/hud-panel.png) 26 18 22 50 / 26px 18px 22px 50px repeat; 
 }
 
 #notification-popup {
   margin-top: -1px;
   margin-left: -27px;
 }
@@ -1881,16 +1844,21 @@ toolbarbutton.chevron > .toolbarbutton-m
   margin: 4px 3px 2px -30px;
   color: #fff;
 }
 
 #identity-popup-content-box {
   margin-top: 4px;
 }
 
+#identity-popup.verifiedDomain,
+#identity-popup.verifiedIdentity {
+  margin-left: -20px;
+}
+
 /* Popup Buttons */
 #identity-popup-more-info-button {
   @hudButton@
   padding: 1px 9px;
   margin: 10px 0 0;
   min-height: 0px;
 }
 
--- a/browser/themes/pinstripe/browser/jar.mn
+++ b/browser/themes/pinstripe/browser/jar.mn
@@ -32,16 +32,17 @@ browser.jar:
   skin/classic/browser/menu-back.png
   skin/classic/browser/menu-forward.png
   skin/classic/browser/page-livemarks.png
   skin/classic/browser/livemark-item.png
   skin/classic/browser/pageInfo.css
   skin/classic/browser/Popup-blocked.png
   skin/classic/browser/Privacy-16.png
   skin/classic/browser/Privacy-48.png
+  skin/classic/browser/searchbar-dropmarker.png
   skin/classic/browser/searchbar.css
   skin/classic/browser/Search.png
   skin/classic/browser/Search-addengines.png
   skin/classic/browser/section_collapsed.png
   skin/classic/browser/section_expanded.png
   skin/classic/browser/Secure-Glyph-White.png
   skin/classic/browser/Secure-statusbar.png
   skin/classic/browser/Secure-statusbar-broken.png
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..bc6d62089dfd43d60c31a50245fc9334bc23d43e
GIT binary patch
literal 145
zc%17D@N?(olHy`uVBq!ia0vp^>_E)I!3HFqj;YoHDb50q$YKTtZeb8+WSBKa0x0P0
z>Eal|A)B0%kl?|Rq^{t`{yXB||Nr*$Cr+Hmsgc~HQZ1%(j!B5Y=oyn}0rN~Fhd(Sw
o*gKn54oIAM!t|&>fLEBA;oBlP&;5%`L6$Ojy85}Sb4q9e0P+?lQvd(}
--- a/browser/themes/pinstripe/browser/searchbar.css
+++ b/browser/themes/pinstripe/browser/searchbar.css
@@ -1,40 +1,46 @@
-.searchbar-engine-image {
-  width: 16px;
-  height: 16px;
-  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
-  -moz-margin-start: 3px;
+.searchbar-textbox {
+  -moz-border-radius: 100%;
 }
 
 .searchbar-engine-button {
+  -moz-padding-start: 6px;
+  -moz-padding-end: 2px;
+  margin: 0;
+  -moz-margin-end: 2px;
   -moz-appearance: none;
   min-width: 0;
 }
 
-.searchbar-engine-button > .button-box {
-  -moz-appearance: none;
-  padding: 0;
-  -moz-padding-end: 3px;
-  border: 0;
-}
-
-.searchbar-engine-button[addengines="true"] > .button-box {
+.searchbar-engine-button[addengines="true"] {
   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 {
+.searchbar-engine-button[addengines="true"]:-moz-locale-dir(rtl) {
   background-position: left center;
 }
 
+.searchbar-textbox > .autocomplete-textbox-container > .textbox-input-box {
+  margin: 0;
+  padding: 3px 0 2px;
+  height: 20px;
+}
+
+.searchbar-engine-image {
+  width: 16px;
+  height: 16px;
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
+}
+
 .searchbar-dropmarker-image {
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn.png");
+  list-style-image: url("chrome://browser/skin/searchbar-dropmarker.png");
   -moz-margin-start: 2px;
-  margin-top: 1px;
 }
 
 .search-go-container {
   -moz-box-align: center;
+  -moz-padding-end: 6px;
 }
 
 .search-go-button {
   list-style-image: url("chrome://browser/skin/Search.png");
 }