Bug 192915 – Web Inspector: "E" icon on debugger dashboard is too close to current function name

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

[Nikita Vasilyev]

When paused in the debugger, the current function name is too close to the “E” icon. There should be more padding.

<rdar://problem/44535743>

[Nikita Vasilyev]

Created attachment 357776 [details]
Patch

[Nikita Vasilyev]

Created attachment 357777 [details]
[Image] With patch applied

[Matt Baker]

Comment on attachment 357776 [details]
Patch

r=me

[WebKit Commit Bot]

Comment on attachment 357776 [details]
Patch

Clearing flags on attachment: 357776

Committed r239432: <https://trac.webkit.org/changeset/239432>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Joseph Pecoraro]

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?

[Matt Baker]

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.

[Matt Baker]

(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>