[wp-trac] [WordPress Trac] #41580: Review the usage of the `::-moz-focus-inner` CSS fix for the buttons extra padding in Firefox

[WordPress Trac]

#41580: Review the usage of the `::-moz-focus-inner` CSS fix for the buttons extra
padding in Firefox
----------------------------+--------------------------------------------
 Reporter:  afercia         |      Owner:
     Type:  enhancement     |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:
 Severity:  normal          |   Keywords:  has-screenshots good-first-bug
  Focuses:  ui              |
----------------------------+--------------------------------------------
 For a number of years, Firefox used to set some extra padding on the
 buttons (or inputs of type button/submit/reset). To address this,
 WordPress uses a known fix targeting the proprietary Firefox pseudo
 element `::-moz-focus-inner`.

 Seems something has changed recently and starting with Firefox 53, FF
 doesn't apply the extra padding any longer. I ''think'' the relevant
 Bugzilla ticket Firefox 53 release notes, though.

 Testing a bit on Windows, in the screenshot below:
 - on the left, Firefox 48: buttons without and with the CSS fix: there's a
 clear size difference
 - on the right: Firefox 54: buttons without and with the CSS fix: no size
 difference

 [[Image(https://cldup.com/7AkzV22mi3.png)]]

 Codepen available here: https://codepen.io/afercia/full/Gvrzwz/

 Seems these rules used across the admin stylesheets could be simplified a
 bit. The only part that needs to stay is `border-width: 0;` or, maybe
 better, `border: 0;` which is necessary on Windows to remove the dotted
 line on :focus:

 [[Image(https://cldup.com/aynypgSW6Y.png)]]

 This could be also a good opportunity for some clean-up. For example,
 seems to me in `press-this.css` there are two identical rules.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/41580>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform