[Bug] Add-ons Manager and add-on sub-pages have inconsistent style compared to the rest of Settings

[brampitoyo]

Steps to reproduce

• Go to Settings → Add-ons
• Go to Settings → Add-ons → uBlock Origin

---

1. Style/spacing of headers (“Recommended”, “Enabled”, “Disabled”) should be identical to style/spacing of Settings headers (“Account”, “General”, “Privacy and security”)

---

2. Style/size/spacing of individual add-on name and description, should be identical to style/size/spacing of Site Permissions.

The colour of rating stars is already correct.

---

3. Style/size/spacing of add-on submenu items, should be identical to style/size/spacing of Settings list items.

---

4. “On/Enabled” should be spaced so that its label aligns with item labels underneath.

---

5. The icon used for “Permissions” under add-ons, should match the icon used for “Site Permissions” under Settings.

---

6. Style/size/spacing used for “Details” and “Permissions”, should match style/size/spacing in “About Firefox”.
   • Remove underlines on links, and link icons to the right of “Homepage” and “Learn more about permissions”. We can use the same link colour as “About Firefox”, with no underline.
   • Colour/style of horizontal rulers should be identical to those found in “About Firefox”
   • “Details” already has the correct text-to-page margin of 16px. This value can be kept intact.
   • We can also keep using left-aligned text on both “Details” and “Permissions”, and keep the text regular-weight (some parts of “About Firefox” uses bold, and it’s not suitable for long body of information).

┆Issue is synchronized with this Jira Task

[Amejia481]

@brampitoyo would you mind taking a look? This will be available in the next nightly update :)

[brampitoyo]

@Amejia481 Thanks heaps for tackling this issue. I can confirm that our styles now matches Settings for the most part. Colours seem to be consistent 100% of the time, and text sizes are correct except in one instance.

The remaining tweaks have to do with paddings and element sizes.

---

1. The header “Recommended”, “Enabled”, etc. needs to be shifted down a bit, so it matches the padding of headers like “Account” in Settings.

Just to check: are we also using the same font weight?

---

2. Our add-on icon size is bigger than the size of favicons used elsewhere in the app, and our text padding doesn’t align with app bar header. Our text sizes are already correct, so that’s perfect.

If possible, we should follow the favicon specs outlined in #7992, where add-on icons is is 24x24dp centered in a 40x40dp box with 4dp corner radius. Sorry that it’s a moving target!

---

3. On the “uBlock Origin” sub-page, the padding seems to be double the padding value of other Settings pages. Hopefully this is a fairly straightforward fix?

---

4. On the “Details” sub-page, the text size (14dp?) is smaller than one found under “About Firefox” (16dp?). Our text colour now matches and looks great.

---

5. If wonder if the vertical paddings of “Authors”, “Version”, “Last updated”, etc. can match the padding of items on the “Permissions” sub-page, and if the horizontal separator/ruler can stretch across the length of the page?

Both the horizontal paddings and text sizes are already correct.

---

6 On the “Permissions” sub-page, I wonder if we can stretch the horizontal separator/ruler across the length of the page? Similar to how rulers appear in other Settings page.

[brampitoyo]

@Amejia481 All our remaining issues – some are issues from before – have to do with paddings between elements.

All of our text sizes and colours are now perfect!

---

1. This was an issue from before. Our text padding doesn’t align with app bar header.

I was also wondering whether it would be possible to change the colour of the circle containing the add-on icon, to be the same colour as ones used on Bookmarks and History items?

• Background colour value: Light Grey 30 #e0e0e6
• No drop shadow

---

2. Our add/install (+) icon should have the same height (24dp), padding (16dp) and alignment as the three-dot icon used in Bookmarks and History.

---

3. The padding between add-ons header & list item should be the same as the padding between header & list item in Settings main page (I think it has no padding at all? I could be wrong).

---

4. On the “Details” sub-page, the top padding of add-on description should match text padding in other sections within Settings.

---

5. On the “Details” sub-page, the padding between add-on description & details (authors, version, last updated, etc.) should be identical to the padding in the “About Firefox” page.

---

6. This was an issue from before. On the “uBlock Origin” sub-page, the padding seems to be double the padding value of other Settings pages.

[brampitoyo]

@Amejia481 I’ve gone through all the changes and can confirm that nearly everything looks perfect. All major and minor layout issues have now been addressed. Thanks heaps for working on this!

There’s only one nit that remains: the plus icon we use isn’t the same as the plus icon used elsewhere in the app. Ours has flat/sharp edges, and the one used elsewhere has rounded edges. Ours is also smaller (20dp?) versus the other ones (24dp).

Otherwise, we’re ready to ship these changes!

[Amejia481]

The new changes are in nightly, we can close this one :)