Make library look good in dark mode
Categories
(Core :: Widget: Cocoa, task, P1)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox90 | --- | verified |
People
(Reporter: mbalfanz, Assigned: bugzilla)
References
(Blocks 1 open bug)
Details
(Whiteboard: [mac:darkmode])
Attachments
(5 files, 1 obsolete file)
Screenshot 2021-03-16 at 11.25.03.png
With the patch from bug 1697331, and widget.macos.respect-system-appearance set to true, the bookmarks library looks like in the attached screenshot in macOS Dark Mode.
The problems I see are:
- The list view has white background with white text, making text impossible to read
- the additional infos at the bottom have white text on light grey background. Same goes for the button in the bottom right corner, and the extra info that opens when clicking it
- the table headers should be light text on a dark background.
- the sorting arrow in the table headers appears dark, and should with a dark background probably be in a light color
|
Reporter | |
Comment 1•2 years ago
|
||
More generally, this goes for the whole "Library" dialog incl. Downloads and History
|
||
Comment 2•2 years ago
|
||
These hardcoded colors need to be updated to system ones, or to transparent:
https://searchfox.org/mozilla-central/rev/b3b6a9b1d0f54b8a432f11ced9283bd43b434bb0/browser/themes/osx/places/organizer.css#34
https://searchfox.org/mozilla-central/rev/b3b6a9b1d0f54b8a432f11ced9283bd43b434bb0/browser/themes/osx/places/organizer.css#48
https://searchfox.org/mozilla-central/rev/b3b6a9b1d0f54b8a432f11ced9283bd43b434bb0/browser/themes/osx/places/organizer.css#147-159
The rest seems to be widget code returning the wrong colors for Field or other system colors.
|
Assignee | |
Updated•2 years ago
|
|
|
Assignee | |
Comment 3•2 years ago
•
|
||
The tree in the Library window is given background-color: Field. The even rows are transparent and the odd rows are background-color: -moz-oddtreerow: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/tree.inc.css#16,31.
-moz-oddtreerow is a system color fetched here. I added some logging code there:
NSColor* evenColor = [[[NSColor controlAlternatingRowBackgroundColors] objectAtIndex:0] colorUsingColorSpaceName:NSDeviceRGBColorSpace];
NSColor* oddColor = [[[NSColor controlAlternatingRowBackgroundColors] objectAtIndex:1] colorUsingColorSpaceName:NSDeviceRGBColorSpace];
NSLog(@"even R: %f, G: %f, B: %f\n", evenColor.redComponent * 255.00, evenColor.greenComponent * 255.00, evenColor.blueComponent * 255.00);
NSLog(@"odd R: %f, G: %f, B: %f\n", oddColor.redComponent * 255.00, oddColor.greenComponent * 255.00, oddColor.blueComponent * 255.00);
When the system is in Light theme, we get
even R: 255.000000, G: 255.000000, B: 255.000000
odd R: 244.000000, G: 245.000000, B: 245.000000
which gives us the white/light grey alternating pattern we're used to. But in system dark we get
even R: 30.000000, G: 30.000000, B: 30.000000
odd R: 255.000000, G: 255.000000, B: 255.000000
which seems very surprising. The white/black alternating rows just don't look good, even when we use black text in the white rows. Those almost seem like they can't possibly be the right colours. Maybe this is an API bug?
In any case, the simplest way to change this might be rules like
tree {
margin: 0 4px;
background-color: Field;
color: FieldText;
appearance: auto;
-moz-default-appearance: listbox;
}
treechildren::-moz-tree-row(multicol, odd) {
background-color: color-mix(in srgb, FieldText 10%, Field);
}
We can play with the 10% number, but that looks pretty good in both light and dark themes. Screenshot attached (other things in the screenshot need to be fixed, of course).
EDIT: Whoops, I accidentally pasted my message into the file name field...
|
||
Comment 4•2 years ago
|
||
Maybe the color has an alpha component which we're discarding?
|
|
Assignee | |
Comment 5•2 years ago
|
||
Ah, yep. Thanks!
even R: 30.000000, G: 30.000000, B: 30.000000, A: 1.000000
odd R: 255.000000, G: 255.000000, B: 255.000000, A: 0.047059
|
|
Assignee | |
Comment 6•2 years ago
|
||
Result of
NSColor* evenColor = [[NSColor controlAlternatingRowBackgroundColors] objectAtIndex:0];
NSColor* oddColor = [[NSColor controlAlternatingRowBackgroundColors] objectAtIndex:1];
mColorEvenTreeRow =
GetColorFromNSColorWithAlpha(evenColor, evenColor.alphaComponent);
mColorOddTreeRow =
GetColorFromNSColorWithAlpha(oddColor, oddColor.alphaComponent);
tree {
margin: 0 4px;
background-color: Field;
color: FieldText;
appearance: auto;
-moz-default-appearance: listbox;
}
treechildren::-moz-tree-row(multicol, even) {
background-color: -moz-eventreerow;
}
treechildren::-moz-tree-row(multicol, odd) {
background-color: -moz-oddtreerow;
}
|
|
Assignee | |
Updated•2 years ago
|
|
||
Updated•2 years ago
|
|
|
Assignee | |
Comment 9•2 years ago
|
||
|
|
Assignee | |
Comment 10•2 years ago
|
||
Depends on D114408
|
|
Assignee | |
Comment 11•2 years ago
|
||
Depends on D114409
|
||
Comment 12•2 years ago
|
||
Pushed by htwyford@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f3f7f23f3ec0 Part 1 - Use color-mix for borders in macOS Library window. r=mac-reviewers,mstange https://hg.mozilla.org/integration/autoland/rev/c1188e42ad46 Part 2 - Draw treeheadercells with NSTableHeaderCell. r=mstange https://hg.mozilla.org/integration/autoland/rev/52ebc9d40f37 Part 3 - Remove custom 10.15-style toolbarbuttons. r=mac-reviewers,mstange
|
||
Comment 13•2 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/f3f7f23f3ec0
https://hg.mozilla.org/mozilla-central/rev/c1188e42ad46
https://hg.mozilla.org/mozilla-central/rev/52ebc9d40f37
|
||
Updated•2 years ago
|
I have reproduced this issue using Firefox 88.0a1 (2021.03.16) on macOS 11.
I can confirm this issue is fixed, I verified using Firefox 91.0a1 and 90.0b3 on macOS 11.
|
||
Comment 15•2 years ago
|
||
Hi, thanks for fixing this :) I noticed that the scrollbars are not dark. I opened bug 1715745 for that. Thanks.
|
||
Updated•2 years ago
|
Description
•