Closed Bug 1455589 Opened 3 years ago Closed 3 years ago
Tools close [x] button should be right aligned (no space left) so it's easier to hit
59 bytes, text/x-review-board-request
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)
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.
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` attribute on the document element. You should be able to prepend your selector with `:root[platform="mac"]` to get the same effect here. : 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. 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 email@example.com: https://hg.mozilla.org/integration/autoland/rev/122be576bdc1 Drop margin at right end of DevTools toolbox toolbar on non-Mac platforms; r=jryans
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.
You need to log in before you can comment on or make changes to this bug.