Test the new look of addons.mozilla.org!

Oct 25 2017

AMO (addons.mozilla.org) is getting a fresh new look this November, along with the upcoming Firefox Quantum. Here’s a preview:

The current look on the development site, not quite final.

And this is not just a new coat of paint. Curated content — particularly in the homepage — is undergoing an overhaul to recommend the best add-ons to users. Additionally, the technology stack powering AMO has undergone important changes, making it faster to load and easier to work with in the future.

Fully responsive design

We released the new design for the mobile version of AMO months ago. Now we’re expanding it for larger resolutions. The site is fully responsive, adapting smoothly to different screen sizes and orientations.

Behind the scenes: React and front-end separation

The new AMO is built on the popular Redux + React combo. (Some recent news pointed at concerns with the licensing of the React code, which have been addressed now.)

Rewriting the front-end code was a great opportunity to improve on other areas:

• The front-end and back-end are now separated and communicate via an API that other clients can hook into. It’s documented here.
• The new front-end has very high unit test coverage, and the aim is to reach 100%. This makes it much easier to detect during development if a code change broke a feature.
• Server-side rendering will significantly improve page load times.

Try out the new look!

You can enable the new look for AMO now. Just look for the View Mobile Site link in the footer:

If you want to go back to the old site, look in the footer again for a link labeled View classic desktop site.

Some pages won’t be ported to the new design by November. Notably, user profile pages and collection management. They are still available, but using the old look. Also, some features like contributions and the permissions view in listing pages will be added in later iterations.

If you run into any issues with the new design, or think something’s missing, please file an issue (bonus points if you test on our development site first!). Some may be things we already know about and we plan to add soon. Even in those cases your feedback will help us prioritize our follow-up work.

If you’re not sure if something is an issue or not, or just want to give general feedback about the new design, please post in this forum thread.

Credits

Lots of people have worked on the new front-end and the supporting APIs, so I won’t try to list them all. I’ll just highlight tofumatt, pwalm, kumar, and muffinresearch, who did and continue to do the bulk of the work for the new site. Scott DeVaney leads the content discovery effort, which will be visible mostly on the homepage (for now!). And, of course, we couldn’t do all of this without the help of the QA team lead by Krupa Raj, and our many community contributors.

Tags: amo, firefox 57, mobile, quantum, react, responsive

Categories: developers, end users, releases

35 responses

1. Marine wrote on October 25, 2017 at 11:53 am:

   Contribution buttons are missing from the new site, and their implementation has a priority of post release. This will essentially cut off contributions for add-on developers for the foreseeable future.

   All of this comes after there was a switch recently to a simpler contribution interface which does not let authors request a contribution anymore before or after the add-on was installed. The Contribute button is now only present on the listing page for the current desktop site, which is much less visited than the search results. If you look at statistics, users typically install add-ons from search results either on AMO or directly from Firefox.

   Is source code which is simpler to maintain really worth the risk to decrease the number of donations and to alienate developers?

   1. Jorge Villalobos wrote on October 25, 2017 at 4:37 pm:

      The foreseeable future should only be a couple of weeks. The contributions button is very high on our list of things to fix post-release, and relatively easy to implement.

2. Jonas Platte wrote on October 25, 2017 at 3:17 pm:

   The search bar has its text color set explicitly, but not its background color. Looks pretty horrible on Linux with a dark Gtk theme: https://imgur.com/a/7Icmi

   Please always overwrite either both background and foreground color for input elements (and body too)!

   Incidentally, the reverse problem (only setting background color, but not text color) applies for the comments on this blog :S

   1. Jorge Villalobos wrote on October 25, 2017 at 4:39 pm:

      Thanks for the feedback. I’ll file a bug for AMO and try to find someone in charge of the blog theme.

3. cyanide wrote on October 25, 2017 at 11:43 pm:

   I don’t have a link to “View mobile site” in the footer..

   https://screenshots.firefox.com/I05sf388S9OhMnIQ/blog.mozilla.org

   Can you just paste the mobile site link here?

   1. Jorge Villalobos wrote on October 26, 2017 at 6:02 am:

      You have to first go to addons.mozilla.org and then look at the footer on that site. This is a separate blogging site for Mozilla. There’s no direct link, since what’s happening behind the scenes is a cookie being set (I think).

      1. cyanide wrote on October 26, 2017 at 1:07 pm:

         Right, thanks, brainfart.

4. Sören Hentzschel wrote on October 26, 2017 at 8:17 am:

   First of all: Thank you for your work on addons.mozilla.org! And the performance of the new website is great! But I have a few negative points, sorry about that.

   The install button on the add-on details is not obvious at all. Please add a text so that users know how to install the add-on. It was even difficult for me to see that, and I am a developer of Firefox add-ons. And by the way, such a switch button makes sense on mobile but not really on desktop.

   I hope the details page is still missing some parts of the design because it looks really unpolished and not like a completed web design in the year 2017.

   Why is a full line needed only for the logo? The name of the add-on could be on right of the logo.

   Permissions listing is a must-have for the launch of the new design.

   Contributions button is also a must-have for the launch.

   Please make the “About this extension” part expanded by default. It’s annoying to see only a part of the description on the desktop.

   I think it’s a great start but there is still a lot of work.

   1. Graham Perrin wrote on November 5, 2017 at 5:57 am:

      https://discourse.mozilla.org/t/-/20860/26?u=grahamperrin thanks, Hartsel – other readers, please join the discussion there, if you can.

5. Graham Perrin wrote on October 26, 2017 at 9:08 am:

   Hint: I have just one Firefox container, dedicated to testing the new look.

   Whenever I want to compare the traditional look to the new, I simply send the traditional page to my ‘mobile’ (new look) container.

   To regain the traditional look: de-contain the page.

6. Graham Perrin wrote on October 26, 2017 at 11:54 am:

   Misusing a bug for positive effect when previewing the new look interface to add-ons for Firefox

   https://www.youtube.com/watch?v=tr6OWo8In2o (seven minutes)

7. Enrico wrote on October 26, 2017 at 3:19 pm:

   Looks great! My only issue with it is that the font size is way too small. 12px is way too small for computers.

8. Richard Paul wrote on October 30, 2017 at 3:03 pm:

   > The new front-end has very high unit test coverage, and the aim is to reach 100%. This makes it much easier to detect during development if a code change broke a feature.

   Not impressed, 100% is a low bar to achieve if you’re doing TDD properly.

   (My god, the blog front main page is a confusing mess. You can’t see what applies to what. I just made this comment on another blog post because the layout was so confusing to parse.)

   1. Graham Perrin wrote on November 5, 2017 at 5:36 am:

      Re: the blog, https://bugzilla.mozilla.org/buglist.cgi?list_id=13865510&resolution=—&classification=Other&query_format=advanced&product=Websites&component=blog.mozilla.org (component=blog.mozilla.org) might be the place to go for an enhancement request.

      Side note: I wonder whether that ‘component’ is new (that might explain the emptiness); when I made a non-public bug report a day or so ago, I don’t recall blog.mozilla.org appearing in the guided reporting routine.

9. happysurf wrote on October 31, 2017 at 6:31 am:

   Why I don’t see the preview on mouse over for light themes?

   1. Jorge Villalobos wrote on November 1, 2017 at 1:11 am:

      That feature is being dropped because it doesn’t work reliably, and we won’t be able to support it in the near future when we switch to more advanced themes.

      1. happysurf wrote on November 2, 2017 at 12:38 am:

         I understand but also “Tap to preview” doesn’t work on PC, maybe is only for Android I don’t know, therefore the user must install the a theme for see the preview?
         Very strange concept.

10. gary wrote on November 2, 2017 at 2:50 am:

    There is no way to search for “New” addons. To be “up and coming” you first have to be “New”!

    1. Graham Perrin wrote on November 5, 2017 at 5:31 am:

       Thanks for the feedback.

       If there will be an intuitive route to https://addons.mozilla.org/firefox/search/?tag=firefox57&sort=updated (that’s updated, not hotness):

       – how does that first page of results strike you; is there the sense of newness _and_ is there suitable prominence to the filtering stuff, to the left of the window?

       If you can, please join the discussion at https://discourse.mozilla.org/t/-/20860

       Thanks again – Graham (volunteer tester)

    2. Graham Perrin wrote on November 6, 2017 at 1:17 pm:

       More for you at https://discourse.mozilla.org/t/-/20860/17?u=grahamperrin – edited to include something that you can bookmark.

