1902083 - Support inner padding in moz-button

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, enhancement, P3)

Description

[Mark Striemer [:mstriemer]]

Our toolbarbuttons have an inner padding that is a click target for the button, and shows that the button is hovered even though the mouse is outside of the hover-visible button. This is a nice improvement that gives the button a larger target, and makes it clickable when the window and cursor are up against the edge of the screen.

There should be some way of setting the inner padding on the moz-button to accommodate this, specifically for the sidebar-main buttons.

This should be possible by adding either padding to the :host or margin to the button and updating the hover/active styles like so:

button {
  :host(:hover) & {}
  :host(:hover:active) & {}
}

Comment 1

[Tim Giles [:tgiles]]

Attachment: Bug 1902083 - Support outer padding in moz-button. r=#recomp-reviewers

Allow hover styles to appear outside of moz-button

Add CSS variables to control inline and block padding on moz-button

Comment 2

[Tim Giles [:tgiles]]

Attachment: Bug 1902083 - Move sidebar padding into moz-buttons. r=#recomp-reviewers,#sidebar-reviewers

Change moz-buttons in sidebar-main.mjs to be "toolbar" buttons

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d67293d33421
Support outer padding in moz-button. r=reusable-components-reviewers,desktop-theme-reviewers,jules,hjones,dao
https://hg.mozilla.org/integration/autoland/rev/57667e89d782
Move sidebar padding into moz-buttons. r=reusable-components-reviewers,sidebar-reviewers,desktop-theme-reviewers,hjones,jsudiaman,dao,tabbrowser-reviewers

Comment 4

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/d67293d33421
https://hg.mozilla.org/mozilla-central/rev/57667e89d782

Comment 5

[Alex Finder]

(In reply to Pulsebot from comment #3)

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d67293d33421
Support outer padding in moz-button.
r=reusable-components-reviewers,desktop-theme-reviewers,jules,hjones,dao
https://hg.mozilla.org/integration/autoland/rev/57667e89d782
Move sidebar padding into moz-buttons.
r=reusable-components-reviewers,sidebar-reviewers,desktop-theme-reviewers,
hjones,jsudiaman,dao,tabbrowser-reviewers

Perfherder has detected a browsertime performance change from push 57667e89d7829978215a88bf55edf27fbda94c72.

Improvements:

Ratio	Test	Platform	Options	Absolute values (old vs new)	Performance Profiles
12%	outlook ContentfulSpeedIndex	linux1804-64-shippable-qr	fission warm webrender	699.66 -> 616.78	Before/After
11%	outlook ContentfulSpeedIndex	linux1804-64-shippable-qr	cold fission webrender	1,157.02 -> 1,030.53	Before/After
10%	outlook ContentfulSpeedIndex	linux1804-64-shippable-qr	fission warm webrender	696.27 -> 627.11	Before/After

Details of the alert can be found in the alert summary, including links to graphs and comparisons for each of the affected tests.

If you need the profiling jobs you can trigger them yourself from treeherder job view or ask a sheriff to do that for you.

You can run these tests on try with ./mach try perf --alert 2169

For more information on performance sheriffing please see our FAQ.

Comment 6

[Itiel]

I don't think this patch has anything to do with the perf change mentioned in comment 5...