Closed
Bug 1173730
Opened 9 years ago
Closed 9 years ago
Use solid tab separator image on Windows 8 and 10
Categories
(Firefox :: Theme, defect, P1)
Tracking
()
VERIFIED
FIXED
Firefox 41
People
(Reporter: dao, Assigned: ntim)
References
(Blocks 1 open bug)
Details
Attachments
(1 file, 4 obsolete files)
(deleted),
patch
|
ntim
:
review+
lmandel
:
approval-mozilla-beta+
|
Details | Diff | Splinter Review |
Need to figure out if we need to actually use an image for this or whether plain CSS can do the job.
Assignee | ||
Comment 1•9 years ago
|
||
I think Stephen wanted this as well on Windows 8. See https://people.mozilla.org/~shorlander/mockups-interactive/australis-interactive-mockups/windows8.html
Also we can use a solid linear gradient here :
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
background-image: linear-gradient(transparent 0%, transparent 15%, rgba(100,100,100,0.3) 15%, rgba(100,100,100,0.3) 90%, transparent 90%) !important;
background-size: 1px 100% !important;
}
Assignee | ||
Updated•9 years ago
|
Assignee: nobody → ntim.bugs
Status: NEW → ASSIGNED
Updated•9 years ago
|
Priority: -- → P1
Assignee | ||
Comment 2•9 years ago
|
||
Untested.
Assignee | ||
Comment 3•9 years ago
|
||
Assignee | ||
Comment 4•9 years ago
|
||
Comment on attachment 8626647 [details] [diff] [review]
Patch
This works fine on Windows 10. Haven't tested on older Win versions yet.
Attachment #8626647 -
Flags: review?(gijskruitbosch+bugs)
Reporter | ||
Comment 5•9 years ago
|
||
Comment on attachment 8626647 [details] [diff] [review]
Patch
>+/* Use solid tab separator for Windows 8+ */
>+@media not all and (-moz-os-version: windows-xp) {
>+ @media not all and (-moz-os-version: windows-vista) {
>+ @media not all and (-moz-os-version: windows-win7) {
>+ :root {
>+ --tab-separator-image: linear-gradient(transparent 0%, transparent 15%, rgba(100,100,100,0.3) 15%, rgba(100,100,100,0.3) 90%, transparent 90%);
>+ --tab-separator-size: 1px 100%;
>+ }
>+ }
>+ }
>+}
Not sure whether that works better or worse than the current image for High Contrast and dark themes. I would guess it's worse. In any case, let's use this opportunity to improve the situation there. You can just use threedshadow instead of the rgba value for #TabsToolbar[brighttext], and I think we should do that regardless of the OS and OS version.
Attachment #8626647 -
Flags: review?(gijskruitbosch+bugs) → review-
Reporter | ||
Comment 6•9 years ago
|
||
(In reply to Dão Gottwald [:dao] from comment #5)
> You can just use
> threedshadow instead of the rgba value for #TabsToolbar[brighttext],
Oh wait, theedshadow would work for High Contrast but not for dark lightweight themes. So we'll actually need to use some rgb or rgba value close to white.
Assignee | ||
Comment 7•9 years ago
|
||
Attachment #8626647 -
Attachment is obsolete: true
Attachment #8626707 -
Flags: review?(dao)
Reporter | ||
Comment 8•9 years ago
|
||
Comment on attachment 8626707 [details] [diff] [review]
Patch v2
>+/* Use solid tab separator for Windows 8+ */
>+@media not all and (-moz-os-version: windows-xp) {
>+ @media not all and (-moz-os-version: windows-vista) {
>+ @media not all and (-moz-os-version: windows-win7) {
>+ :root {
>+ --tab-separator-image: linear-gradient(transparent 0%, transparent 15%, currentColor 15%, currentColor 90%, transparent 90%);
>+ --tab-separator-size: 1px 100%;
>+ --tab-separator-opacity: 0.25;
>+ }
>+ }
>+ }
>+}
That's a neat idea, but I suspect a 25% opacity is lower than what we'd want for dark themes and high contrast themes in particular.
Also, like I said I think we'd want to use the white separator for dark themes on all OSes. So, can you set the variable on #TabsToolbar rather than :root and do as I suggested in my previous comments?
Attachment #8626707 -
Flags: review?(dao)
Assignee | ||
Comment 9•9 years ago
|
||
Attachment #8626707 -
Attachment is obsolete: true
Attachment #8626893 -
Flags: review?(dao)
Assignee | ||
Comment 10•9 years ago
|
||
Reporter | ||
Comment 11•9 years ago
|
||
Comment on attachment 8626893 [details] [diff] [review]
Patch v3
> /* Background tab separators (3px wide).
> Also show separators beside the selected tab when dragging it. */
> #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
> .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
> #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
> -moz-margin-start: -1.5px;
> -moz-margin-end: -1.5px;
>- background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png);
>+ background-image: var(--tab-separator-image);
> background-position: left bottom var(--tab-toolbar-navbar-overlap);
> background-repeat: no-repeat;
>- background-size: 3px 100%;
>+ background-size: var(--tab-separator-size);
>+ opacity: var(--tab-separator-opacity);
> content: "";
> display: -moz-box;
> width: 3px;
> }
I assume leaving the horizontal margin and width as is fine. Although technically they could end up too small if --tab-separator-size was set to >3px...
>+/* Use bright solid tab separators for lw-themes */
>+#TabsToolbar[brighttext] {
>+ --tab-separator-image: linear-gradient(transparent 0%, transparent 15%, currentColor 15%, currentColor 90%, transparent 90%);
>+ --tab-separator-size: 1px 100%;
>+ --tab-separator-opacity: 0.4;
>+}
nit: The comment isn't quite correct. You can just remove it.
>+/* Use solid tab separators for Windows 8+ */
>+@media not all and (-moz-os-version: windows-xp) {
>+ @media not all and (-moz-os-version: windows-vista) {
>+ @media not all and (-moz-os-version: windows-win7) {
>+ #TabsToolbar {
>+ --tab-separator-image: linear-gradient(transparent 0%, transparent 15%, currentColor 15%, currentColor 90%, transparent 90%);
>+ --tab-separator-size: 1px 100%;
>+ --tab-separator-opacity: 0.2;
>+ }
>+ }
>+ }
>+}
Please add :not([brighttext]) here.
> /* Use lighter colors of buttons and text in the titlebar on luna-blue */
> @media (-moz-windows-theme: luna-blue) {
>- #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
>- .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
>- #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
>- background-image: url("chrome://browser/skin/tabbrowser/tab-separator-luna-blue.png");
>+ #TabsToolbar {
>+ --tab-separator-image: url("chrome://browser/skin/tabbrowser/tab-separator-luna-blue.png");
> }
> }
And here too.
Thanks!
Attachment #8626893 -
Flags: review?(dao) → review+
Assignee | ||
Comment 12•9 years ago
|
||
Addressed comments.
Attachment #8626893 -
Attachment is obsolete: true
Attachment #8626899 -
Flags: review+
Assignee | ||
Updated•9 years ago
|
Keywords: checkin-needed
Assignee | ||
Updated•9 years ago
|
Keywords: checkin-needed
Assignee | ||
Comment 13•9 years ago
|
||
Attachment #8626899 -
Attachment is obsolete: true
Attachment #8626910 -
Flags: review+
Assignee | ||
Updated•9 years ago
|
Keywords: checkin-needed
Comment 14•9 years ago
|
||
Keywords: checkin-needed
Comment 15•9 years ago
|
||
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 41
Assignee | ||
Comment 16•9 years ago
|
||
Comment on attachment 8626910 [details] [diff] [review]
Patch v4.1 (r=dao)
Approval Request Comment (for Firefox 40)
[Feature/regressing bug #]: Windows 10 styling work (Firefox 40 will be the first release after Windows 10's launch)
[User impact if declined]: tab styling will feel less integrated in win 10
[Describe test coverage new/current, TreeHerder]: on m-c
[Risks and why]: Low, css only change
[String/UUID change made/needed]: none.
Attachment #8626910 -
Flags: approval-mozilla-beta?
Assignee | ||
Comment 17•9 years ago
|
||
[Tracking Requested - why for this release]: See previous comment
status-firefox40:
--- → affected
tracking-firefox40:
--- → ?
Assignee | ||
Updated•9 years ago
|
status-firefox39:
--- → wontfix
Updated•9 years ago
|
Flags: qe-verify+
Comment 18•9 years ago
|
||
Verified fixed on Nightly 42.0a1 (2015-06-30) and Aurora 41.0a2 (2015-07-06), using Windows 10 Pro x64 (Insider Preview Build 10158).
The tab separators displayed in the tab strip are now displayed in a solid gray.
Comment 19•9 years ago
|
||
Comment on attachment 8626910 [details] [diff] [review]
Patch v4.1 (r=dao)
Verified visual fix for Windows 10. Beta+
Attachment #8626910 -
Flags: approval-mozilla-beta? → approval-mozilla-beta+
Comment 20•9 years ago
|
||
Not going to track this bug (not tracking every style change) but it is approved for beta.
Comment 21•9 years ago
|
||
Updated•9 years ago
|
Flags: qe-verify+
Comment 22•9 years ago
|
||
Verified fixed on Beta 40.0b2 (20150706172413) as well, using Windows 10 Pro x64 (Build 10158).
Flags: qe-verify+
Reporter | ||
Updated•9 years ago
|
Depends on: 1189212
Summary: Use solid tab separator image on Windows 10 → Use solid tab separator image on Windows 8 and 10
You need to log in
before you can comment on or make changes to this bug.
Description
•