Bug 192887 – Web Inspector: Dark Mode: unreadable background color for tables containing object previews

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

# STEPS TO REPRODUCE:
1. open <https://mdn.mozillademos.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB$samples/Full_IndexedDB_example>
2. add a record
3. inspect using the Storage tab
4. click on one of the object stores or indexes from the navigation sidebar
5. select a row
 => Looks bad

NOTE: you need to be in dark mode on macOS

[Devin Rousso]

<rdar://problem/46855270>

[Devin Rousso]

Created attachment 357757 [details]
Patch

[Devin Rousso]

Created attachment 357758 [details]
[Image] After Patch is applied

[Nikita Vasilyev]

Comment on attachment 357757 [details]
Patch

This should look like the console. It should use the same color variables.

The console defines colors in LogContentView.css:

    .console-messages {
        --background-color-selected: hsl(233, 30%, 30%);
        --border-color-selected: hsl(224, 30%, 35%);
        --border-color-error: hsla(20, 100%, 50%, 0.12);
        --border-color-warning: hsla(40, 100%, 50%, 0.12);
    }

Perhaps these variables should migrate from LogContentView.css to Variables.css. We'll need to rename them:

    --background-color-selected -> --console-background-color-selected

[Devin Rousso]

(In reply to Nikita Vasilyev from comment #4)
> Comment on attachment 357757 [details]
> Patch
> 
> This should look like the console. It should use the same color variables.
These colors are slightly different by design (if I had to guess) because we don't want the selected color of the table to contrast with the selected color of an individual console message.  As far as the `ObjectStore` view, I don't see a huge reason preventing the use of the colors you've linked other than contrast issues, since values inside an `ObjectStore` can be objects, which have icons.

[Nikita Vasilyev]

(In reply to Devin Rousso from comment #5)
> (In reply to Nikita Vasilyev from comment #4)
> > Comment on attachment 357757 [details]
> > Patch
> > 
> > This should look like the console. It should use the same color variables.
> These colors are slightly different by design (if I had to guess) because we
> don't want the selected color of the table to contrast with the selected
> color of an individual console message.

I see!

Also, you should mention in the changelog that you're also fixing tables in the console. Now it reads like you're only fixing Storage tab.

> As far as the `ObjectStore` view, I
> don't see a huge reason preventing the use of the colors you've linked other
> than contrast issues, since values inside an `ObjectStore` can be objects,
> which have icons.

Yes, I was suggesting to use console colors for Object Store tables.

[Devin Rousso]

(In reply to Nikita Vasilyev from comment #6)
> Also, you should mention in the changelog that you're also fixing tables in the console. Now it reads like you're only fixing Storage tab.
Good call.

> Yes, I was suggesting to use console colors for Object Store tables.
I'd rather keep the two "table"s in sync with each other visually.  We should move all of these off of `WI.DataGrid` anyways and onto `WI.Table`, so this should get "better" resolved then.

[Devin Rousso]

Created attachment 357789 [details]
Patch

[Blaze Burg]

Comment on attachment 357789 [details]
Patch

r=me

[WebKit Commit Bot]

Comment on attachment 357789 [details]
Patch

Clearing flags on attachment: 357789

Committed r239443: <https://trac.webkit.org/changeset/239443>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.