Firefox Metro UI

• [New]Download the preview build:

https://wiki.mozilla.org/Firefox/Windows_8_Integration#Elm_Nightly_Builds http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-elm/firefox-18.0a1.en-US.win32.installer.exe

• [New]Q3 UX Update: https://www.dropbox.com/s/68yki3fvgi6145e/Q3%20FX%20on%20Win8%20Update.pdf

• Win8 Integration Feature Page: https://wiki.mozilla.org/Windows8
• Metro Integration: https://wiki.mozilla.org/Firefox/Windows_8_Integration

Front-end Engineering to-do list:

• https://etherpad.mozilla.org/metro-ux-priorities
• Get real-time synced metro build from our front-end intern! [Requirements & Instructions]

UX Design:

• Q2 UX Update: http://www.slideshare.net/melody2325/q2-firefox-on-metro-ux-update
• Firefox Start Page video: https://vimeo.com/41887411
• Visual design Ideas 01: http://shorlander.dropmark.com/51486

Layout and Views

Screen resolutions

• The minimum resolution required to support all the features of Windows 8 (including multitasking with snap) is 1366x768
• The shape of the screen as a proportion of width to height. For example, 16:9.

[On-track]Layout for large display

• Decided with engineering team to go with adaptive layout. Cases that may require adaptive layout: many tabs open; many bookmarked/recent visited sites

• Links

[1]Scaling to screens: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx
[2]Scaling to different screens blog post http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx

[On track]View state and interactions

• [Done-IxD design v1]Initial start screen and awesome screen designs for Firefox on for Full-screen, Snap(1/3 screen), and Fill(2/3 screen).mockups
• [Front-end] URL bar on snap view is getting implemented

View orientation

• [Beta- IxD & Visual] Designing for portrait orientation
• Links

 [1][Snapped and filled views guideline: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx]

Basic Modules

[On track]Navigation

[Working-Preview]URL bar

• [Done -IxD&Visual] Initial visual design on URL bar has been made.
• [On-track -IxD ]Use progress line for determinate progress control bug772304. Awaiting for reviews and final visuals from Stephen.
• [On-track -Front-end]Bug 772304 Implementing throbber
• [Dropped?- Front-end]Bug 774850 Investigate supporting long swipe gesture to reveal tab panels and URL bar at the same time
• Bug774870 Unicode display

[On track]Scrolling behaviors

• [Beta- UX & Front-end] Bug774867 Speed of hiding context UI while scrolling

[Working-Preview]New tab & start page

• [On track - IxD & Visual]Completed design draft v1 on the new tab contentDesign mockup
• [On track- Front-end] StartUI implementation for preview. Visual design of color tiles may look different for beta Bug 793502
• [Done- Front-end] Adding a new tab is functional Bug 774872 context UI behaviors while adding a new tab.
• [Done- Front-end]Bug 747786 Supporting Navigation bar and tab bar; Bug 747790 content of start page is integrated under implementation with awesome screen.
• [Beta - Visual] Looking into alternative approaches on designing color tiles.

[Working-Preview]Awesome Bar/Screen

• [Done-IxD & Visual]Delivered v1 draft on awesomebar. Bookmark and history auto complete has been implemented.Design mockup
• [Done-Front-end]Bug 747790 awesome bar search
• [Beta-UX]Needs to define behaviors on integrating google search suggestions.

[Working- Preview]Tabs

• [Done-IxD]Finished tab overflow design v1, including cases of using finger, mouse, keyboard. IxD draft.
• [On track- Visual]Awaiting for final visuals from Stephen.
• [Done-IxD]Defined the layout and interactions on Tabs on Top state.
• [Done-Visual & IxD]Decided on using tab panel sliding to indicate tab opening. Explorations on tab indicatorsKeynote animations.
• [Done - Front-end] Currently adding and closing tabs, switching to Tabs on Top are working well. Tab overflow is functional.

  bug775718 Scrollable tab preview panel(overflow)
  bug774863 Gesture responses while keyboard is on
  bug774847 Borders on thumbnails
  bug774352 Align tab opening behaviors with Firefox desktop

• [Vision-UX] Pin tab/App tab on FX metro?
• [Vision-UX] Ideas on support tab management( rearrange tabs, using Panorama, etc)

[Working-Preview]App Bar Panel

• [Done-IxD & Visual]Decided on the basic controls on app bar: No add-on support for the 1st release; For mouse and keyboard interactions, show zoom-in and zoom-out controls.
• [Done-IxD & Visual]Moved the bookmark icon into app bar for native control mapping. Agreed with Stephen to use de-emphasized rings.testing results on last page
• [Done - IxD v1] Create Bookmark List, save bookmark flow.mockup
• [Done-Platform] Bug756438 Implement AppBar scripting interface and build AppBar content dynamically
• [Done-Platform] bug771360 Various Windows 8 metro Appbar cleanup tasks
• [Vision-UX] Thinking about contextual app bar controls, supporting more complicated tasks, such as editing bookmarks, managing history.

