Add-ons Manager Design Update

November 4, 2010

I’d like to give a few updates on the continued implementation of Firefox 4′s new add-ons manager. As development work continues, some parts of the manager’s functionality have been adjusted and updated since I last posted mockups. Here are a few highlights of what’s been going on.

Add-on Specific Notifications

Each add-on in the manager could have one of several notifications that only pertain to itself. How can it be made clear when an add-on needs attention or action? Stephen Horlander first experimented with adding subtle coloring and diagonal stripes to each add-on. In the latest nightlies, this method is expanded to give the full range of add-on notifications. Red and yellow signify different levels of potential problems, while grey and green signify when an add-on requires attention or action.

Here’s a mockup of what these notifications would look like in the manager:

In Detail View, where only one add-on is visible, notifications appear at the top of the pane.

Global Add-on Notifications

Notifications that relate to all add-ons now display in the scope bar (bug 566194). The color of global notifications follows the same scheme as notifications for individual add-ons.

Hiding Browser Navigation Widgets

The design of the add-ons manager is enhanced by displaying only relevant parts of the browser chrome and hiding those that don’t relate to the page (such as the URL bar and reload button). Some benefits of doing this  include:

  • Presenting a minimal, clean UI
  • Creating a distinctive in-content page that no other site can mimic – vital because of the far-reaching changes which can be made within in-content pages
  • The user only sees actions that they can take. Reload, for instance, is needless on a page that’s locally hosted
  • Space in the navigation bar normally used for browsing buttons can be repurposed for widgets useful for in-page content. For instance, the URL bar space can be used in future Firefox versions to present breadcrumb navigation for in-page content.

Progress towards removing browser navigation widgets is being tracked in bug 571970. Unfortunately, this will only work when Firefox is in its default tabs-on-top mode. Removing elements for tabs-on-bottom configurations involves changing the entire theme of Firefox substantially.  In order for fast tab switching to remain possible, tabs would need to remained aligned in tabs-on-bottom mode while still preserving the minimal style of in-content pages. This will be the goal for a future version of Firefox.

Downloading Add-ons within the Manager

If you run Firefox nightlies, you may have noticed that if you install an add-on from within the add-ons manager, the installation process happens fully within the manager.  By turning the download button into a progress bar, the user’s focus need not move; the relevant information for the download is where the user was looking in order to prompt the download. After the add-on is downloaded, a notification will display on its entry alerting the user that either the installation is complete or that a restart is needed.

A notification will appear over themes and backgrounds when they are fully implemented in the manager.  These and other changes that only effect the style of themes and backgrounds will be implemented in future versions of Firefox after 4.

Add-on Installation Process

We’ve also streamlined the process of installing an add-on from a website for Firefox 4. The new design uses Firefox 4′s new arrow notification panels to minimize the number of steps required. When the user begins an add-on installation, the download now begins automatically. For most users, this should only take a second or two. The user then sees the name, author, and source of the add-on, and has the option of allowing the installation of the downloaded add-on. Firefox only obtains this information about add-ons once they have partially downloaded, which is why the full information is presented after the download completes. Though the add-on file has already downloaded at this point, the file is not accessed unless the user allows it to be.

If the add-on does not require Firefox to be restarted, that’s it: the add-on is activated as soon as the user clicks “Allow”. If it requires a restart, the user is notified that a restart is needed and the add-on is activated after the next restart.

If you’d like to try out the new add-ons manager, try running the latest Firefox nightlies.  Some of the smaller style changes have not yet landed, but the behavior described here is ready for testing (and bug reports where needed!)

15 Responses to “Add-ons Manager Design Update”

  1. Brian King Says:

    Is the progress in a doorhanger when downloading actually implemented? I have not seen it. Is there are bug #? Great work!

  2. HoangP Says:

    How does the system behave when installing multiple add-on at the same time ?


  3. [...] Screenshots, Anmerkungen und Ideen findet ihr im Entwicklerblog selbst. Wenn du hier neu bist, dann abonniere am besten den RSS-Feed um auf dem Laufenden zu [...]

  4. José Says:

    The current add-ons screen looks quite different from the mockups, such as no gradient as background, wrong border colors etc. I assume that this will be fixed for Firefox 4.

  5. Mattias Claesson Says:

    Hi,

    I really like the layout of the flow chart here:
    http://jboriss.files.wordpress.com/2010/11/pic9_flowchart.png
    What software was used to draw it?

  6. Jesper Kristensen Says:

    I don’t see it in your post, but I hope there will be some sort of visual indication of when an addon is disabled. It is pretty hard to tell at the moment.

  7. Joe Says:

    I hate to say it because I can see you guys have put a lot of thought and work into it, but it seems very complicated for what it does. Colors, stripes, navigation, browser chrome, detail screens … there’s a lot to learn for a typical end user, and all they want to do is add, remove, and configure add-ons.

    I had to use a old machine the other day which ran FF 3.6. I have to say that there was noticeably less cognitive overhead when I used its add-on manager. On FF4, I find I hesitate a bit to open it.

    I think you have some great ideas; I hope you can simplify the interface though. Good luck!

  8. jrk Says:

    So, once I open the add-on manager, I cannot use the tab to navigate to other pages?

  9. Drugoy Says:

    Offtopic:
    Why don’t you write in your blog, that add-ons bar won’t look like your concept of it? The bug about making it as narrow as the sum of it’s child-elements’ widths – is now “resolved wontfix”.
    And all the hours spent on removing status-text and link target – it all appeared to be useless now (it is even harmful, as I believe it was 1 of the reasons why Fx4.0 release was delayed to the next year).

  10. Praveen Says:

    Nice flowchart! Did you use any specialized software to create it?


  11. Thank you very much Great post…thanks for share this.sdaafw

  12. puiguyana Says:

    I get more knowledge here..thanks

  13. ChecMark Says:

    As good as all the add-ons are, I can’t use any of them because I have no choice but to run in Safe Mode because of the google double-click redirect virus. I have researched this extensively, downloaded and run the programs to get rid of it, but nothing works. It keeps coming back over and over.

  14. WonderCsabo Says:

    “displaying only relevant parts of the browser chrome and hiding those that don’t relate to the page (such as the URL bar and reload button)”

    This wont make into Fx4.0, am i right?


  15. [...] Firefox 4 – Addonn Image by Francisco Tosete jboriss.wordpress.com/2010/11/04/add-on-manager-design-up… [...]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 46 other followers

%d bloggers like this: