Backed out changeset c10c8cecab42 (bug 1686529) browser-chrome failures in browser_preferences_usage. CLOSED TREE

browser/base/content/tabbrowser-tab.js

@@ -13,6 +13,7 @@
         ? `
         <vbox class="tab-background">
           <hbox class="tab-context-line"/>
+          <hbox class="tab-line"/>
           <spacer flex="1" class="tab-background-inner"/>
         </vbox>
 `

browser/themes/addons/alpenglow/manifest.json

@@ -9,7 +9,7 @@
 
   "name": "Firefox Alpenglow",
   "description": "Use a colorful appearance for buttons, menus, and windows.",
-  "version": "1.4",
+  "version": "1.3",
   "icons": { "32": "icon.svg" },
 
   "theme": {
@@ -42,11 +42,11 @@
       "toolbar_field_focus": "hsla(261, 53%, 15%, .96)",
       "toolbar_field_text": "hsla(261, 53%, 15%, 1)",
       "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)",
-      "toolbar_field_border": "transparent",
+      "toolbar_field_border": "hsla(261, 53%, 15%, .32)",
       "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)",
       "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)",
       "toolbar_field_separator": "hsla(261, 53%, 15%, .32)",
-      "toolbar_top_separator": "transparent",
+      "toolbar_top_separator": "hsla(261, 53%, 15%, 1)",
       "toolbar_bottom_separator": "hsla(261, 53%, 15%, .32)",
       "bookmark_text": "hsla(261, 53%, 15%, 1)",
       "tab_text": "hsla(261, 53%, 15%, 1)",
@@ -99,11 +99,11 @@
       "toolbar_field_focus": "hsla(250, 43%, 25%, .98)",
       "toolbar_field_text": "hsla(255, 100%, 94%, 1)",
       "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)",
-      "toolbar_field_border": "transparent",
+      "toolbar_field_border": "hsla(255, 100%, 94%, .32)",
       "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)",
       "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)",
       "toolbar_field_separator": "hsla(261, 53%, 15%, .32)",
-      "toolbar_top_separator": "transparent",
+      "toolbar_top_separator": "hsla(255, 100%, 94%, .32)",
       "toolbar_bottom_separator": "hsla(245, 38%, 33%, .96)",
       "bookmark_text": "hsla(255, 100%, 94%, 1)",
       "tab_selected": "rgb(60, 31, 123)",

browser/themes/addons/proton-dark/manifest.json

@@ -10,15 +10,13 @@
   "name": "Proton Dark",
   "description": "A theme with a dark color scheme.",
   "author": "Mozilla",
-  "version": "1.2",
+  "version": "1.1",
 
   "icons": {"32": "icon.svg"},
 
   "theme": {
     "colors": {
       "tab_background_text": "#fbfbfe",
-      "tab_selected": "rgb(66,65,77)",
-      "tab_text": "rgb(251,251,254)",
       "icons": "rgb(249, 249, 250, 0.7)",
       "frame": "#1c1b22",
       "popup": "rgb(66,65,77)",
@@ -26,7 +24,7 @@
       "popup_border": "rgb(82,82,94)",
       "popup_highlight": "rgb(43,42,51)",
       "tab_line": "#0a84ff",
-      "toolbar": "rgb(43,42,51)",
+      "toolbar": "hsl(240, 1%, 20%)",
       "toolbar_bottom_separator": "hsl(240, 5%, 5%)",
       "toolbar_field": "rgb(28,27,34)",
       "toolbar_field_border": "transparent",

browser/themes/addons/proton-light/manifest.json

@@ -10,15 +10,13 @@
   "name": "Proton Light",
   "description": "A theme with a light color scheme.",
   "author": "Mozilla",
-  "version": "1.2",
+  "version": "1.1",
 
   "icons": {"32": "icon.svg"},
 
   "theme": {
     "colors": {
-      "tab_background_text": "rgb(21,20,26)",
+      "tab_background_text": "#15141a",
-      "tab_selected": "#fff",
-      "tab_text": "rgb(21,20,26)",
       "icons": "rgb(24, 25, 26, 0.7)",
       "frame": "#f0f0f4",
       "popup": "#fff",

browser/themes/linux/browser.css

@@ -25,7 +25,6 @@
 
   --panel-separator-color: ThreeDShadow;
 
-  --tabs-border-color: rgba(0,0,0,.3);
 
   --chrome-content-separator-color: ThreeDShadow;
 }
@@ -36,6 +35,10 @@
 }
 } /*** END proton ***/
 
+#navigator-toolbox {
+  --tabs-border-color: rgba(0,0,0,.3);
+}
+
 #tabbrowser-tabs {
   --tab-line-color: -moz-accent-color;
 }

browser/themes/osx/browser.css

@@ -34,24 +34,17 @@
   --arrowpanel-field-background: rgba(12,12,13,.3);
 }
 
-@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 #navigator-toolbox {
   appearance: none;
   --tabs-border-color: rgba(0,0,0,.2);
 }
-} /*** end !proton ***/
-
-@supports -moz-bool-pref("browser.proton.tabs.enabled") {
-#navigator-toolbox {
-  appearance: none;
-}
 
+@supports -moz-bool-pref("browser.proton.enabled") {
 #navigator-toolbox:not(:-moz-lwtheme) {
   background-color: #f0f0f4;
 }
 } /*** END proton ***/
 
-@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 #navigator-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
   --tabs-border-color: rgba(0,0,0,.05);
 }
@@ -59,7 +52,6 @@
 #navigator-toolbox:-moz-lwtheme {
   --tabs-border-color: rgba(0,0,0,.3);
 }
-} /*** end !proton ***/
 
 /*
   This is a workaround for Bug 1482157

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

@@ -41,10 +41,6 @@
     --input-bgcolor: rgb(255,255,255);
     --input-border-color: rgb(143,143,157);
     --input-error-border-color: #E22850;
-
-    --tab-selected-bgcolor: rgb(255,255,255);
-    --tabs-border-color: transparent;
-    --toolbar-color: rgb(21,20,26);
   }
   } /** END Proton **/
 

browser/themes/shared/tabs.inc.css

@@ -703,11 +703,15 @@
   color: var(--lwt-tab-text, var(--toolbar-color));
 }
 
-@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-line {
   height: 2px;
 }
-} /* end !proton */
+
+@supports -moz-bool-pref("browser.proton.tabs.enabled") {
+.tab-line {
+  display: none;
+}
+} /*** END proton ***/
 
 /* Selected tab */
 
@@ -726,8 +730,12 @@
   margin-top: 0 !important;
 }
 
-#TabsToolbar:not([brighttext]) .tabbrowser-tab[visuallyselected=true] > .tab-stack > .tab-background {
+.tabbrowser-tab[visuallyselected=true] > .tab-stack > .tab-background {
-  box-shadow: 0 0 1.5px rgba(128,128,142,0.9), 0 0 4px rgba(128,128,142,0.5);
+  box-shadow: 0px 1px 2px rgba(58, 57, 68, 0.1);
+}
+
+.tabbrowser-tab[visuallyselected=true]:hover > .tab-stack > .tab-background {
+  box-shadow: 0px 2px var(--tab-shadow-max-size) rgba(58, 57, 68, 0.2);
 }
 } /*** END proton ***/
 
@@ -757,7 +765,7 @@
 .tab-background[multiselected=true],
 .tab-background[selected=true] {
   border-top-color: var(--tabs-border-color);
-  background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
+  background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   background-repeat: repeat-x;
 }
@@ -768,12 +776,10 @@
   opacity: .1;
 }
 
-@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tab-line[multiselected],
 .tab-line[selected=true] {
   background-color: var(--tab-line-color);
 }
-} /* end !proton */
 
 /*
  * LightweightThemeConsumer will set the current lightweight theme's header
@@ -795,7 +801,6 @@
 
 /* Tab hover */
 
-@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
   background-color: rgba(0,0,0,.1);
 }
@@ -803,15 +808,7 @@
 #TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
   background-color: rgba(255,255,255,.1);
 }
-} /* END !proton */
 
