1689480 - Add vertical clicktarget to in-content checkboxes and radiobuttons, as specified by the spec

Status: RESOLVED FIXED

(Toolkit :: Themes, enhancement)

Description

[Itiel]

The specs:
https://design.firefox.com/photon/components/radio-buttons.html

Comment 1

[Itiel]

Attachment: Bug 1689480 - Add vertical clicktarget for in-content checkboxes and radiobuttons r?ntim

Comment 2

[Itiel]

Attachment: Bug 1689480 - Changes to about:tabcrashed checkboxes to accomodate for the added margin-block r?mconley,ntim

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103390

Comment 3

[Itiel]

Attachment: Bug 1689480 - Changes to about:logins checkboxes to accomodate for the added margin-block r?sfoster,tgiles,ntim

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103391

Comment 4

[Itiel]

Attachment: Bug 1689480 - Changes to about:welcomeback radiobuttons to accomodate for the added margin-block r?ntim

This also gets rid of the non clickable area between the radiobutton and its label.

Depends on D103392

Comment 5

[Itiel]

Attachment: Bug 1689480 - Changes to about:profiling checkboxes and radiobuttons to accomodate for the added margin-block r?julienw,ntim

Depends on D103393

Comment 6

[Itiel]

Attachment: Bug 1689480 - Changes to about:config radiobuttons to accomodate for the added margin-block r?ntim

Depends on D103394

Comment 7

[Itiel]

Attachment: Bug 1689480 - Changes to the print UI checkboxes and radiobuttons to accomodate for the added margin-block r?sfoster,mstriemer,ntim

This also gets rid of the non clickable area between the checkbox/radiobutton and its label.

Depends on D103395

Comment 8

[Itiel]

Attachment: Bug 1689480 - Changes to about:networking checkbox to accomodate for the added margin-block r?ntim

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103397

Comment 9

[Itiel]

Attachment: Bug 1689480 - Changes to about:telemetry checkbox and radiobuttons to accomodate for the added margin-block r?ntim

This also gets rid of the non clickable area between the checkbox/radiobuttons and their label.

Depends on D103398

Comment 10

[Itiel]

Attachment: Bug 1689480 - Changes to the appchooser/permission dialog checkboxes to accomodate for the added margin-block r?pbz,ntim

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103399

Comment 11

[Itiel]

Attachment: Bug 1689480 - Changes to about:url-classifier checkboxes to accomodate for the added margin-block r?dimi,ntim

This also makes the labels themselves clickable, and not just the checkboxes.

Depends on D103400

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d07c76355cda
Changes to about:tabcrashed checkboxes to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/2be1ec4d0d47
Changes to about:config radiobuttons to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/0e77a19d6439
Changes to about:networking checkbox to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/440ec2cf3e8e
Changes to about:url-classifier checkboxes to accomodate for the added margin-block r=dimi
https://hg.mozilla.org/integration/autoland/rev/f619503d081a
Changes to about:welcomeback radiobuttons to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/7b02086763d4
Changes to about:profiling checkboxes and radiobuttons to accomodate for the added margin-block r=julienw,ntim
https://hg.mozilla.org/integration/autoland/rev/00fbecf58239
Changes to about:logins checkboxes to accomodate for the added margin-block r=tgiles,ntim
https://hg.mozilla.org/integration/autoland/rev/2f14def87a42
Changes to about:telemetry checkbox and radiobuttons to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/1ca7671397e8
Add vertical clicktarget for in-content checkboxes and radiobuttons r=ntim
https://hg.mozilla.org/integration/autoland/rev/8816e3b6b2d7
Changes to the appchooser/permission dialog checkboxes to accomodate for the added margin-block r=pbz
https://hg.mozilla.org/integration/autoland/rev/ec51a9295fe4
Changes to the print UI checkboxes and radiobuttons to accomodate for the added margin-block r=mstriemer

Comment 15

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/d07c76355cda
https://hg.mozilla.org/mozilla-central/rev/2be1ec4d0d47
https://hg.mozilla.org/mozilla-central/rev/0e77a19d6439
https://hg.mozilla.org/mozilla-central/rev/440ec2cf3e8e
https://hg.mozilla.org/mozilla-central/rev/f619503d081a
https://hg.mozilla.org/mozilla-central/rev/7b02086763d4
https://hg.mozilla.org/mozilla-central/rev/00fbecf58239
https://hg.mozilla.org/mozilla-central/rev/2f14def87a42
https://hg.mozilla.org/mozilla-central/rev/1ca7671397e8
https://hg.mozilla.org/mozilla-central/rev/8816e3b6b2d7
https://hg.mozilla.org/mozilla-central/rev/ec51a9295fe4

Comment 16

[Itiel]

I'd like QA to verify this bug, along with bug 1685595 and bug 1685628 (they all touch similar aspects of the same element(s)).
TLDR:

1. Make sure the checkboxes/radiobutton across the in-content UI (not chrome UI) all[*] look the same (for checkboxes (when checked)- white checkmark surrounded by a blue rectangle, for radiobuttons (when selected)- white dot in a blue ring).
2. Make sure they are clickable also at least 3px above and below the buttons themselves.
3. Make sure they all have proper hover / active (i.e. mouse-down) / disabled (where relevant) effects.

Non exhaustive list of places to test this in:
about:preferences
about:profiling
about:telemetry ("current data")
about:welcomeback
about:config
about:addons (open an installed extension > scroll down to the "Allow automatic updates" section)
about:addons (the report abuse dialog)
The new print dialog

[*] There are a few exceptions, like in about:newtab's AS Router Admin, the checkbox under the What's New Panel in the main menu, about:memory, about:checkerboard

Comment 17

[Alexandru Trif, Desktop QA [:atrif]]

Hi Itiel!

I looked into this respecting the above-mentioned scenarios and pages using Firefox 87.0a1 (20210219094547) .
On Windows 10x64 I tried with dark and white combined themes as well and the checkboxes and radio buttons looks as described in step1 from above. Also they are clickable above and bellow as stated in step 2. They all have the same effect on hover, disabled, clicked and disabled. On about:addons (the report abuse dialog) -> I don't know for sure that the 3px rule is applied as well: screenrecording

On macOS 11.2 however there are some radio button and checkboxes that I think they are not respecting the step2 rule. You have to be really close to them in order to activate them. I made a screen recording witch includes the hovered, selected and mouse-down states as well: link.

At first glymse the problem with step2 rule happens on Ubuntu 18 as well, at least on below side, with certain checkboxes and radio buttons. Screen recording: link

Is this expected? Thank you in advance!