DevTools close [x] button should be right aligned (no space left) so it's easier to hit

VERIFIED FIXED in Firefox 61

Status

defect
VERIFIED FIXED
Last year
Last year

People

(Reporter: nachtigall, Assigned: birtles)

Tracking

(Blocks 1 bug, {regression})

61 Branch
Firefox 61
Dependency tree / graph

Firefox Tracking Flags

(firefox-esr52 unaffected, firefox-esr60 unaffected, firefox59 unaffected, firefox60 unaffected, firefox61 verified)

Details

Attachments

(1 attachment)

This is a regression introduced by bug 1444301 (I ran mozregression):

 7:50.07 INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=a3860d8fb4a2a8b0e062894e11513e36791c5bcd&tochange=c5e2ad71fce5c66704ce41fc9905f902aa8fba10


STR:

1. Try to hit the close button. Usually close buttons are totally right-aligned (compare the Window close buttons on Windows 10 or Ubuntu), so that a user can sloppily to the right. Usually just the right-most until you hit the phyisical monitor window edge. 

AR:

With the Firefox DevTools' close button you have to "aim" to hit the close

ER:

Like in all other window managers: One should be able to move to the rightmost position and then be able to click to close. 

There's some spacing now right of the close button (not sure for RTL languages)
Blocks: 1444301
Version: 60 Branch → 61 Branch
This spacing had been requested by me for visual reasons. In MacOS, when hovering in those 4 pixels between the icon and the side of the window, the cursor turns into a window-resizing cursor, so this change didn't change the click target on the right side of the button (or maybe just by 1px). Sounds like this is a problem with other OSes though. I would suggest a fix of changing that extra right-margin into right-padding for non-Mac OSes.
Unfortunately if we change the right-margin into right-padding, the highlighted region on hover will be asymmetrical and look quite odd. I suspect this will need a more involved fix that includes a separate hit region and highlight region.
Blocks: 1444299
Can't the right-margin just be removed for non-Mac OSses? Or to but it the other way round: Only add these 4px right margin for Mac.

This bug is present on the two OSses I use: Ubuntu Linux and Windows 10.
(In reply to Jens from comment #3)
> Can't the right-margin just be removed for non-Mac OSses? Or to but it the
> other way round: Only add these 4px right margin for Mac.

That seems like a fine solution for now. I just looked at this on Windows 7 and can see how this 4px spacing would look odd due to the rest of the UI being flush against the colored drag border.
Assignee: nobody → bbirtles
Status: NEW → ASSIGNED
Comment on attachment 8970430 [details]
Bug 1455589 - Drop margin at right end of DevTools toolbox toolbar on non-Mac platforms;

https://reviewboard.mozilla.org/r/239212/#review245172

The intent seems fine, but we should tweak the technical approach slightly.  Thanks for working on it! :)

::: devtools/client/themes/toolbox.css:163
(Diff revision 1)
>    offset-inline-end: 0;
>    background-image: var(--command-chevron-image);
>    background-position: center;
>  }
>  
> +%ifdef XP_MACOSX

We try to avoid preprocessing where we can in the DevTools UI.  For cases of styling for different platforms like this, we set a `platform`[1] attribute on the document element.

You should be able to prepend your selector with `:root[platform="mac"]` to get the same effect here.

[1]: https://searchfox.org/mozilla-central/rev/36dec78aecc40539ecc8d78e91612e38810f963c/devtools/client/shared/theme-switching.js#25
Attachment #8970430 - Flags: review?(jryans) → review-
(In reply to Brian Birtles (:birtles) from comment #5) 
> * Updates the margin from 3px to 4px since it seems that was the original
>   intention.[1]

Oops, sorry to have been unclear here - I actually think the existing 3px looks perfect, and had just said 4px as an estimate of what that spacing is. It's a very tiny difference but I think this looks just a smidge better at the 3px.
Comment on attachment 8970430 [details]
Bug 1455589 - Drop margin at right end of DevTools toolbox toolbar on non-Mac platforms;

https://reviewboard.mozilla.org/r/239212/#review245438

Great, this looks good to me! :)
Attachment #8970430 - Flags: review?(jryans) → review+
We're sorry, Autoland could not rebase your commits for you automatically. Please manually rebase your commits and try again.

hg error in cmd: hg rebase -s 25ca1b540a413fce56070b744ad98297299ab57c -d 0b8f0217bda4: rebasing 460466:25ca1b540a41 "Bug 1455589 - Drop margin at right end of DevTools toolbox toolbar on non-Mac platforms; r=jryans" (tip)
merging devtools/client/themes/toolbox.css
warning: conflicts while merging devtools/client/themes/toolbox.css! (edit, then use 'hg resolve --mark')
unresolved conflicts (see hg resolve, then hg rebase --continue)
Pushed by bbirtles@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/122be576bdc1
Drop margin at right end of DevTools toolbox toolbar on non-Mac platforms; r=jryans
https://hg.mozilla.org/mozilla-central/rev/122be576bdc1
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
I have reproduced this bug with Nightly 61.0a1(2018-04-20)  on ManjaroLinux 17.1.8, 64 bit!

The fix is now verified on Latest Nightly.

Build ID 	20180428100112
User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0
QA Whiteboard: [bugday-20180425]
I have successfully reproduce this bug Nightly 61.0a1 (2018-04-20) on windows 10(32-bit)

this bug is fix now on Latest Nightly 61.0a1 (2018-04-28) (32-bit)

Build ID : 20180428220114
Mozilla/5.0 (Windows NT 10.0; rv:61.0) Gecko/20100101 Firefox/61.0

[bugday-20180425]
I have reproduced this issue using Firefox  61.0a1 (2018.04.20) on Ubuntu 14.04 x64.
I can confirm this issue is fixed, I verified using Firefox 61.0b9 on Win 8.1 x64, Mac OS X 10.13 and Ubuntu 14.04 x64.
Status: RESOLVED → VERIFIED
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.