Open Bug 1820287 Opened 2 years ago Updated 1 month ago

Use moz-button-group in the add/edit credit card dialog in about:preferences

Categories

(Toolkit :: UI Widgets, enhancement, P3)

Product:
Toolkit
Component:
UI Widgets
Type:
enhancement

Tracking

()

People

(Reporter: hjones, Unassigned, Mentored)

References

(Blocks 1 open bug)

Details

(Whiteboard: [lang=html][lang=js][fidefe-reusable-components] )

Attachments

(2 files)

Add:Edit Credit Card Dialog.png
60.98 KB, image/png
Details
Bug 1820287 - Use moz-button-group in the add/edit credit card dialog in about:preferences. r=#credential-management-reviewers
48 bytes, text/x-phabricator-request
Details | Review

The add/edit credit card dialog for form autofill in about:preferences contains a pair of buttons that don't get reordered based on platform (the order stays the same for Mac/Windows). We could easily provide reordering and ensure consistent styling by wrapping the buttons in a moz-button-group element.

To help Mozilla out with this bug, follow these 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
  3. Start working on this bug.
    • To find the dialog in Firefox, navigate to about:preferences#privacy and scroll to the "Forms and Autofill" section, or search for "autofill". You will may need to click the checkbox to enable "Autofill credit cards". Once it's enabled, you should be able to click the "Saved Credit Cards" button, then click on the "Add" button in the next dialog to surface the "Add New Credit Card" dialog.
    • The code For the buttons can be found here.
    • You'll need to replace the buttons with a moz-button-group, then double check to see if there's any CSS that needs to be removed (anything that changes the size or spacing of the buttons). You may need to add a script tag to make the moz-button-group element available in the dialog. You can see an example of similar work in Bug 1802377.
    • 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 #reusable-components channel on Element/Matrix most hours of most days.
  4. Build your change with mach build and verify your changes locally. You can also test your change by running some of the formautofill tests (in particular the browser_editCreditCardDialog.js tests). More information on running tests can be found here. 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.
  6. After a series of reviews and changes to your patch, I'll mark it for checkin or push it to autoland. Your code will soon be shipping to Firefox users worldwide!

please can i be assigned to this, I would love it to be my first contribution

Hi Hanna, I am looking into this bug and interested in working on the next steps.

Can I work on this issue?

Flags: needinfo?(hjones)

Hi! I'm interested in working on this bug:)

My dev environment is also ready. Please let me know if I can contribute.

Hi my environment is ready, i'm also interested in this bug