-@supports -moz-bool-pref("browser.proton.tabs.enabled") {
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) {
-  background-color: color-mix(in srgb, currentColor 11%, transparent);
-}
-} /* END proton */
-
-@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 @media (prefers-reduced-motion: no-preference) {
   .tab-line:not([selected=true], [multiselected]) {
     transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
@@ -836,7 +833,6 @@
 .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line[multiselected]:not([selected=true]) {
   opacity: 0.5;
 }
-} /* end !proton */
 
 /* Pinned tabs */
 

browser/themes/windows/browser-aero.css

@@ -44,7 +44,6 @@
   @media not (-moz-os-version: windows-win7) {
     @media not (-moz-os-version: windows-win8) {
       @media (-moz-windows-default-theme) {
-        @supports not -moz-bool-pref("browser.proton.enabled") {
         :root:not(:-moz-lwtheme) {
           background-color: hsl(0, 0%, 78%);
         }
@@ -76,18 +75,9 @@
             --toolbarbutton-icon-fill-opacity: .7;
           }
         }
-        } /*** end !proton ***/
-
-        @supports -moz-bool-pref("browser.proton.enabled") {
-        @media (-moz-windows-accent-color-in-titlebar) {
-          :root[sizemode=normal][tabsintitlebar] {
-            border-top: .5px solid -moz-accent-color;
-          }
-        }
-        } /*** END proton ***/
 
         :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive {
-          border-top-color: rgb(57,57,57);
+          border-top-color: rgba(0,0,0,.3);
         }
 
         :root[tabsintitlebar] .tab-label:-moz-window-inactive {
@@ -97,7 +87,7 @@
         }
 
         @supports -moz-bool-pref("browser.proton.tabs.enabled") {
-        :root[tabsintitlebar] .tab-secondary-label:-moz-window-inactive {
+        :root[tabsintitlebar] .tab-icon-sound:-moz-window-inactive {
           opacity: .6;
         }
         } /*** END proton ***/

browser/themes/windows/browser.css

@@ -21,7 +21,6 @@
   --panel-separator-color: ThreeDLightShadow;
 
   --chrome-content-separator-color: ThreeDShadow;
-  --tabs-border-color: threedshadow;
 }
 
 @supports not -moz-bool-pref("browser.proton.enabled") {
@@ -30,6 +29,10 @@
 }
 } /* END !proton */
 
+#navigator-toolbox {
+  --tabs-border-color: threedshadow;
+}
+
 #tabbrowser-tabs {
   --tab-line-color: highlight;
 }
@@ -49,11 +52,9 @@
     --toolbar-field-non-lwt-bgcolor: #f0f0f4;
   }
 
-  @supports not -moz-bool-pref("browser.proton.tabs.enabled") {
   #navigator-toolbox {
     --tabs-border-color: rgba(0,0,0,.3);
   }
-  } /* END !proton */
 
   #tabbrowser-tabs {
     --tab-line-color: #0a84ff;
@@ -70,11 +71,9 @@
   --panel-separator-color: rgba(249,249,250,.1);
 }
 
-@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 #navigator-toolbox:-moz-lwtheme {
   --tabs-border-color: rgba(0,0,0,.3);
 }
-} /* END !proton */
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */

browser/themes/windows/compacttheme.css

@@ -47,14 +47,12 @@
       color: hsl(240,9%,98%);
     }
 
-    @supports not -moz-bool-pref("browser.proton.tabs.enabled") {
     /* Because we're forcing the tabs toolbar to be [brighttext] to
      * get white toolbar button icons, we need to manually set the
      * correct color for the tab hover state for the light theme. */
     .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true], [multiselected]):-moz-lwtheme-darktext {
       background-color: rgba(0,0,0,.2) !important;
     }
-    } /* end !proton */
   }
 }
 } /*** END !proton ***/

toolkit/components/extensions/test/browser/browser_ext_themes_tab_line.js

