<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
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
Created attachment 246191 [details] [SCREEN RECORDING] Approach A
(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.
Jono, is this patch intended for review?
Created attachment 286018 [details] Patch
Created attachment 286019 [details] Patch
Devin, could you provide before/after screenshots?
Created attachment 286027 [details] Before/After My hacky attempt at using Photoshop...
Created attachment 286028 [details] Patch
(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.
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).
Comment on attachment 286028 [details] Patch Does this look fine on non-retina?
(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?
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.
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/.
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.
The dashboard was removed in r257759.