1714032 - The click area of the "Learn more" link from the “Import Error” modals is too large

Status: VERIFIED FIXED

(Firefox :: about:logins, defect, P3)

Description

[Simona Rosu [:srosu], Ecosystem QA, PTO - NI to: [e-mail]]

Attachment: Action_LearnMore_link.gif

[Affected versions]:

• Firefox Nightly 91.0a1 (Build ID: 20210601213358)

[Affected Platforms]:

• Mac 11.2.3
• Windows 10 x64
• Ubuntu 20.04 x64

[Prerequisites]:

• Have the latest version of Firefox Nightly installed.
• Have the “signon.management.page.fileImport.enabled” pref set to “true” value in the “about:config” page.

[Steps to reproduce]:

1. Open the Firefox browser with the profile from prerequisites.
2. Navigate to the "about:logins" page.
3. Click on the Menu button.
4. Select the “Import from a File…” option.
5. Select a non-CSV file and click on the “Open” button from the “Import Logins File” picker.
6. Hover the white space beside the "Learn more" link and observe what happens.

[Expected result]:

• The link is not highlighted.

[Actual result]:

• The link is highlighted and if you click the white space you are redirected to the specific link.

[Notes]:

• Also, the focus of the “Learn more” link seems to be too large.
• Attached a screen recording of the issue.

Comment 1

[Tim Giles [:tgiles]]

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 can solve this bug by adding align-items: flex-start to the .content rule in import-error-dialog.css. After adding this rule, verify that the click area of the link spans the width of the link instead of the link's container.
   • 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 #lockwise-desktop channel on Element/Matrix most hours of most days.
4. Build your change with mach build and test your change with mach test toolkit/components/passwordmgr --headless. Also check your changes for adherence to our style guidelines by using mach lint.
5. 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.
   • How to Submit a Patch
   • This is when the bug will be assigned to you.
6. After a series of reviews and changes to your patch, I'll mark it for checkin or push it to autoland.
   • If there are changes requested, please read the "To update a submitted patch" section to ensure you don't accidentally create a duplicate revision!
   • Your code will soon be shipping to Firefox users worldwide!
7. ...now you get to think about what kind of bug you'd like to work on next.

Comment 2

[hardikshah.hs2015]

Should I take up this issue as for my first contribution?

Comment 3

[Tim Giles [:tgiles]]

Hi, I'll assign you the bug. Please reach out to me in the #lockwise-desktop channel on Element if you have questions. Thanks for your help!

Comment 4

[hardikshah.hs2015]

(In reply to Tim Giles [:tgiles] from comment #3)

Hi, I'll assign you the bug. Please reach out to me in the #lockwise-desktop channel on Element if you have questions. Thanks for your help!

Okk sure, I already suffering there.

Comment 5

[hardikshah.hs2015]

ERROR: Package libpulse was not found in the pkg-config search path.
ERROR: Perhaps you should add the directory containing `libpulse.pc'
ERROR: to the PKG_CONFIG_PATH environment variable
ERROR: No package 'libpulse' found

Hey Tim, Can you just help me out a little? As I am done with my changes but couldn't able to test them out, because whenever I build my changes it shows this error.

Comment 6

[Tim Giles [:tgiles]]

Hey hardikshah, I've never seen that error before and so I'm not sure how to debug it. Are you running an artifact build or a full build? You can determine this by checking your root level mozconfig file. If you do not have ac_add_options --enable-artifact-builds in your mozconfig, go ahead and add that...since you don't need full builds.

Other than that though, I'm not a regular Linux user so I don't know what else you might need to get Firefox up and running on that system. Keep me posted though.

Comment 7

[Tim Giles [:tgiles]]

You could also check out the developers channel or the build channel. It looks like there's some conversation about this issue 'libpulse' issue

Comment 8

[hardikshah.hs2015]

Attachment: Review-ScreenShot.png

Hey Tim, Can you check out this image, and do let me know, will this be fine or need some changes?

Comment 9

[hardikshah.hs2015]

Hey Tim Giles, your below advice works fine, Mozilla is building and running fluently.

You can determine this by checking your root level mozconfig file. If you do not have ac_add_options --enable-artifact-builds in your mozconfig

Comment 10

[Tim Giles [:tgiles]]

I'm glad you were able to get Firefox up and running :) as for the screenshot, that looks good to me! Go ahead and submit a patch so I can review it.

Comment 11

[hardikshah.hs2015]

Attachment: WIP: Bug 1714032 - Learn more link from the Import Error modals fixed in import-error-dialog css by adding align-item property#developer - hardikSharma

Comment 12

[hardikshah.hs2015]

Attachment: Bug 1714032 - Learn more link from the Import Error modals fixed in import-error-dialog css by adding align-item property#developer - hardikSharma r=tgiles

Depends on D118848

Comment 13

[hardikshah.hs2015]

Hey Tim, I created the patch for my changes, here I'm attaching the link(s).
https://phabricator.services.mozilla.com/D118849
or
https://phabricator.services.mozilla.com/D118848
By mistake I created two patches for the same, so pardon me for that.
You can review this.

Comment 14

[Tim Giles [:tgiles]]

No worries about creating two patches, but you will need to clean them up though :) I left feedback on the patch that should help you in this process. Feel free to reach out if you have questions!

Comment 15

[hardikshah.hs2015]

Attachment: Bug 1714032 - Fix size of click area for Learn more link in about:logins. r=tgiles

Depends on D118849

Comment 16

[hardikshah.hs2015]

I made both the changes as you suggested, here is the new patch link: https://phabricator.services.mozilla.com/D118853

Comment 17

[hardikshah.hs2015]

Attachment: Bug 1714032 - Fix size of click area for Learn more link in about:logins r=tgiles

Depends on D118853

Comment 18

[hardikshah.hs2015]

Attachment: Bug 1714032 - Fix size of click area for Learn more link in about:logins. r=tgiles

Depends on D118858

Comment 19

[hardikshah.hs2015]

Attachment: Bug 1714032 - Fix size of click area for Learn more link in about:logins r=tgiles

Depends on D118848

Comment 20

[hardikshah.hs2015]

Attachment: Bug 1714032 - Fix size of click area for Learn more link in about:logins. r=tgiles

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5b4463c3dc93
Fix size of click area for Learn more link in about:logins. r=tgiles

Comment 22

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/5b4463c3dc93

Comment 23

[Simona Rosu [:srosu], Ecosystem QA, PTO - NI to: [e-mail]]

I have verified this issue using the latest Nightly 91.0a1 (Build ID: 20210706214242) on Windows 10 x64, Ubuntu 20.04 and macOS 11.2.3.

• The click area of the “Learn more” link from the “Import Error” modals is no longer too large.