Commit 35d122b0 authored by Emilio Cobos Álvarez's avatar Emilio Cobos Álvarez
Browse files

Bug 1901298 - Clean-up tab outlines. a=RyanVM 

Make it a bit easier to follow / harder to mess up the specificity.

The issue is that the lwtheme rule was more specific than the keyboard
background since the regressing bug.

Original Revision: https://phabricator.services.mozilla.com/D215381

Differential Revision: https://phabricator.services.mozilla.com/D215494
parent d1d9ccce

browser/themes/ThemeVariableMap.sys.mjs

+0 −1
Original line number Diff line number Diff line
@@ -46,7 +46,6 @@ export const ThemeVariableMap = [ 
    "--lwt-tab-line-color",

    {

      lwtProperty: "tab_line",

      optionalElementID: "TabsToolbar",

    },

  ],

  [

browser/themes/shared/tabbrowser/tabs.css

+25 −30
Original line number Diff line number Diff line
@@ -20,13 +20,21 @@ 
  --tab-selected-textcolor: var(--toolbar-color);

  --tab-selected-bgcolor: var(--toolbar-bgcolor);

  --tab-selected-color-scheme: var(--toolbar-color-scheme);



  &[lwt-tab-selected="light"] {

    --tab-selected-color-scheme: light;

  }

  &[lwt-tab-selected="dark"] {

    --tab-selected-color-scheme: dark;

  }

  --tab-selected-outline-color: transparent;

  --tab-hover-outline-color: transparent;

  @media (prefers-contrast) {

    --tab-selected-outline-color: currentColor;

    --tab-hover-outline-color: currentColor;

  }

  &[lwtheme] {

    --tab-selected-outline-color: var(--lwt-tab-line-color, currentColor);

  }

}



#tabbrowser-tabs {
@@ -123,13 +131,6 @@ 
    }

  }



  /* tabbrowser-tab keyboard focus */

  &.keyboard-focused-tab > .tab-stack > .tab-background,

  &:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {

    outline: var(--focus-outline);

    outline-offset: var(--focus-outline-inset);

  }



  #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > &:is([selected], [multiselected]) {

    position: relative;

    z-index: 2;
@@ -563,11 +564,8 @@ 
#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon,

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {

  background-color: color-mix(in srgb, currentColor 11%, transparent);

}



#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,

#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {

  box-shadow: 0 0 4px rgba(0,0,0,.4);

  outline: 1px solid var(--tab-hover-outline-color);

  outline-offset: -1px;

}



#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
@@ -575,6 +573,13 @@ 
  background-color: var(--tab-selected-bgcolor);

  background-origin: border-box;

  background-repeat: repeat-x;

  box-shadow: 0 0 4px rgba(0,0,0,.4);

  outline: 1px solid var(--tab-selected-outline-color);

  outline-offset: -1px;



  #tabbrowser-tabs[noshadowfortests] & {

    box-shadow: none;

  }

}



#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
@@ -583,23 +588,6 @@ 
  color-scheme: var(--tab-selected-color-scheme);

}



@media (prefers-contrast) {

  #TabsToolbar #firefox-view-button:is([open], :hover):not(:focus-visible) > .toolbarbutton-icon,

  .tab-background[selected],

  .tabbrowser-tab:hover > .tab-stack > .tab-background {

    outline: 1px solid currentColor;

    outline-offset: -1px;

  }

}



@media not (prefers-contrast) {

  :root[lwtheme] #TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon,

  :root[lwtheme] .tab-background[selected]:not([multiselected]) {

    outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));

    outline-offset: -1px;

  }

}



/* Add a focus outline on top of the multiselected tabs, with the currently selected

   tab getting a slightly thicker outline. */

.tab-background[multiselected] {
@@ -612,6 +600,13 @@ 
  }

}



/* Keyboard focus outline */

#TabsToolbar #firefox-view-button:focus-visible > .toolbarbutton-icon,

.tabbrowser-tab:is(.keyboard-focused-tab, :focus:not([aria-activedescendant])) > .tab-stack > .tab-background {

  outline: var(--focus-outline);

  outline-offset: var(--focus-outline-inset);

}



/* Pinned tabs */



.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),