Places:Firefox 2 User Interface Ideas

From MozillaWiki
Jump to: navigation, search

(This is for archival use only. For updated information, please see the current Places UI page)

Contents

Background

Improve the usability of Bookmarks and History, since roughly 20% of page visits are to pages visited > 10 pages ago.

Use Cases

From a UI perspective, make it easier to use Bookmarks and History, optimized for these tasks, in decreasing priority order:

  1. searching or fast access
  2. browsing
  3. organizing

The number one task someone usually wants to do with respect to Bookmarks or History is quickly find a page and open it. Then comes considered browsing which often happens as a result of either desire to kill time, process a list of tasks, or frustration at the failure of the search mechanism. Finally there is organization: assigning metadata to entries and sometimes filing them into folders.

At the same time, many folk are not adding bookmarks, perhaps for reasons such as:

  • UI for adding is not exposed where they'll find it (I have a feeling people don't interact with menus very much, unless something is wrong and they're frustrated and trying to fix it)
  • The addition experience has traditionally been awful. The dialog box presented forces the user to think about a categorization scheme. Ignoring it may make the user feel guilty for not taking part. The process seems heavyweight. It doesn't seem as trivial as simply saying "save for later" - like dog-earing a page.

Proposed System

The proposed system is described in this document.

Topics

The Places system is made up of the following components:

For access (use case matched in parentheses):

  • Places Search Popup (1)
  • Places Popup (2)
  • Bookmarks Menu (2)
  • History Menu (2)
  • Bookmarks Toolbar (1)
  • Places Manager (2, 3)
  • Autocomplete Fields (1)
  • Session History List (1)
  • Tag Selector (1, 2, 3)

Additional topics:

  • Search Result Ranking (1)
  • Place Item Context Menus (3)

For adding:

  • Add Bookmark
  • Content Area Integration
  • Tab Browser Integration

For organizing:

  • Bookmark Properties

Places Search Popup

Search History & Bookmarks Button

A new customizable button is added to the left of the Bookmarks Toolbar entries and is called "Search History and Bookmarks". (Displaying this text in a tooltip, showing only an icon). (XXX open issue: what to show as the text when this button is dropped onto a toolbar that is showing labels, too) 

|
+------------------------------------------------------
| @= | / PTBookmark 1 / PTBookmark 2 / PTBookma...
+------------------------------------------------------

Searching

When the user clicks the button, the following popup is displayed, visually connected to the button: 

|
+------------------------------------------------------
|#@=#| / PTBookmark 1 / PTBookmark 2 / PTBookma...
|    +------------------------------+
| Search: [                    ](*) | <-- (1)
|                            ( >> ) | <-- (2)
+-----------------------------------+
  1. A text field that searches over Bookmarks and History, with autocomplete semantics defined in the Autocomplete Fields section, and a Tag Selector widget for mouse-based tag selection
  2. A disclosure widget that expands this popup into the Places Popup, allowing fast browsing. The state of this widget is persisted so that if the popup is expanded, it will be expanded the next time the popup is shown, too.

Search Results

The user can type some terms into the field, autocompleted according to the semantics defined in the Autocomplete Fields section. When they do this, after a short delay (to prevent excessive querying) results are displayed in the popup: 

|
+------------------------------------------------------
|#@=#| / PTBookmark 1 / PTBookmark 2 / PTBookma...
|    +------------------------------+
| Search: [ goat teleporter (x)](*) | <-- (1)
|                                   |
| +-------------------------------+ |
| | The Goat Teleporter & You     | | <-- (2)
| |  http://www.goatweekly.net... | | 
| |...............................| |
| | Livestock teleportation       | |
| |  http://www.arginews.co.uk... | |
| |...............................| |
| | Goat species                  | |
| |  http://en.wikipedia.org/G... | |
| |...............................| |
| | Teleportation Newsletter      | |
| |  http://www.ieee.org/adv.c... | |
| +-------------------------------+ |
|                            ( >> ) |
+-----------------------------------+
  1. In this view, when the user has entered terms, a close box appears on the right side of the field to allow mouse-centric users to cancel the search and hide the results. Pressing the ESC key also accomplishes this task.
  2. Results are shown below the field, and the popup is sized to the number of results, up to a maximum height at which the results list begins to scroll. Clicking or pressing Enter on a result loads the page in the current tab, a modified click/Enter press opens in a new tab or window, as configured. (XXX open issue: show the URL below the title, for disambiguation for poorly titled pages)

