Open Bug 1703491 Opened 3 years ago Updated 2 months ago

Checkboxes and radio buttons from about preferences are cut out while the browser window is resized

Categories

(Firefox :: Theme, defect, P3)

Desktop
All
defect

Tracking

()

Tracking Status
firefox-esr78 --- unaffected
firefox87 --- unaffected
firefox88 --- wontfix
firefox89 --- fix-optional
firefox90 --- fix-optional

People

(Reporter: vlucaci, Unassigned)

References

(Regression)

Details

(Keywords: regression)

Attachments

(1 file)

Attached image cut out buttons.gif

Affected versions

  • 89.0a1 (20210406152948)
  • 88.0b8

Affected platforms

  • Windows10x64
  • macOS 11
  • macOS 10.15.7
  • Ubuntu 20.04

Steps to reproduce

  1. Launch FF
  2. Go to about preferences
  3. Resize the window lesser than half of screen
  4. Navigate the options using TAB key form the keyboard

Expected result

  • Navigating the options from the about:preferences section using the TAB key from the keyboard , while the browser's window is resized , should render no issues with checkboxes and radio buttons.

Actual result

  • Navigating the options from the about:preferences section using Tab key from the keyboard , while the browser's window is resized , will render all the checkboxes and the radio buttons to be cut out.

Suggested Severity

  • I would suggest an S3 for this issue, as resizing the browser window can be encountered numerous times in regular user usage, while multitasking.

Notes

  • This issue occurs for Light, Dark and Alpenglow themes.
  • This issue is not Proton specific, however it would greatly improve the overall aesthetics of the feature.
Has STR: --- → yes
QA Whiteboard: [qa-regression-triage]

This issue is a regression.
I've ended up with the following regression range:
changeset: 529ca682d2ff3a848ae9de190f0d8b5fce568f02
pushlog_url: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=e84d1445bc6d646e7107f5a6e9e5344196d76774&tochange=529ca682d2ff3a848ae9de190f0d8b5fce568f02

Potentially regressed by: Bug 1698355

Regressed by: 1698355
Has Regression Range: --- → yes

The issue also occurs when the browser window is zoomed in to 200%, no resize being required.

  1. Go to about:preferences#search.
  2. Zoom in to 200%.
  3. Start navigating through the page using the 'tab' key.

Actual result: The buttons highlight selection is cut off.

This happens when the labels in the sidebar categories collapse to just be icons. This used it happen in about:addons as well and it was worked around by putting a margin on the main content and removing that from the expected sidebar width. Looks like the main content needs at least 4px of margin-inline-start in this case.

This could theoretically affect any in-content page that uses the #categories sidebar.

https://searchfox.org/mozilla-central/rev/f018480dfed4fc583703a5770a6db9ab9dc0fb99/toolkit/mozapps/extensions/content/aboutaddons.css#18

Dão can you set priority/severity for this?

Flags: needinfo?(dao+bmo)
Severity: -- → S4
Flags: needinfo?(dao+bmo)
Priority: -- → P3

From kcochrane:

a quick fix for common-shared might just be to increase this padding-inline value within the media query for max width 830px from 0 to something just wide enough for the focus outline:
https://searchfox.org/mozilla-central/source/toolkit/themes/shared/in-content/common-shared.css#893-895

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: