RESOLVED CONFIGURATION CHANGED 141341
Web Inspector: The down arrow in the debugger dashboard obscures the status text 
https://bugs.webkit.org/show_bug.cgi?id=141341
Summary Web Inspector: The down arrow in the debugger dashboard obscures the status text
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
DetailsFormatted DiffDiff
[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
DetailsFormatted DiffDiff
Patch (1.56 KB, patch)
2016-08-13 23:23 PDT, Devin Rousso 		no flags
DetailsFormatted DiffDiff
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-
DetailsFormatted DiffDiff
[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.