Bug 1352366 - Implement photon location bar style changes. r=dao

browser/themes/linux/browser.css

@@ -19,7 +19,11 @@
   --backbutton-border-color: var(--urlbar-border-color-hover);
   --backbutton-background: rgba(255,255,255,.15);
 
+%ifdef MOZ_PHOTON_THEME
+  --toolbarbutton-border-radius: 2px;
+%else
   --toolbarbutton-border-radius: 1px;
+%endif
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) - 1px);
 
@@ -321,12 +325,24 @@ menuitem.bookmark-item {
 #main-window {
   --urlbar-border-color: ThreeDShadow;
   --urlbar-border-color-hover: var(--urlbar-border-color);
+  --urlbar-background-color: moz-field;
 }
 
 #navigator-toolbox:-moz-lwtheme {
   --urlbar-border-color: rgba(0,0,0,.3);
 }
 
+%ifdef MOZ_PHOTON_THEME
+
+%include ../shared/location-search-bar.inc.css
+
+#urlbar[focused="true"],
+.searchbar-textbox[focused="true"] {
+  border-color: Highlight;
+}
+
+%else
+
 #urlbar,
 .searchbar-textbox {
   -moz-appearance: none;
@@ -356,6 +372,7 @@ menuitem.bookmark-item {
 .searchbar-textbox:-moz-lwtheme[focused=true] {
   background-color: white;
 }
+%endif
 
 .urlbar-textbox-container {
   -moz-appearance: none;

browser/themes/osx/browser.css

@@ -24,7 +24,11 @@
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px);
 
+%ifdef MOZ_PHOTON_THEME
+  --toolbarbutton-border-radius: 4px;
+%else
   --toolbarbutton-border-radius: 3px;
+%endif
 
   --toolbarbutton-hover-background: hsla(0,0%,100%,.1) linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,.1)) padding-box;
   --toolbarbutton-hover-bordercolor: hsla(0,0%,0%,.2);
@@ -588,6 +592,29 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-p
 
 /* ::::: nav-bar-inner ::::: */
 
+%ifdef MOZ_PHOTON_THEME
+
+#main-window {
+  --urlbar-border-color: hsla(240, 5%, 5%, .25);
+  --urlbar-border-color-hover: hsla(240, 5%, 5%, .35);
+  --urlbar-background-color: -moz-field;
+}
+
+%include ../shared/location-search-bar.inc.css
+
+#urlbar[focused="true"],
+.searchbar-textbox[focused="true"] {
+  border-color: -moz-mac-focusring;
+  box-shadow: var(--focus-ring-box-shadow);
+}
+
+#urlbar,
+.searchbar-textbox {
+  font: icon;
+}
+
+%else
+
 #urlbar,
 .searchbar-textbox {
   font: icon;
@@ -636,7 +663,6 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-p
   border-radius: var(--toolbarbutton-border-radius);
 }
 
-%ifndef MOZ_PHOTON_THEME
 @conditionalForwardWithUrlbar@ > #urlbar {
   border-inline-start: none;
   margin-left: 0;

browser/themes/shared/location-search-bar.inc.css

@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#urlbar,
+.searchbar-textbox {
+  -moz-appearance: none;
+  background-clip: content-box;
+  background-color: var(--urlbar-background-color);
+  border: 1px solid var(--urlbar-border-color);
+  border-radius: var(--toolbarbutton-border-radius);
+  box-shadow: 0 1px 4px hsla(0, 0%, 0%, .05);
+  padding: 0;
+  margin: 0 2px;
+}
+
+#urlbar:-moz-lwtheme:not(:hover):not([focused="true"]),
+.searchbar-textbox:-moz-lwtheme:not(:hover):not([focused="true"]) {
+  background-color: hsla(0, 100%, 100%, .8);
+}
+
+#urlbar:hover,
+.searchbar-textbox:hover {
+  border: 1px solid var(--urlbar-border-color-hover);
+  box-shadow: 0 1px 6px hsla(0, 0%, 0%, .1), 0 0 1px 0 rgba(0, 0, 0, .1);
+}
+
+#urlbar-container {
+  -moz-box-align: center;
+}

browser/themes/windows/browser.css

@@ -19,7 +19,11 @@
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-vertical-inner-padding) - 1px);
 
+%ifdef MOZ_PHOTON_THEME
+  --toolbarbutton-border-radius: 2px;
+%else
   --toolbarbutton-border-radius: 1px;
+%endif
 
   --toolbarbutton-hover-background: rgba(0,0,0,.1);
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
@@ -691,6 +695,25 @@ toolbar[brighttext] #close-button {
   --urlbar-border-color: var(--toolbarbutton-hover-bordercolor);
 }
 
+%ifdef MOZ_PHOTON_THEME
+
+@media (-moz-windows-default-theme) {
+  #main-window:not(:-moz-lwtheme) {
+    --urlbar-border-color: hsla(240, 5%, 5%, .25);
+    --urlbar-border-color-hover: hsla(240, 5%, 5%, .35);
+    --urlbar-background-color: -moz-field;
+  }
+}
+
+%include ../shared/location-search-bar.inc.css
+
+#urlbar[focused="true"],
+.searchbar-textbox[focused="true"] {
+  border-color: Highlight;
+}
+
+%else
+
 @media (-moz-windows-default-theme) {
   @media (-moz-os-version: windows-win7),
          (-moz-os-version: windows-win8) {
@@ -787,7 +810,6 @@ toolbar[brighttext] #close-button {
   background-color: white;
 }
 
-%ifndef MOZ_PHOTON_THEME
 @conditionalForwardWithUrlbar@ > #urlbar {
   border-inline-start: none;
   padding-inline-start: 0;

toolkit/themes/osx/global/global.css

@@ -24,11 +24,13 @@ menulist > menupopup {
   --focus-ring-box-shadow: @focusRingShadow@;
 }
 
+%ifndef MOZ_PHOTON_THEME
 @media (-moz-mac-yosemite-theme) {
   :root {
     --focus-ring-box-shadow: @yosemiteFocusRingShadow@;
   }
 }
+%endif
 
 /* ::::: root elements ::::: */
 

toolkit/themes/osx/global/shared.inc

@@ -1,8 +1,12 @@
 %filter substitution
 
 %define loweredShadow 0 1px rgba(255, 255, 255, .4)
+%ifdef MOZ_PHOTON_THEME
+%define focusRingShadow 0 0 0 1px -moz-mac-focusring inset, 0 0 0 1px -moz-mac-focusring
+%else
 %define focusRingShadow 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 1.5px 1px -moz-mac-focusring
 %define yosemiteFocusRingShadow 0 0 0 0.5px -moz-mac-focusring inset, 0 0 0 2px -moz-mac-focusring
+%endif
 
 %define roundButtonBorder 1px solid rgba(0,0,0,.35)
 %define roundButtonColor black