Closed Bug 1693899 Opened 2 months ago Closed 2 months ago

Feature checkboxes on about:profiling are too wide and easy to click accidentally

Categories

(DevTools :: Performance Tools (Profiler/Timeline), defect)

defect

Tracking

(firefox88 fixed)

RESOLVED FIXED
88 Branch
Tracking Status
firefox88 --- fixed

People

(Reporter: mstange, Assigned: itiel_yn8)

Details

Attachments

(2 files)

Attached image screen shot

Steps to reproduce:

  1. Go to about:profiling
  2. Scroll down to the "Features (Recommended on by default)" section.
  3. Click into the empty space to the right of the "Native Stacks" checkbox description.

Expected results:
The checkbox should be unaffected. The label hitbox should be the bounding box of checkbox and text.

Actual results:
The hitbox is wider, spanning the entire "content width" of the page. See the attached screenshot.

I accidentally hit it after I was editing the threads filter, when I clicked outside of the textbox to unfocus it, because the change is only applied when focus leaves the text field. And then in my next profile I didn't have native stacks, because I had accidentally unchecked the feature.

Itiel, what do you think?

Flags: needinfo?(itiel_yn8)
Regressed by: 1689480

That's not actually a regression by bug 1689480 :)

:mstange, would you say this is an issue also on the Threads checkboxes above, or the radio buttons?
I'm thinking the answer to that is "no", because the clicking target for "Custom" is already small as it is, and the same can be said for the Threads checkboxes.

Flags: needinfo?(itiel_yn8) → needinfo?(mstange.moz)
No longer regressed by: 1689480

Hmm, yes, I think I'd consider those labels to be too big as well. Overly large labels are just not something I'm used to: Native macOS checkboxes and radios are only clickable in the bounding box of checkbox + label text, see for example the General pane of the system preferences.

I know we're building our own UI language in these in-content pages, which may not necessarily make the same choices as the native UI paradigm, but I think this is a place where the native choice is a good one. Our in-content pages already have much larger fonts than most native dialogs, so the clickable area is already larger. And if you'd want to argue that in-content pages are more like web pages than native dialogs, I don't think the web has found a consistent label usage either; much of the time, web pages forget to use labels entirely and make you click the checkbox itself rather than the label text.

Flags: needinfo?(mstange.moz)

That's the old issue that block elements take all the available width.
I believe we made the labels block elements for simplicity, but likely we should wrap them with divs, so that the labels don't take all the available space.

Assignee: nobody → itiel_yn8
Attachment #9204412 - Attachment description: Bug 1693899 - Make checkbox and radio options span the text instead of the content width of the page ?julienw!,ntim → Bug 1693899 - Make checkbox and radio options span the text instead of the content width of the page r?julienw!,ntim
Status: NEW → ASSIGNED
Pushed by jwajsberg@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/00d0166a967c
Make checkbox and radio options span the text instead of the content width of the page r=julienw DONTBUILD
Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → 88 Branch
You need to log in before you can comment on or make changes to this bug.