Bug 1869299 - Clean up tab border set-up. r=dao,desktop-theme-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D196159

browser/themes/ThemeVariableMap.sys.mjs

@@ -56,10 +56,9 @@ export const ThemeVariableMap = [
     },
   ],
   [
-    "--lwt-tabs-border-color",
+    "--tabs-navbar-shadow-color",
     {
       lwtProperty: "toolbar_top_separator",
-      optionalElementID: "navigator-toolbox",
     },
   ],
   [

browser/themes/linux/browser.css

@@ -35,9 +35,11 @@
     --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
     --toolbar-field-color: inherit;
 
-    @media (-moz-gtk-theme-family) and (prefers-color-scheme: light) {
-      /* Use a slightly lighter box bgcolor for known themes */
-      --urlbar-box-bgcolor: #fafafa;
+    @media (-moz-gtk-theme-family) {
+      --tabs-navbar-shadow-color: transparent;
+      @media (prefers-color-scheme: light) {
+        --urlbar-box-bgcolor: #fafafa;
+      }
     }
   }
 }
@@ -103,15 +105,6 @@
   }
 }
 
-#nav-bar:not([tabs-hidden="true"]) {
-  /* This is needed for some toolbar button animations. Gross :( */
-  position: relative;
-  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3));
-  &:-moz-lwtheme {
-    box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
-  }
-}
-
 /* Bookmark menus */
 .bookmark-item {
   &:is(menu, menuitem) {

browser/themes/osx/browser.css

@@ -70,18 +70,6 @@
   }
 }
 
-/* Draw the bottom border of the tabs toolbar when titlebar isn't using vibrancy */
-:root:not([inFullscreen], [tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]),
-#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme {
-  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
-}
-
-#nav-bar:not([tabs-hidden="true"]) {
-  /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
-     The animations use position:absolute and require a positioned #nav-bar. */
-  position: relative;
-}
-
 /* ----- BOOKMARK TOOLBAR ----- */
 
 #nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {

browser/themes/shared/browser-custom-colors.css

@@ -48,6 +48,7 @@
     --tab-icon-overlay-stroke: light-dark(rgb(255, 255, 255), rgb(66, 65, 77));
     --tab-icon-overlay-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
     --tab-attention-icon-color: light-dark(rgb(42, 195, 162), rgb(84, 255, 189));
+    --tabs-navbar-shadow-color: transparent;
 
     --toolbox-non-lwt-bgcolor: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
     --toolbox-non-lwt-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));

browser/themes/shared/browser-shared.css

@@ -41,6 +41,7 @@
   --chrome-content-separator-color: ThreeDShadow;
 
   --tabs-navbar-shadow-size: 1px;
+  --tabs-navbar-shadow-color: ThreeDShadow;
 
   --panelui-subview-transition-duration: 150ms;
 
@@ -95,6 +96,7 @@
 
     --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
     --chrome-content-separator-color: rgba(0,0,0,.3);
+    --tabs-navbar-shadow-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3));
 
     @media not (prefers-contrast) {
       --focus-outline-color: light-dark(#0061E0, #00DDFF);
@@ -182,6 +184,13 @@
   transition: var(--ext-theme-background-transition);
 }
 
+#nav-bar:not([tabs-hidden="true"]) {
+  /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
+     The animations use position:absolute and require a positioned #nav-bar. */
+  position: relative;
+  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-navbar-shadow-color);
+}
+
 /* Bookmarks toolbar */
 
 #PersonalToolbar {

browser/themes/windows/browser.css

@@ -78,21 +78,6 @@
   color: var(--toolbar-color);
 }
 
-#nav-bar:not([tabs-hidden="true"]) {
-  /* This is needed for some toolbar button animations. Gross :( */
-  position: relative;
-}
-
-@media (prefers-contrast) {
-  #nav-bar:not(:-moz-lwtheme) {
-    box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 ThreeDShadow;
-  }
-}
-
-#nav-bar:-moz-lwtheme {
-  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
-}
-
 #print-preview-toolbar:not(:-moz-lwtheme) {
   appearance: auto;
   -moz-default-appearance: toolbox;