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)
6.39 KB,
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
|
||
https://treeherder.mozilla.org/#/jobs?repo=try&revision=d64e4399c911
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
|
||
https://treeherder.mozilla.org/#/jobs?repo=try&revision=db35e12c1ffe
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
|
||
https://hg.mozilla.org/integration/fx-team/rev/b0ac036f4c7f
Keywords: checkin-needed
Comment 15•9 years ago
|
||
https://hg.mozilla.org/mozilla-central/rev/b0ac036f4c7f
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.
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
•