Additional basic features

[On track]Find on page

• [Done-IxD]Delivered design mockups.Vision ways to provide additional value with the search results. IE metro shows the full link when search keyword is (or part of) a hyperlink.
• [Done-Visual] Deliver on find bar icons and highlighting style

[Vision]Private Browsing

Ideally private browsing tab should be supported. But currently on Firefox, private browsing can only be based on whole app instead of individual tab(as IE on metro).

Tiles, Badges, Toast Notifications

[On-track]Tiles & Splashscreen

[Working-Preview]Current design

• bug735008 Windows 8 tile and splashscreen

• Links

 [1] [Checklist for tiles: http://msdn.microsoft.com/en-us/library/windows/apps/hh465403]

[Beta]Badges & Toast Notifications

• [Beta - UX&Visual]Define the use case of using badges and notifications:

 - Notifications of download progress; 
 - Notifications from IM or mail sites, for example: new mails,new chat msg. 
 - Integrating with chat functions;

• [Platform] bug687226 Support metro style notifactions
• Links

 [1] [Badge overview: http://msdn.microsoft.com/en-us/library/windows/apps/hh779719.aspx]

[Working-Preview]Secondary tiles

• [Done- IxD] mockup on Pin to Start
• [Done- Front-end] bug747366 using fav icon on secondary tiles
• [Beta-Visual] Define a unified style of secondary tiles

[On-track]App Contracts

FX metro should use contracts and extensions to declare the interactions it supports with other apps and Windows.

[Working-Preview] Search contract

• [Done- IxD v1]search contract mockup
• [Vision- UX] look into opportunities to promote other search strategies

Description

• Let users quickly search through Firefox's search service from anywhere in the system, including from within other apps. And vice versa.
• System global search should be based on users search history and google search results. The goal is to enable users to get their search keywords with the least amount of work on typing.
• Enhanced search/Multi-search should be supported within Firefox application, instead of globally accessible.

• Links

 [1] [App contracts and extensions: http://msdn.microsoft.com/en-us/library/windows/apps/hh464906]
 [2] [Sharing content: http://msdn.microsoft.com/en-us/library/windows/apps/hh465251]

[Working-Preview]Share

Description

• Let users share content from Firefox with other people through other apps(for example, Mail), and receive shareable content from other people and apps, too.

Feature question

• Share targets: windows 8 apps that support sharing. Metro remembers recent contacts and lists on the top, then follows with mail app, and other social media apps.

• [Done- Platform] bug687212 Support the share data contract in Windows 8
• [On track -Platform] bug756899 Enhance share charm functionality on Windows 8 Metro

[Beta - UX]Print

Description

• Displays a custom print-related UI and communicates directly with a print device. When you highlight the features that are specific to a particular make and model of a print device, you can provide a richer, more enhanced user experience.

Feature question

• Identify user case: is it desktop only? Do we want to support print from Firefox metro on tablet?
• Design the customized interface for printing.
• Links

[1] [Guidelines for print UI design: http://msdn.microsoft.com/en-us/library/windows/apps/hh465217.aspx]

[On-track]Settings

• [Working -Preview] Currently in preview the settings are working but still in old Fennec format. Needs to redesign the UI for the beta.
• [On-track -IxD] Identified the content goes into Settings on metro. (Potential list: Set as default browser; Delete browsing history;Privacy(location permit;do not track);Content(languages,encoding);Sync) 1st IA draft

• Links

 [1] [ Guidelines for App Settings: http://msdn.microsoft.com/en-us/library/windows/apps/hh770544]

Others

[On-track]Play to

• Let users enjoy audio, video, or images streamed from Firefox to other devices in their home network.

[On track -Platform] bug740835 hooking up playto contract

[Working -Preview]File picker

• Let Firefox load and save their files from the local file system, connected storage devices, HomeGroup, or even other apps.

[Done- Platform] bug771238 an UI freeze issue about file picker

[Vision]Personalization

[Vision]Add-ons

• Based on the conversation on 06/18, add-ons on metro need to be customized to ensure compatibility. So for beta version, we will not have Add-ons on metro environment.

[Vision]Identity

• For beta version, not going to support signing into Firefox on metro.
• To make sync happen, MS supports tap to share, which can transfer URLs and small documents between Windows Phone and other Windows8 device. We should take advantage of that feature to make sync happen if we want.

[Vision]Potential feature explorations

Should not be on the priority list. Good to vision the possibilities of adopting some advanced features eventually onto FX metro.

[Vision]Reader mode

- would be useful to have the reader mode on snapped view. also provide the options of reading list.

Win8/Metro Design Resources

• Talks about Metro UI

 [1]  8 traits of great metro apps: http://channel9.msdn.com/Events/BUILD/BUILD2011/BPS-1004
 [2]  Design Metro Style: http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-395T

• Other

 [1] Choosing the right UI surfaces  http://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx