Closed Bug 1589918 Opened 3 years ago Closed 9 months ago

Given and additional names' focus rings are not covering the end side of the text area in the Add Address dialog


(Toolkit :: Form Autofill, defect, P3)




102 Branch
Tracking Status
firefox-esr91 --- wontfix
firefox100 --- wontfix
firefox101 --- wontfix
firefox102 --- verified


(Reporter: itiel_yn8, Assigned: manisha270417, Mentored)


(Blocks 1 open bug, Regression)


(Keywords: good-first-bug, regression, Whiteboard: [lang=css])


(3 files)

Attached image Screenshot

The code responsible was changed in bug 1485473, but I'm not sure if this was an issue even before.
See attached.

I think the intent here was to not have borders on the "inside" of the larger name area, so there would be no borders on either end of the additional-name field in the middle, and the given name would have no border on the end and the family name would have no border on the start.

Priority: -- → P3
See Also: → 1624798
See Also: 1624798
Keywords: regression
Regressed by: 1502684
Component: Preferences → Form Autofill
Priority: P3 → P2
Product: Firefox → Toolkit

This is quite easy to fix, you only need to increase the z-index of focused containers:

#family-name-container:focus-within {
    z-index: 1;

Note that the rule is targeting the container on :focus-within and not the text-input on :focus, because the latter would overlap and hide the label.

The severity field is not set for this bug.
:MattN, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(MattN+bmo)
Severity: normal → S4
Flags: needinfo?(MattN+bmo)
Has Regression Range: --- → yes

To help Mozilla out with this bug, here's the steps:

  1. Comment here on the bug that you want to volunteer to help.
    This will tell others that you're working on the next steps.
  2. Download and build the Firefox source code
    • If you have any problems, please ask on Element/Matrix in the #introduction channel. They're there to help you get started.
    • You can also read the Developer Guide, which has answers to most development questions.
  3. Start working on this bug.
    • You'll need to implement the styles that :ntim mentioned in Comment #4 in the editAddress.css file
    • If you have any problems with this bug, please comment on this bug and set the needinfo flag for me. Also, you can find me and my teammates on the #form-autofill channel on Element/Matrix most hours of most days.
  4. Build your change with mach build and verify that the issue has been fixed by using mach run and then adding a new address in about:preferences. If you don't have "Saved Addresses" in about:preferences, you may need to enable it by setting extensions.formautofill.addresses.supported to on in about:config and then restarting Firefox.
  • Also check your changes for adherence to our style guidelines by using mach lint.
  1. Submit the patch (including an automated test, if applicable) for review. Mark me as a reviewer so I'll get an email to come look at your code.
  2. After a series of reviews and changes to your patch, I'll push it to autoland.
Mentor: tgiles
Keywords: good-first-bug
Priority: P2 → P3
Whiteboard: [lang=css]
Assignee: nobody → manisha.singh2019
Pushed by
Add covering Focus Ring of text area in Add Address dialog. r=tgiles
Closed: 9 months ago
Resolution: --- → FIXED
Target Milestone: --- → 102 Branch
QA Whiteboard: [qa-102b-p2]

Reproducible on Firefox 100.0 on Ubuntu 20.04. Verified as fixed on Firefox 102.0b4(20220605185654) and Nightly 103.0a1(20220606212503) on Windows 10 x64, macOS 11 and Ubuntu 20.04.

QA Whiteboard: [qa-102b-p2]
You need to log in before you can comment on or make changes to this bug.