Extension Manager UI:User Interface

Please comment in the Talk page (use the Discussion tab above)

Scope of this Document

This document will provide the specification for the Extension Manager user interface changes that will ship in Firefox 2.0. For additional information regarding why these changes are necessary please refer to the Extension Manager UI project document.

UI Design

Case 1: Discoverability

• When an addon is selected the most commonly used actions will be displayed within the item that is selected. This will provide a clear separation between global actions and actions for the selected addon.
• The selected addon will wrap the description text.
• The theme preview area will be separated from the list with a splitter and thereby allow changing the width of the list. This is not easily discoverable (I believe on all OS's except Mac OS X) but I don't see this as a setback since this is the case in most applications that provide this capability.

note: ascii art doesn't scale well in all cases and there is an Install button along the bottom as is available with Thunderbird.

        +--------------------------------------------------------------+
        | Addons                                                 _ - X |
        +--------------------------------------------------------------+
        |    #@@@#       @@@     @@@                                   |
        |    #@@@#       @@@     @@@                                   |
        |  Extensions  Themes Languages                                |
        | +----------------------------------------------------------+ |
        | | @@ DOM Inspector 1.8                                  |/\| |
        | | @@ Inspect the DOM of HTML, XUL, and XML pages, inc...|  | |
        | | ------------------------------------------------------|  | |
        | |#@@#Launchy#4.0########################################|  | |
        | |#@@#Open#links#and#mailto's#with#external#applications#|  | |
        | |####like#Internet#Explorer,#Netscape,#Opera,#Outlook###|  | |
        | |####etc################################################|  | |
        | |####( Options )##############( Disable )#( Uninstall )#|  | |
        | | ------------------------------------------------------|  | |
        | | @@ Console² 0.3.3                                     |  | |
        | | @@ The next generation error console.                 |  | |
        | | ------------------------------------------------------|  | |
        | | @@ Bookmark Backup 0.3                                |  | |
        | | @@ Creates a backup of bookmarks.html each time the...|\/| |
        | +----------------------------------------------------------+ |
        | ( @ Disable All ) ( @ Find Updates )  Get More Extensions... |
        +--------------------------------------------------------------+


        +--------------------------------------------------------------+
        | Addons                                                 _ - X |
        +-------| ---------- |-----------------------------------------+
        |     @@@       #@@@#    @@@                                   |
        |     @@@       #@@@#    @@@                                   |
        |  Extensions  Themes Languages                                |
        | +----------------------------------------------------------+ |
        | | @@ Firefox (default) 2.0       ||                        | |
        | | @@ The default theme           ||                        | |
        | | -------------------------------||                        | |
        | |#@@#Noia#2.0#(eXtreme)#3.00##   ||                        | |
        | |#@@#Fully#skinned#based#on#Noia#||                        | |
        | |####icon#set.###################||        Theme           | |
        | |####(Use Theme)#( Uninstall )###||     Preview Area       | |
        | | -------------------------------||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | +----------------------------------------------------------+ |
        | ( @ Find Updates )                        Get More Themes... |
        +--------------------------------------------------------------+