Extension Manager UI:User Interface

From MozillaWiki
Jump to: navigation, search

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

All Addons

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. Also, the description text will wrap for the selected addon so that all of the text for the addon's description will be displayed.

Controls such as buttons, checkboxes, etc. will only be displayed for the selected addon with the exception of global actions which are displayed along the bottom of the window. This resolves the issue where tabbing to one of these controls can result in a control having focus that is not displayed to the user.

Extensions

        +--------------------------------------------------------------+
        | 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...|\/| |
        | +----------------------------------------------------------+ |
        | ( @ Install ) ( @ Find Updates )      Get More Extensions... |
        +--------------------------------------------------------------+

Themes

Besides only showing the associated actions available for themes when viewing themes the 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.

        +--------------------------------------------------------------+
        | 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       | |
        | | -------------------------------||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | |                                ||                        | |
        | +----------------------------------------------------------+ |
        | ( @ Install ) ( @ Find Updates )          Get More Themes... |
        +--------------------------------------------------------------+

Finding Updates

When looking for updates the view selection will be replaced with a progress bar and all commands will be disabled. After the update check has finished the view will automatically change to the update view.

        +--------------------------------------------------------------+
        | Addons                                                 _ - X |
        +--------------------------------------------------------------+
        | @ Finished checking for updates to Launchy...                |
        | [XXXXXXXXXXXXXXXXXXX                                       ] |
        |                                                              |
        | +----------------------------------------------------------+ |
        | | @@ DOM Inspector 1.8                                  |/\| |
        | | @@ No updates found                                   |  | |
        | | ------------------------------------------------------|  | |
        | |#@@#Launchy#4.0########################################|  | |
        | |#@@#No#updates#found###################################|  | |
        | | ------------------------------------------------------|  | |
        | | @@ Console² 0.3.3                                     |  | |
        | | @@ Looking for updates...                             |  | |
        | | ------------------------------------------------------|  | |
        | | @@ Bookmark Backup 0.3                                |  | |
        | | @@ Looking for updates...                             |  | |
        | | ------------------------------------------------------|  | |
        | | @@ Forecastfox 0.8.5.3                                |  | |
        | | @@ Looking for updates...                             |  | |
        | +----------------------------------------------------------+ |
        | ( @ Install ) ( @ Find Updates )      Get More Extensions... |
        +--------------------------------------------------------------+

Updates

Available updates will be displayed in their own view that will inlcude all addons that have updates available. It may make sense to only show the Updates pane button when there are updates available.

After updates have been installed the Install Updates button will be replaced with a Restart Application Name button. This will leverage the Session Restore work being done in bug 328154

There have been requests to provide user interface for disabling checking for updates for individual addons. If this were to be added it could be added in this view or in the context menu for a selected addon.

        +--------------------------------------------------------------+
        | Addons                                                 _ - X |
        +--------------------------------------------------------------+
        |     @@@       @@@     @@@     #@@@#                          |
        |     @@@       @@@     @@@     #@@@#                          |
        |  Extensions Themes Languages Updates                         |
        | +----------------------------------------------------------+ |
        | |#@@#Console²#0.3.3#####################################|/\| |
        | |#@@#Version#0.3.4#is#available#Install#this#update#[X]#|  | |
        | | ------------------------------------------------------|  | |
        | | @@ Forecastfox 0.8.5.3                                |  | |
        | | @@ Version 0.8.5.4 is available                       |  | |
        | | ------------------------------------------------------|  | |
        | |                                                       |  | |
        | |                                                       |  | |
        | |                                                       |  | |
        | |                                                       |  | |
        | |                                                       |  | |
        | |                                                       |  | |
        | |                                                       |  | |
        | |                                                       |  | |
        | +----------------------------------------------------------+ |
        | ( @ Install Updates )                 Get More Extensions... |
        +--------------------------------------------------------------+

Case 2: Locale Management

placeholder - the requirements for this will first need to be flushed out in bug 285848. The important point is to provide a view for managing Extension Manager managed language packs.

        +--------------------------------------------------------------+
        | Addons                                                 _ - X |
        +--------------------------------------------------------------+
        |     @@@       @@@    #@@@#                                   |
        |     @@@       @@@    #@@@#                                   |
        |  Extensions Themes Languages                                 |
        | +----------------------------------------------------------+ |
        | | @@ Firefox 2.0 German Locale Pack                        | |
        | | @@ Yada yada yada                                        | |
        | | ---------------------------------------------------------| |
        | |                                                          | |
        | |                                                          | |
        | |                                                          | |
        | |                                                          | |
        | |                                                          | |
        | |                                                          | |
        | |                                                          | |
        | |                                                          | |
        | |                                                          | |
        | |                                                          | |
        | |                                                          | |
        | +----------------------------------------------------------+ |
        | ( @ Install ) ( @ Find Updates )      Get More Extensions... |
        +--------------------------------------------------------------+

Case 3: Status Messages

A status notification image similar to what we have today with the update notification image will be displayed for addons that have additional status information. When the addon is selected the additional status information will be displayed and only the appropriate actions for the item will be enabled.

        +--------------------------------------------------------------+
        | Addons                                                 _ - X |
        +--------------------------------------------------------------+
        |    #@@@#       @@@     @@@                                   |
        |    #@@@#       @@@     @@@                                   |
        |  Extensions  Themes Languages                                |
        | +----------------------------------------------------------+ |
        | | @@ DOM Inspector 1.8                                  |/\| |
        | | @@ Inspect the DOM of HTML, XUL, and XML pages, inc...|  | |
        | | ------------------------------------------------------|  | |
        | |#@@#Bad#Extension#2.3##################################|  | |
        | |#@@#Yada#yada#yada#Yada#yada#yada#Yada#yada#yada#Yada##|  | |
        | |####and#so#on##########################################|  | |
        | |####Disabled#for#your#protection##More#Information#####|  | |
        | |####(#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...|\/| |
        | +----------------------------------------------------------+ |
        | ( @ Install ) ( @ Find Updates )      Get More Extensions... |
        +--------------------------------------------------------------+