@@ -30,7 +30,13 @@ add_task(async function test_support_tab_line() {
       ".tabbrowser-tab[selected]"
     );
     let line = selectedTab.querySelector(".tab-line");
-    if (!protonTabsEnabled) {
+    if (protonTabsEnabled) {
+      Assert.equal(
+        newWin.getComputedStyle(line).display,
+        "none",
+        "Tab line should not be displayed when Proton is enabled"
+      );
+    } else {
       Assert.equal(
         newWin.getComputedStyle(line).backgroundColor,
         `rgb(${hexToRGB(TAB_LINE_COLOR).join(", ")})`,

toolkit/mozapps/extensions/default-theme/manifest.json

@@ -19,78 +19,22 @@
 
   "dark_theme": {
     "colors": {
-      "tab_background_text": "#fbfbfe",
+      "tab_background_text": "rgb(249, 249, 250)",
-      "tab_selected": "rgb(66,65,77)",
-      "tab_text": "rgb(251,251,254)",
       "icons": "rgb(249, 249, 250, 0.7)",
-      "frame": "#1c1b22",
+      "frame": "hsl(240, 5%, 5%)",
-      "popup": "rgb(66,65,77)",
+      "popup": "#4a4a4f",
-      "popup_text": "rgb(251,251,254)",
+      "popup_text": "rgb(249, 249, 250)",
-      "popup_border": "rgb(82,82,94)",
+      "popup_border": "#27272b",
-      "popup_highlight": "rgb(43,42,51)",
       "tab_line": "#0a84ff",
-      "toolbar": "#2b2a33",
+      "toolbar": "hsl(240, 1%, 20%)",
       "toolbar_bottom_separator": "hsl(240, 5%, 5%)",
-      "toolbar_field": "rgb(28,27,34)",
+      "toolbar_field": "rgb(71, 71, 73)",
-      "toolbar_field_border": "transparent",
+      "toolbar_field_border": "rgba(249, 249, 250, 0.2)",
-      "toolbar_field_text": "rgb(251,251,254)",
-      "toolbar_field_focus": "rgb(66,65,77)",
       "toolbar_field_separator": "#5F6670",
-      "toolbar_text": "#BFBFC9",
+      "toolbar_field_text": "rgb(249, 249, 250)",
-      "ntp_background": "#2A2A2E",
-      "ntp_text": "rgb(249, 249, 250)",
       "sidebar": "#38383D",
       "sidebar_text": "rgb(249, 249, 250)",
-      "sidebar_border": "rgba(255, 255, 255, 0.1)",
+      "sidebar_border": "rgba(255, 255, 255, 0.1)"
-      "button": "rgb(43,42,51)",
-      "button_hover": "rgb(82,82,94)",
-      "button_active": "rgb(91,91,102)",
-      "checkbox_border_color": "rgb(143, 143, 157)",
-      "checkbox_unchecked_background": "rgb(43, 42, 51)",
-      "checkbox_unchecked_background_hover": "rgb(82, 82, 94)",
-      "checkbox_unchecked_background_active": "rgb(91, 91, 102)",
-      "checkbox_checked_background": "rgb(0, 221, 255)",
-      "checkbox_checked_color": "rgb(43, 42, 51)",
-      "checkbox_checked_background_hover": "rgb(128, 235, 255)",
-      "checkbox_checked_background_active": "rgb(170, 242, 255)",
-      "error_text_color": "rgb(255, 154, 162)",
-      "input_background": "#42414D",
-      "input_color": "#BFBFC9",
-      "input_border": "#8f8f9d",
-      "input_border_error": "rgb(255, 132, 138)",
-      "zoom_controls": "rgb(74,74,85)"
-    },
-    "properties": {
-      "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
-      "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
-      "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)"
-    }
-  },
-
-  "theme_experiment": {
-    "colors": {
-      "button": "--button-bgcolor",
-      "button_hover": "--button-hover-bgcolor",
-      "button_active": "--button-active-bgcolor",
-      "checkbox_border_color": "--checkbox-border-color",
-      "checkbox_unchecked_background": "--checkbox-unchecked-bgcolor",
-      "checkbox_unchecked_background_hover": "--checkbox-unchecked-hover-bgcolor",
-      "checkbox_unchecked_background_active": "--checkbox-unchecked-active-bgcolor",
-      "checkbox_checked_background": "--checkbox-checked-bgcolor",
-      "checkbox_checked_color": "--checkbox-checked-color",
-      "checkbox_checked_background_hover": "--checkbox-checked-hover-bgcolor",
-      "checkbox_checked_background_active": "--checkbox-checked-active-bgcolor",
-      "error_text_color": "--error-text-color",
-      "input_background": "--input-bgcolor",
-      "input_color": "--input-color",
-      "input_border": "--input-border-color",
-      "input_border_error": "--input-error-border-color",
-      "zoom_controls": "--zoom-controls-bgcolor"
-    },
-    "properties": {
-      "panel_hover": "--arrowpanel-dimmed",
-      "panel_active": "--arrowpanel-dimmed-further",
-      "panel_active_darker": "--arrowpanel-dimmed-even-further"
     }
   }
 }