Places Popup

When the disclosure button in the Places Search Popup is clicked, the popup changes to show the contents of a selected Place (by default: the Bookmarks Menu) (XXX open issue: should this be the All Bookmarks query?) 

|
+------------------------------------------------------
|#@=#| / PTBookmark 1 / PTBookmark 2 / PTBookma...
|    +------------------------------+
| Search: [                    ](*) | <-- (1)
|                                   |
| +-------------------------------+ |
| | / Foo                         | | <-- (2)
| | / Bar                         | |
| | # Baz                         | |
| |   / FooFoo                    | |
| |                               | |
| |                               | |
| |                               | |
| |                               | |
| |                               | |
| |                               | |
| +-------------------------------+ |
| Showing: [ @ Bookmarks Menu   :^] | <-- (3)
|                                   |
| ( Organize... )            ( << ) | <-- (4)
+-----------------------------------+
  1. XXX open issue: should searching at this point search all Bookmarks and History as before, or the currently shown Place?
  2. This list is a simple hierarchical view of folders and leaf items. It shows the content of the Place selected in the Place selector. The sort order for this list may be different from the sort order last selected in the Places manager, it is likely to be something more suitable for this fast-access view, although it should be overridable using the context menu.
  3. The Place selector lets the user pick a Place to show the content of. The contents of this list maps to the contents of the left bar in the Places Manager. XXX open issue: menu selector does not make it clear the list can be changed that easily. IE7 uses separate buttons for Favorites and History.
  4. The Organize button shows the Places Manager in a separate window.

XXXben: document context menu for the view itself

Bookmarks Menu

The Browser Menu Bar has a "Bookmarks" menu item containing: 

+-----------+
| Bookmarks |
|           +-----------------------+
| Bookmark this Page...      Ctrl+D | <-- (1)
| Bookmark all Tabs...              | <-- (2)
| Search in Bookmarks...     Ctrl+B | <-- (3)
| Organize Bookmarks...             | <-- (4)
| --------------------------------- |
| <items>                           | <-- (5)
+-----------------------------------+
  1. Show a dialog allowing the user to add a bookmark to the current page.
  2. Show a dialog allowing the user to add bookmarks to all of the pages opened in tabs within this window, in a new Folder.
  3. Show the Places Search Popup for quick searching of Bookmarks and History.
  4. Show the Places Organizer Window for more detailed browsing or organization.
  5. Shows the contents of the Bookmarks Menu folder.

Items are inserted into the Bookmarks Menu as they are into any other folder, in the order they added. When there are too many items to display, the list scrolls.

History Menu

The Browser Menu Bar has a "History" menu item containing: 

+---------+
| History |
|         +-------------------------+
| Back                       Alt+<- | <-- (1)
| Forward                    Alt+-> | 
| --------------------------------- |
| Tag this Page        Ctrl+Shift+8 | <-- (2)
| Recently Tagged                 > | <-- (3)
| --------------------------------- |
| Search in History...       Ctrl+H | <-- (4)
| View All History...               | <-- (5)
| --------------------------------- |
| <session history for current tab> | <-- (6)
| --------------------------------- |
| Clear Private Data...     C+S+Del | <-- (7)
+-----------------------------------+
  1. Menu items for Back and Forward (advertise key bindings)
  2. Shows the Tagging Balloon
  3. Shos a submenu of recently tagged pages. XXX
  4. Show the Places Search Popup for quick searching of Bookmarks and History.
  5. Show the Places Organizer Window for more detailed browsing and searching.
  6. Shows the Session History List for the current document. The pivot (current page) in the list is represented by a bullet. See Session History List for more information.
  7. A link to the Clear Private Data function (which moves here from Tools).

Session History List

The Session History is a list of pages visited by the user. The user navigates backwards and forwards in this list by individual pages using the back and forward buttons, or to a discrete point in the list using the History or Back/Forward button menus.

The pivot is the page the user is currently at in the list. There may be pages ahead and behind the pivot page in the Session History list.

To make navigation to recently visited pages faster, especially when the Session History list is deep (e.g. viewing a slideshow) page groups (grouping is determined according to the Session History Grouping Heuristic) are collapsed at either end when displayed in the UI to allow the user to quickly navigate in "chapters", e.g. back to the entry point of a site.

A complete display of a visual representation of the Session History list for the History Menu, with many pages before and after the pivot page: 

@ Chapter Stop
@ Chapter Stop
@ Page
@ Page
@ Page
* Pivot
@ Page
@ Page
@ Page
@ Chapter Stop
@ Chapter Stop

Grouping Heuristic

XXX open issue

Tag Selector

A checklist of the all user's tags, presented in a popup. Used in the Search and Add UIs: 

+-+
|*|
| +--------------+
|##goats#########|
|##teleporter####|
|  work          |
|  mozilla       |
|----------------|
|        ( Done )|
+----------------+

The list expands up to a certain height at which point it scrolls.

Bookmarks Toolbar

The Bookmarks Toolbar is a Customizable Toolbar Item which contains the contents of the Bookmarks Toolbar Folder. Bookmarks, Live Bookmarks and Folders are shown here.

The user can drag links onto the toolbar (drop feedback shown to either side of each item) and drag them into Folders. When the user hovers over a folder during a drag for a few seconds, the folder opens and the user can drag the item deeper into the folder hierarchy.

Items that do not fit in the available space are removed from the view and a chevron menu appears at the end of the strip, containing a menu that shows each of the "overflowed" items.

When the user clicks on a folder to open it, the user is then able to move their mouse around over other folders on the strip to open them, without having to click again. This is especially useful for Live Bookmarks on the toolbar where the user can quickly scan new postings across several Live Bookmarks with a single gesture.

Each item on the Toolbar has the standard Places Item Context Menu, with the addition of items specific to the toolbar: 

|                          |
| ---------------------    |
| Change Folder...         | <-- (1)
| ------------------------ |
| Customize Toolbars...    | <-- (2)
+--------------------------+
  1. XXX open issue: this is probably uber-geek but fits with ideas i've heard people discussing. Shows a dialog that lets the user choose a folder or Place: query to root the toolbar on. This may let the user root their toolbar on a delicious folder, for instance, with a delicious extension installed. Related to this, it may be interesting to allow the instantiation of N instances of the Bookmarks toolbar to show the content of different folders.
  2. Show the Customize Toolbar dialog. Added to make it easier to show the Customize dialog since at present showing it means clicking on just the right button, and users will not understand the distinction. This menu item should be shown on all context menus for any Toolbar item.

Places Organizer

The Places Organizer is a window that allows the user to search, browse and organize their bookmarks. 

+-----------------------------------------------------------------------+
| File Edit View Help                                                   |
+-----------------------------------------------------------------------+
| [@ Search Bookmarks & History ] | @ New Folder @ Delete               |
+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| | @ All History        | | Showing Bookmarks Menu                   | |
| |#@#Bookmarks#Menu#####| |==========================================| |
| | @ Bookmarks Toolbar  | | Name             | Location              | |
| | @ Subscriptions      | |------------------+-----------------------| |
| | @ Bonjour            | | CNN.com            http://www.cnn.com/   | |
| | @ Most Visited       | |                                          | |
| | @ Updated Today      | |                                          | |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          ( + New Folder )                           /|
+-----------------------------------------------------------------------+

(Subsequent captures will show only the view area, excluding the toolbar and menu)

Places List

The Places Pane is the pane on the left that shows the top level of the Places root. Its contents include several predefined entries. Some are "special" and cannot be removed because doing so would obscure access to areas of the user's History or Bookmarks. Users may also add items to the list.

The Places Pane includes entries for (in this order):

In the static area:

  • All History
  • All Bookmarks
  • Bookmarks Menu
  • Bookmarks Toolbar
  • Subscriptions
  • Any other item that cannot be deleted by the user (e.g. Bonjour Sites)

In the user-editable area:

  • Most often visited
  • Any place: query that could equally have been generated by the user using the Save Search Query functionality.
  • User created Folders
All History

Shows a list of all of the user's browsing history, by default sorted in reverse chronological order so the most recent entries are at the top. This list can be sorted, or grouped according to the grouping options described in the History section below.

All Bookmarks

Shows a flat list of all pages that are Bookmarked. This includes pages that have been marked as interesting but not placed in any folder. This list can be sorted.

Bookmarks Menu, Toolbar

Shows a list of the contents of the Bookmarks Menu or Toolbar, grouped by folders. The user can reorder this list using sorting, or by using drag and drop.

Subscriptions

Shows a flat list of pages that represent posts from Live Bookmarks, sorted by Post Date by default. This list can be sorted, or grouped by Feed according to the Subscriptions section below.

History

+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[                    ]| | Showing History for (date range)         | |
| | @ All History        | |==========================================| |
| | @ All Bookmarks      | | Name             | Location              | |
| | @ Bookmarks Menu     | |------------------+-----------------------| |
| | @ Bookmarks Toolbar  | |   MLS Listings     http://www.mlslis...  | |
| | @ Subscriptions      | |   L.J. Hooker      http://www.lhhook...  | |
| | @ Most Visited       | | v Barfoot & Th...  http://www.barfoo...  | |
| | @ Updated Today      | |    Epsom Stunner!  http://www.barfoo...  ||
| | @ Folder 1           | |    Grammar Zone!   http://www.barfoo...  | |
| | @ Folder 2           | |    Charming, P...  http://www.barfoo...  | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          Group by: (#Site#| Page )                   |
+-----------------------------------------------------------------------+
Grouping Options
  • Group by Page - flat list of all pages
  • Group by Site - host/site based grouping, showing entry page as folder and other pages on site as children

Searching

+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[ real estate|       ]| | Search Results for 'foo':     ( Save )(+)| |
| | @ All History        | |==========================================| |
| | @ All Bookmarks      | | Name             | Location              | |
| | @ Bookmarks Menu     | |------------------+-----------------------| |
| | @ Bookmarks Toolbar  | | MLS Listings       http://www.mlslis...  | |
| | @ Subscriptions      | | L.J. Hooker        http://www.lhhook...  | |
| | @ Most Visited       | | Barfoot & Thompson http://www.barfoo...  | |
| | @ Updated Today      | | Century 21         http://www.centur...  | |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          Group by: ( Site | Page )                   |
+-----------------------------------------------------------------------+
Grouping Options
  • Group by Page - flat list of all pages
  • Group by Site - host/site based grouping, showing entry page as folder and other pages on site as children
Advanced Search

When the user searches for some terms, they can specify additional keys by clicking the "+" button in the banner strip next to "Save". This adds a new constraint, from the following set:

Text Search

Matches items whose title, etc matches the specified terms. Future versions will scan page content. 

Containing the text: [ goat               ]

Visit Time

Matches items whose visit date falls within the specified range. 

Visited [ between   :^] [ 27 July, 2006 ] and [ 29 July, 2006 ] <-- (1)
Visited [ after     :^] [ 27 July, 2006 ] 
Visited [ before    :^] [ 27 July, 2006 ] 
Visited [ more than :^] [ 4 ] [ days   :^] ago
Visited [ more than :^] [ 3 ] [ weeks  :^] ago
Visited [ less than :^] [ 4 ] [ days   :^] ago
Visited [ less than :^] [ 1 ] [ months :^] ago
Visited [ today     :^]
  1. These are non-user-editable static date fields. When the user clicks in the field, a calendar picker is shown.

Location

Matches items whose location (URL) matches the specified terms. 

Location [ starts with :^] [ http://www.goats       ]
Location [ is          :^] [ http://www.news.com/   ]
Location [ is on site  :^] [ news.com               ]

Type

Matches items whose type matches the selection. 

Link is [x] a bookmark [x] a subscribed feed [x] a blog post or news item

Tags

Matches items tagged with the specified terms. 

Tags [ contain   :^] [ goat, teleporter            ] <-- (1)
Tags [ are       :^] [ goat, teleporter            ]
  1. This is a tag autocompletion field

Folders

Matches items within the specified folders. 

In folders: [ Bookmarks Menu, Goats       ] ( Add... ) ( Reset )

Maximum Results

Specifies a maximum number of results to return, e.g. 10. 

Limit to [ 10 ] pages

XXX open issue: option for default sort order.

Items are shown when they match all of the conditions set in each of the above areas.

Each criteria can be selected from a dropdown list when a new row is added to the view: 

+------------------------------------------------------+
| Search results for "foo"                 ( Save )(+) |
+------------------------------------------------------+
| Containing the text: [ foo                   ] (+)(-)|
| Visited [ after: ^] [ 27 July, 2005          ] (+)(-)|
+------------------------------------------------------+
| Name               | Location                        |
|--------------------+---------------------------------|
| Barfoot & Thompson   http://www.barfoots.co.nz/      |
|                                                      |
Saving a Search Query

The user can save a set of conditions as a Place to be shown on the Places bar. They can copy or drag the conditions elsewhere within their Bookmarks, e.g. onto their toolbar. The user saves the query by pressing the Save button on the banner: 

+------------------------------------------------------+
| Search results for "foo"                 ( Save )(+) | <-- SAVE
+------------------------------------------------------+
| Containing the text: [ foo                   ] (+)(-)|
| Visited [ from: ^] [ 27 July, 2005           ] (+)(-)|
+------------------------------------------------------+
| Name               | Location                        |
|--------------------+---------------------------------|
| Barfoot & Thompson   http://www.barfoots.co.nz/      |
|                                                      |

When a place is selected in the Places UI, it can be edited by clicking the Edit button in the banner: 

+------------------------------------------------------+
| Showing My Smart Folder                      ( Edit )|
+------------------------------------------------------+
| Name               | Location                        |
|--------------------+---------------------------------|
| Barfoot & Thompson   http://www.barfoots.co.nz/      |
|                                                      |

Subscriptions

A case study of smart folders. Show all folders whose type is "feed", and their contents. Should show additional column for published date and author. Should also show read state (bold = unread, normal = read)

Aggregation View (Group by Post)
+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[ Search Bkmks & Hist]| | Showing All Subscriptions                | |
| | @ All History        | |==========================================| |
| | @ Bookmarks Menu     | | Name             | Location              | |
| | @ Bookmarks Toolbar  | |------------------+-----------------------| |
| |#@#Subscriptions######| | Blog A Post 1      http://foo.blogge...  | |
| | @ Bonjour            | | Blog B Post 1      http://bar.blogge...  | |
| | @ Most Visited       | | Blog A Post 2      http://foo.blogge...  | |
| | @ Updated Today      | | Blog B Post 2      http://bar.blogge...  | |
| | @ Folder 1           | |                                          | |
| | @ Folder 2           | |                                          | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          Group by: ( Feed |#Post#)                   |
+-----------------------------------------------------------------------+
Feed View (Group by Feed)
+-----------------------------------------------------------------------+
| +----------------------+ +------------------------------------------+ |
| |[ Search Bkmks & Hist]| | Showing All Subscriptions                | |
| | @ All History        | |==========================================| |
| | @ Bookmarks Menu     | | Name             | Location              | |
| | @ Bookmarks Toolbar  | |------------------+-----------------------| |
| |#@#Subscriptions######| | v Blog A                                 | |
| | @ Bonjour            | |   Post 1           http://foo.blogge...  | |
| | @ Most Visited       | |   Post 2           http://foo.blogge...  | |
| | @ Updated Today      | | v Blog B                                 | |
| | @ Folder 1           | |   Post 1           http://bar.blogge...  | |
| | @ Folder 2           | |   Post 2           http://bar.blogge...  | |
| | @ Folder 3           | |                                          | |
| | @ Folder 4           | |                                          | |
| | @ Folder 5           | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| |                      | |                                          | |
| +----------------------+ +------------------------------------------+ |
| ( + New Folder )          Group by: (#Feed#| Post )                   |
+-----------------------------------------------------------------------+

Browsing By and Changing Tags

In any view, items can be selected and tagged (marked as interesting for later use) using the tagging UI at the bottom of the main view: 

|
+------------------------------------------------+
| Browse Tags: [                            ]    | <-- (1)
+-------+      [                            ]    |
|  Edit |      [                            ]    | <-- (2)
+------------------------------------------------+
  1. The Browse tags panel lets the user filter the list by any combination of available tags.
  2. The Edit tags panel lets the user type new tags to be applied to the selection. The selected panel is remembered.

XXX open issue: is this the right UI? XXX open issue: which is the default panel?

Menus

File Menu
+------+
| File |
|      +-----------------------+
| New Bookmark...              |
| New Folder...                |
| New Separator                |
| ---------------------------- |
| Import...                    |
| Export...                    |
| ---------------------------- |
| Close                Ctrl+W  |
+------------------------------+
Edit Menu
+------+
| Edit |
|      +-----------------------+
| Undo                 Ctrl+Z  |
| Redo                 Ctrl+Y  |
| ---------------------------- |
| Cut                  Ctrl+X  | 
| Copy                 Ctrl+C  |
| Paste                Ctrl+V  |
| Delete                  Del  |
| ---------------------------- |
| Select All           Ctrl+A  |
| ---------------------------- |
| Search Bookmarks/H.. Ctrl+F  |
| ---------------------------- |
| Properties...        Ctrl+I  |
+------------------------------+
View Menu
+------+
| View |
|      +-----------------------+
|   Reload             Ctrl+R  | 
| ---------------------------- |
| x Toolbar                    |
|   Show Columns             > |
| ---------------------------- |
| * Unsorted                   |
|   Sort by Title              |
|   Sort by Location           |
|   <cols>                     |
| ---------------------------- |
|   A > Z Sort Order           |
|   Z < A Sort Order           |
+------------------------------+
Help Menu
+------+
| Help |
|      +-----------------------+
| Using Bookmarks              |
| Using History                |
| Advanced Tips & Tricks       |
| For Internet Explorer Users  |
| ---------------------------- |
| Help Contents            F1  |
| Release Notes                |
| ---------------------------- |
| Check for Updates...         |
| ---------------------------- |
| About Mozilla Firefox        |
+------------------------------+

Tag Autocompletion

Search Result Ranking

Bookmarks and History results should show up in several autocomplete lists:

  • Places Search Popup search results
  • Places Organizer search results
  • Location Bar Autocomplete

When the user searches for a URL, the results are sorted ... XXX document

When the user searches for tags, the results are sorted ... XXX document

Place Item Context Menu

The most complete Place context menu: 

+-----------------------+
| Open                  | <-- (1)
| Open in Tabs          | <-- (2)
| Open in new Tab       | <-- (3)
| Open in new Window    | <-- (4)
| --------------------- | 
| New Folder...         | <-- (5)
| New Separator         | <-- (6)
| --------------------- | 
| Cut                   | <-- (7)
| Copy                  | <-- (8)
| Paste                 | <-- (9)
| Delete                | <-- (10)
| --------------------- | 
| Reload                | <-- (11)
| Sort by Name          | <-- (12)
| --------------------- | 
| Properties...         | <-- (13)
+-----------------------+
  1. Opens the selected item in the current tab (link)
  2. Opens the selected item(s) or the contents of the selected folder in new tabs (links,folder)
  3. Opens the selected item in a new tab (link)
  4. Opens the selected item in a new window (link)
  5. Creates a new folder adjacent to the selection (mutable)
  6. Creates a new separator adjacent to the selection (mutable)
  7. Cuts the selection (mutable)
  8. Copies the selection (mixed)
  9. Pastes the selection (mutable)
  10. Deletes the selection (mutable)
  11. Reloads the currently selected Live Bookmark (livemark)
  12. Sorts the current folder permanently by name (mutable)
  13. Shows the property editor for the current item (link,folder)

Each item is shown only if the selection matches the requirements described in parentheses: link - single link selection, links - multiple links selected, folder - single folder selected, mutable - contents of editable folder selected, mixed - any content selected, livemark - live bookmark or content of live bookmark selected.

Adding Bookmarks

The objective for adding bookmarks is to create a lightweight experience for marking pages while supporting the traditional methods of filing bookmarks.

Add Bookmark Dialog

The Add Bookmark Dialog is a more heavyweight way to add a bookmark. It has several display modes:

Tagging
 +-----------------------------------------+
 | Tags:  [ Work, Play                   ] | <-- (1)
 | Notes: [                              ] | <-- (2)
 |        [                              ] |
 |        [                              ] |
 |                                         |
 | ( Remove ) ( Add Bookmark )  (( Done )) | <-- (3)
 +-----------------------------------------+
  1. A field that contains the list of tags applying to the item. This uses the Tag Autocomplete widget.
  2. A field that lets the user make some quick notes about why the page is interesting to them.
  3. The Remove button un-tags the page. Add Bookmark shows the filing UI. Done applies the changes and closes the dialog.
Filing
 +-----------------------------------------------+
 | Name:        [ Foo                          ] |
 | Location:    [ http://www.foo.com/          ] |
 | Tags:        [ Work, Play                   ] |
 | File into:   [ Bookmarks Menu             :^] | <-- (1)
 | > More                                        |
 |                                               |
 | ( Cancel )                 (( Add Bookmark )) | <-- (2)
 +-----------------------------------------------+
  1. A list of bookmarks folders is shown also by default in the compact view.
  2. Cancel cancels the addition of the Bookmark. Add Adds the Bookmark. Both close the dialog.
Full Disclosure
 +-----------------------------------------------+
 | Name:        [ Foo                          ] |
 | Location:    [ http://www.foo.com/          ] |
 | Tags:        [ Work, Play                   ] |
 |                                               |
 | File into:   [ Bookmarks Menu             :^] |
 | Shortcut:    [                              ] | <-- (1)
 |  Tip: Type the shortcut in the location bar   |
 |       to open this page.                      |
 | Notes:       [                              ] | <-- (2)
 |              [                              ] |
 |              [                              ] |
 |                                               |
 | ( Remove )                 (( Add Bookmark )) |
 +-----------------------------------------------+
  1. A shortcut that can be entered in the location bar to load the page
  2. Some notes on the page.
Full Disclosure (Properties)

In property editing mode, the dialog does not show a "File into: " line for Bookmarks that are already filed into Folders. 

 +-----------------------------------------------+
 | Name:        [ Foo                          ] |
 | Location:    [ http://www.foo.com/          ] |
 | Tags:        [ Work, Play                   ] |
 |                                               |
 | Shortcut:    [                              ] | <-- (1)
 |  Tip: Type the shortcut in the location bar   |
 |       to open this page.                      |
 | Notes:       [                              ] | <-- (2)
 |              [                              ] |
 |              [                              ] |
 |                                               |
 |                         ((  OK  )) ( Cancel ) |
 +-----------------------------------------------+

Filing Bookmarks

Any Bookmarks Menu

Bookmarks can be created in the any Bookmarks menu popup using the Bookmark this Page menu item. When this item is chosen, it will show the Add Bookmark dialog in the "Filing" mode with the selected folder selected. For instance, in the Bookmarks Menu, it would show the "Bookmarks Menu" folder selected.

XXX open issue: is filing into any folder in this way a good idea? What are the usage figures on drag and drop? This could be a way for folk to discover they can file into folders on the bookmarks toolbar.

Drag & Drop, Paste

Bookmarks can be created by dragging links into the menu, the Places Organizer, or onto the Bookmarks Toolbar. When this is done the item is inserted without showing any dialog, it is created with the attributes of the dragged item (title, url) and filed into the folder that it is dropped into.

Marking Pages As Interesting

More lightweight than filing a bookmark into a folder for later frequent use is marking a page as interesting later. We suspect this is what a lot of bookmark actions actually are, and the reason why people's Bookmarks menus become quickly cluttered with items they don't use a lot. For whatever reason, folk don't use Bookmarks a lot, part of the reason for this may be the scalability of the Menu and cryptic nature of the toolbar.

The "Tag" button on the browser toolbar (a clickable attachment at the end of the location bar, next to the Subscribe button which appears for pages with Feeds that can be subscribed to) provides a quick way to mark a page as interesting for later access. 

[ @ http://www.foo.com/                      |v|+|S]

Pages marked as interesting are stored in Bookmarks, but not in any folder. Rather, they appear only when the All Bookmarks item is chosen from the Places bar. They can be filed into folders from this location. They also contribute with History and Filed Bookmarks to Location Bar autocompletion, and can be searched for if they are marked with tags.

To mark a page as interesting, the user clicks the button and a Bookmark is added, but not into any folder, using the default title, location, etc. An info tip is shown explaining what happened: 

  |v|+|S]
    +-----------------------------------+
    | Page marked.                      | <-- (1)
    | Click again to edit Name/Tags     |
    |                                   |
    | ( Remove ) ( Show All Bookmarks ) | <-- (2)
    +-----------------------------------+
  1. XXX open issue: terminology!
  2. Remove (XXX open issue: better name ... unmark?) Show All Bookmarks shows the Places Organizer, with the All Bookmarks Place selected.
Tagging Interesting Pages

When the user clicks the Tag button again, an Add Bookmark Dialog opened in "Tagging" mode is shown. The user can enter some tags to allow easier access later, or expand the dialog to file it as a Bookmark in a particular folder, edit additional metadata, etc.

Editing Bookmarks

When the user visits a page that exists within their bookmarks, the Tag button lights up and can be clicked to edit metadata. When clicked, the Add Bookmark dialog is shown in either "Tagging" or "Full Disclosure (Properties)" mode, depending on how the disclosure widget was left the last time the UI was used.

From any Places view, when a user presses Ctrl+I or chooses the Properties/Get Info command from a menu, the Add Bookmark dialog is shown according to the rules described above for visiting a Bookmarked page.

Simple Inline Edit

Simple metadata changes can be accomplished in the tree view. This will not be done for 2.0 due to toolkit limitations.

Content Area Integration

On any page, a "Bookmark this Page..." menu item is available in the context menu. This shows the Filing dialog.

Tabbed Browser Integration

On any tab, "Bookmark this Tab..." and "Bookmark all Tabs..." menu items are available in the context menu. The Filing dialog is shown when this option is selected.

Command Updating

Commands

The following commands are available in each place that Places views are instantiated:

Command Alias Command Action
Open Open in last tab
OpenNW Open in a new window
OpenT Open in a new tab
OpenTS Open in Tabs
NewB New Bookmark
NewF New Folder
NewS New Separator
Cut Cut Selection
Copy Copy Selection
Paste Paste/Drop
Delete Delete Selection
SelectA Select All
Sort Sort By Name
Info Link Properties
Reload Reload Live Bookmark
Edit Edit Query

Containers

Abbreviation Description
R/W Container Read/Write Container (e.g. bookmark folder)
R Container Read Only Container (e.g. Live Bookmark folder)
RD Container Read Only Container that supports Deletion (e.g. history query)
System Area Queries or Folders within the "non-user-editable" section of the Places Root

Enabling Rules

The following rule-command matrix shows when UI for various commands should be visible (V = visible, I = invisible) and enabled (E = enabled, D = disabled)

Selection Type: Selection In: Open OpenNW OpenT OpenTS NewB NewF NewS Cut Copy Paste Delete SelectA Sort Info Reload Edit
Link, Peers R/W Container VE VE VE ID VE VE VE VE VE VE? VE VE VE VE ID ID
Link, Peers R Container VE VE VE ID ID ID ID VD VE VD VD VE ID VE ID ID
Link, Peers RD Container VE VE VE ID ID ID ID VE VE VD VE VE ID VE ID ID
 
Links, Peers R/W Container ID ID ID VE VE VE VE VE VE VE? VE VE VE ID ID ID
Links, Peers R Container ID ID ID VE ID ID ID VD VE VD VD VE ID ID ID ID
Links, Peers RD Container ID ID ID VE ID ID ID VE VE VD VE VE ID ID ID ID
 
Separator, Peers R/W Container ID ID ID ID VE VE VE VE VE VE? VE VE VE ID ID ID
Separator, Peers R Container ID ID ID ID ID ID ID VD VE VD VD VE ID ID ID ID
Separator, Peers RD Container ID ID ID ID ID ID ID VE VE VD VE VE ID ID ID ID
 
Folder, Peers R/W Container ID ID ID VE VE VE VE VE VE VE? VE VE VE VE ID ID
Folder, Peers R Container ID ID ID VE ID ID ID VD VE VD VD VE ID VE ID ID
Folder, Peers RD Container ID ID ID VE ID ID ID VE VE VD VE VE ID VE ID ID
Folder, Peers System Area ID ID ID ID ID ID ID ID ID ID ID ID ID VE ID ID
 
Query, Peers R/W Container ID ID ID VE VE VE VE VE VE VE? VE VE VE VE ID VE
Query, Peers R Container ID ID ID VE ID ID ID VD VE VD VD VE ID VE ID VD
Query, Peers RD Container ID ID ID VE ID ID ID VE VE VD VE VE ID VE ID VD
Query, Peers System Area ID ID ID ID ID ID ID ID ID ID ID ID ID VE ID VD
 
Mixed R/W Container ID ID ID ID VE VE VE VE VE VE? VE VE ID ID ID ID
Mixed R Container ID ID ID ID ID ID ID VD VE VD VD VE ID ID ID ID
Mixed RD Container ID ID ID ID ID ID ID VE VE VD VE VE ID ID ID ID
 
none R/W Container ID ID ID ID VE VE VE VD VD VE? VD VE VE ID ID ID
none R Container ID ID ID ID ID ID ID ID ID ID ID VE ID ID ID ID
none RD Container ID ID ID ID ID ID ID ID ID ID ID VE ID ID ID ID

Differences Explained

TBD.

From Firefox 1.x

From Earlier Versions of this Document

From IE

From Safari

Retrieved from "https://wiki.mozilla.org/index.php?title=Places:Firefox_2_User_Interface_Ideas&oldid=60686"