Web Inspector: The down arrow in the debugger dashboard obscures the status text

• Component: Web Inspector
• Status: RESOLVED CONFIGURATION CHANGED

[Jonathan Wells]

<rdar://problem/18971687>

If you visit apple.com, place a break point on the line of a JS file (via the Web Inspector), refresh the page, and view the dashboard the down arrow will be overlapping the status text.

* STEPS TO REPRODUCE
1. Open a WebKit browser using trunk
2. Visit apple.com
3. Via the Safari Adavanced Preferences, check the "Show Develop menu in menu bar" option
4. After the "Develop" option appears in the main top menu, select "Show Web Inspector" from it
5. In the Web Inspector that appears, click the "Resources" button in the left hand corner of the top bar
6. Expand the "www.apple.com" option that appears
7. Expand the "Scripts" sub-folder within "www.apple.com"
8. Select the "head.built.js" file and place a breakpoint on the second line of code
9. Refresh the page and view the content of the status view in the center of the top bar

[Jonathan Wells]

Created attachment 246190 [details]
[PATCH] Approach A

Here is one approach to this for now. Added right and left padding for balance. Might be too little padding on the left of the default dashboard which you can only notice if you roll over both of the buttons on either end as seen in the attached video. Leave comments please.

Ideally the next time we make a major adjustment to the

[Jonathan Wells]

Created attachment 246191 [details]
[SCREEN RECORDING] Approach A

[Jonathan Wells]

(In reply to comment #1)

> Ideally the next time we make a major adjustment to the

Didn't finish this sentence.

Ideally the next time we make a major adjustment to the dashboard we could consider having all the elements flow fluidly and adjust when the arrows come into play.

[Joseph Pecoraro]

Jono, is this patch intended for review?

[Devin Rousso]

Created attachment 286018 [details]
Patch

[Devin Rousso]

Created attachment 286019 [details]
Patch

[Nikita Vasilyev]

Devin, could you provide before/after screenshots?

[Devin Rousso]

Created attachment 286027 [details]
Before/After

My hacky attempt at using Photoshop...

[Devin Rousso]

Created attachment 286028 [details]
Patch

[Nikita Vasilyev]

(In reply to comment #8)
> Created attachment 286027 [details]
> Before/After
> 
> My hacky attempt at using Photoshop...

Looks fine on non-retina screen as well.

Seems r+ worthy to me.

[Matt Baker]

The arrow still overlaps the status text, so I don't think this addresses the original issue. Further adjustments the dashboard are probably needed, as suggested by Jono earlier in the comments.

We can't always prevent overlap for stack frames with long status text, but we can make improvements by shortening the other UI elements. Some ideas:

1) Tighten the horizontal padding around the divider "|"
2) Shorten "Debugger Paused" to just "Paused" when too narrow
3) Drop the text next to the "Continue" button completely if *very* narrow

Since this information is available elsewhere in the UI I'm not sure how critical this is, given that it might be some work to implement (and even then there would still be overlap in many cases).

[Joseph Pecoraro]

Comment on attachment 286028 [details]
Patch

Does this look fine on non-retina?

[Devin Rousso]

(In reply to comment #11)
> The arrow still overlaps the status text, so I don't think this addresses
> the original issue. Further adjustments the dashboard are probably needed,
> as suggested by Jono earlier in the comments.
> 
> We can't always prevent overlap for stack frames with long status text, but
> we can make improvements by shortening the other UI elements. Some ideas:
> 
> 1) Tighten the horizontal padding around the divider "|"
> 2) Shorten "Debugger Paused" to just "Paused" when too narrow
> 3) Drop the text next to the "Continue" button completely if *very* narrow
> 
> Since this information is available elsewhere in the UI I'm not sure how
> critical this is, given that it might be some work to implement (and even
> then there would still be overlap in many cases).

Could you provide some steps for reproducing this?  I am not entirely sure what specifically the issue is here...


(In reply to comment #12)
> Comment on attachment 286028 [details]
> Patch
> 
> Does this look fine on non-retina?

I don't have a non-retina screen.  Would it be too much to ask someone else to test this please?

[Nikita Vasilyev]

I agree with Matt. Devin's patch is an improvement, but it doesn't address the problem described by in this bug. Devin, you should file a separate bug.

Steps to reproduce in the bug's description are out of date as head.built.js on apple.com has changed.

[Nikita Vasilyev]

Created attachment 286198 [details]
[Image] With patch applied (non-retina)

(In reply to comment #13)
> (In reply to comment #11)
> (In reply to comment #12)
> > Comment on attachment 286028 [details]
> > Patch
> > 
> > Does this look fine on non-retina?
> 
> I don't have a non-retina screen.  Would it be too much to ask someone else
> to test this please?

I think the up arrow could be one pixel higher.

There are apps that allow to change screen resolution to "non-retina", e.g. https://manytricks.com/resolutionator/.

[Joseph Pecoraro]

Comment on attachment 286028 [details]
Patch

Sounds like this should be a separate bug. File a new bug and put this patch on that, and it sounds good to land.

[Devin Rousso]

The dashboard was removed in r257759.