(In reply to Adepeju Orefejo from comment #6)

Hi my environment is ready, i'm also interested in this issue

Hey, I'm assigning this to Lila for now as they were the first commenter who does not already appear to have a bug assigned. In the event that they are not able to submit a patch I'll open this back up again. Thanks all for your interest!

Assignee: nobody → LilaApplication
Status: NEW → ASSIGNED
Flags: needinfo?(hjones)
Whiteboard: [lang=html][lang=js] → [lang=html][lang=js][fidefe-reusable-components]

One thing I didn't realize when writing up the bug description - depending on your location you might not be able to see the "Forms and Autofill" section of about:preferences#privacy (since these features are only available in certain countries). If that's the case, you'll need to navigate to about:config and do the following:

  • search for extensions.formautofill.creditCards.supported and set that to "on" instead of "detect"
  • search for extensions.formautofill.addresses.supported and set that to "on" instead of "detect"

You may then need to run ./mach build and ./mach run and navigate to about:preferences again to see these changes get applied

(In reply to Hanna Jones [:hjones] from comment #8)

Hey, I'm assigning this to Lila for now as they were the first commenter who does not already appear to have a bug assigned. In the event that they are not able to submit a patch I'll open this back up again. Thanks all for your interest!

Thank you!

Hi Lila, how's it going? Are you having any issues? Let me know if you have questions or if you're still working on this, thanks!

Flags: needinfo?(LilaApplication)

Hi Hanna, I am working on this issue. I am kind of figure out how to deal with this issue, but I have trouble setting up the environment. I don't know if it's because of my network problem or if I didn't understand the steps. I will try this again today.

Flags: needinfo?(LilaApplication) → needinfo?(hjones)

Hi Hanna, I tried to download the source code again. It seems I successfully downloaded it but I still can't run it. The terminal says "Your system should be ready to build Firefox Desktop Artifact Mode", but when I tried to build and run it by
$ cd c:/mozilla-source/mozilla-unified
hg up -C central
./mach build
./mach run
it says No such file or directory. Can you help me with this?

Hey Lila, it's a little difficult to debug that without seeing more of your terminal output. I would recommend taking a screenshot of what you're seeing and posting it over in the #reusable-components channel on Matrix. I'm in there along with many other people who just went through the setup process, so we will be able to help troubleshoot your issue.

Flags: needinfo?(hjones)

OK! Thanks

Hi. There has been no update for this bug for quite a few days. Can I work on it if Lila is no longer actively working on it?

Flags: needinfo?(hjones)

Hi :Shah, at this point I think it's fine if you want to try working on this. The bug will be assigned to you once you submit a patch. Let me know if you have any questions!

Flags: needinfo?(hjones)

Sounds good. Thank you.

Assignee: LilaApplication → helloshahx95

This good-first-bug hasn't had any activity for 2 months, it is automatically unassigned.
For more information, please visit BugBot documentation.

Assignee: helloshahx95 → nobody
Status: ASSIGNED → NEW

Hi, I'll be taking a shot on fixing this.

if this bug is still not fixed and unassigned, may i try to fix it?

hey :Hardik, this got unassigned due to inactivity, but the attached patch still seems valid (it would just need to be updated and is still awaiting review from the credential management review group). Given that the person who submitted that patch doesn't seem to be active anymore I think you're ok to give this a try/submit a new patch using the attached changes for guidance. You can use the form below to request information from me if you have any questions.

Hey :hjones ,
Sure let me begin with the setup.

Assignee: nobody → helloshahx95
Status: NEW → ASSIGNED

Hey Hanna, is there any documentation for the setup?

Flags: needinfo?(hjones)

hey Hardik, for the setup do you mean getting set up to run Firefox locally? We have pretty extensive documentation on that in Firefox Source Docs - this contributor quick reference guide might be a good place to get started. If you're running into specific issues trying to follow set up instructions, I would recommend joining the #introductions chat on Matrix and asking it there.

It's also worth noting that credit card autofill is only enabled in certain regions by default. If you get everything set up and you don't see anything about credit card autofill in about:preferences you may have to set extensions.formautofill.creditCards.supported to on in about:config, then restart your browser to get the relevant UI to show up.

Flags: needinfo?(hjones)

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

Assignee: helloshahx95 → nobody
Status: ASSIGNED → NEW

I want to be reassigned this project. Thank you

Flags: needinfo?(hjones)

Hi Yunusa, usually bug assignment happens when you submit a patch. If you want to work on this feel free to get started! There hasn't been much activity for months so I don't think anyone else is working on it.

If you need help getting started take a look at the instructions here. Work has already gotten pretty far on this bug so you'll want to look at what was done in this patch. Also depending on your locale you may need to change some preferences to be able to see the relevant UI. Instructions for that are posted here.

Let me know if you have any questions!

Flags: needinfo?(hjones)

Hello, this would be my first attempt on the contribution stage, and I would like to attempt clearing this bug.

please could this be assigned to me?

I notice that this task is unassigned! I would like to know if I can work on it !

(In reply to Hanna Jones [:hjones] from comment #29)

Hi Yunusa, usually bug assignment happens when you submit a patch. If you want to work on this feel free to get started! There hasn't been much activity for months so I don't think anyone else is working on it.

If you need help getting started take a look at the instructions here. Work has already gotten pretty far on this bug so you'll want to look at what was done in this patch. Also depending on your locale you may need to change some preferences to be able to see the relevant UI. Instructions for that are posted here.

Let me know if you have any questions!

Hi please can i be assigned this bug ? and also where can i find the file for this bug ?

Hey there, I am able to take this bug, wonder it is still possible please.

Assignee: nobody → helloshahx95
Status: NEW → ASSIGNED
Pushed by mtigley@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/21b754dc819c Use moz-button-group in the add/edit credit card dialog in about:preferences. r=hjones,credential-management-reviewers,desktop-theme-reviewers,mtigley

Backed out for causing bc failures on browser_creditCard_telemetry.js.

[task 2024-01-23T20:35:19.754Z] 20:35:19     INFO - TEST-PASS | browser/extensions/formautofill/test/browser/creditCard/browser_creditCard_telemetry.js | object in event creditcard#delete#manage must match. - "manage" matches "manage" - 
[task 2024-01-23T20:35:19.755Z] 20:35:19     INFO - expecting record retrievals: addresses
[task 2024-01-23T20:35:19.755Z] 20:35:19     INFO - expecting record retrievals: creditCards
[task 2024-01-23T20:35:19.755Z] 20:35:19     INFO - Leaving test bound test_removingCreditCardsViaKeyboardDelete
[task 2024-01-23T20:35:19.756Z] 20:35:19     INFO - Entering test bound test_saveCreditCard
[task 2024-01-23T20:35:19.756Z] 20:35:19     INFO - saving credit card
[task 2024-01-23T20:35:19.757Z] 20:35:19     INFO - Waiting for 0 content events and 1 parent events
[task 2024-01-23T20:35:19.757Z] 20:35:19     INFO - Buffered messages finished
[task 2024-01-23T20:35:19.758Z] 20:35:19     INFO - TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/browser/creditCard/browser_creditCard_telemetry.js | Uncaught exception in test bound test_saveCreditCard - Wait for telemetry to be collected - timed out after 100 tries.
[task 2024-01-23T20:35:19.759Z] 20:35:19     INFO - Leaving test bound test_saveCreditCard
[task 2024-01-23T20:35:19.759Z] 20:35:19     INFO - Entering test bound test_editCreditCard
[task 2024-01-23T20:35:19.760Z] 20:35:19     INFO - expecting credit card saved
[task 2024-01-23T20:35:19.760Z] 20:35:19     INFO - expecting record retrievals: creditCards
[task 2024-01-23T20:35:19.761Z] 20:35:19     INFO - TEST-PASS | browser/extensions/formautofill/test/browser/creditCard/browser_creditCard_telemetry.js | only one credit card is in storage - 1 == 1 - 
[task 2024-01-23T20:35:19.761Z] 20:35:19     INFO - GECKO(8660) | [Parent 7692: Main Thread]: I/DocShellAndDOMWindowLeak ++DOCSHELL 1d71f300 == 6 [pid = 7692] [id = 8]
[task 2024-01-23T20:35:19.761Z] 20:35:19     INFO - GECKO(8660) | [Parent 7692: Main Thread]: I/DocShellAndDOMWindowLeak ++DOMWINDOW == 11 (55894c0) [pid = 7692] [serial = 18] [outer = 0]
[task 2024-01-23T20:35:19.762Z] 20:35:19     INFO - GECKO(8660) | [Parent 7692: Main Thread]: I/DocShellAndDOMWindowLeak ++DOMWINDOW == 12 (1fd30c00) [pid = 7692] [serial = 19] [outer = 55894c0]
[task 2024-01-23T20:35:19.762Z] 20:35:19     INFO - GECKO(8660) | [Parent 7692, Main Thread] WARNING: NS_ENSURE_TRUE(uri) failed: file /builds/worker/checkouts/gecko/caps/BasePrincipal.cpp:1515
[task 2024-01-23T20:35:19.763Z] 20:35:19     INFO - GECKO(8660) | must wait for load
[task 2024-01-23T20:35:19.763Z] 20:35:19     INFO - GECKO(8660) | must wait for focus
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO - Waiting for 0 content events and 2 parent events
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO - {
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -   "parent": [
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -     [
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -       94753,
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -       "creditcard",
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -       "show_entry",
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -       "manage"
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -     ],
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -     [
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -       94910,
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -       "creditcard",
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -       "edit",
[task 2024-01-23T20:35:19.764Z] 20:35:19     INFO -       "manage"
[task 2024-01-23T20:35:19.765Z] 20:35:19     INFO -     ]
[task 2024-01-23T20:35:19.765Z] 20:35:19     INFO -   ]
[task 2024-01-23T20:35:19.765Z] 20:35:19     INFO - }
[task 2024-01-23T20:35:19.765Z] 20:35:19     INFO - TEST-PASS | browser/extensions/formautofill/test/browser/creditCard/browser_creditCard_telemetry.js | parent must be in snapshot. Has [parent]. - true == true -
Flags: needinfo?(helloshahx95)
Flags: needinfo?(mtigley)
Backout by imoraru@mozilla.com: https://hg.mozilla.org/mozilla-central/rev/b804b2295fce Backed out changeset 21b754dc819c for causing bc failures on browser_creditCard_telemetry.js. CLOSED TREE

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

Assignee: helloshahx95 → nobody
Status: ASSIGNED → NEW

Hello, I would like to solve this issue, can you assign it to me ? please.

Redirect a needinfo that is pending on an inactive user to the triage owner.
:mstriemer, since the bug has recent activity, could you have a look please?

For more information, please visit BugBot documentation.

Flags: needinfo?(helloshahx95) → needinfo?(mstriemer)
Flags: needinfo?(mstriemer)

There is an r+ patch which didn't land and no activity in this bug for 2 weeks.
:helloshahx95, could you have a look please?
If you still have some work to do, you can add an action "Plan Changes" in Phabricator.
For more information, please visit BugBot documentation.

Flags: needinfo?(hjones)
Flags: needinfo?(helloshahx95)

Redirect a needinfo that is pending on an inactive user to the triage owner.
:mstriemer, could you have a look please?

For more information, please visit BugBot documentation.

Flags: needinfo?(helloshahx95) → needinfo?(mstriemer)
Severity: -- → N/A
Type: task → enhancement
Priority: -- → P3
Assignee: nobody → helloshahx95
Attachment #9325926 - Attachment description: Bug 1820287 - Use moz-button-group in the add/edit credit card dialog in about:preferences. r?hjones → Bug 1820287 - Use moz-button-group in the add/edit credit card dialog in about:preferences. r=#credential-management-reviewers
Status: NEW → ASSIGNED

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

Assignee: helloshahx95 → nobody
Status: ASSIGNED → NEW

Shouldn't this be closed when ti has accepted patch?

Hi Daniel - thanks for your question. Although the patch was accepted we have been unable to land it due to test failures. Bugs are only closed once the patch has "landed" i.e. gotten pushed to mozilla-central. You can find more information on this process here.

Removing the good-first-bug tag since this has turned out to be a little more involved due to some added test fixes that are needed. Unfortunately the browser/extensions/formautofill/test/browser/creditCard/browser_creditCard_telemetry.js test is failing so that will need to be fixed to update this code

Flags: needinfo?(mtigley)
Flags: needinfo?(mstriemer)
Flags: needinfo?(hjones)
Keywords: good-first-bug
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: