Closed Bug 1698763 Opened 3 months ago Closed 1 month ago

Make library look good in dark mode

Categories

(Core :: Widget: Cocoa, task, P1)

task
Points:
3

Tracking

()

VERIFIED FIXED
90 Branch
Tracking Status
firefox90 --- verified

People

(Reporter: mbalfanz, Assigned: harry)

References

(Blocks 3 open bugs)

Details

(Whiteboard: [mac:darkmode])

Attachments

(5 files, 1 obsolete file)

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

More generally, this goes for the whole "Library" dialog incl. Downloads and History

Summary: Make bookmarks library look good in dark mode → Make library look good in dark mode
Depends on: 1700023
Assignee: nobody → htwyford
Status: NEW → ASSIGNED
Points: --- → 3
See Also: → 1702649

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...

Maybe the color has an alpha component which we're discarding?

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

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;
}
Attachment #9213226 - Attachment is obsolete: true
Depends on: 1702883
Severity: -- → S2
Priority: -- → P1
Duplicate of this bug: 1704862
Duplicate of this bug: 1705012
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
Blocks: 1699221
Blocks: 1704397
Blocks: 1698754
Status: ASSIGNED → RESOLVED
Closed: 1 month ago
Resolution: --- → FIXED
Target Milestone: --- → 90 Branch
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Depends on: 1715745

Hi, thanks for fixing this :) I noticed that the scrollbars are not dark. I opened bug 1715745 for that. Thanks.

Blocks: 1715745
No longer depends on: 1715745
You need to log in before you can comment on or make changes to this bug.