Use moz-button-group in the add/edit credit card dialog in about:preferences
Categories
(Toolkit :: UI Widgets, enhancement, P3)
Tracking
()
People
(Reporter: hjones, Unassigned, Mentored)
References
(Blocks 1 open bug)
Details
(Whiteboard: [lang=html][lang=js][fidefe-reusable-components] )
Attachments
(2 files)
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:
- Comment here on the bug that you want to volunteer to help. This will tell others that you're working on the next steps.
- 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 Firefox Contributors' Quick Reference, which has answers to most development questions.
- If you have any problems, please ask on Element/Matrix in the
- 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 themoz-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.
- To find the dialog in Firefox, navigate to
- 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 thebrowser_editCreditCardDialog.js
tests). More information on running tests can be found here. Also check your changes for adherence to our style guidelines by usingmach lint
- 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.
- Getting your code reviewed
- This is when the bug will be assigned to you.
- 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!
Comment 1•2 years ago
|
||
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.
Comment 5•2 years ago
|
||
My dev environment is also ready. Please let me know if I can contribute.
Comment 6•2 years ago
|
||
Hi my environment is ready, i'm also interested in this bug
Comment 7•2 years ago
|
||
(In reply to Adepeju Orefejo from comment #6)
Hi my environment is ready, i'm also interested in this issue
Reporter | ||
Comment 8•2 years ago
|
||
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!
Reporter | ||
Updated•2 years ago
|
Updated•2 years ago
|
Reporter | ||
Comment 9•2 years ago
•
|
||
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
Comment 10•2 years ago
|
||
(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!
Reporter | ||
Comment 11•2 years ago
|
||
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!
Comment 12•2 years ago
|
||
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.
Comment 13•2 years ago
|
||
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?
Reporter | ||
Comment 14•2 years ago
|
||
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.
Comment 15•2 years ago
|
||
OK! Thanks
Comment 16•2 years ago
|
||
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?
Reporter | ||
Comment 17•2 years ago
|
||
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!
Comment 18•2 years ago
|
||
Sounds good. Thank you.
Comment 19•2 years ago
|
||
Reporter | ||
Updated•2 years ago
|
Comment 20•2 years ago
|
||
This good-first-bug hasn't had any activity for 2 months, it is automatically unassigned.
For more information, please visit BugBot documentation.
Comment 21•2 years ago
|
||
Hi, I'll be taking a shot on fixing this.
Comment 22•1 years ago
|
||
if this bug is still not fixed and unassigned, may i try to fix it?
Reporter | ||
Comment 23•1 years ago
|
||
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.
Comment 24•1 years ago
|
||
Hey :hjones ,
Sure let me begin with the setup.
Updated•1 years ago
|
Comment 25•1 years ago
|
||
Hey Hanna, is there any documentation for the setup?
Reporter | ||
Comment 26•1 years ago
|
||
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.
Comment 27•1 year ago
|
||
The bug assignee is inactive on Bugzilla, so the assignee is being reset.
Reporter | ||
Comment 29•1 year ago
|
||
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!
Comment 30•1 year ago
|
||
Hello, this would be my first attempt on the contribution stage, and I would like to attempt clearing this bug.
Comment 31•1 year ago
|
||
please could this be assigned to me?
Comment 32•1 year ago
|
||
I notice that this task is unassigned! I would like to know if I can work on it !
Comment 33•1 year ago
|
||
(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 ?
Comment 34•1 year ago
|
||
Hey there, I am able to take this bug, wonder it is still possible please.
Updated•1 year ago
|
Comment 35•1 year ago
|
||
Comment 36•1 year ago
|
||
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 -
Updated•1 year ago
|
Comment 37•1 year ago
|
||
Comment 38•1 year ago
|
||
The bug assignee is inactive on Bugzilla, so the assignee is being reset.
Comment 39•1 year ago
|
||
Hello, I would like to solve this issue, can you assign it to me ? please.
Comment 40•1 year ago
|
||
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.
Updated•11 months ago
|
Comment 41•11 months ago
|
||
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.
Comment 42•10 months ago
|
||
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.
Updated•6 months ago
|
Updated•6 months ago
|
Comment 43•5 months ago
|
||
The bug assignee is inactive on Bugzilla, so the assignee is being reset.
Comment 44•4 months ago
|
||
Shouldn't this be closed when ti has accepted patch?
Reporter | ||
Comment 45•4 months ago
|
||
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.
Comment 46•1 month ago
|
||
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
Description
•