WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
195103
Web Inspector: Debugger: disabled breakpoint color is too dark
https://bugs.webkit.org/show_bug.cgi?id=195103
Summary
Web Inspector: Debugger: disabled breakpoint color is too dark
Devin Rousso
Reported
2019-02-27 10:08:37 PST
Created
attachment 363101
[details]
[Image] Screenshot of Issue .
Attachments
[Image] Screenshot of Issue
(46.01 KB, image/png)
2019-02-27 10:08 PST
,
Devin Rousso
no flags
Details
[Image] Breakpoint color comparison
(355.59 KB, image/png)
2019-02-27 13:42 PST
,
Matt Baker
no flags
Details
[Image] CSS filter test results
(47.29 KB, image/png)
2019-02-27 15:22 PST
,
Matt Baker
no flags
Details
Patch
(1.79 KB, patch)
2019-02-27 15:37 PST
,
Matt Baker
no flags
Details
Formatted Diff
Diff
[Image] Patch applied
(473.60 KB, image/png)
2019-02-27 15:41 PST
,
Matt Baker
no flags
Details
Patch
(1.80 KB, patch)
2019-02-27 15:50 PST
,
Matt Baker
no flags
Details
Formatted Diff
Diff
[Video] Disabled breakpoint - light/dark/accents colors
(713.90 KB, video/mp4)
2019-02-27 16:39 PST
,
Matt Baker
no flags
Details
Archive of layout-test-results from ews107 for mac-highsierra-wk2
(2.54 MB, application/zip)
2019-02-27 17:14 PST
,
EWS Watchlist
no flags
Details
Patch
(7.59 KB, patch)
2019-02-27 19:50 PST
,
Matt Baker
no flags
Details
Formatted Diff
Diff
Patch
(8.06 KB, patch)
2019-02-27 19:53 PST
,
Matt Baker
no flags
Details
Formatted Diff
Diff
[Image] with patch applied
(567.29 KB, image/png)
2019-02-27 20:47 PST
,
Matt Baker
no flags
Details
Patch for landing
(8.47 KB, patch)
2019-02-28 13:08 PST
,
Matt Baker
no flags
Details
Formatted Diff
Diff
Show Obsolete
(4)
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2019-02-27 10:11:03 PST
<
rdar://problem/48440678
>
Matt Baker
Comment 2
2019-02-27 13:42:36 PST
Created
attachment 363124
[details]
[Image] Breakpoint color comparison Comparing breakpoints in current Web Inspector and Xcode 10.2 (beta 2). In Web Inspector we decrease the opacity of disabled breakpoints. This has only ever looked good for the unselected/light mode case. Note: Xcode uses the system accent color for selected item background color.
Matt Baker
Comment 3
2019-02-27 15:22:31 PST
Created
attachment 363138
[details]
[Image] CSS filter test results Comparison of old (opacity) and new (filter) disabled breakpoint styles, shown next to Xcode color swatches. Separate rules are required for light/dark modes.
Matt Baker
Comment 4
2019-02-27 15:37:13 PST
Created
attachment 363143
[details]
Patch
Matt Baker
Comment 5
2019-02-27 15:41:21 PST
Created
attachment 363146
[details]
[Image] Patch applied opacity vs filter vs Xcode An improvement, but the contrast is still too low for dark mode Inspector. Also, auto continue breakpoints are styled with opacity and have always been extremely difficult to distinguish from disabled breakpoints.
Nikita Vasilyev
Comment 6
2019-02-27 15:47:57 PST
Comment on
attachment 363143
[details]
Patch View in context:
https://bugs.webkit.org/attachment.cgi?id=363143&action=review
Looks good!
> Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css:45 > + filter: saturate(0.2) brightness(1.75);
I noticed that with yellow accent, disabled breakpoints in the sidebar are completely white. Yellow accent color has so many contrast issues that I don't even know if we should care about this case.
Matt Baker
Comment 7
2019-02-27 15:50:38 PST
Created
attachment 363149
[details]
Patch
Matt Baker
Comment 8
2019-02-27 15:51:16 PST
(In reply to Matt Baker from
comment #7
)
> Created
attachment 363149
[details]
> Patch
This looks pretty good for the default (blue) accent. I'll try the others now.
Matt Baker
Comment 9
2019-02-27 16:39:51 PST
Created
attachment 363154
[details]
[Video] Disabled breakpoint - light/dark/accents colors Taking a different approach. The system derives a color from the control accent, -apple-system-selected-text-background, which works perfectly for disabled breakpoints for all mode/accent combinations. Need to make a minor adjustment to make it work with pre-Mojave.
EWS Watchlist
Comment 10
2019-02-27 17:14:40 PST
Comment on
attachment 363149
[details]
Patch
Attachment 363149
[details]
did not pass mac-wk2-ews (mac-wk2): Output:
https://webkit-queues.webkit.org/results/11309764
New failing tests: imported/w3c/web-platform-tests/mediacapture-record/MediaRecorder-constructor.html
EWS Watchlist
Comment 11
2019-02-27 17:14:42 PST
Created
attachment 363161
[details]
Archive of layout-test-results from ews107 for mac-highsierra-wk2 The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews. Bot: ews107 Port: mac-highsierra-wk2 Platform: Mac OS X 10.13.6
Matt Baker
Comment 12
2019-02-27 19:50:45 PST
Created
attachment 363186
[details]
Patch
Matt Baker
Comment 13
2019-02-27 19:53:56 PST
Created
attachment 363187
[details]
Patch
Matt Baker
Comment 14
2019-02-27 20:47:58 PST
Created
attachment 363190
[details]
[Image] with patch applied New UI: - White outline around selected breakpoint status image - Indicator/marker on auto-continue breakpoint
Devin Rousso
Comment 15
2019-02-28 10:33:40 PST
Comment on
attachment 363187
[details]
Patch View in context:
https://bugs.webkit.org/attachment.cgi?id=363187&action=review
r=me, I like it! Something I did notice, however, is that the breakpoint icon flickers when enabling it from a disabled state. # STEPS TO REPRODUCE: 1. inspect any page 2. set a breakpoint on any line 3. click the breakpoint to disable it (either from the navigation sidebar or from a text editor gutter) 4. click the breakpoint again to enable it => the breakpoint icon briefly shows a black color before it's expected dark blue color
> Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css:41 > + stroke: var(--selected-foreground-color);
We should only apply this if the element also has focus.
> Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css:48 > + right: 8px;
NIT: I normally put `right` alongside positional properties (e.g. `top`).
> Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css:49 > +
Style: unnecessary whitespace.
> Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css:51 > +
Ditto (>49).
> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css:67 > body:not(.window-inactive) .content-view.dom-tree .tree-outline.dom:focus li.selected .status-image.breakpoint {
We should probably still set this even if the element isn't `.selected`. Otherwise, the disabled color and the hovered color are too similar.
> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css:72 > + fill: var(--breakpoint-color-disabled);
This doesn't mix well if `.breakpoints-disabled` is also applied and the current element isn't focused. Setting the stroke as mentioned on 67 does make this a less of an issue though.
> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css:81 > - stroke: var(--glyph-color-active); > + stroke: var(--breakpoint-color);
This is almost impossible to see if the element is selected. If anything, I'd imagine it to maybe be a hollow arrow (e.g. a `--background-color-content` fill).
> Source/WebInspectorUI/UserInterface/Views/TextEditor.css:76 > +
Style: unnecessary whitespace.
> Source/WebInspectorUI/UserInterface/Views/TextEditor.css:78 > +
Ditto (>76).
> Source/WebInspectorUI/UserInterface/Views/TextEditor.css:79 > + z-index: -1;
NIT: I normally put `z-index` after positional properties (e.g. `top`).
> Source/WebInspectorUI/UserInterface/Views/TextEditor.css:80 > +
Ditto (>76).
> Source/WebInspectorUI/UserInterface/Views/TextEditor.css:83 > + background-color: var(--selected-foreground-color);
NIT: I'd put `background-color` above `transform`.
Matt Baker
Comment 16
2019-02-28 13:08:21 PST
Comment on
attachment 363187
[details]
Patch View in context:
https://bugs.webkit.org/attachment.cgi?id=363187&action=review
>> Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css:41 >> + stroke: var(--selected-foreground-color); > > We should only apply this if the element also has focus.
Will change.
>> Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css:48 >> + right: 8px; > > NIT: I normally put `right` alongside positional properties (e.g. `top`).
Makes sense.
>> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css:67 >> body:not(.window-inactive) .content-view.dom-tree .tree-outline.dom:focus li.selected .status-image.breakpoint { > > We should probably still set this even if the element isn't `.selected`. Otherwise, the disabled color and the hovered color are too similar.
I'll change this and the "hollow" subtree DOM breakpoint style to set their fill and stroke (respectively) to `--selected-foregraound-color` when selected or hovered.
>> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css:72 >> + fill: var(--breakpoint-color-disabled); > > This doesn't mix well if `.breakpoints-disabled` is also applied and the current element isn't focused. Setting the stroke as mentioned on 67 does make this a less of an issue though.
I'll change the rule to `.content-view.dom-tree .tree-outline.dom:not(.breakpoints-disabled) li .status-image.breakpoint.disabled`. I don't think it's useful to have to shades of gray breakpoints.
>> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css:81 >> + stroke: var(--breakpoint-color); > > This is almost impossible to see if the element is selected. If anything, I'd imagine it to maybe be a hollow arrow (e.g. a `--background-color-content` fill).
Fixed.
>> Source/WebInspectorUI/UserInterface/Views/TextEditor.css:83 >> + background-color: var(--selected-foreground-color); > > NIT: I'd put `background-color` above `transform`.
Makes sense.
Matt Baker
Comment 17
2019-02-28 13:08:39 PST
Created
attachment 363256
[details]
Patch for landing
Matt Baker
Comment 18
2019-02-28 13:14:45 PST
(In reply to Devin Rousso from
comment #15
)
> Comment on
attachment 363187
[details]
> Patch > > View in context: >
https://bugs.webkit.org/attachment.cgi?id=363187&action=review
> > r=me, I like it! > > Something I did notice, however, is that the breakpoint icon flickers when > enabling it from a disabled state.
I couldn't reproduce this but will keep an eye out for it.
WebKit Commit Bot
Comment 19
2019-02-28 14:32:43 PST
Comment on
attachment 363256
[details]
Patch for landing Clearing flags on attachment: 363256 Committed
r242228
: <
https://trac.webkit.org/changeset/242228
>
WebKit Commit Bot
Comment 20
2019-02-28 14:32:45 PST
All reviewed patches have been landed. Closing bug.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug