Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Revised layout for Tools UI with tabs

From MozillaWiki
Jump to: navigation, search

Problem description

In the current version (1.1) of Fennec, 

  • Tools UI has tabs for different sections of content (Preferences, Downloads, Add-ons). In the landscape orientation, the tabs are located in the left part of the view and the content cannot take full width of the view (as e.g. in the Awsomescreen).
  • Back button locates in the bottom left corner, and if you switch back to web page, the right-side toolbar is shown (although you most likely have done what you wanted in the tools UI) and you have to pan it away before you can continue with browsing.

Revised layout for Tools UI

The layout of Fennec Tools UI should be re-organised so that

  • Tabs would locate in the top bar in the Landscape orientation but in the bottom bar in the Portrait orientation. The max amount of tabs would be four (4): There is a place for one more section in addition to current sections (Preferences, Downloads and Add-ons).
  • Top bar would contain the Title of the Tab (or sub-view of tab) and the Back button in both orientations.
  • Tab title area would act as the button for opening a menu that would contain commands applying to all content of the currently selected tab (or sub-view of a tab): cf. Site menu in the main view of Fennec.
  • Content of each tab could take full width of the view.

The tab buttons would contain icons only and the View titles would indicate the currently selected section verbally. The content of the tab could be scrolled but the top and bottom bars would be always in the view (i.e. could not be scrolled away).

Fennec Tools UI with tabs Layout.png

Navigation flow

Similarly to the current version (1.1) of Fennec, the Tools UI could be accessed by tapping a corresponding item in the right-side toolbar which can be brought to the view by panning. When in the Tools UI, the user could switch between the tabs at any time by tapping the tab buttons (in the top bar in the Landscape orientation and bottom bar in the Portrait orientation). If a tab contained sub-levels, tapping the tab button would take to the first level content of the tab. Back button would take always to the previous view (however it would not work for going back between tabs as there are tab buttons for it). When going back to the Web page, the right-side toolbar could be hidden but the Awesome bar shown.

Fennec Tools UI with tabs Navigation flow.png