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
[Image] Breakpoint color comparison (355.59 KB, image/png)
2019-02-27 13:42 PST, Matt Baker
no flags
[Image] CSS filter test results (47.29 KB, image/png)
2019-02-27 15:22 PST, Matt Baker
no flags
Patch (1.79 KB, patch)
2019-02-27 15:37 PST, Matt Baker
no flags
[Image] Patch applied (473.60 KB, image/png)
2019-02-27 15:41 PST, Matt Baker
no flags
Patch (1.80 KB, patch)
2019-02-27 15:50 PST, Matt Baker
no flags
[Video] Disabled breakpoint - light/dark/accents colors (713.90 KB, video/mp4)
2019-02-27 16:39 PST, Matt Baker
no flags
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
Patch (7.59 KB, patch)
2019-02-27 19:50 PST, Matt Baker
no flags
Patch (8.06 KB, patch)
2019-02-27 19:53 PST, Matt Baker
no flags
[Image] with patch applied (567.29 KB, image/png)
2019-02-27 20:47 PST, Matt Baker
no flags
Patch for landing (8.47 KB, patch)
2019-02-28 13:08 PST, Matt Baker
no flags
Radar WebKit Bug Importer
Comment 1 2019-02-27 10:11:03 PST
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
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
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
Matt Baker
Comment 13 2019-02-27 19:53:56 PST
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.