1600365 - Enhancement: Larger Checkboxes in Inspector

Status: NEW

(DevTools :: Inspector: Rules, defect, P2)

Description

[MarjaE]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:56.0) Gecko/20100101 Firefox/56.0 Waterfox/56.3

Steps to reproduce:

Used inspector.

Actual results:

Among other problems, it can be hard to uncheck elements in a hurry, especially if you coordination issues, visual issues, or are having visual issues due to flashing, animation, etc. which you are trying to disable.

Expected results:

Larger checkboxes should help.

They could also help avoid confusion between different types of checkboxes.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Patrick Brosset <:pbro>]

Thanks for filing. I agree that the hit box for the rule-view checkboxes should be wider, so it's easier to click them quickly.
In fact, this was fixed in bug 1190113 in Firefox 64, but it looks like this was later regressed by bug 1491811 in Firefox 72.

At the time of Firefox 64, the CSS code for the checkboxes was changed so it would be possible to click a little outside of them and still trigger the action. But that later bug refactored the checkboxes themselves, and that piece of code got lost I think.

Mike, would you like to look into what got lost and try to add it back again to fix this regression?

Comment 3

[Florens Verschelde :fvsch]

Looks like there are two issues:

1. Hitbox is too small. I think our line-height is 15px and, with the vertical-align: middle happening on a lot of elements in a rule, it tends to grow to 16px consistently. So we could target a 14px or maybe 16px-tall target, and probably a bit wider horizontally (around 20px).

2. Misclicks are picked up by the parent: related to https://github.com/firefox-devtools/ux/issues/106

Re. ways to increase an <input type="checkbox">'s hitbox, I'm not sure there's a good way to do it while keeping the checkbox visually small. So we probably need another element wrapping the checkbox, which could be:

• a <label>, which would help toggling the checkbox, no JS required, but it may not be the best solution for accessibility;
• a <span> with a click event listener.