Web Inspector: current call frame indicator not visible in dark mode

[Matt Baker]

Created attachment 372507 [details]
[Image] Invisible current call frame indicator

This is only a problem when the call stack TreeOutline doesn't have the focus.

[Radar WebKit Bug Importer]

<rdar://problem/51922895>

[Matt Baker]

Created attachment 372508 [details]
Patch

[Devin Rousso]

Comment on attachment 372508 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css:58
> +    display: none;
> +}
> +
> +.tree-outline .item.call-frame.selected .status > .status-image {
> +    display: inline-block;

Why is this necessary?  I'm always cautious of changing `display` because it can have more far reaching implications than most other properties.

[Matt Baker]

Created attachment 372567 [details]
Patch

[Devin Rousso]

Comment on attachment 372567 [details]
Patch

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

r-

> Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css:58
> +    display: none;

This cause the current call frame icon to disappear when changing call frames across an async boundary.

# STEPS TO REPRODUCE:
1. inspect <https://webkit.org>
2. set a breakpoint on the first line inside `enableScrollableTables`
3. refresh the page
 => debugger should pause on the breakpoint set in step 2
4. change call frames to the one before `--- addEvent Listener ---` (should be `Global Code`)
 => the |> on the `enableScrollableTables` call frame disappears

> Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css:107
> +        fill: var(--selected-foreground-color);

I think this is too bright, especially when compared to the "selected but not focused" background color.

We should create a version of `.tree-outline:focus .item.call-frame.selected .status > .status-image` inside a `@media (prefers-color-scheme: dark)`.

[Devin Rousso]

Comment on attachment 372567 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.css:51
> +.tree-outline .item.call-frame.selected .status > .status-image {

This causes the current call frame icon to be warped when a different frame is selected.  Same steps to reproduce as below.

[Devin Rousso]

Created attachment 373532 [details]
Patch

[Devin Rousso]

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

[WebKit Commit Bot]

Comment on attachment 373532 [details]
Patch

Clearing flags on attachment: 373532

Committed r247179: <https://trac.webkit.org/changeset/247179>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.