Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Revised layout and functionality of Fennec Pop-up Choice list

From MozillaWiki
Jump to: navigation, search

Problem description

As the main problem, the Pop-up menu contains "Done" button for confirming the selection in the current version of Fennec (1.1). Because the Pop-up menu is for single selection only, the confirmation is needless (or even purposeless) and creates just an extra step. See reference images in the end of this page.


Pop-up menu should work as it generally works on standard computers: Open choice list by tapping it, Select an option from the opened list by tapping it and Close the choice list by tapping outside of it.

Pop-up menu should be more optimised for small screen devices: e.g. showing the scope of selection in context of opened Choice list and letting the list occupy as much screen estate as possible when needed.


  • Closed state
  • Opened state


Fennec Chrome Pop-up menu States overview.png

Close state

In the Closed state, the pop-up menu component should take the full width of the screen (both in Landscape and Portrait orientation of the device) and it should be functional as a whole. The component should contain title (A) in the upper row and the currently selected option/value (B) in the next row.

Fennec Chrome Pop-up menu Closed state Layout.png

Opened state

In the Opened state, the pop-up menu shoud have a heading row populated with the title and list of options below it. The currently selected list item should be indicated. The heading row should contain the Close button and the application view outside of menu should be dimmed.

Fennec Chrome Pop-up menu Opened state Layout.png

The menu should take as much screen estate as needed for displaying all options it contains.

Fennec Chrome Pop-up menu Opened state Layout with different number of items.png


Opening pop-up menu

  • Tap pop-up menu component

Selecting an item from pop-up menu

  • Tap a list item

Cancel selection (i.e. close menu without changing the currently selected option)

  • Tap outside of list or the heading row (including the Close button) of the list.

NOTE: Selecting an item from the list (by tapping it) should close the menu/list.

The list should be scrollabe (if there are more options than what could be displayed in the view at once). Panning the list with the drag or flick interactions should not result selecting a list item.

Fennec Pop-up Choice list layout and functionality.png

Reference: Pop-up menu in Fennec version 1.1

Fennec pop-up menu in version 1-1.png