Bug 549589 - Implement new location bar and search bar style. r=rflint

browser/themes/winstripe/browser/browser-aero.css

@@ -18,23 +18,6 @@
 
 /* ::::: Identity Indicator Styling ::::: */
 
-#urlbar:-moz-locale-dir(ltr):-moz-system-metric(windows-default-theme) {
-  -moz-margin-start: 9px;
-}
-
-#identity-box:-moz-locale-dir(ltr):-moz-system-metric(windows-default-theme) {
-  -moz-margin-start: -7px;
-}
-
-#identity-box:-moz-locale-dir(ltr):-moz-system-metric(windows-default-theme) {
-  -moz-border-radius: 11px 0 2px 11px / 15px 0 2px 15px;
-}
-
-/* Match #identity-box:-moz-locale-dir(ltr)'s -moz-margin-start */
-#identity-popup:-moz-locale-dir(ltr):-moz-system-metric(windows-default-theme) {
-  -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),

browser/themes/winstripe/browser/browser.css

@@ -535,18 +535,33 @@ toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="tru
   min-width: 7em;
 }
 
-#urlbar:-moz-lwtheme:not([focused="true"]),
-.searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
-  opacity: .85;
+#urlbar,
+.searchbar-textbox {
+  -moz-appearance: none;
+  margin: 1px 3px;
+  padding: 1px;
+  -moz-background-clip: padding;
+  border: 1px solid;
+  border-color: rgba(0,0,0,.2) rgba(0,0,0,.25) rgba(0,0,0,.3);
+  -moz-border-radius: 4px;
+  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
+                   0 1px 0 rgba(255,255,255,.4);
 }
 
-#urlbar:-moz-system-metric(windows-default-theme) {
-  -moz-appearance: none;
-  border-width: 1px;
-  -moz-border-top-colors: ThreeDShadow;
-  -moz-border-bottom-colors: ThreeDShadow;
-  -moz-border-right-colors: ThreeDShadow;
-  -moz-border-left-colors: ThreeDShadow;
+#urlbar:-moz-lwtheme,
+.searchbar-textbox:-moz-lwtheme {
+  background-color: rgba(255,255,255,.8);
+  color: black;
+}
+
+#urlbar:-moz-lwtheme[isempty="true"],
+.searchbar-textbox:-moz-lwtheme[isempty="true"] {
+  color: #777;
+}
+
+#urlbar:-moz-lwtheme[focused="true"],
+.searchbar-textbox:-moz-lwtheme[focused="true"] {
+  background-color: white;
 }
 
 #urlbar-container {
@@ -557,7 +572,6 @@ toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="tru
 #urlbar-icons {
   height: 18px;
   -moz-box-align: center;
-  -moz-padding-end: 2px;
 }
 
 .urlbar-icon {
@@ -570,8 +584,8 @@ toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="tru
 }
 
 #urlbar-search-splitter {
-  min-width: 8px;
-  -moz-margin-start: -4px;
+  min-width: 6px;
+  -moz-margin-start: -3px;
   border: none;
   background: transparent;
 }
@@ -581,7 +595,7 @@ toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="tru
   -moz-margin-start: 0;
 }
 
-#wrapper-urlbar-container #urlbar > .autocomplete-history-dropmarker {
+#wrapper-urlbar-container > #urlbar-container > #urlbar > .autocomplete-history-dropmarker {
   display: none;
 }
 
@@ -592,81 +606,36 @@ toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="tru
 
 /* identity box */
 
-#urlbar:-moz-locale-dir(ltr):-moz-system-metric(windows-default-theme) {
-  -moz-margin-start: 6px;
-}
-
-#urlbar > .autocomplete-textbox-container {
-  -moz-box-align: stretch;
-}
-
 #identity-box {
-  background: -moz-dialog url(navbar-textbox-buttons.png) repeat-x;
+  background-color: -moz-dialog;
+  background-image: -moz-linear-gradient(rgba(255,255,255,.25), rgba(0,0,0,.15));
   color: -moz-dialogText;
-  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:-moz-locale-dir(rtl) {
-  -moz-border-start-style: solid;
-}
-#identity-box:-moz-locale-dir(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;
+  margin: 1px;
+  -moz-border-radius: 2px;
 }
 
 #identity-box:hover {
-  background-position: 0 -60px;
+  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(50%,50%,50%,.2), rgba(0,0,0,.15));
 }
 
 #identity-box[open="true"],
 #identity-box:hover:active {
-  background-position: 0 -120px;
-  -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.2) inset;
+  background-image: -moz-linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.1));
+}
+
+#identity-box.verifiedDomain,
+#identity-box.verifiedIdentity {
+  color: white;
+  text-shadow: 0 1px 0 rgba(0,0,0,.25);
+  -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
 }
 
 #identity-box.verifiedDomain {
-  background-position: 0 -180px;
-}
-
-#identity-box.verifiedDomain:hover {
-  background-position: 0 -240px;
-}
-
-#identity-box.verifiedDomain[open="true"],
-#identity-box.verifiedDomain:hover:active {
-  background-position: 0 -300px;
+  background-color: hsl(219,45%,60%);
 }
 
 #identity-box.verifiedIdentity {
