Bug 141341

Summary:

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

Product:

WebKit

Reporter:

Jonathan Wells <jonowells>

Component:

Web Inspector

Assignee:

Devin Rousso <hi>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

hi, inspector-bugzilla-changes, jonowells, webkit-bug-importer

Priority:

Keywords:

EasyFix, InRadar

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

See Also:

https://bugs.webkit.org/show_bug.cgi?id=204627

Attachments:

Description	Flags
[PATCH] Approach A	none
[SCREEN RECORDING] Approach A	none
Patch	none
Patch	none
Before/After	none
Patch	joepeck: review-
[Image] With patch applied (non-retina)	none

Jonathan Wells

Reported 2015-02-06 15:16:00 PST

<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

Attachments
[PATCH] Approach A (1.07 KB, patch) 2015-02-06 16:42 PST, Jonathan Wells	no flags	Details Formatted Diff Diff
[SCREEN RECORDING] Approach A (1.21 MB, video/quicktime) 2015-02-06 16:43 PST, Jonathan Wells	no flags	Details
Patch (1.41 KB, patch) 2016-08-13 22:58 PDT, Devin Rousso	no flags	Details Formatted Diff Diff
Patch (1.56 KB, patch) 2016-08-13 23:23 PDT, Devin Rousso	no flags	Details Formatted Diff Diff
Before/After (61.47 KB, image/png) 2016-08-14 13:23 PDT, Devin Rousso	no flags	Details
Patch (1.56 KB, patch) 2016-08-14 13:24 PDT, Devin Rousso	joepeck: review-	Details Formatted Diff Diff
[Image] With patch applied (non-retina) (10.00 KB, image/png) 2016-08-16 13:24 PDT, Nikita Vasilyev	no flags	Details
Show Obsolete (4) View All Add attachment proposed patch, testcase, etc.

Jonathan Wells

Comment 1 2015-02-06 16:42:32 PST

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

Comment 2 2015-02-06 16:43:11 PST

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

Jonathan Wells

Comment 3 2015-02-06 16:45:32 PST

(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

Comment 4 2015-02-20 13:55:58 PST

Jono, is this patch intended for review?

Devin Rousso

Comment 5 2016-08-13 22:58:31 PDT

Created attachment 286018 [details] Patch

Devin Rousso

Comment 6 2016-08-13 23:23:34 PDT

Created attachment 286019 [details] Patch

Nikita Vasilyev

Comment 7 2016-08-14 11:41:13 PDT

Devin, could you provide before/after screenshots?

Devin Rousso

Comment 8 2016-08-14 13:23:19 PDT

Created attachment 286027 [details] Before/After My hacky attempt at using Photoshop...

Devin Rousso

Comment 9 2016-08-14 13:24:35 PDT

Created attachment 286028 [details] Patch

Nikita Vasilyev

Comment 10 2016-08-15 11:05:34 PDT

(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

Comment 11 2016-08-15 11:33:27 PDT

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 12 2016-08-15 19:10:57 PDT

Comment on attachment 286028 [details] Patch Does this look fine on non-retina?

Devin Rousso

Comment 13 2016-08-16 01:44:35 PDT

(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

Comment 14 2016-08-16 13:20:41 PDT

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

Comment 15 2016-08-16 13:24:12 PDT

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 16 2016-08-22 20:01:10 PDT

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

Comment 17 2020-11-18 15:42:30 PST

The dashboard was removed in r257759.

Note You need to log in before you can comment on or make changes to this bug.