Bug 1689761 - update tab keyboard focus to Proton styles. r=jaws
☠☠ backed out by a65883accdf6 ☠ ☠
authorYura Zenevich <yura.zenevich@gmail.com>
Wed, 10 Feb 2021 15:21:05 +0000
changeset 566826 8c53818717a1fb7a9925b8ac612d504167dabced
parent 566825 232a4e735cdcbdb6d16f05e3a9b79f8c69301a31
child 566827 93aab6a4a920da467ccd665401879bc51d750060
push id38191
push userbtara@mozilla.com
push dateThu, 11 Feb 2021 05:02:45 +0000
treeherdermozilla-central@5cbcb80f72bd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1689761
milestone87.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1689761 - update tab keyboard focus to Proton styles. r=jaws Differential Revision: https://phabricator.services.mozilla.com/D103823
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -259,21 +259,23 @@ menuitem.bookmark-item {
 }
 
 @media (-moz-menubar-drag) {
   #TabsToolbar {
     -moz-window-dragging: drag;
   }
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 .keyboard-focused-tab > .tab-stack > .tab-content,
 .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-content {
   outline: 1px dotted;
   outline-offset: -6px;
 }
+} /*** END !proton ***/
 
 #context_reloadTab {
   list-style-image: url("moz-icon://stock/gtk-refresh?size=menu");
 }
 
 #context_closeOtherTabs {
   list-style-image: url("moz-icon://stock/gtk-clear?size=menu");
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -514,21 +514,23 @@
 }
 
 .tabbrowser-tab[multiselected],
 .tabbrowser-tab[visuallyselected=true] {
   /* overriding tabbox.css */
   text-shadow: inherit;
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 :is(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
 :is(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-icon-image[pinned],
 :is(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-throbber[pinned] {
   box-shadow: var(--focus-ring-box-shadow);
 }
+} /*** END !proton ***/
 
 #TabsToolbar > .toolbar-items {
   padding-top: var(--space-above-tabbar);
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {
   color: #333;
 }
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -97,16 +97,24 @@
   -moz-box-align: stretch;
 }
 
 @supports -moz-bool-pref("browser.proton.tabs.enabled") {
 .tabbrowser-tab {
   border-radius: var(--proton-tab-radius);
   min-height: var(--tab-min-height);
 }
+
+/* tabbrowser-tab keyboard focus */
+.keyboard-focused-tab > .tab-stack > .tab-background,
+.tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
+  outline: var(--focus-outline);
+  -moz-outline-radius: var(--proton-tab-radius);
+  outline-offset: -2px;
+}
 } /*** END proton ***/
 
 /* The selected tab should appear above the border between the tabs toolbar and
    the navigation toolbar. */
 .tabbrowser-tab[visuallyselected=true] {
   position: relative;
   z-index: 2;
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -603,22 +603,24 @@ menuitem.bookmark-item {
 @media (-moz-windows-default-theme: 0) {
   /* For high contrast themes. */
   #tabbrowser-tabpanels,
   :root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
     background-color: -moz-default-background-color;
   }
 }
 
+@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
 /* tabbrowser-tab focus ring */
 .keyboard-focused-tab > .tab-stack > .tab-content,
 .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-content {
   outline: 1px dotted;
   outline-offset: -6px;
 }
+} /*** END !proton ***/
 
 /* All tabs menupopup */
 
 .alltabs-item[selected="true"] {
   font-weight: bold;
 }
 
 toolbarbutton.bookmark-item[dragover="true"][open="true"] {