Bug 1724503 - Fix for lack of tab indication in dark mode + high contrast r=Gijs,desktop-theme-reviewers,dao

* Add a nested media query for prefers-contrast and prefers-color-scheme: dark

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

browser/themes/shared/tabs.inc.css

@@ -542,7 +542,7 @@
   margin-top: 0 !important;
 }
 
-/* Selected tab */
+/* Selected tab and tab hover */
 
 #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
   box-shadow: 0 0 4px rgba(0,0,0,.4);
@@ -555,6 +555,17 @@
   background-repeat: repeat-x;
 }
 
+@media (prefers-contrast) {
+  .tab-background:is([selected], [multiselected]),
+  .tabbrowser-tab:hover > .tab-stack > .tab-background {
+    border: 1px solid currentColor;
+  }
+}
+
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
+  background-color: color-mix(in srgb, currentColor 11%, transparent);
+}
+
 /* Add a translucent color on top of multiselected tabs */
 .tab-background[multiselected=true]:not([selected=true]) {
   opacity: .9;
@@ -566,8 +577,10 @@
   color: var(--lwt-tab-text, var(--toolbar-color));
 }
 
-.tab-background:is([selected], [multiselected]):-moz-lwtheme {
-  border: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
+@media not (prefers-contrast) {
+  .tab-background:is([selected], [multiselected]):-moz-lwtheme {
+    border: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
+  }
 }
 
 /*
@@ -586,20 +599,6 @@
   background-size: auto 100%, auto 100%, auto auto;
 }
 
-/* Tab hover */
-
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
-  background-color: color-mix(in srgb, currentColor 11%, transparent);
-}
-
-@media (prefers-contrast) {
-  .tabbrowser-tab:hover:not(:focus) > .tab-stack > .tab-background:not(:-moz-lwtheme),
-  .tabbrowser-tab:not(:focus) > .tab-stack > .tab-background:is([selected], [multiselected]):not(:-moz-lwtheme) {
-    outline: 1px solid currentColor;
-    outline-offset: -1px;
-  }
-}
-
 /* Pinned tabs */
 
 #TabsToolbar {