-  background-position: 0 -360px;
-}
-
-#identity-box.verifiedIdentity:hover {
-  background-position: 0 -420px;
-}
-
-#identity-box.verifiedIdentity[open="true"],
-#identity-box.verifiedIdentity:hover:active {
-  background-position: 0 -480px;
+  background-color: hsl(92,45%,52%);
 }
 
 #identity-box:focus {
@@ -676,11 +645,13 @@ toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="tru
 
 #identity-box.verifiedDomain:focus ,
 #identity-box.verifiedIdentity:focus {
-  outline: 1px dotted white;
+  outline-color: white;
 }
 
 #identity-icon-labels {
-  padding: 0 2px;
+  -moz-margin-start: 1px;
+  -moz-margin-end: 3px;
+  margin-bottom: 1px;
 }
 
 /* Location bar dropmarker */
@@ -699,27 +670,11 @@ toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="tru
   min-width: .64cm;
 }
 
-#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;
   -moz-image-region: rect(0, 26px, 11px, 13px);
 }
 
-#urlbar:-moz-locale-dir(ltr) > .autocomplete-history-dropmarker {
-  border-left: 1px solid;
-  -moz-border-left-colors: transparent;
-}
-
-#urlbar:-moz-locale-dir(ltr) > .autocomplete-history-dropmarker:hover ,
-#urlbar:-moz-locale-dir(ltr) > .autocomplete-history-dropmarker[open="true"] {
-  -moz-border-left-colors: ButtonShadow;
-}
-
 /* page proxy icon */
 
 #page-proxy-favicon,
@@ -730,8 +685,8 @@ toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="tru
 
 #page-proxy-stack {
   width: 24px;
-  height: 20px;
-  padding: 2px 4px;
+  height: 18px;
+  padding: 1px 4px;
   background: url(urlbar-favicon-glow.png) center center no-repeat;
 }
 
@@ -1525,17 +1480,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   -moz-image-region: auto;
 }
 
-/* If the nav toolbar is tall enough and an input box is the last item, add
-   extra end spacing so that horizontal spacing matches vertical spacing. */
-#nav-bar[mode="full"]:not([currentset]),
-#nav-bar[mode="full"][currentset$=",urlbar-container"],
-#nav-bar[mode="full"][currentset$=",search-container"],
-#nav-bar[iconsize="large"][mode="icons"]:not([currentset]),
-#nav-bar[iconsize="large"][mode="icons"][currentset$=",urlbar-container"],
-#nav-bar[iconsize="large"][mode="icons"][currentset$=",search-container"] {
-  -moz-padding-end: 2px;
-}
-
 /* ::::: Keyboard UI Panel ::::: */
 
 .KUI-panel {

browser/themes/winstripe/browser/jar.mn

@@ -39,7 +39,6 @@ browser.jar:
         skin/classic/browser/menu-forward.png                        (menu-forward.png)
         skin/classic/browser/monitor.png
         skin/classic/browser/monitor_16-10.png
-        skin/classic/browser/navbar-textbox-buttons.png
         skin/classic/browser/urlbar-favicon-glow.png
         skin/classic/browser/feeds/feed-icons-16.png                 (feeds/feed-icons-16.png)
         skin/classic/browser/feeds/feedIcon.png                      (feeds/feedIcon.png)
@@ -127,7 +126,6 @@ browser.jar:
         skin/classic/aero/browser/menu-forward.png                   (menu-forward-aero.png)
         skin/classic/aero/browser/monitor.png
         skin/classic/aero/browser/monitor_16-10.png
-        skin/classic/aero/browser/navbar-textbox-buttons.png         (navbar-textbox-buttons-aero.png)
         skin/classic/aero/browser/urlbar-favicon-glow.png
         skin/classic/aero/browser/feeds/feed-icons-16.png            (feeds/feed-icons-16-aero.png)
         skin/classic/aero/browser/feeds/feedIcon.png                 (feeds/feedIcon-aero.png)

browser/themes/winstripe/browser/searchbar.css

@@ -1,5 +1,4 @@
 .searchbar-textbox {
-  min-height: 22px;
   width: 6em;
   min-width: 6em;
 }
@@ -8,15 +7,6 @@
   -moz-box-align: stretch;
 }
 
-.searchbar-textbox:-moz-system-metric(windows-default-theme) {
-  -moz-appearance: none;
-  border-width: 1px;
-  -moz-border-top-colors: ThreeDShadow;
-  -moz-border-bottom-colors: ThreeDShadow;
-  -moz-border-right-colors: ThreeDShadow;
-  -moz-border-left-colors: ThreeDShadow;
-}
-
 .textbox-input-box {
   margin: 0;
 }
@@ -35,29 +25,11 @@
   -moz-appearance: none;
   min-width: 0;
   margin: 0;
-  -moz-margin-end: 3px;
   padding: 0;
+  -moz-padding-end: 2px;
   -moz-box-align: center;
-  background: -moz-dialog url(navbar-textbox-buttons.png) repeat-x;
-  border: 0 solid;
-  -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):-moz-locale-dir(ltr) {
-  -moz-border-right-colors: rgba(0,0,0,.05);
-}
-
-.searchbar-engine-button:hover {
-  background-position: 0 -60px;
-}
-
-.searchbar-engine-button[open="true"] {
-  background-position: 0 -120px;
-  -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.2) inset;
+  background: none;
+  border: none;
 }
 
 .searchbar-engine-button > .button-box {