Bug 192915 - Web Inspector: "E" icon on debugger dashboard is too close to current function name
Summary: Web Inspector: "E" icon on debugger dashboard is too close to current functio...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-12-19 21:33 PST by Nikita Vasilyev
Modified: 2018-12-20 18:20 PST (History)
5 users (show)

See Also:


Attachments
Patch (2.17 KB, patch)
2018-12-19 21:35 PST, Nikita Vasilyev
no flags Details | Formatted Diff | Diff
[Image] With patch applied (19.71 KB, image/png)
2018-12-19 21:35 PST, Nikita Vasilyev
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2018-12-19 21:33:54 PST
When paused in the debugger, the current function name is too close to the “E” icon. There should be more padding.

<rdar://problem/44535743>
Comment 1 Nikita Vasilyev 2018-12-19 21:35:02 PST
Created attachment 357776 [details]
Patch
Comment 2 Nikita Vasilyev 2018-12-19 21:35:33 PST
Created attachment 357777 [details]
[Image] With patch applied
Comment 3 Matt Baker 2018-12-19 22:12:55 PST
Comment on attachment 357776 [details]
Patch

r=me
Comment 4 WebKit Commit Bot 2018-12-19 22:39:29 PST
Comment on attachment 357776 [details]
Patch

Clearing flags on attachment: 357776

Committed r239432: <https://trac.webkit.org/changeset/239432>
Comment 5 WebKit Commit Bot 2018-12-19 22:39:30 PST
All reviewed patches have been landed.  Closing bug.
Comment 6 Joseph Pecoraro 2018-12-20 12:10:39 PST
Comment on attachment 357776 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css:168
> -body[dir=rtl] .dashboard.debugger > .location .function-icon {
> +body[dir=rtl] .dashboard.debugger > .location :matches(.function-icon, .event-listener-icon) {

Is there a more general class we can use here for any icon? What if it's a [P] Program/Script icon?
Comment 7 Matt Baker 2018-12-20 18:19:37 PST
Comment on attachment 357776 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css:168
>> +body[dir=rtl] .dashboard.debugger > .location :matches(.function-icon, .event-listener-icon) {
> 
> Is there a more general class we can use here for any icon? What if it's a [P] Program/Script icon?

Actually we can probably drop the :matches part. DebuggerDashboardView.prototype._rebuildLocation will use an icon class name of  "function-icon" by default, replacing it with event-listener-icon if it thinks we're in a user event handler. It will always be one or the other.
Comment 8 Matt Baker 2018-12-20 18:20:28 PST
(In reply to Matt Baker from comment #7)
> Comment on attachment 357776 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=357776&action=review
> 
> >> Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css:168
> >> +body[dir=rtl] .dashboard.debugger > .location :matches(.function-icon, .event-listener-icon) {
> > 
> > Is there a more general class we can use here for any icon? What if it's a [P] Program/Script icon?
> 
> Actually we can probably drop the :matches part.
> DebuggerDashboardView.prototype._rebuildLocation will use an icon class name
> of  "function-icon" by default, replacing it with event-listener-icon if it
> thinks we're in a user event handler. It will always be one or the other.

For example, breaking here will show a function-icon [f]:

<script>
debugger;
</script>