Bug 195018 – Web Inspector: Dark Mode: unreadable text in bezier curve editor numeric input fields

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Matt Baker]

Created attachment 362928 [details]
[Image] Dark Mode - curve editor

See attached screenshot.

[Radar WebKit Bug Importer]

<rdar://problem/48378541>

[Devin Rousso]

Created attachment 363109 [details]
Patch

[Devin Rousso]

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

[Nikita Vasilyev]

(In reply to Devin Rousso from comment #3)
> Created attachment 363110 [details]
> [Image] After Patch is applied

The up and down buttons are still light. It's a WebKit bug.
I don't think we can (or should) do anything here with CSS.

[Nikita Vasilyev]

Comment on attachment 363109 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=363109&action=review

This fixes the bug and includes some nice refactoring!

> Source/WebInspectorUI/UserInterface/Views/BezierEditor.css:-139
> -    border-radius: 4px;
> -    box-shadow: inset 0 0 1px 1px hsl(0, 0%, 89%);

You changed the style of the inputs. They look fine but it would be nice to mention it in the changelog because I could've missed it.

> Source/WebInspectorUI/UserInterface/Views/BezierEditor.css:-180
> -@media (prefers-color-scheme: dark) {
> -    .bezier-editor > .bezier-preview-timing {
> -        border-top-color: var(--text-color-tertiary);
> -    }
> -
> -    .bezier-editor > .bezier-container .bezier-curve {
> -        stroke: white;
> -    }
> -
> -    .bezier-editor > .bezier-container .linear-curve {
> -        stroke: var(--text-color-tertiary);
> -    }
> -
> -    .bezier-editor > .bezier-preview {
> -        border-bottom-color: var(--text-color-tertiary);
> -    }
> -
> -    .bezier-editor > .bezier-preview > div {
> -        background-color: var(--glyph-color-active);
> -    }
> -
> -    .bezier-editor > .bezier-container .control-handle {
> -        fill: var(--glyph-color-active);
> -    }
> -
> -    .bezier-editor > .bezier-container .control-line {
> -        stroke: var(--glyph-color-active);
> -    }

Nice! There are many `@media (prefers-color-scheme: dark)` sections that could be refactored fairly straightforwardly.

[Matt Baker]

Comment on attachment 363109 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=363109&action=review

r=me

>> Source/WebInspectorUI/UserInterface/Views/BezierEditor.css:-139
>> -    box-shadow: inset 0 0 1px 1px hsl(0, 0%, 89%);
> 
> You changed the style of the inputs. They look fine but it would be nice to mention it in the changelog because I could've missed it.

It's a simple enough patch, but I agree that only mentioning the clean-up and not the main fix is confusing.

[Devin Rousso]

Created attachment 363118 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 363118 [details]
Patch

Clearing flags on attachment: 363118

Committed r242151: <https://trac.webkit.org/changeset/242151>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.