11. Honestly wrote on November 3, 2017 at 3:16 am:

    New addon design looks, feels and works like complete basic trash. Jeez you had one of the best browsers for addons along with a website that didn’t look and work like some modern mobile dumbed down slop design, its like its designed for sub 75iq retards by sub 90iq retards.

    Firefox might aswel drop off a cliff after this design is final and the desktop one is removed… along with all the dumb changes they made with web extensions that have pretty much destroyed any point in using the browser going forward as most the addons will only be capable of doing what basic goobles shit chrome crap achieves.

    slow clap watching mozilla hemorrhage itself..

    You would think you guys even knew what made the addon site useful.. clearly not as you lobotomized it all in just about everyway, the style is complete garbage. Good thing you had existing addons for it to use, when filling up the new shit design site. .. you won’t be encouraging any new developers to Firefox with the crap changes you idiots have been making in the last few years, truly you have just lost the plot sucked too much of that google do evil javascript infestation cock.

    “The new AMO is built on the popular Redux + React combo”

    No one except idiots give a shit about this crap js infested modern shit tech.. the combo doesn’t make the site better than the previous design in any way what-so-ever especially from the end user site.

    1. Graham Perrin wrote on November 5, 2017 at 5:53 am:

       Yeah, I’ve been on more than a few roller-coaster ups and downs in recent months. In fairness to the developers and other contributors, at and around the various GitHub repos (and other areas) involved in this transition:

       – every response to a properly made report, or comment, has been faultless

       – I don’t always agree but with each quiet disagreement, the community-spirited side of me recognises a little more of the bigger picture.

       This weekend: I see a handful teething problems, some of which will bite some users harder than others. Honestly, teething should be expected around any major launch – the products of open source communities are no exception. All things considered, I reckon that it was and is sane to have this teething, a little bleeding edge, a few days ahead of the release of Firefox 57 – with an opportunity to VERY selectively fix and retest issues that are critical.

       If you can, take a fresher look at things on … maybe Friday of next week and in the meantime: nudge yourself into rolling together one feedback item that might be actionable by the developers. You’ve got the passion, now make it palatable

       Graham – volunteer tester and occasional ranter

12. N wrote on November 3, 2017 at 3:34 am:

    For a start, the font-size is too small.

13. Vags wrote on November 4, 2017 at 6:44 am:

    The new site is looking nice but not working well. 4 example if you try to search for an extension “download” you can see at first page that there are 15 pages matching at this search. When you try to see the second page of the search “download” loosing the search result and drives you to 2cond page off all extensions, 17000+ pages. Need to fix

14. Mykola Onyshchuk wrote on November 5, 2017 at 1:19 am:

    I apologize for some offtopic, but in connection with the redesign, I would like to raise the issue of cataloging extensions. Now in the new design on the page https://addons.mozilla.org/en-US/firefox/ there is a list:

    Ad blockers
    Password managers
    Bookmarks
    Smarter Shopping
    Productivity
    Watching Videos

    And it is very different from the list of categories that are offered to the developer of extensions:

    Alerts & Updates
    Appearance
    Bookmarks
    Download Management
    Feeds, News & Blogging
    Games & Entertainment
    Language Support
    Photos, Music & Videos
    Privacy & Security
    Search Tools
    Shopping
    Social & Communication
    Tabs
    Web Development

    My addon InFormEnter+ catastrophically needs the “Productivity” category, but as addon developer I can not get it out of the list.

    I very much hope that over time the “Productivity” section will also appear here:
    https://addons.mozilla.org/en-US/firefox/extensions/

    1. Jorge Villalobos wrote on November 7, 2017 at 1:41 pm:

       The list on the homepage is manually curated. If you click on Extensions in the header, that will take you to the extensions homepage, which lists all extension categories. The homepage covers extensions and themes, and the content is mostly curated, not meant to be comprehensive.

15. Hife wrote on November 5, 2017 at 1:58 am:

    This may be quite late, but I don’t know a better place to communicate this: I am not happy with the placement of ratings and reviews.
    First, what I consider straight-up bad design: I see ratings and number of reviews in a box on the top right, but I can not click on either to get more details or give a rating. Instead there is a separate box below left, where I can leave my review and click to see other reviews. These two boxes should be merged or at least right next to each other. At least the button to show reviews is contextually closer to the current rating than my own rating, so it has no business being in the place it is now. There is even a convenient empty space below the first box.

    These are more a matter of taste:
    1. The most recent reviews are no longer visible on the addon page. These are often more relevant than the overall score, as they can indicate recent changes. Again, there is a convenient empty space at the bottom right of most addon pages, where you could easily place a box for the most recent reviews. This could then also be the place for the “show x reviews” button from before.
    2. The grey stars are a lot less visible than the yellow ones used to be.

    All these factors take focus away from reviews and ratings. If this is intentional, it is a decision I disagree with, but it is your decision to make. Either way I would really like to see them more visible and easily accessible again.

