6

Use moz-button-group in report add-on dialog

 2 years ago
source link: https://bugzilla.mozilla.org/show_bug.cgi?id=1819352
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Details

(Keywords: good-first-bug, Whiteboard: [fidefe-reusable-components][lang=js][lang=html][lang=css])

attachment.cgi?id=9320299

The Cancel/Go back and Next/Submit buttons in the report add-on dialog don't follow our conventions for what buttons should look like in dialogs like this.

There are some custom styles to make the buttons shorter and wider that can be removed (the rule and associated --button-padding variable) [1]. And the container of the buttons should be updated to use the moz-button-group component so that they're correctly positioned on all platforms.

If you're an Outreachy applicant or external contributor wanting to pick up this bug, please 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 this dialog in Firefox, navigate to about:addons and add at least one addon (if you don't already have any installed). Find an addon in the "Enabled" section, click on the "..." menu, then click on "Report" to bring up the dialog.
    • The code For the buttons can be found here.
    • You'll need to wrap both sets of 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 abuse report tests (in particular the browser_html_abuse_report.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!
Mentor: hjones
Keywords: good-first-bug
Whiteboard: [fidefe-reusable-components] → [fidefe-reusable-components][lang=js][lang=html][lang=css]

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK