From f38461c37835e73e5f75477cad2ba2e12418530d Mon Sep 17 00:00:00 2001 From: Piro / YUKI Hiroshi Date: Wed, 31 Aug 2016 02:59:56 +0900 Subject: [PATCH] Fix broken appearance of tabs on Firefox 51 and later. See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1297157 --- skin/classic/treestyletab/metal/tab.css | 105 +++++++++++++----- skin/classic/treestyletab/sidebar/sidebar.css | 34 ++++-- skin/classic/treestyletab/square/base.css | 39 +++++-- .../treestyletab/square/tab-surface.css | 12 +- 4 files changed, 136 insertions(+), 54 deletions(-) diff --git a/skin/classic/treestyletab/metal/tab.css b/skin/classic/treestyletab/metal/tab.css index 05546d3a..77835a03 100644 --- a/skin/classic/treestyletab/metal/tab.css +++ b/skin/classic/treestyletab/metal/tab.css @@ -56,20 +56,28 @@ width: 0; } .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab:hover .tab-background:not([visuallyselected="true"]) { + .tabbrowser-tab:hover + .tab-background:not([selected="true"]):not([visuallyselected="true"]) { background-image: none; } /* for Mac OS X */ .tabbrowser-tabs[treestyletab-mode="vertical"] - :-moz-any(.tab-content:not([pinned]):not([visuallyselected="true"]), - .tab-content[pinned]:not([titlechanged]):not([visuallyselected="true"]), + :-moz-any(.tab-content:not([pinned]):not([selected="true"]):not([visuallyselected="true"]), + .tab-content[pinned]:not([titlechanged]):not([selected="true"]):not([visuallyselected="true"]), + .tab-background-start:not([selected="true"]):not([visuallyselected="true"]), + .tab-background-middle:not([selected="true"]):not([visuallyselected="true"]):not([pinned]), + .tab-background-middle:not([selected="true"]):not([visuallyselected="true"])[pinned]:not([titlechanged]), + .tab-background-end:not([selected="true"]):not([visuallyselected="true"]), + /* Firefox 51 and later */ + .tab-content:not([pinned])[selected="true"], + .tab-content[pinned]:not([titlechanged])[selected="true"], + .tab-background-start[selected="true"], + .tab-background-middle[selected="true"], + .tab-background-end[selected="true"], + /* old Firefox */ .tab-content:not([pinned])[visuallyselected="true"], .tab-content[pinned]:not([titlechanged])[visuallyselected="true"], - .tab-background-start:not([visuallyselected="true"]), - .tab-background-middle:not([visuallyselected="true"]):not([pinned]), - .tab-background-middle:not([visuallyselected="true"])[pinned]:not([titlechanged]), - .tab-background-end:not([visuallyselected="true"]), .tab-background-start[visuallyselected="true"], .tab-background-middle[visuallyselected="true"], .tab-background-end[visuallyselected="true"]) { @@ -77,9 +85,14 @@ background: transparent !important; } .tabbrowser-tabs[treestyletab-mode="vertical"] - :-moz-any(.tab-background-start:not([visuallyselected="true"]), - .tab-background-middle:not([visuallyselected="true"]), - .tab-background-end:not([visuallyselected="true"]), + :-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]), + .tab-background-middle:not([selected="true"]):not([visuallyselected="true"]), + .tab-background-end:not([selected="true"]):not([visuallyselected="true"]), + /* Firefox 51 and later */ + .tab-background-start[selected="true"], + .tab-background-middle[selected="true"], + .tab-background-end[selected="true"], + /* old Firefox */ .tab-background-start[visuallyselected="true"], .tab-background-middle[visuallyselected="true"], .tab-background-end[visuallyselected="true"]) { @@ -205,11 +218,17 @@ .tabbrowser-tab:hover .tab-content[pinned]:not([titlechanged]), .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab:not(:hover) - .tab-content[pinned][visuallyselected], + .tabbrowser-tab[visuallyselected]:not(:hover) + :-moz-any(/* Firefox 51 and later */ + .tab-content[pinned][selected], + /* old Firefox */ + .tab-content[pinned][visuallyselected]), .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab:hover - .tab-content[pinned][visuallyselected] { + .tabbrowser-tab[visuallyselected]:hover + :-moz-any(/* Firefox 51 and later */ + .tab-content[pinned][selected], + /* old Firefox */ + .tab-content[pinned][visuallyselected]) { background: none !important; } @@ -251,11 +270,17 @@ .tabbrowser-tab:hover .tab-content[pinned], .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab:not(:hover) - .tab-content[pinned][visuallyselected="true"], + .tabbrowser-tab[visuallyselected="true"]:not(:hover) + :-moz-any(/* Firefox 51 and later */ + .tab-content[pinned][selected="true"], + /* old Firefox */ + .tab-content[pinned][visuallyselected="true"]), .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab:hover - .tab-content[pinned][visuallyselected="true"] { + .tabbrowser-tab[visuallyselected="true"]:hover + :-moz-any(/* Firefox 51 and later */ + .tab-content[pinned][selected="true"], + /* old Firefox */ + .tab-content[pinned][visuallyselected="true"]) { line-height: 1 !important; border: 1px solid #666666 !important; border-radius: 4px !important; @@ -269,20 +294,32 @@ .tabbrowser-tab:hover .tab-content[pinned]:not([titlechanged]), .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab:not(:hover) - .tab-content[visuallyselected="true"][pinned], + .tabbrowser-tab[visuallyselected="true"]:not(:hover) + .tab-content[selected="true"][pinned], /* Firefox 51 and later */ .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab:hover - .tab-content[visuallyselected="true"][pinned] { + .tabbrowser-tab[visuallyselected="true"]:not(:hover) + .tab-content[visuallyselected="true"][pinned], /* old Firefox */ +.tabbrowser-tabs[treestyletab-mode="vertical"] + .tabbrowser-tab[visuallyselected="true"]:hover + .tab-content[selected="true"][pinned], /* Firefox 51 and later */ +.tabbrowser-tabs[treestyletab-mode="vertical"] + .tabbrowser-tab[visuallyselected="true"]:hover + .tab-content[visuallyselected="true"][pinned] /* old Firefox */ { background: #9d9d9d !important; } .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab:not(:hover) - .tab-content[visuallyselected="true"][pinned], + .tabbrowser-tab[visuallyselected="true"]:not(:hover) + .tab-content[selected="true"][pinned], /* Firefox 51 and later */ .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab:hover - .tab-content[visuallyselected="true"][pinned] { + .tabbrowser-tab[visuallyselected="true"]:not(:hover) + .tab-content[visuallyselected="true"][pinned], /* old Firefox */ +.tabbrowser-tabs[treestyletab-mode="vertical"] + .tabbrowser-tab[visuallyselected="true"]:hover + .tab-content[selected="true"][pinned], /* Firefox 51 and later */ +.tabbrowser-tabs[treestyletab-mode="vertical"] + .tabbrowser-tab[visuallyselected="true"]:hover + .tab-content[visuallyselected="true"][pinned] /* old Firefox */ { background-color: #b3b2b3 !important; } @@ -347,12 +384,20 @@ :root:-moz-window-inactive .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab - .tab-content[pinned][visuallyselected="true"], + .tabbrowser-tab[visuallyselected="true"] + .tab-content[pinned][selected="true"], /* Firefox 51 and later */ :root:-moz-window-inactive .tabbrowser-tabs[treestyletab-mode="vertical"] - .tabbrowser-tab:hover - .tab-content[pinned][visuallyselected="true"] { + .tabbrowser-tab[visuallyselected="true"] + .tab-content[pinned][visuallyselected="true"], /* old Firefox */ +:root:-moz-window-inactive + .tabbrowser-tabs[treestyletab-mode="vertical"] + .tabbrowser-tab[visuallyselected="true"]:hover + .tab-content[pinned][selected="true"], /* Firefox 51 and later */ +:root:-moz-window-inactive + .tabbrowser-tabs[treestyletab-mode="vertical"] + .tabbrowser-tab[visuallyselected="true"]:hover + .tab-content[pinned][visuallyselected="true"] /* old Firefox */ { background: #e4e4e4 !important; } diff --git a/skin/classic/treestyletab/sidebar/sidebar.css b/skin/classic/treestyletab/sidebar/sidebar.css index 6f01e49c..ff7d6bae 100644 --- a/skin/classic/treestyletab/sidebar/sidebar.css +++ b/skin/classic/treestyletab/sidebar/sidebar.css @@ -68,7 +68,8 @@ width: 0; } .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab:hover .tab-background:not([visuallyselected="true"]) { + .tabbrowser-tab:hover + .tab-background:not([selected="true"]):not([visuallyselected="true"]) { background-image: none; } @@ -404,26 +405,39 @@ tabbrowser[treestyletab-mode="vertical"] /* for Mac OS X */ .tabbrowser-tabs[treestyletab-mode="vertical"] - :-moz-any(.tab-content:not([visuallyselected="true"]):not([pinned]), - .tab-content:not([visuallyselected="true"])[pinned]:not([titlechanged]), + :-moz-any(.tab-content:not([selected="true"]):not([visuallyselected="true"]):not([pinned]), + .tab-content:not([selected="true"]):not([visuallyselected="true"])[pinned]:not([titlechanged]), + /* Firefox 51 and later */ + .tab-content[selected="true"], + /* old Firefox */ .tab-content[visuallyselected="true"]) { border: 0 none !important; background: transparent !important; } .tabbrowser-tabs[treestyletab-mode="vertical"] - :-moz-any(.tab-background-start:not([visuallyselected="true"]), - .tab-background-middle:not([visuallyselected="true"]), - .tab-background-end:not([visuallyselected="true"]), + :-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]), + .tab-background-middle:not([selected="true"]):not([visuallyselected="true"]), + .tab-background-end:not([selected="true"]):not([visuallyselected="true"]), + /* Firefox 51 and later */ + .tab-background-start[selected="true"], + .tab-background-middle[selected="true"], + .tab-background-end[selected="true"], + /* old Firefox */ .tab-background-start[visuallyselected="true"], .tab-background-middle[visuallyselected="true"], .tab-background-end[visuallyselected="true"]) { mask: none !important; } .tabbrowser-tabs[treestyletab-mode="vertical"] - :-moz-any(.tab-background-start:not([visuallyselected="true"]), - .tab-background-middle:not([visuallyselected="true"]):not([pinned]), - .tab-background-middle:not([visuallyselected="true"])[pinned]:not([titlechanged]), - .tab-background-end:not([visuallyselected="true"]), + :-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]), + .tab-background-middle:not([selected="true"]):not([visuallyselected="true"]):not([pinned]), + .tab-background-middle:not([selected="true"]):not([visuallyselected="true"])[pinned]:not([titlechanged]), + .tab-background-end:not([selected="true"]):not([visuallyselected="true"]), + /* Firefox 51 and later */ + .tab-background-start[selected="true"], + .tab-background-middle[selected="true"], + .tab-background-end[selected="true"], + /* old Firefox */ .tab-background-start[visuallyselected="true"], .tab-background-middle[visuallyselected="true"], .tab-background-end[visuallyselected="true"]) { diff --git a/skin/classic/treestyletab/square/base.css b/skin/classic/treestyletab/square/base.css index 2ba259c8..4978796b 100644 --- a/skin/classic/treestyletab/square/base.css +++ b/skin/classic/treestyletab/square/base.css @@ -100,7 +100,8 @@ width: 0; } .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab:hover .tab-background:not([visuallyselected="true"]) { + .tabbrowser-tab:hover + .tab-background:not([selected="true"]):not([visuallyselected="true"]) { background-image: none; } @@ -180,25 +181,38 @@ /* for Mac OS X */ .tabbrowser-tabs[treestyletab-mode="vertical"] - :-moz-any(.tab-content:not([pinned="true"]):not([visuallyselected="true"]), + :-moz-any(.tab-content:not([pinned="true"]):not([selected="true"]):not([visuallyselected="true"]), + /* Firefox 51 and later */ + .tab-content:not([pinned="true"])[selected="true"], + /+ old Firefox */ .tab-content:not([pinned="true"])[visuallyselected="true"]) { border: 0 none !important; background: transparent !important; } .tabbrowser-tabs[treestyletab-mode="vertical"] - :-moz-any(.tab-background-start:not([visuallyselected="true"]), - .tab-background-middle:not([visuallyselected="true"]), - .tab-background-end:not([visuallyselected="true"]), + :-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]), + .tab-background-middle:not([selected="true"]):not([visuallyselected="true"]), + .tab-background-end:not([selected="true"]):not([visuallyselected="true"]), + /* Firefox 51 and later */ + .tab-background-start[selected="true"], + .tab-background-middle[selected="true"], + .tab-background-end[selected="true"], + /* old Firefox */ .tab-background-start[visuallyselected="true"], .tab-background-middle[visuallyselected="true"], .tab-background-end[visuallyselected="true"]) { mask: none !important; } .tabbrowser-tabs[treestyletab-mode="vertical"] - :-moz-any(.tab-background-start:not([visuallyselected="true"]), - .tab-background-middle:not([visuallyselected="true"]):not([pinned]), - .tab-background-middle:not([visuallyselected="true"])[pinned]:not([titlechanged]), - .tab-background-end:not([visuallyselected="true"]), + :-moz-any(.tab-background-start:not([selected="true"]):not([visuallyselected="true"]), + .tab-background-middle:not([selected="true"]):not([visuallyselected="true"]):not([pinned]), + .tab-background-middle:not([selected="true"]):not([visuallyselected="true"])[pinned]:not([titlechanged]), + .tab-background-end:not([selected="true"]):not([visuallyselected="true"]), + /* Firefox 51 and later */ + .tab-background-start[selected="true"], + .tab-background-middle[selected="true"], + .tab-background-end[selected="true"], + /* old Firefox */ .tab-background-start[visuallyselected="true"], .tab-background-middle[visuallyselected="true"], .tab-background-end[visuallyselected="true"]) { @@ -304,10 +318,13 @@ .tabbrowser-tab:not([visuallyselected="true"]):not([pinned]), .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab - .tab-content[visuallyselected="true"]:not([pinned]), + :-moz-any(/* Firefox 51 and later */ + .tab-content[selected="true"]:not([pinned]), + /* old Firefox */ + .tab-content[visuallyselected="true"]:not([pinned])), .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab - .tab-content:not([visuallyselected="true"]):not([pinned]) { + .tab-content:not([selected="true"]):not([visuallyselected="true"]):not([pinned]) { padding: 0 0.2em !important; } diff --git a/skin/classic/treestyletab/square/tab-surface.css b/skin/classic/treestyletab/square/tab-surface.css index fe538ce1..f6451cf5 100644 --- a/skin/classic/treestyletab/square/tab-surface.css +++ b/skin/classic/treestyletab/square/tab-surface.css @@ -22,8 +22,11 @@ .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) - .tabbrowser-tab - .tab-background[visuallyselected="true"] { + .tabbrowser-tab[visuallyselected="true"] + :-moz-any(/* Firefox 51 and later */ + .tab-background[selected="true"], + /* old Firefox */ + .tab-background[visuallyselected="true"]) { background-color: var(--tst-tab-surface-selected) !important; background-image: -moz-linear-gradient( top, @@ -49,7 +52,10 @@ .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab:hover - .tab-background[visuallyselected="true"] { + :-moz-any(/* Firefox 51 and later */ + .tab-background[selected="true"], + /* old Firefox */ + .tab-background[visuallyselected="true"]) { background-color: var(--tst-tab-surface-selected-hover) !important; background-image: -moz-linear-gradient( top,