16. Tom wrote on November 9, 2017 at 2:36 pm:

    Please tell me that Collections and Favorites will be easier to add to, edit, and manage?

17. Tim wrote on November 10, 2017 at 10:45 pm:

    Uggly-uggly design. While it might be good for mobile devices, it is totally awful for desktop.

    At least bring back review section below description. Current position on the left is not convenient, last/popular reviews must be visible without extra clicks and load new page.

18. Stevo wrote on November 13, 2017 at 5:41 am:

    Actually I don’t like it.
    – less information than before
    – waste of space (as well as here in the blog)
    – simply to much work with no need (at least to do so massive changes)
    – it looks like optimized for smartphones (so far no problem) but I use a pc (and dont like to feel like sitting in front of a big smartphone)
    – no switch and compare between GUIs (did you a/b-test and analyses the use?)
    – all together annoying enough to ask “WHY?” and look for this blog to write you a feedback
    Sorry for rating hard. But I hope you may get an impression from a user outside the mozilla-dev-bubble.

    1. Stevo wrote on November 13, 2017 at 1:11 pm:

       btw.: why do you “hide” the “View classic desktop site”-option in the footer? If you really want to give an option or test the usage (a/b-test or alike) put it in the header or make an overlay!
       Placing in the footer is simply waste!

19. sad wrote on November 15, 2017 at 11:19 am:

    Firefox new skin is trash

20. arunk wrote on November 16, 2017 at 11:47 pm:

    Two main problems I encounter:

    (1) Already mentioned in other comments, but need to reiterate that the “Users, Reviews, Overall Ratings” is not clickable and is very misleading/user unfriendly.

    (2) When I go to read all the detailed reviews, I find that the username of the reviewer is no longer a link. As an addon developer, the ability to go click on the username link and look at all the other reviews of that user is very useful – especially when there is a bad review. I get to know if this person just shits on everybody or has good reasoned feedback and that helps me prioritize the improvements needed.

    On a general note, I find the website less useful than before and more difficult to navigate. So, in that spirit, I want to know:

    Is there a publicly available requirements document that lays out the shortcomings of the older website and how these are addressed in the new design? Was there a survey conducted with users/developers to take their inputs? If yes, where is this information publicly available?

21. smayer97 wrote on November 18, 2017 at 5:01 am:

    1. WAY TOO MUCH white space…
    2. half screen taken up by Add-on title and icon – lose most useful space
    3. Header WAY TOO BIG…font and icon size need to be decreased…suggest placing icon and title on same line.
    4. Likewise, Footer is WAY TO BIG TOO…too much vertical height giving lots of white (err…black) space…
    5. Default font size way too small…using zoom also magnifies lots of white space and Titles that are already TOO BIG
    6. Consider adding the LEGACY tag in every view…this would help quickly ID add-ons that still need updating. I know the site greys out add-ons that are not compatible with running version of FF BUT consider users that are using older versions that visit the site…if they can see the legacy tag, they may re-consider the use of that add-on as they consider upgrading to FF57+.
    7. Consider adding option to choose how many to list on a page…
    8. Legacy tag also useful in Collection views to ID add-ons that are not compatible and need updating/replacing…otherwise, currently have to open each add-on to see if they have been updated.
    9. And of course, PLEASE restore SOON the functionality to Add to Collection (showing complete list of collections add-on belongs to, and easy access to those collections, like old functionality)

    10. Please consider making old site available to users of older versions of FF…after all v48 is only just over one year old but cannot access the site…
    11. Grey stars difficult to see…add colour back

    P.S. It seems in an effort to move forward, there seems to be a large abandonment of add-ons developers and users…but these are part of the loyal user base…seems like a “cut-off your nose to spite your face” kind of move…( I understand the need to advance technology but there seems to be a lack of balance between old and new).

    P.S.S. I have a 27″ screen and this site has very poor use of space. And on 15″ laptop screens, takes a lot of scrolling back and forth to see all the info you want… with header and footer taking up too much screen…very inefficient.

    ON THE GOOD SIDE: I do notice big improvement is load speed.

22. Diane wrote on November 22, 2017 at 10:51 pm:

    Hi, i’m a fresh man as a beginner of web extensions development but a total loyal user of Firefox. Happy to see the new change of Firefox.
    I wonder if there’s any official policy about compatibility requirements to developer. I mean do I need to update my add-on to keep pace with you each time Firefox release its new version? I don’t know when and whether I should update my add-on responding to Firefox?
    Thanks