https://wiki.mozilla.org/api.php?action=feedcontributions&feedformat=atom&user=SwilkesMozillaWiki - User contributions [en]2026-11-05T06:09:28ZUser contributionsMediaWiki 1.39.17https://wiki.mozilla.org/index.php?title=Gaia/UXTeam&diff=1064765Gaia/UXTeam2015-03-26T22:03:29Z<p>Swilkes: Removed former team members</p>
<hr />
<div>==UX Team Structure==<br />
[[File:Team structure only-02.jpg]]<br />
<br />
The FirefoxOS UX team has 4 components to the team:<br />
* UX Strategy: identifies design strategy themes which have a long term benefit to the product <br />
* UX Prototying: the entire team participates, but we have UX engineers who comprise the expertise on the team for prototyping<br />
* UX Frameworks: a small group which manages design patterns, including but not limited to- visual refresh, interaction patterns (including Haida updates), motion patterns, style guides<br />
* UX Features: maps to the functional teams and areas for the product (both Interaction or UX (IxD) and Visual Design (VxD)) and includes an internal design reviewer system to ensure design consistency and quality within the UX team.<br />
** Please note- for uireview? flags, please refer to the list below for the various feature area UX and VxD owners (e.g. do not use our internal UX reviewers)<br />
<br />
For assignments to all of the 4 components above, please refer to https://wiki.mozilla.org/images/a/aa/Team_structure_dec2013_e_1.4.pdf<br />
<br />
Below you will find ONLY the LATEST 1.4 release assignments specifically for the UX Features team. The wiki below will be kept more up to date than the attachment above.<br />
<br />
<br />
==Release Assignments for FxOS UX Features Team==<br />
<p><br />
<table border="1" cellpadding="5" cellspacing="0"><br />
<tr><br />
<th style="background:#efefef;"> Area<br />
</th><br />
<th style="background:#efefef;"> Feature Group<br />
</th><br />
<th style="background:#efefef;"> IxD Assignee<br />
</th><br />
<th style="background:#efefef;"> VxD Assignee<br />
</th></tr><br />
<tr><br />
<td> Communications</td><br />
<td> WebRTC</td><br />
<td> Maria </td><br />
<td> N/A</td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> DSDS</td><br />
<td> *Carrie</td><br />
<td> Fang </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Dialer </td><br />
<td> *Carrie </td><br />
<td> Carol </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Contacts </td><br />
<td> *Carrie </td><br />
<td> Fang </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> SMS/ MMS </td><br />
<td> *Jenny </td><br />
<td> Fang </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Cost Control / Usage</td><br />
<td> TBD </td><br />
<td> Amy </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Media Recording </td><br />
<td> TBD </td><br />
<td> Peko </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Telephony- RIL </td><br />
<td> *Jenny </td><br />
<td> Carol </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Telephony- CDMA </td><br />
<td> *Juwei </td><br />
<td> Carol </td><br />
</tr><br />
<tr><br />
<td> System Front End </td><br />
<td> FRE </td><br />
<td> *Jacqueline </td><br />
<td> Sabrina / Patryk </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> No install model </td><br />
<td> *Maria </td><br />
<td> N/A </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Backpack </td><br />
<td> *Maria </td><br />
<td> N/A </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Sheets </td><br />
<td> Francis, *Rob </td><br />
<td> Eric </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Browser OS / Rocketbar </td><br />
<td> *Francis </td><br />
<td> Eric </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Task Manager </td><br />
<td> *Francis </td><br />
<td> Eric </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Download Manager </td><br />
<td> *Francis </td><br />
<td> Eric </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Offline Handling </td><br />
<td> *Francis </td><br />
<td> Eric </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Smart Data Consumption </td><br />
<td> *Rob, Valentin </td><br />
<td> Amy </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> e.me </td><br />
<td> *Maria </td><br />
<td> Patryk </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Replaceable Home / Lock Screen </td><br />
<td> Jacqueline / Maria </td><br />
<td> *Peter / Hung </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Status bar </td><br />
<td> *Francis </td><br />
<td> Eric </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Notifications </td><br />
<td> *Rob </td><br />
<td> Eric </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Patterns </td><br />
<td> *Harly </td><br />
<td> Przemek </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Flexible UI / SVG Icons </td><br />
<td> Harly / Omega </td><br />
<td> Przemek </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Utility / System Tray </td><br />
<td> *Francis </td><br />
<td> Eric </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Datastore / Permissions </td><br />
<td> Rob </td><br />
<td> N/A </td><br />
</tr><br />
<tr><br />
<td> System Platform </td><br />
<td> Bluetooth </td><br />
<td> *Jenny </td><br />
<td> Helen </td><br />
</tr><br />
<tr><br />
<td> </td><br />
<td> Keyboard </td><br />
<td> *Omega </td><br />
<td> Carol </td><br />
</tr> <br />
<tr><br />
<td> </td><br />
<td> Settings </td><br />
<td> *Jenny </td><br />
<td> Helen </td><br />
</tr> <br />
<tr><br />
<td> </td><br />
<td> Scaling Devices </td><br />
<td> N/A </td><br />
<td> See VsD App Owner </td><br />
</tr> <br />
<tr> <br />
<td> </td><br />
<td> NFC </td><br />
<td> *Juwei </td><br />
<td> Fang </td><br />
</tr> <br />
<tr> <br />
<td> </td><br />
<td> Hardware Related UI </td><br />
<td> *Jenny </td><br />
<td> Patryk </td><br />
</tr> <br />
<tr> <br />
<td> Media </td><br />
<td> Music Player </td><br />
<td> Jacqueline </td><br />
<td> *Hung </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Gallery </td><br />
<td> *Tiffanie </td><br />
<td> Amy </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Audio Recording </td><br />
<td> Jacqueline </td><br />
<td> *Hung </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Camera </td><br />
<td> *Tiffanie (1.5+) / *Rob (1.4) </td><br />
<td> Amy </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Video Player </td><br />
<td> *Tiffanie </td><br />
<td> Amy </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> FM Radio </td><br />
<td> Jacqueline </td><br />
<td> *Hung </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Media Playback Controls </td><br />
<td> *Jacqueline </td><br />
<td> Hung </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> DRM </td><br />
<td> *Tiffanie </td><br />
<td> Hung </td><br />
</tr><br />
<tr> <br />
<td> Visual Assets </td><br />
<td> Typeface </td><br />
<td> N/A </td><br />
<td> *Patryk </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Iconography </td><br />
<td> N/A </td><br />
<td> *Peter </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> System Sound Design </td><br />
<td> N/A </td><br />
<td> *Patryk (via Vendor) </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Wallpapers </td><br />
<td> N/A </td><br />
<td> Peter </td><br />
</tr><br />
<tr> <br />
<td> Productivity </td><br />
<td> Email </td><br />
<td> *Juwei </td><br />
<td> Peko </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Calendar </td><br />
<td> *Harly </td><br />
<td> Peko </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Calculator </td><br />
<td> *Harly </td><br />
<td> Fang </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Clock </td><br />
<td> *Juwei </td><br />
<td> Helen </td><br />
</tr><br />
<tr> <br />
<td> </td><br />
<td> Notes </td><br />
<td> *Juwei </td><br />
<td> Peko </td><br />
</tr><br />
<tr> <br />
<td> Ringtones </td><br />
<td> </td><br />
<td> *Tiffanie </td><br />
<td> Carol </td><br />
</tr><br />
<tr> <br />
<td> Fx Services </td><br />
<td> WMF </td><br />
<td> *Jacqueline </td><br />
<td> Peko/Outsource </td><br />
</tr><br />
<tr> <br />
<td> Graphics </td><br />
<td> </td><br />
<td> </td><br />
<td> </td><br />
</tr><br />
<tr> <br />
<td> Performance </td><br />
<td> </td><br />
<td> *Gordon </td><br />
<td> </td><br />
</tr><br />
<tr> <br />
<td> Partners </td><br />
<td> </td><br />
<td> *Jaime / *Mike </td><br />
<td> </td><br />
</tr><br />
<tr> <br />
<td> BD </td><br />
<td> </td><br />
<td> *Jaime </td><br />
<td> </td><br />
</tr><br />
<tr> <br />
<td> Localization </td><br />
<td> </td><br />
<td> Stephany </td><br />
<td> Amy </td><br />
</tr><br />
<tr> <br />
<td> Tablet </td><br />
<td> </td><br />
<td> Hunter/Mike </td><br />
<td> Carol </td><br />
</tr><br />
<tr> <br />
<td> TV </td><br />
<td> </td><br />
<td> Hunter/Mike </td><br />
<td> Carol </td><br />
</tr><br />
</table><br />
<br />
==UX Team Contact Information==<br />
<table border="1" cellpadding="5" cellspacing="0"><br />
<br />
<th style="background:#efefef;">Name</th><br />
<th style="background:#efefef;">Role</th><br />
<th style="background:#efefef;">Organization</th><br />
<th style="background:#efefef;">IRC</th><br />
<th style="background:#efefef;">Skype</th><br />
<th style="background:#efefef;">GitHub</th><br />
<th style="background:#efefef;">Email</th><br />
<br />
<tr><br />
<td>Jaime Chen</td><br />
<td>UX Manager & Design Strategy</td><br />
<td>Mozilla</td><br />
<td>jaime</td><br />
<td>jaimecchen</td><br />
<td></td><br />
<td>jachen@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Stephany Wilkes</td><br />
<td>Program Manager</td><br />
<td>Mozilla</td><br />
<td>swilkes</td><br />
<td></td><br />
<td>stephany</td><br />
<td>swilkes@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Rob MacDonald</td><br />
<td>Interaction</td><br />
<td>Mozilla</td><br />
<td>robmac</td><br />
<td></td><br />
<td></td><br />
<td>rmacdonald@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Francis Djabri</td><br />
<td>Interaction </td><br />
<td>Mozilla</td><br />
<td>djabber</td><br />
<td></td><br />
<td></td><br />
<td>fdjabri@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Jacqueline Savory</td><br />
<td>Interaction </td><br />
<td>Mozilla</td><br />
<td>jsavory</td><br />
<td></td><br />
<td></td><br />
<td>jsavory@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Tiffanie Shakespeare</td><br />
<td>Interaction </td><br />
<td>Mozilla</td><br />
<td>tif</td><br />
<td></td><br />
<td></td><br />
<td>tshakespeare@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Maria Sandberg</td><br />
<td>Interaction</td><br />
<td>Mozilla</td><br />
<td>msandberg</td><br />
<td>maria.sandberg.mozilla</td><br />
<td></td><br />
<td>msandberg@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Mike Tsai</td><br />
<td>UX Manager</td><br />
<td>Mozilla</td><br />
<td>GoodMike</td><br />
<td>yilungisme</td><br />
<td></td><br />
<td>mtsai@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Juwei Huang</td><br />
<td>Interaction</td><br />
<td>Mozilla</td><br />
<td>juwei</td><br />
<td>juwei.huang_mozilla</td><br />
<td></td><br />
<td>jhuang@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Carrie Wang</td><br />
<td>Interaction</td><br />
<td>Mozilla</td><br />
<td>CarrieW</td><br />
<td>carrie75521</td><br />
<td>CarrieWang</td><br />
<td>cawang@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Peko Chen</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>pekochen</td><br />
<td>peko chen</td><br />
<td></td><br />
<td>pchen@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Helen Huang</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>HHuang</td><br />
<td>zilunhuang</td><br />
<td></td><br />
<td>hhuang@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Fang Shih</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>fang</td><br />
<td>fangshih09</td><br />
<td>fshih</td><br />
<td>fshih@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Patryk Adamczyk</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>patryk</td><br />
<td>twisted_x_design</td><br />
<td>patrykdesign</td><br />
<td>padamczyk@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Przemek Abratowski</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>przemek</td><br />
<td></td><br />
<td></td><br />
<td>pabratowski@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Peter La</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>peterla</td><br />
<td>peterla.mozilla</td><br />
<td>PeterLa</td><br />
<td>pla@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Eric Pang</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>epang</td><br />
<td>eric.pang7</td><br />
<td>epang</td><br />
<td>epang@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Pavel Ivanov</td><br />
<td>Visual Design Eng.</td><br />
<td>Mozilla</td><br />
<td>ivanovpavel</td><br />
<td>pivanov.com</td><br />
<td>pivanov</td><br />
<td>pivanov@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Harly Hsu</td><br />
<td>Interaction</td><br />
<td>Mozilla</td><br />
<td>harly</td><br />
<td>harly21</td><br />
<td>harly21</td><br />
<td>hhsu@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Omega Feng</td><br />
<td>Interaction</td><br />
<td>Mozilla</td><br />
<td>Omega</td><br />
<td>huskyomega</td><br />
<td>huskyomega</td><br />
<td>ofeng@mozilla.com</td><br />
</tr><br />
<br />
<tr><br />
<td>Carol Huang</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>Carol</td><br />
<td>carol.h96</td><br />
<td></td><br />
<td>chuang@mozilla.com</td><br />
</tr><br />
<tr><br />
<td>Hung Nguyen</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>hnguyen</td><br />
<td></td><br />
<td></td><br />
<td>hnguyen@mozilla.com</td><br />
</tr><br />
<tr><br />
<td>Amy Lee</td><br />
<td>Visual</td><br />
<td>Mozilla</td><br />
<td>AmyLee</td><br />
<td></td><br />
<td></td><br />
<td>amlee@mozilla.com</td><br />
</tr><br />
<tr><br />
<td>Jenny Lee</td><br />
<td>Interaction</td><br />
<td>Mozilla</td><br />
<td>jelee</td><br />
<td>jenlee172</td><br />
<td></td><br />
<td>jelee@mozilla.com</td><br />
</tr><br />
</table></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS_Data_Sync&diff=1063896Firefox OS Data Sync2015-03-23T20:49:33Z<p>Swilkes: Formatting fixes</p>
<hr />
<div>= Firefox Cloud =<br />
{{Draft}}<br />
== Overview ==<br />
At a high level, the Firefox Cloud project aims to create a service to allow the creation of rich cloud-enabled web applications that sync their data to a user chosen remote storage.<br />
== The product ==<br />
The product vision is built on top of three major concepts fully aligned with Mozilla's mission.<br />
<br />
* '''User choice'''<br />
Firefox Cloud should offer to users the ability to decide where they want to store their data.<br />
On currently existing platforms users are tied to a specific storage: on iOS people are tied to iCloud, on Android, to Google Drive, etc. We want to give users the ability to choose the cloud storage provider they want. Ideally, we want to also be able to give them the choice to use self hosted storage like ownCloud. But this is still under discussion.<br />
Mozilla might also provide cloud storage space for users as one of these choices, but this is also still to be decided.<br />
<br />
* '''User privacy'''<br />
In order to ensure that the data that the user sends to the cloud is protected and no one else other than the user can read it, the Firefox Cloud client solution should allow users to opt-in to encrypt the data on the client side and store it encrypted on the selected cloud storage provider. Not even Mozilla should be able to read this data or store it unencrypted. All the encryption and decryption should happen on the client side.<br />
<br />
* '''User identity'''<br />
We want to use Firefox Accounts as the authentication mechanism for this service.<br />
Once the user links their chosen cloud storage provider credentials to her Firefox Cloud account, all that she needs to do to authenticate herself from new devices accessing her Firefox Cloud account is her Firefox Accounts credentials.<br />
<br />
=== Use cases ===<br />
==== Messaging application ====<br />
Alice uses her Messaging app to send and receive SMS, MMS and IM. She accesses this application from her Firefox OS tablet, her desktop browser and her Android phone. She can see and manage the history and content of the messages sent and received from any of these devices. She can continue writing an IM that she started typing on her Android phone on her desktop browser app.<br />
<br />
==== Media files ====<br />
Bob uses his Music app to listen to music and audio files. He keeps a library with his preferred titles. He adds new songs from his desktop browser. When he uses his Firefox OS device, he can listen to these new songs if he is online. He can also choose to download them so he can play them offline.<br />
<br />
''Question: Does the [[https://wiki.mozilla.org/Gaia/Architecture_Proposal|proposed V3 architecture]] buy us anything in terms improved offline experience here? -Stephany''<br />
<br />
Alice listens to her favorite knitting podcasts -- Knitting Pipeline and The Knit Girllls -- in her web browser (while knitting beside her laptop during business travel) or via the Apple TV > Podcasts section, when she is at home. Alice can access both podcasts on the Web and in iTunes. She has a Lenovo PC so doesn't really use iTunes outside of Apple TV. When Alice sits down in her plane seat for her next business trip, plugs in her headphones and clicks the play button on the video clip embedded in the podcast's web page, Firefox Cloud asks if she'd like the video to be backed up so she can pick it up anywhere (on her phone, in case her laptop battery dies; on her laptop when it's offline during the flight with alleged but nonexistent Internet service), where she left off.<br />
<br />
==== Backup ====<br />
Alice purchases a new Firefox OS phone (\o/). She already owns a Firefox OS tablet and she wants to have the same experience and data in both devices. She enters her Firefox Accounts credentials while configuring her new device. Her new device installs all the applications that she has on her tablet, the homescreen wallpaper, the passcode for the lockscreen, the notification sounds. When she opens the Gallery app in her new device, she is asked if she wants to access her photo collection from her new device.<br />
<br />
==== File sharing ====<br />
Bob wants to share a file between his desktop and his mobile phone. He accesses dummysharingservice.com, logs in with his Firefox Accounts credentials and uploads the file from his desktop. He goes to his mobile phone and logs in with the same Firefox Accounts email and downloads the file in his mobile.<br />
Now he wants to share the file with Alice. He accesses dummysharingservice.com again and uses the sharing option to send a notification about the shared file to Alice's email. Alice receives this notification and accesses the sharing service. She logs with her Firefox Accounts email and downloads the file shared by Bob.<br />
<br />
==== Email ====<br />
Alice has a Firefox OS device and wants to back up all of her email photo attachments, from multiple email accounts, to Dropbox and Spider Oak. She sees a suggestion for "helpful services" in the email UI, taps it, peruses services, and selects those for Dropbox and Spider Oak. Alice feels safer knowing that every photo she's ever received in an email is automatically backed up. <br />
<br />
After a few months, Alice decides to do the same for document attachments, but only for her work email and to her organization's enterprise Box back-up, which she is required to use as an employee.<br />
<br />
''Note: Francis Djabri and Stephany Wilkes are currently working on this and presented initial designs to the UX team in early March, 2015. Please contact either of them for more information.''<br />
<br />
==== Other use cases ====<br />
* Calendar<br />
* Notes<br />
* Clock alarms<br />
* Contacts<br />
* Radio bookmarks<br />
* Browser data (history, bookmarks, form autocomplete data, requestAutocomplete data, passwords, etc.)<br />
* ...<br />
<br />
== The solution ==<br />
[[File:FirefoxCloudHighLevelArch.png]]<br />
=== Authentication ===<br />
[[Firefox Accounts]] will be the authentication mechanism used by Firefox Cloud.<br />
Using Firefox Accounts should enable us to do the data encryption in the client without worrying about storing any private key or secret in the clients. We can obtain a key derived from the user's Firefox Accounts and encrypt the local data on the fly before sending it to the cloud.<br />
The authentication keys for the remote storages that the user chooses to use will be stored in the Firefox Cloud server also encrypted with a symmetric key that the client will provide on every sync request. That way if the Firefox Cloud server is compromised, the attacker won't get access to the remote storage accounts.<br />
=== Documents vs Files ===<br />
=== Service ===<br />
* https://github.com/mozilla-services/cliquet<br />
* https://github.com/mozilla-services/kinto<br />
=== Client ===<br />
Along with the Firefox Cloud server, we will be providing a reference implementation of a Firefox Cloud client. At a high level, this client will need to address at least the following:<br />
* Consume the Firefox Cloud server exposed HTTP API for storing and fetching data from the cloud.<br />
* Conflict resolution.<br />
* Authentication management.<br />
* Encryption and decryption of data.<br />
We would also like it to fulfill the following requirements:<br />
* '''Offline first.'''<br />
Ideally we should have a solution where consumers can store the data locally first and then specify that the data needs to be synchronized with a given remote endpoint. The app developer shouldn't need to know the underlying details of the sync protocol, and so instead of using the HTTP API exposed by the Firefox Cloud server, we should provide them with an abstraction to request this synchronization in the form of a JS library.<br />
* '''Avoid enforcing another client storage solution.'''<br />
We already have enough storage APIs in the client side at least on Firefox OS to add another one. We don't think it is a good idea to force developers to use another API for remote data synchronization. Instead, we would prefer a solution that allows developers to keep using the API of their current data source (let's say IndexedDB) for adding, editing and removing records and performing searches. While we can provide an easier abstraction of the current APIs (IndexedDB is known for being a powerful but complicated API), we should still allow developers to keep accessing and using them.<br />
* '''Avoid data duplication.'''<br />
One of the issues that we currently have with DataStore is that we potentially create several copies of the same data across Firefox OS. Ideally, we should not require to do the same with the solution that we choose for the client side of this system. So we should either have a solution that allow us to keep using the same data sources that we use currently but somehow adding the sync capabilities to it or a way to migrate the existing data to a new data source with already sync enabled capabilities. We will certainly need to add meta information along with the existing data that we have in our apps, but this data should have an unique source.<br />
* '''It should be cross browser.'''<br />
Whichever solution we find for this, it should work in all browsers. If we end up creating a JS library, we need to be sure that it works (or will work, thinking about [http://caniuse.com/#search=indexeddb IndexedDB support]) in all the major browsers. We believe that we can avoid adding a new web API for this, but in case that we finally need to do it, it would be great if we could standardize it and avoid repeating the DataStore fiasco.<br />
==== Javascript library ====<br />
This is still under discussion, but the current proposal is to create a JS library that exposes a [http://pouchdb.com/ PouchDB] inspired API but also gives a direct access to the underlying data source API by exposing a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy proxified] instance of the used data source (initially limited to IndexedDB). This way the developers should be able to use the new improved API or keep using the specific data source API. This library should handle all the synchronization of data with the Firefox Cloud server, the resolution of conflicts, the migration from a currently existing database, the authentication part and the remote storage auth management, the encryption and decryption of the data in the client...<br />
===== API =====<br />
== Current status ==<br />
=== Service ===<br />
=== Client ===</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS_Data_Sync&diff=1063895Firefox OS Data Sync2015-03-23T20:49:02Z<p>Swilkes: Added question and a link</p>
<hr />
<div>= Firefox Cloud =<br />
{{Draft}}<br />
== Overview ==<br />
At a high level, the Firefox Cloud project aims to create a service to allow the creation of rich cloud-enabled web applications that sync their data to a user chosen remote storage.<br />
== The product ==<br />
The product vision is built on top of three major concepts fully aligned with Mozilla's mission.<br />
<br />
* '''User choice'''<br />
Firefox Cloud should offer to users the ability to decide where they want to store their data.<br />
On currently existing platforms users are tied to a specific storage: on iOS people are tied to iCloud, on Android, to Google Drive, etc. We want to give users the ability to choose the cloud storage provider they want. Ideally, we want to also be able to give them the choice to use self hosted storage like ownCloud. But this is still under discussion.<br />
Mozilla might also provide cloud storage space for users as one of these choices, but this is also still to be decided.<br />
<br />
* '''User privacy'''<br />
In order to ensure that the data that the user sends to the cloud is protected and no one else other than the user can read it, the Firefox Cloud client solution should allow users to opt-in to encrypt the data on the client side and store it encrypted on the selected cloud storage provider. Not even Mozilla should be able to read this data or store it unencrypted. All the encryption and decryption should happen on the client side.<br />
<br />
* '''User identity'''<br />
We want to use Firefox Accounts as the authentication mechanism for this service.<br />
Once the user links their chosen cloud storage provider credentials to her Firefox Cloud account, all that she needs to do to authenticate herself from new devices accessing her Firefox Cloud account is her Firefox Accounts credentials.<br />
<br />
=== Use cases ===<br />
==== Messaging application ====<br />
Alice uses her Messaging app to send and receive SMS, MMS and IM. She accesses this application from her Firefox OS tablet, her desktop browser and her Android phone. She can see and manage the history and content of the messages sent and received from any of these devices. She can continue writing an IM that she started typing on her Android phone on her desktop browser app.<br />
<br />
==== Media files ====<br />
Bob uses his Music app to listen to music and audio files. He keeps a library with his preferred titles. He adds new songs from his desktop browser. When he uses his Firefox OS device, he can listen to these new songs if he is online. He can also choose to download them so he can play them offline.<br />
''Question: Does the [[https://wiki.mozilla.org/Gaia/Architecture_Proposal|proposed V3 architecture]] buy us anything in terms improved offline experience here? -Stephany''<br />
<br />
Alice listens to her favorite knitting podcasts -- Knitting Pipeline and The Knit Girllls -- in her web browser (while knitting beside her laptop during business travel) or via the Apple TV > Podcasts section, when she is at home. Alice can access both podcasts on the Web and in iTunes. She has a Lenovo PC so doesn't really use iTunes outside of Apple TV. When Alice sits down in her plane seat for her next business trip, plugs in her headphones and clicks the play button on the video clip embedded in the podcast's web page, Firefox Cloud asks if she'd like the video to be backed up so she can pick it up anywhere (on her phone, in case her laptop battery dies; on her laptop when it's offline during the flight with alleged but nonexistent Internet service), where she left off.<br />
<br />
==== Backup ====<br />
Alice purchases a new Firefox OS phone (\o/). She already owns a Firefox OS tablet and she wants to have the same experience and data in both devices. She enters her Firefox Accounts credentials while configuring her new device. Her new device installs all the applications that she has on her tablet, the homescreen wallpaper, the passcode for the lockscreen, the notification sounds. When she opens the Gallery app in her new device, she is asked if she wants to access her photo collection from her new device.<br />
<br />
==== File sharing ====<br />
Bob wants to share a file between his desktop and his mobile phone. He accesses dummysharingservice.com, logs in with his Firefox Accounts credentials and uploads the file from his desktop. He goes to his mobile phone and logs in with the same Firefox Accounts email and downloads the file in his mobile.<br />
Now he wants to share the file with Alice. He accesses dummysharingservice.com again and uses the sharing option to send a notification about the shared file to Alice's email. Alice receives this notification and accesses the sharing service. She logs with her Firefox Accounts email and downloads the file shared by Bob.<br />
<br />
==== Email ====<br />
Alice has a Firefox OS device and wants to back up all of her email photo attachments, from multiple email accounts, to Dropbox and Spider Oak. She sees a suggestion for "helpful services" in the email UI, taps it, peruses services, and selects those for Dropbox and Spider Oak. Alice feels safer knowing that every photo she's ever received in an email is automatically backed up. <br />
<br />
After a few months, Alice decides to do the same for document attachments, but only for her work email and to her organization's enterprise Box back-up, which she is required to use as an employee.<br />
<br />
''Note: Francis Djabri and Stephany Wilkes are currently working on this and presented initial designs to the UX team in early March, 2015. Please contact either of them for more information.''<br />
<br />
==== Other use cases ====<br />
* Calendar<br />
* Notes<br />
* Clock alarms<br />
* Contacts<br />
* Radio bookmarks<br />
* Browser data (history, bookmarks, form autocomplete data, requestAutocomplete data, passwords, etc.)<br />
* ...<br />
<br />
== The solution ==<br />
[[File:FirefoxCloudHighLevelArch.png]]<br />
=== Authentication ===<br />
[[Firefox Accounts]] will be the authentication mechanism used by Firefox Cloud.<br />
Using Firefox Accounts should enable us to do the data encryption in the client without worrying about storing any private key or secret in the clients. We can obtain a key derived from the user's Firefox Accounts and encrypt the local data on the fly before sending it to the cloud.<br />
The authentication keys for the remote storages that the user chooses to use will be stored in the Firefox Cloud server also encrypted with a symmetric key that the client will provide on every sync request. That way if the Firefox Cloud server is compromised, the attacker won't get access to the remote storage accounts.<br />
=== Documents vs Files ===<br />
=== Service ===<br />
* https://github.com/mozilla-services/cliquet<br />
* https://github.com/mozilla-services/kinto<br />
=== Client ===<br />
Along with the Firefox Cloud server, we will be providing a reference implementation of a Firefox Cloud client. At a high level, this client will need to address at least the following:<br />
* Consume the Firefox Cloud server exposed HTTP API for storing and fetching data from the cloud.<br />
* Conflict resolution.<br />
* Authentication management.<br />
* Encryption and decryption of data.<br />
We would also like it to fulfill the following requirements:<br />
* '''Offline first.'''<br />
Ideally we should have a solution where consumers can store the data locally first and then specify that the data needs to be synchronized with a given remote endpoint. The app developer shouldn't need to know the underlying details of the sync protocol, and so instead of using the HTTP API exposed by the Firefox Cloud server, we should provide them with an abstraction to request this synchronization in the form of a JS library.<br />
* '''Avoid enforcing another client storage solution.'''<br />
We already have enough storage APIs in the client side at least on Firefox OS to add another one. We don't think it is a good idea to force developers to use another API for remote data synchronization. Instead, we would prefer a solution that allows developers to keep using the API of their current data source (let's say IndexedDB) for adding, editing and removing records and performing searches. While we can provide an easier abstraction of the current APIs (IndexedDB is known for being a powerful but complicated API), we should still allow developers to keep accessing and using them.<br />
* '''Avoid data duplication.'''<br />
One of the issues that we currently have with DataStore is that we potentially create several copies of the same data across Firefox OS. Ideally, we should not require to do the same with the solution that we choose for the client side of this system. So we should either have a solution that allow us to keep using the same data sources that we use currently but somehow adding the sync capabilities to it or a way to migrate the existing data to a new data source with already sync enabled capabilities. We will certainly need to add meta information along with the existing data that we have in our apps, but this data should have an unique source.<br />
* '''It should be cross browser.'''<br />
Whichever solution we find for this, it should work in all browsers. If we end up creating a JS library, we need to be sure that it works (or will work, thinking about [http://caniuse.com/#search=indexeddb IndexedDB support]) in all the major browsers. We believe that we can avoid adding a new web API for this, but in case that we finally need to do it, it would be great if we could standardize it and avoid repeating the DataStore fiasco.<br />
==== Javascript library ====<br />
This is still under discussion, but the current proposal is to create a JS library that exposes a [http://pouchdb.com/ PouchDB] inspired API but also gives a direct access to the underlying data source API by exposing a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy proxified] instance of the used data source (initially limited to IndexedDB). This way the developers should be able to use the new improved API or keep using the specific data source API. This library should handle all the synchronization of data with the Firefox Cloud server, the resolution of conflicts, the migration from a currently existing database, the authentication part and the remote storage auth management, the encryption and decryption of the data in the client...<br />
===== API =====<br />
== Current status ==<br />
=== Service ===<br />
=== Client ===</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS_Data_Sync&diff=1063892Firefox OS Data Sync2015-03-23T20:11:05Z<p>Swilkes: Typo fix</p>
<hr />
<div>= Firefox Cloud =<br />
{{Draft}}<br />
== Overview ==<br />
At a high level, the Firefox Cloud project aims to create a service to allow the creation of rich cloud-enabled web applications that sync their data to a user chosen remote storage.<br />
== The product ==<br />
The product vision is built on top of three major concepts fully aligned with Mozilla's mission.<br />
<br />
* '''User choice'''<br />
Firefox Cloud should offer to users the ability to decide where they want to store their data.<br />
On currently existing platforms users are tied to a specific storage: on iOS people are tied to iCloud, on Android, to Google Drive, etc. We want to give users the ability to choose the cloud storage provider they want. Ideally, we want to also be able to give them the choice to use self hosted storage like ownCloud. But this is still under discussion.<br />
Mozilla might also provide cloud storage space for users as one of these choices, but this is also still to be decided.<br />
<br />
* '''User privacy'''<br />
In order to ensure that the data that the user sends to the cloud is protected and no one else other than the user can read it, the Firefox Cloud client solution should allow users to opt-in to encrypt the data on the client side and store it encrypted on the selected cloud storage provider. Not even Mozilla should be able to read this data or store it unencrypted. All the encryption and decryption should happen on the client side.<br />
<br />
* '''User identity'''<br />
We want to use Firefox Accounts as the authentication mechanism for this service.<br />
Once the user links their chosen cloud storage provider credentials to her Firefox Cloud account, all that she needs to do to authenticate herself from new devices accessing her Firefox Cloud account is her Firefox Accounts credentials.<br />
<br />
=== Use cases ===<br />
==== Messaging application ====<br />
Alice uses her Messaging app to send and receive SMS, MMS and IM. She accesses this application from her Firefox OS tablet, her desktop browser and her Android phone. She can see and manage the history and content of the messages sent and received from any of these devices. She can continue writing an IM that she started typing on her Android phone on her desktop browser app.<br />
<br />
==== Media files ====<br />
Bob uses his Music app to listen to music and audio files. He keeps a library with his preferred titles. He adds new songs from his desktop browser. When he uses his Firefox OS device, he can listen to these new songs if he is online. He can also choose to download them so he can play them offline.<br />
<br />
Alice listens to her favorite knitting podcasts -- Knitting Pipeline and The Knit Girllls -- in her web browser (while knitting beside her laptop during business travel) or via the Apple TV > Podcasts section, when she is at home. Alice can access both podcasts on the Web and in iTunes. She has a Lenovo PC so doesn't really use iTunes outside of Apple TV. When Alice sits down in her plane seat for her next business trip, plugs in her headphones and clicks the play button on the video clip embedded in the podcast's web page, Firefox Cloud asks if she'd like the video to be backed up so she can pick it up anywhere (on her phone, in case her laptop battery dies; on her laptop when it's offline during the flight with alleged but nonexistent Internet service), where she left off.<br />
<br />
==== Backup ====<br />
Alice purchases a new Firefox OS phone (\o/). She already owns a Firefox OS tablet and she wants to have the same experience and data in both devices. She enters her Firefox Accounts credentials while configuring her new device. Her new device installs all the applications that she has on her tablet, the homescreen wallpaper, the passcode for the lockscreen, the notification sounds. When she opens the Gallery app in her new device, she is asked if she wants to access her photo collection from her new device.<br />
<br />
==== File sharing ====<br />
Bob wants to share a file between his desktop and his mobile phone. He accesses dummysharingservice.com, logs in with his Firefox Accounts credentials and uploads the file from his desktop. He goes to his mobile phone and logs in with the same Firefox Accounts email and downloads the file in his mobile.<br />
Now he wants to share the file with Alice. He accesses dummysharingservice.com again and uses the sharing option to send a notification about the shared file to Alice's email. Alice receives this notification and accesses the sharing service. She logs with her Firefox Accounts email and downloads the file shared by Bob.<br />
<br />
==== Email ====<br />
Alice has a Firefox OS device and wants to back up all of her email photo attachments, from multiple email accounts, to Dropbox and Spider Oak. She sees a suggestion for "helpful services" in the email UI, taps it, peruses services, and selects those for Dropbox and Spider Oak. Alice feels safer knowing that every photo she's ever received in an email is automatically backed up. <br />
<br />
After a few months, Alice decides to do the same for document attachments, but only for her work email and to her organization's enterprise Box back-up, which she is required to use as an employee.<br />
<br />
''Note: Francis Djabri and Stephany Wilkes are currently working on this and presented initial designs to the UX team in early March, 2015. Please contact either of them for more information.''<br />
<br />
==== Other use cases ====<br />
* Calendar<br />
* Notes<br />
* Clock alarms<br />
* Contacts<br />
* Radio bookmarks<br />
* Browser data (history, bookmarks, form autocomplete data, requestAutocomplete data, passwords, etc.)<br />
* ...<br />
<br />
== The solution ==<br />
[[File:FirefoxCloudHighLevelArch.png]]<br />
=== Authentication ===<br />
[[Firefox Accounts]] will be the authentication mechanism used by Firefox Cloud.<br />
Using Firefox Accounts should enable us to do the data encryption in the client without worrying about storing any private key or secret in the clients. We can obtain a key derived from the user's Firefox Accounts and encrypt the local data on the fly before sending it to the cloud.<br />
The authentication keys for the remote storages that the user chooses to use will be stored in the Firefox Cloud server also encrypted with a symmetric key that the client will provide on every sync request. That way if the Firefox Cloud server is compromised, the attacker won't get access to the remote storage accounts.<br />
=== Documents vs Files ===<br />
=== Service ===<br />
* https://github.com/mozilla-services/cliquet<br />
* https://github.com/mozilla-services/kinto<br />
=== Client ===<br />
Along with the Firefox Cloud server, we will be providing a reference implementation of a Firefox Cloud client. At a high level, this client will need to address at least the following:<br />
* Consume the Firefox Cloud server exposed HTTP API for storing and fetching data from the cloud.<br />
* Conflict resolution.<br />
* Authentication management.<br />
* Encryption and decryption of data.<br />
We would also like it to fulfill the following requirements:<br />
* '''Offline first.'''<br />
Ideally we should have a solution where consumers can store the data locally first and then specify that the data needs to be synchronized with a given remote endpoint. The app developer shouldn't need to know the underlying details of the sync protocol, and so instead of using the HTTP API exposed by the Firefox Cloud server, we should provide them with an abstraction to request this synchronization in the form of a JS library.<br />
* '''Avoid enforcing another client storage solution.'''<br />
We already have enough storage APIs in the client side at least on Firefox OS to add another one. We don't think it is a good idea to force developers to use another API for remote data synchronization. Instead, we would prefer a solution that allows developers to keep using the API of their current data source (let's say IndexedDB) for adding, editing and removing records and performing searches. While we can provide an easier abstraction of the current APIs (IndexedDB is known for being a powerful but complicated API), we should still allow developers to keep accessing and using them.<br />
* '''Avoid data duplication.'''<br />
One of the issues that we currently have with DataStore is that we potentially create several copies of the same data across Firefox OS. Ideally, we should not require to do the same with the solution that we choose for the client side of this system. So we should either have a solution that allow us to keep using the same data sources that we use currently but somehow adding the sync capabilities to it or a way to migrate the existing data to a new data source with already sync enabled capabilities. We will certainly need to add meta information along with the existing data that we have in our apps, but this data should have an unique source.<br />
* '''It should be cross browser.'''<br />
Whichever solution we find for this, it should work in all browsers. If we end up creating a JS library, we need to be sure that it works (or will work, thinking about [http://caniuse.com/#search=indexeddb IndexedDB support]) in all the major browsers. We believe that we can avoid adding a new web API for this, but in case that we finally need to do it, it would be great if we could standardize it and avoid repeating the DataStore fiasco.<br />
==== Javascript library ====<br />
This is still under discussion, but the current proposal is to create a JS library that exposes a [http://pouchdb.com/ PouchDB] inspired API but also gives a direct access to the underlying data source API by exposing a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy proxified] instance of the used data source (initially limited to IndexedDB). This way the developers should be able to use the new improved API or keep using the specific data source API. This library should handle all the synchronization of data with the Firefox Cloud server, the resolution of conflicts, the migration from a currently existing database, the authentication part and the remote storage auth management, the encryption and decryption of the data in the client...<br />
===== API =====<br />
== Current status ==<br />
=== Service ===<br />
=== Client ===</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS_Data_Sync&diff=1063891Firefox OS Data Sync2015-03-23T20:10:17Z<p>Swilkes: Added media use case detail</p>
<hr />
<div>= Firefox Cloud =<br />
{{Draft}}<br />
== Overview ==<br />
At a high level, the Firefox Cloud project aims to create a service to allow the creation of rich cloud-enabled web applications that sync their data to a user chosen remote storage.<br />
== The product ==<br />
The product vision is built on top of three major concepts fully aligned with Mozilla's mission.<br />
<br />
* '''User choice'''<br />
Firefox Cloud should offer to users the ability to decide where they want to store their data.<br />
On currently existing platforms users are tied to a specific storage: on iOS people are tied to iCloud, on Android, to Google Drive, etc. We want to give users the ability to choose the cloud storage provider they want. Ideally, we want to also be able to give them the choice to use self hosted storage like ownCloud. But this is still under discussion.<br />
Mozilla might also provide cloud storage space for users as one of these choices, but this is also still to be decided.<br />
<br />
* '''User privacy'''<br />
In order to ensure that the data that the user sends to the cloud is protected and no one else other than the user can read it, the Firefox Cloud client solution should allow users to opt-in to encrypt the data on the client side and store it encrypted on the selected cloud storage provider. Not even Mozilla should be able to read this data or store it unencrypted. All the encryption and decryption should happen on the client side.<br />
<br />
* '''User identity'''<br />
We want to use Firefox Accounts as the authentication mechanism for this service.<br />
Once the user links their chosen cloud storage provider credentials to her Firefox Cloud account, all that she needs to do to authenticate herself from new devices accessing her Firefox Cloud account is her Firefox Accounts credentials.<br />
<br />
=== Use cases ===<br />
==== Messaging application ====<br />
Alice uses her Messaging app to send and receive SMS, MMS and IM. She accesses this application from her Firefox OS tablet, her desktop browser and her Android phone. She can see and manage the history and content of the messages sent and received from any of these devices. She can continue writing an IM that she started typing on her Android phone on her desktop browser app.<br />
<br />
==== Media files ====<br />
Bob uses his Music app to listen to music and audio files. He keeps a library with his preferred titles. He adds new songs from his desktop browser. When he uses his Firefox OS device, he can listen to these new songs if he is online. He can also choose to download them so he can play them offline.<br />
<br />
Alice listens to her favorite knitting podcasts -- Knitting Pipeline and The Knit Girllls -- in her web browser (while knitting beside her laptop during business travel) or via the Apple TV > Podcasts section, when she is at home. Alice can access both podcasts on the Web and in iTunes. She has a Lenovo PC so doesn't really use iTunes outside of Apple TV. When Alice sits down in her plane sit for her next business trip, plugs in her headphones and clicks the play button on the video clip embedded in the podcast's web page, Firefox Cloud asks if she'd like the video to be backed up so she can pick it up anywhere (on her phone, in case her laptop battery dies; on her laptop when it's offline during the flight with alleged but nonexistent Internet service), where she left off.<br />
<br />
==== Backup ====<br />
Alice purchases a new Firefox OS phone (\o/). She already owns a Firefox OS tablet and she wants to have the same experience and data in both devices. She enters her Firefox Accounts credentials while configuring her new device. Her new device installs all the applications that she has on her tablet, the homescreen wallpaper, the passcode for the lockscreen, the notification sounds. When she opens the Gallery app in her new device, she is asked if she wants to access her photo collection from her new device.<br />
<br />
==== File sharing ====<br />
Bob wants to share a file between his desktop and his mobile phone. He accesses dummysharingservice.com, logs in with his Firefox Accounts credentials and uploads the file from his desktop. He goes to his mobile phone and logs in with the same Firefox Accounts email and downloads the file in his mobile.<br />
Now he wants to share the file with Alice. He accesses dummysharingservice.com again and uses the sharing option to send a notification about the shared file to Alice's email. Alice receives this notification and accesses the sharing service. She logs with her Firefox Accounts email and downloads the file shared by Bob.<br />
<br />
==== Email ====<br />
Alice has a Firefox OS device and wants to back up all of her email photo attachments, from multiple email accounts, to Dropbox and Spider Oak. She sees a suggestion for "helpful services" in the email UI, taps it, peruses services, and selects those for Dropbox and Spider Oak. Alice feels safer knowing that every photo she's ever received in an email is automatically backed up. <br />
<br />
After a few months, Alice decides to do the same for document attachments, but only for her work email and to her organization's enterprise Box back-up, which she is required to use as an employee.<br />
<br />
''Note: Francis Djabri and Stephany Wilkes are currently working on this and presented initial designs to the UX team in early March, 2015. Please contact either of them for more information.''<br />
<br />
==== Other use cases ====<br />
* Calendar<br />
* Notes<br />
* Clock alarms<br />
* Contacts<br />
* Radio bookmarks<br />
* Browser data (history, bookmarks, form autocomplete data, requestAutocomplete data, passwords, etc.)<br />
* ...<br />
<br />
== The solution ==<br />
[[File:FirefoxCloudHighLevelArch.png]]<br />
=== Authentication ===<br />
[[Firefox Accounts]] will be the authentication mechanism used by Firefox Cloud.<br />
Using Firefox Accounts should enable us to do the data encryption in the client without worrying about storing any private key or secret in the clients. We can obtain a key derived from the user's Firefox Accounts and encrypt the local data on the fly before sending it to the cloud.<br />
The authentication keys for the remote storages that the user chooses to use will be stored in the Firefox Cloud server also encrypted with a symmetric key that the client will provide on every sync request. That way if the Firefox Cloud server is compromised, the attacker won't get access to the remote storage accounts.<br />
=== Documents vs Files ===<br />
=== Service ===<br />
* https://github.com/mozilla-services/cliquet<br />
* https://github.com/mozilla-services/kinto<br />
=== Client ===<br />
Along with the Firefox Cloud server, we will be providing a reference implementation of a Firefox Cloud client. At a high level, this client will need to address at least the following:<br />
* Consume the Firefox Cloud server exposed HTTP API for storing and fetching data from the cloud.<br />
* Conflict resolution.<br />
* Authentication management.<br />
* Encryption and decryption of data.<br />
We would also like it to fulfill the following requirements:<br />
* '''Offline first.'''<br />
Ideally we should have a solution where consumers can store the data locally first and then specify that the data needs to be synchronized with a given remote endpoint. The app developer shouldn't need to know the underlying details of the sync protocol, and so instead of using the HTTP API exposed by the Firefox Cloud server, we should provide them with an abstraction to request this synchronization in the form of a JS library.<br />
* '''Avoid enforcing another client storage solution.'''<br />
We already have enough storage APIs in the client side at least on Firefox OS to add another one. We don't think it is a good idea to force developers to use another API for remote data synchronization. Instead, we would prefer a solution that allows developers to keep using the API of their current data source (let's say IndexedDB) for adding, editing and removing records and performing searches. While we can provide an easier abstraction of the current APIs (IndexedDB is known for being a powerful but complicated API), we should still allow developers to keep accessing and using them.<br />
* '''Avoid data duplication.'''<br />
One of the issues that we currently have with DataStore is that we potentially create several copies of the same data across Firefox OS. Ideally, we should not require to do the same with the solution that we choose for the client side of this system. So we should either have a solution that allow us to keep using the same data sources that we use currently but somehow adding the sync capabilities to it or a way to migrate the existing data to a new data source with already sync enabled capabilities. We will certainly need to add meta information along with the existing data that we have in our apps, but this data should have an unique source.<br />
* '''It should be cross browser.'''<br />
Whichever solution we find for this, it should work in all browsers. If we end up creating a JS library, we need to be sure that it works (or will work, thinking about [http://caniuse.com/#search=indexeddb IndexedDB support]) in all the major browsers. We believe that we can avoid adding a new web API for this, but in case that we finally need to do it, it would be great if we could standardize it and avoid repeating the DataStore fiasco.<br />
==== Javascript library ====<br />
This is still under discussion, but the current proposal is to create a JS library that exposes a [http://pouchdb.com/ PouchDB] inspired API but also gives a direct access to the underlying data source API by exposing a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy proxified] instance of the used data source (initially limited to IndexedDB). This way the developers should be able to use the new improved API or keep using the specific data source API. This library should handle all the synchronization of data with the Firefox Cloud server, the resolution of conflicts, the migration from a currently existing database, the authentication part and the remote storage auth management, the encryption and decryption of the data in the client...<br />
===== API =====<br />
== Current status ==<br />
=== Service ===<br />
=== Client ===</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS_Data_Sync&diff=1063890Firefox OS Data Sync2015-03-23T20:09:07Z<p>Swilkes: Added media use case</p>
<hr />
<div>= Firefox Cloud =<br />
{{Draft}}<br />
== Overview ==<br />
At a high level, the Firefox Cloud project aims to create a service to allow the creation of rich cloud-enabled web applications that sync their data to a user chosen remote storage.<br />
== The product ==<br />
The product vision is built on top of three major concepts fully aligned with Mozilla's mission.<br />
<br />
* '''User choice'''<br />
Firefox Cloud should offer to users the ability to decide where they want to store their data.<br />
On currently existing platforms users are tied to a specific storage: on iOS people are tied to iCloud, on Android, to Google Drive, etc. We want to give users the ability to choose the cloud storage provider they want. Ideally, we want to also be able to give them the choice to use self hosted storage like ownCloud. But this is still under discussion.<br />
Mozilla might also provide cloud storage space for users as one of these choices, but this is also still to be decided.<br />
<br />
* '''User privacy'''<br />
In order to ensure that the data that the user sends to the cloud is protected and no one else other than the user can read it, the Firefox Cloud client solution should allow users to opt-in to encrypt the data on the client side and store it encrypted on the selected cloud storage provider. Not even Mozilla should be able to read this data or store it unencrypted. All the encryption and decryption should happen on the client side.<br />
<br />
* '''User identity'''<br />
We want to use Firefox Accounts as the authentication mechanism for this service.<br />
Once the user links their chosen cloud storage provider credentials to her Firefox Cloud account, all that she needs to do to authenticate herself from new devices accessing her Firefox Cloud account is her Firefox Accounts credentials.<br />
<br />
=== Use cases ===<br />
==== Messaging application ====<br />
Alice uses her Messaging app to send and receive SMS, MMS and IM. She accesses this application from her Firefox OS tablet, her desktop browser and her Android phone. She can see and manage the history and content of the messages sent and received from any of these devices. She can continue writing an IM that she started typing on her Android phone on her desktop browser app.<br />
<br />
==== Media files ====<br />
Bob uses his Music app to listen to music and audio files. He keeps a library with his preferred titles. He adds new songs from his desktop browser. When he uses his Firefox OS device, he can listen to these new songs if he is online. He can also choose to download them so he can play them offline.<br />
<br />
Alice listens to her favorite knitting podcasts -- Knitting Pipeline and The Knit Girllls -- in her web browser (while knitting beside her laptop during business travel) or via the Apple TV > Podcasts section, when she is at home. Alice can access both podcasts on the Web and in iTunes. She has a Lenovo PC so doesn't really use iTunes outside of Apple TV. When Alice sits down in her plane sit for her next business trip, plugs in her headphones and clicks the play button on the video clip embedded in the podcast's web page, Firefox Cloud asks if she'd like the video to be backed up so she can pick it up anywhere (on her phone, in case her laptop battery dies), where she left off.<br />
<br />
==== Backup ====<br />
Alice purchases a new Firefox OS phone (\o/). She already owns a Firefox OS tablet and she wants to have the same experience and data in both devices. She enters her Firefox Accounts credentials while configuring her new device. Her new device installs all the applications that she has on her tablet, the homescreen wallpaper, the passcode for the lockscreen, the notification sounds. When she opens the Gallery app in her new device, she is asked if she wants to access her photo collection from her new device.<br />
<br />
==== File sharing ====<br />
Bob wants to share a file between his desktop and his mobile phone. He accesses dummysharingservice.com, logs in with his Firefox Accounts credentials and uploads the file from his desktop. He goes to his mobile phone and logs in with the same Firefox Accounts email and downloads the file in his mobile.<br />
Now he wants to share the file with Alice. He accesses dummysharingservice.com again and uses the sharing option to send a notification about the shared file to Alice's email. Alice receives this notification and accesses the sharing service. She logs with her Firefox Accounts email and downloads the file shared by Bob.<br />
<br />
==== Email ====<br />
Alice has a Firefox OS device and wants to back up all of her email photo attachments, from multiple email accounts, to Dropbox and Spider Oak. She sees a suggestion for "helpful services" in the email UI, taps it, peruses services, and selects those for Dropbox and Spider Oak. Alice feels safer knowing that every photo she's ever received in an email is automatically backed up. <br />
<br />
After a few months, Alice decides to do the same for document attachments, but only for her work email and to her organization's enterprise Box back-up, which she is required to use as an employee.<br />
<br />
''Note: Francis Djabri and Stephany Wilkes are currently working on this and presented initial designs to the UX team in early March, 2015. Please contact either of them for more information.''<br />
<br />
==== Other use cases ====<br />
* Calendar<br />
* Notes<br />
* Clock alarms<br />
* Contacts<br />
* Radio bookmarks<br />
* Browser data (history, bookmarks, form autocomplete data, requestAutocomplete data, passwords, etc.)<br />
* ...<br />
<br />
== The solution ==<br />
[[File:FirefoxCloudHighLevelArch.png]]<br />
=== Authentication ===<br />
[[Firefox Accounts]] will be the authentication mechanism used by Firefox Cloud.<br />
Using Firefox Accounts should enable us to do the data encryption in the client without worrying about storing any private key or secret in the clients. We can obtain a key derived from the user's Firefox Accounts and encrypt the local data on the fly before sending it to the cloud.<br />
The authentication keys for the remote storages that the user chooses to use will be stored in the Firefox Cloud server also encrypted with a symmetric key that the client will provide on every sync request. That way if the Firefox Cloud server is compromised, the attacker won't get access to the remote storage accounts.<br />
=== Documents vs Files ===<br />
=== Service ===<br />
* https://github.com/mozilla-services/cliquet<br />
* https://github.com/mozilla-services/kinto<br />
=== Client ===<br />
Along with the Firefox Cloud server, we will be providing a reference implementation of a Firefox Cloud client. At a high level, this client will need to address at least the following:<br />
* Consume the Firefox Cloud server exposed HTTP API for storing and fetching data from the cloud.<br />
* Conflict resolution.<br />
* Authentication management.<br />
* Encryption and decryption of data.<br />
We would also like it to fulfill the following requirements:<br />
* '''Offline first.'''<br />
Ideally we should have a solution where consumers can store the data locally first and then specify that the data needs to be synchronized with a given remote endpoint. The app developer shouldn't need to know the underlying details of the sync protocol, and so instead of using the HTTP API exposed by the Firefox Cloud server, we should provide them with an abstraction to request this synchronization in the form of a JS library.<br />
* '''Avoid enforcing another client storage solution.'''<br />
We already have enough storage APIs in the client side at least on Firefox OS to add another one. We don't think it is a good idea to force developers to use another API for remote data synchronization. Instead, we would prefer a solution that allows developers to keep using the API of their current data source (let's say IndexedDB) for adding, editing and removing records and performing searches. While we can provide an easier abstraction of the current APIs (IndexedDB is known for being a powerful but complicated API), we should still allow developers to keep accessing and using them.<br />
* '''Avoid data duplication.'''<br />
One of the issues that we currently have with DataStore is that we potentially create several copies of the same data across Firefox OS. Ideally, we should not require to do the same with the solution that we choose for the client side of this system. So we should either have a solution that allow us to keep using the same data sources that we use currently but somehow adding the sync capabilities to it or a way to migrate the existing data to a new data source with already sync enabled capabilities. We will certainly need to add meta information along with the existing data that we have in our apps, but this data should have an unique source.<br />
* '''It should be cross browser.'''<br />
Whichever solution we find for this, it should work in all browsers. If we end up creating a JS library, we need to be sure that it works (or will work, thinking about [http://caniuse.com/#search=indexeddb IndexedDB support]) in all the major browsers. We believe that we can avoid adding a new web API for this, but in case that we finally need to do it, it would be great if we could standardize it and avoid repeating the DataStore fiasco.<br />
==== Javascript library ====<br />
This is still under discussion, but the current proposal is to create a JS library that exposes a [http://pouchdb.com/ PouchDB] inspired API but also gives a direct access to the underlying data source API by exposing a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy proxified] instance of the used data source (initially limited to IndexedDB). This way the developers should be able to use the new improved API or keep using the specific data source API. This library should handle all the synchronization of data with the Firefox Cloud server, the resolution of conflicts, the migration from a currently existing database, the authentication part and the remote storage auth management, the encryption and decryption of the data in the client...<br />
===== API =====<br />
== Current status ==<br />
=== Service ===<br />
=== Client ===</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS_Data_Sync&diff=1063888Firefox OS Data Sync2015-03-23T19:56:21Z<p>Swilkes: Added email use case</p>
<hr />
<div>= Firefox Cloud =<br />
{{Draft}}<br />
== Overview ==<br />
At a high level, the Firefox Cloud project aims to create a service to allow the creation of rich cloud-enabled web applications that sync their data to a user chosen remote storage.<br />
== The product ==<br />
The product vision is built on top of three major concepts fully aligned with Mozilla's mission.<br />
<br />
* '''User choice'''<br />
Firefox Cloud should offer to users the ability to decide where they want to store their data.<br />
On currently existing platforms users are tied to a specific storage: on iOS people are tied to iCloud, on Android, to Google Drive, etc. We want to give users the ability to choose the cloud storage provider they want. Ideally, we want to also be able to give them the choice to use self hosted storage like ownCloud. But this is still under discussion.<br />
Mozilla might also provide cloud storage space for users as one of these choices, but this is also still to be decided.<br />
<br />
* '''User privacy'''<br />
In order to ensure that the data that the user sends to the cloud is protected and no one else other than the user can read it, the Firefox Cloud client solution should allow users to opt-in to encrypt the data on the client side and store it encrypted on the selected cloud storage provider. Not even Mozilla should be able to read this data or store it unencrypted. All the encryption and decryption should happen on the client side.<br />
<br />
* '''User identity'''<br />
We want to use Firefox Accounts as the authentication mechanism for this service.<br />
Once the user links their chosen cloud storage provider credentials to her Firefox Cloud account, all that she needs to do to authenticate herself from new devices accessing her Firefox Cloud account is her Firefox Accounts credentials.<br />
<br />
=== Use cases ===<br />
==== Messaging application ====<br />
Alice uses her Messaging app to send and receive SMS, MMS and IM. She accesses this application from her Firefox OS tablet, her desktop browser and her Android phone. She can see and manage the history and content of the messages sent and received from any of these devices. She can continue writing an IM that she started typing on her Android phone on her desktop browser app.<br />
<br />
==== Media files ====<br />
Bob uses his Music app to listen to music and audio files. He keeps a library with his preferred titles. He adds new songs from his desktop browser. When he uses his Firefox OS device, he can listen to these new songs if he is online. He can also choose to download them so he can play them offline.<br />
<br />
==== Backup ====<br />
Alice purchases a new Firefox OS phone (\o/). She already owns a Firefox OS tablet and she wants to have the same experience and data in both devices. She enters her Firefox Accounts credentials while configuring her new device. Her new device installs all the applications that she has on her tablet, the homescreen wallpaper, the passcode for the lockscreen, the notification sounds. When she opens the Gallery app in her new device, she is asked if she wants to access her photo collection from her new device.<br />
<br />
==== File sharing ====<br />
Bob wants to share a file between his desktop and his mobile phone. He accesses dummysharingservice.com, logs in with his Firefox Accounts credentials and uploads the file from his desktop. He goes to his mobile phone and logs in with the same Firefox Accounts email and downloads the file in his mobile.<br />
Now he wants to share the file with Alice. He accesses dummysharingservice.com again and uses the sharing option to send a notification about the shared file to Alice's email. Alice receives this notification and accesses the sharing service. She logs with her Firefox Accounts email and downloads the file shared by Bob.<br />
<br />
==== Email ====<br />
Alice has a Firefox OS device and wants to back up all of her email photo attachments, from multiple email accounts, to Dropbox and Spider Oak. She sees a suggestion for "helpful services" in the email UI, taps it, peruses services, and selects those for Dropbox and Spider Oak. Alice feels safer knowing that every photo she's ever received in an email is automatically backed up. <br />
<br />
After a few months, Alice decides to do the same for document attachments, but only for her work email and to her organization's enterprise Box back-up, which she is required to use as an employee.<br />
<br />
''Note: Francis Djabri and Stephany Wilkes are currently working on this and presented initial designs to the UX team in early March, 2015. Please contact either of them for more information.''<br />
<br />
==== Other use cases ====<br />
* Calendar<br />
* Notes<br />
* Clock alarms<br />
* Contacts<br />
* Radio bookmarks<br />
* Browser data (history, bookmarks, form autocomplete data, requestAutocomplete data, passwords, etc.)<br />
* ...<br />
<br />
== The solution ==<br />
[[File:FirefoxCloudHighLevelArch.png]]<br />
=== Authentication ===<br />
[[Firefox Accounts]] will be the authentication mechanism used by Firefox Cloud.<br />
Using Firefox Accounts should enable us to do the data encryption in the client without worrying about storing any private key or secret in the clients. We can obtain a key derived from the user's Firefox Accounts and encrypt the local data on the fly before sending it to the cloud.<br />
The authentication keys for the remote storages that the user chooses to use will be stored in the Firefox Cloud server also encrypted with a symmetric key that the client will provide on every sync request. That way if the Firefox Cloud server is compromised, the attacker won't get access to the remote storage accounts.<br />
=== Documents vs Files ===<br />
=== Service ===<br />
* https://github.com/mozilla-services/cliquet<br />
* https://github.com/mozilla-services/kinto<br />
=== Client ===<br />
Along with the Firefox Cloud server, we will be providing a reference implementation of a Firefox Cloud client. At a high level, this client will need to address at least the following:<br />
* Consume the Firefox Cloud server exposed HTTP API for storing and fetching data from the cloud.<br />
* Conflict resolution.<br />
* Authentication management.<br />
* Encryption and decryption of data.<br />
We would also like it to fulfill the following requirements:<br />
* '''Offline first.'''<br />
Ideally we should have a solution where consumers can store the data locally first and then specify that the data needs to be synchronized with a given remote endpoint. The app developer shouldn't need to know the underlying details of the sync protocol, and so instead of using the HTTP API exposed by the Firefox Cloud server, we should provide them with an abstraction to request this synchronization in the form of a JS library.<br />
* '''Avoid enforcing another client storage solution.'''<br />
We already have enough storage APIs in the client side at least on Firefox OS to add another one. We don't think it is a good idea to force developers to use another API for remote data synchronization. Instead, we would prefer a solution that allows developers to keep using the API of their current data source (let's say IndexedDB) for adding, editing and removing records and performing searches. While we can provide an easier abstraction of the current APIs (IndexedDB is known for being a powerful but complicated API), we should still allow developers to keep accessing and using them.<br />
* '''Avoid data duplication.'''<br />
One of the issues that we currently have with DataStore is that we potentially create several copies of the same data across Firefox OS. Ideally, we should not require to do the same with the solution that we choose for the client side of this system. So we should either have a solution that allow us to keep using the same data sources that we use currently but somehow adding the sync capabilities to it or a way to migrate the existing data to a new data source with already sync enabled capabilities. We will certainly need to add meta information along with the existing data that we have in our apps, but this data should have an unique source.<br />
* '''It should be cross browser.'''<br />
Whichever solution we find for this, it should work in all browsers. If we end up creating a JS library, we need to be sure that it works (or will work, thinking about [http://caniuse.com/#search=indexeddb IndexedDB support]) in all the major browsers. We believe that we can avoid adding a new web API for this, but in case that we finally need to do it, it would be great if we could standardize it and avoid repeating the DataStore fiasco.<br />
==== Javascript library ====<br />
This is still under discussion, but the current proposal is to create a JS library that exposes a [http://pouchdb.com/ PouchDB] inspired API but also gives a direct access to the underlying data source API by exposing a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy proxified] instance of the used data source (initially limited to IndexedDB). This way the developers should be able to use the new improved API or keep using the specific data source API. This library should handle all the synchronization of data with the Firefox Cloud server, the resolution of conflicts, the migration from a currently existing database, the authentication part and the remote storage auth management, the encryption and decryption of the data in the client...<br />
===== API =====<br />
== Current status ==<br />
=== Service ===<br />
=== Client ===</div>Swilkeshttps://wiki.mozilla.org/index.php?title=User:Chianger/draft-bugzilla_flag&diff=1059704User:Chianger/draft-bugzilla flag2015-03-04T16:59:19Z<p>Swilkes: Formatting fixes</p>
<hr />
<div><br />
===blocking-b2g Flag===<br />
'''Definition'''<br />
* blocking-b2g:version#? is nomination as blocker for the specific version.<br />
* blocking-b2g:version#+ indicates as release blocker for the specific version. Decisions are made during triage process.<br />
* blocking-b2g:--- (default flag. indicating undefined) <br />
* blocking-b2g:- (meaning non-blocking to any release) <br />
<br />
'''Note'''<br />
* Triage guideline https://wiki.mozilla.org/B2G/Triage#Blocker_Triage_Guidelines<br />
<br />
===feature-b2g Flag===<br />
'''Definition'''<br />
* feature-b2g:version#? is defined as "this feature is being proposed for this release"<br />
* feature-b2g:version#+ is define as "this feature has been committed or done (by the engineering team(s)) for this release"<br />
* feature-b2g:--- (default flag. indicating undefined) <br />
* feature-b2g:- (meaning not a committed feature to any release) <br />
'''Note'''<br />
* [meta] bugs features and all dependencies targeted for a particular release should mark feature-b2g flag.<br />
* The feature-b2g flag should assigned to engineering tasks falling under the user stories AND the user stories themselves.<br />
* Who has the permission? PM and EPM, engineer managers and partner peers have the access<br />
<br />
===tracking-b2g Flag===<br />
'''Definition'''<br />
* The teams need such a bucket to track backlog items apart from blocking-b2g and feature-b2g. <br />
* Attributes, sorted in priority<br />
** tracking-b2g:+ is the TopX item in the backlog<br />
** tracking-b2g:backlog is the regular backlog item<br />
** tracking-b2g:--- (default flag. indicating undefined)<br />
** tracking-b2g:- (lowest priority)<br />
<br />
'''Note'''<br />
* Permission? Everyone in the team should be able to set such flag. We're encouraging the backlog grooming to happen frequently and can be presented by using tracking-b2g flag.<br />
* We don't specify version# because supposedly these are neither release blockers nor feature blockers.<br />
<br />
===ux-b2g Flag===<br />
'''Definition'''<br />
* Marks UX bugs required for a front-end feature (usually OS-wide) to work properly.<br />
* Distinguishes polish and non-blocking UX bugs from blocking UX bugs.<br />
<br />
'''Rationale and History''' <br />
<br />
The ux-b2g flag was created during the 2.0 release, which was a "UX heavy release:" 2.0 included a lot of UX changes to gestures, animations, the home screen, and so on. This meant that there were numerous OS-wide features -- like the thin, pale blue notifications bar, for example -- that needed to block 2.0+, and that required many UX bugs to be completed (graphics, transitions, animations). Each of these UX bugs needed to block 2.0+ if the finished, front-end feature was to look and behave properly across the OS. The ux-b2g flag was added when these "smaller" bugs were incorrectly marked as "polish," and were actually needed in order for a feature to work. <br />
<br />
'''Note'''<br />
<br />
Only members of the Firefox OS UX team and Release Management should set the ux-b2g flag.</div>Swilkeshttps://wiki.mozilla.org/index.php?title=User:Chianger/draft-bugzilla_flag&diff=1059703User:Chianger/draft-bugzilla flag2015-03-04T16:58:47Z<p>Swilkes: All about the ux-b2g flag</p>
<hr />
<div><br />
===blocking-b2g Flag===<br />
'''Definition'''<br />
* blocking-b2g:version#? is nomination as blocker for the specific version.<br />
* blocking-b2g:version#+ indicates as release blocker for the specific version. Decisions are made during triage process.<br />
* blocking-b2g:--- (default flag. indicating undefined) <br />
* blocking-b2g:- (meaning non-blocking to any release) <br />
<br />
'''Note'''<br />
* Triage guideline https://wiki.mozilla.org/B2G/Triage#Blocker_Triage_Guidelines<br />
<br />
===feature-b2g Flag===<br />
'''Definition'''<br />
* feature-b2g:version#? is defined as "this feature is being proposed for this release"<br />
* feature-b2g:version#+ is define as "this feature has been committed or done (by the engineering team(s)) for this release"<br />
* feature-b2g:--- (default flag. indicating undefined) <br />
* feature-b2g:- (meaning not a committed feature to any release) <br />
'''Note'''<br />
* [meta] bugs features and all dependencies targeted for a particular release should mark feature-b2g flag.<br />
* The feature-b2g flag should assigned to engineering tasks falling under the user stories AND the user stories themselves.<br />
* Who has the permission? PM and EPM, engineer managers and partner peers have the access<br />
<br />
===tracking-b2g Flag===<br />
'''Definition'''<br />
* The teams need such a bucket to track backlog items apart from blocking-b2g and feature-b2g. <br />
* Attributes, sorted in priority<br />
** tracking-b2g:+ is the TopX item in the backlog<br />
** tracking-b2g:backlog is the regular backlog item<br />
** tracking-b2g:--- (default flag. indicating undefined)<br />
** tracking-b2g:- (lowest priority)<br />
<br />
'''Note'''<br />
* Permission? Everyone in the team should be able to set such flag. We're encouraging the backlog grooming to happen frequently and can be presented by using tracking-b2g flag.<br />
* We don't specify version# because supposedly these are neither release blockers nor feature blockers.<br />
<br />
===ux-b2g Flag===<br />
'''Definition'''<br />
* Bulleted list item<br />
Marks UX bugs required for a front-end feature (usually OS-wide) to work properly.<br />
* Bulleted list item<br />
Distinguishes polish and non-blocking UX bugs from blocking UX bugs.<br />
<br />
'''Rationale and History''' <br />
<br />
The ux-b2g flag was created during the 2.0 release, which was a "UX heavy release:" 2.0 included a lot of UX changes to gestures, animations, the home screen, and so on. This meant that there were numerous OS-wide features -- like the thin, pale blue notifications bar, for example -- that needed to block 2.0+, and that required many UX bugs to be completed (graphics, transitions, animations). Each of these UX bugs needed to block 2.0+ if the finished, front-end feature was to look and behave properly across the OS. The ux-b2g flag was added when these "smaller" bugs were incorrectly marked as "polish," and were actually needed in order for a feature to work. <br />
<br />
'''Note'''<br />
Only members of the Firefox OS UX team and Release Management should set the ux-b2g flag.</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1055852Firefox OS/UX2015-02-12T21:58:48Z<p>Swilkes: Added link to Design section on MDN.</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This wiki is not the best resource for Firefox OS design documentation, UX specs and patterns, and so on. For that, [https://developer.mozilla.org/en-US/Apps/Design please visit the Design section on the Mozilla Developer Network (MDN) site]. <br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* Canonical [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo spec for Arabic support in 2.2].<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-03-09: L10N String Freeze (tentative)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo Arabic language UX pattern and specification]<br />
* Meta bug for bidi language support: https://bugzilla.mozilla.org/show_bug.cgi?id=gaia-rtl<br />
<br />
=Web Components=<br />
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks Building Blocks] reflect OS-wide UX patterns and styles, and will take the form of [http://webcomponents.org/ Web Components] as of 2.3. Building Blocks + Web Components = "Common Controls" in Mozilla parlance.<br />
<br />
* 2.3 (beginning April 2015) Common Controls reference document: https://mozilla.box.com/s/aa8tu5rf5gwpgdr00u79<br />
<br />
* Github: https://github.com/gaia-components<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"whiteboard":"ux-most-wanted-nov2014",<br />
"include_fields": "id, summary, status, assigned_to, blocks, whiteboard"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1055850Firefox OS/UX2015-02-12T21:57:01Z<p>Swilkes: Updated link from directory to file</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* Canonical [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo spec for Arabic support in 2.2].<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-03-09: L10N String Freeze (tentative)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo Arabic language UX pattern and specification]<br />
* Meta bug for bidi language support: https://bugzilla.mozilla.org/show_bug.cgi?id=gaia-rtl<br />
<br />
=Web Components=<br />
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks Building Blocks] reflect OS-wide UX patterns and styles, and will take the form of [http://webcomponents.org/ Web Components] as of 2.3. Building Blocks + Web Components = "Common Controls" in Mozilla parlance.<br />
<br />
* 2.3 (beginning April 2015) Common Controls reference document: https://mozilla.box.com/s/aa8tu5rf5gwpgdr00u79<br />
<br />
* Github: https://github.com/gaia-components<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"whiteboard":"ux-most-wanted-nov2014",<br />
"include_fields": "id, summary, status, assigned_to, blocks, whiteboard"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1055849Firefox OS/UX2015-02-12T21:55:53Z<p>Swilkes: Changed link from all 2.2 specs to a link to Arabic spec only.</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* Canonical [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo spec for Arabic support in 2.2].<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-03-09: L10N String Freeze (tentative)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
* Meta bug for bidi language support: https://bugzilla.mozilla.org/show_bug.cgi?id=gaia-rtl<br />
<br />
=Web Components=<br />
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks Building Blocks] reflect OS-wide UX patterns and styles, and will take the form of [http://webcomponents.org/ Web Components] as of 2.3. Building Blocks + Web Components = "Common Controls" in Mozilla parlance.<br />
<br />
* 2.3 (beginning April 2015) Common Controls reference document: https://mozilla.box.com/s/aa8tu5rf5gwpgdr00u79<br />
<br />
* Github: https://github.com/gaia-components<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"whiteboard":"ux-most-wanted-nov2014",<br />
"include_fields": "id, summary, status, assigned_to, blocks, whiteboard"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=L10n:B2G/RTL&diff=1055819L10n:B2G/RTL2015-02-12T18:54:09Z<p>Swilkes: More edits to not pay attention to this for Firefox OS work. Very confusing and causing a lot of questions to come in.</p>
<hr />
<div><br />
=== Other Valuable References ===<br />
<br />
The tracking bug is {{bug|906270}}. You can also type "gaia-rtl" as a shortcut to access this bug. All RTL bugs filed must be set to block either this bug, or one of the child META bugs for app-specific RTL support. <br />
<br />
See the [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo 2.2 UX Specification].<br />
<br />
[https://groups.google.com/forum/#!msg/mozilla.dev.gaia/GzIIlTUKvAg/8kTAE3nYuXgJ Great "How To" guide] written by Julien Wajsberg<br />
<br />
How to test your app in English text that allows you to spot problems using Stas's [http://informationisart.com/27/ Pseudolocales for Firefox OS testing tools]<br />
* Please note that tests must be conducted with the phone set to Arabic as well, even if you do not read or speak Arabic. Pseudolocales is an excellent start but is not exhaustive. <br />
<br />
Developer Resources for [https://developer.mozilla.org/en-US/Apps/Build/Localization/Developing_Bidi_Apps Writing Bi Directional Enabled Code] are on developer.mozilla.org<br />
<br />
Product planning/tracking docs at https://wiki.mozilla.org/RTL<br />
<br />
===Platform===<br />
<br />
Things related to the Unicode Bidirectional Algorithm, which is implemented in Gecko. By leveraging the existing platforms which conform to the W3C standards we make sure to minimize the risk of running into problems in this category. Bugs that go into this category should block the tracking bug and have <code>[rtl-platform]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321768&columnlist=bug_severity%2Cpriority%2Cbug_status%2Cassigned_to%2Cshort_desc%2Cstatus_whiteboard&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-platform&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UI development===<br />
<br />
Things related to the code responsible for showing the UI to the user. They are mostly due to a developer hardcoding an LTR layout in the source code, e.g. when specifying the position of an icon in relation to the text label. Ideally, developers would take advantage of the Bidi Algorithm to achieve correct positioning for all languages, but this is sadly not always the case and is source of bugs for us to fix. Bugs that go into this category are the most common ones; they should block the tracking bug and don't need any special whiteboard tags: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321831&o1=substring&resolution=---&status_whiteboard_type=notregexp&query_format=advanced&status_whiteboard=rtl&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UX design===<br />
<br />
Last but not least, we're seeing a need in more bidi education for our UX designs. This is particularly interesting in touch interfaces which rely on spatial metaphors and finger gestures, like swiping. <br />
Bugs that go into this category should block the tracking bug and have <code>[rtl-design]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321813&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-design&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
The sections below are not exhaustive or accurate in all cases, for all apps, for 2.2. Please do not rely on this wiki, but be sure to reference [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo the 2.2 specification for Arabic support]. <br />
<br />
====Spatial metaphors====<br />
* Progress Indicators (The list on this wiki page is NOT complete. Please see [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 15 of the spec for complete behavior)]:<br />
** In FTU the progress indicator slides towards the right edge of the screen,<br />
** For 2.2, the back button is ALWAYS on the left and the next button is on the right,<br />
** The history of navigation (Haida model) is represented as sheets on a LTR timeline, and does not change for 2.2.<br />
** subpanels slide in from the right edge of the screen<br />
* learn more, expand, start:<br />
** in FTU, the image inviting user to start the tour is a hand with the index finger pointing right,<br />
** indicator arrows on dropboxes are always on the right<br />
* number progression:<br />
** in the Radio FM app, the frequencies increase from left to right<br />
** in the Calendar app, months are arranged from left to right<br />
* sidebars<br />
** in the Calendar app, the settings sidebar is always on the left<br />
<br />
====Finger gestures====<br />
Most animations and gestures will not change for the 2.2 release.<br />
* Swipe to dismiss notification does not change for 2.2 and works LTR.<br />
* [x] and [<] to close should be consistently on one side; right now it depends on the app (as noted in the pattern)<br />
* Scrollbar behavior is noted on [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 16 of the 2.2 spec].<br />
* Currently the swipe to unlock is always to the right, [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo as noted on page 6 of the spec].<br />
* Behavior for check boxes is [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo described on pages 18 and 19 of the spec].<br />
<br />
===Performance===<br />
Currently each app is responsible for setting the lang and dir attributes on the html element. This happens only after the 'localized' event is emitted, which is usually after the firstPaint event. This results in a jarring experience for the RTL users, as the entire content jumps from left to right a few hundred milliseconds after the launch of the app.<br />
<br />
* The refactor of l10n.js ({{bug|914414}}) will fix this by setting dir and lang early on during the launch.<br />
<br />
===Competitive analysis===<br />
<br />
Other mobile operating systems have recently improved their support for RTL languages.<br />
<br />
====Android====<br />
Android behavior should not be taken into consideration as a reference for expected RTL behavior in Firefox OS. There are many things Android does not do correctly, as noted in our work with the Unicode Standards Committee for Bidi Language support. The information in this section does not pertain to the 2.2 Firefox OS release in any capacity, but is supplementary.<br />
<br />
Starting with version 4.2 (25% penetration as of Jan 8, 2014; [http://developer.android.com/about/dashboards/index.html source]), Android has native support for RTL layout: http://android-developers.blogspot.com/2013/03/native-rtl-support-in-android-42.html. Things to note:<br />
<br />
* checkbox states: reversed (ON is on the left)<br />
* scrollbars: on the left<br />
* scrollable letter index in long lists: on the right<br />
* ordering of app icons in the apps menu: reversed<br />
* time and notification icons: reversed<br />
* apps vs widgets: reversed<br />
* back arrow (software) points to the right<br />
* timelines: reversed<br />
* calendar: next week is to the right; months are displayed vertically<br />
* progress bars in the browser: not reversed<br />
* sidebars, subpanels: reversed<br />
* swipe to unlock: you can swipe in any direction, but the icon indicating unlocking is not reversed<br />
<br />
Prior versions don't support RTL layout at all. The text is rendered RTL, but the layout remains LTR.<br />
<br />
====iOS====<br />
iOS behavior should not be taken into consideration as a reference for expected RTL behavior in Firefox OS. There are many things iOS does not do correctly, as noted in our work with the Unicode Standards Committee for Bidi Language support. The information in this section does not pertain to the 2.2 Firefox OS release in any capacity, but is supplementary.<br />
<br />
Tested on iPad with iOS 7<br />
<br />
* checkbox states: NOT reversed: off [o ], on [ o]<br />
* scrollbars: NOT reversed<br />
* ordering of workspaces on the homescreen: NOT reversed<br />
* time and icons in the notification bar: NOT reversed<br />
* back arrow: NOT reversed<br />
* calendar: week view LTR, month view vertical<br />
* progression: NOT reversed<br />
* sidebars; subpanels: NOT reversed<br />
* swipe to unlock: NOT reversed<br />
* labels: text always aligned to the left<br />
** in many places text is aligned to the left<br />
* dialogs: 'confirm' button always on the right<br />
* text inputs: reversed, exception: Safari<br />
* timer: X minutes Y seconds, always in that order, only the words 'minutes' and 'seconds' are RTL<br />
<br />
====Windows Phone 8====<br />
Windows Phone 8 behavior should not be taken into consideration as a reference for expected RTL behavior in Firefox OS. There are many things Windows Phone 8 does not do correctly, as noted in our work with the Unicode Standards Committee for Bidi Language support. The information in this section does not pertain to the 2.2 Firefox OS release in any capacity, but is supplementary.<br />
<br />
* changing the language requires restart<br />
* checkbox states:reversed<br />
* setting icons (e.g. wifi): not reversed<br />
* scrollbars: on the left; IE is an exception (content scrollbar on the right)<br />
* ordering of app icons in the apps menu: vertical<br />
* time and icons on the notification bar: reversed<br />
* back arrow: hardware, not reversed<br />
* timelines: reversed<br />
* month switching in the calendar: vertical<br />
* progress bars: reversed<br />
* sidebars; subpanels: reversed<br />
* swipe to unlock: vertical</div>Swilkeshttps://wiki.mozilla.org/index.php?title=L10n:B2G/RTL&diff=1055818L10n:B2G/RTL2015-02-12T18:52:40Z<p>Swilkes: Clarifying not to emulate iOS in any way.</p>
<hr />
<div><br />
=== Other Valuable References ===<br />
<br />
The tracking bug is {{bug|906270}}. You can also type "gaia-rtl" as a shortcut to access this bug. All RTL bugs filed must be set to block either this bug, or one of the child META bugs for app-specific RTL support. <br />
<br />
See the [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo 2.2 UX Specification].<br />
<br />
[https://groups.google.com/forum/#!msg/mozilla.dev.gaia/GzIIlTUKvAg/8kTAE3nYuXgJ Great "How To" guide] written by Julien Wajsberg<br />
<br />
How to test your app in English text that allows you to spot problems using Stas's [http://informationisart.com/27/ Pseudolocales for Firefox OS testing tools]<br />
* Please note that tests must be conducted with the phone set to Arabic as well, even if you do not read or speak Arabic. Pseudolocales is an excellent start but is not exhaustive. <br />
<br />
Developer Resources for [https://developer.mozilla.org/en-US/Apps/Build/Localization/Developing_Bidi_Apps Writing Bi Directional Enabled Code] are on developer.mozilla.org<br />
<br />
Product planning/tracking docs at https://wiki.mozilla.org/RTL<br />
<br />
===Platform===<br />
<br />
Things related to the Unicode Bidirectional Algorithm, which is implemented in Gecko. By leveraging the existing platforms which conform to the W3C standards we make sure to minimize the risk of running into problems in this category. Bugs that go into this category should block the tracking bug and have <code>[rtl-platform]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321768&columnlist=bug_severity%2Cpriority%2Cbug_status%2Cassigned_to%2Cshort_desc%2Cstatus_whiteboard&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-platform&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UI development===<br />
<br />
Things related to the code responsible for showing the UI to the user. They are mostly due to a developer hardcoding an LTR layout in the source code, e.g. when specifying the position of an icon in relation to the text label. Ideally, developers would take advantage of the Bidi Algorithm to achieve correct positioning for all languages, but this is sadly not always the case and is source of bugs for us to fix. Bugs that go into this category are the most common ones; they should block the tracking bug and don't need any special whiteboard tags: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321831&o1=substring&resolution=---&status_whiteboard_type=notregexp&query_format=advanced&status_whiteboard=rtl&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UX design===<br />
<br />
Last but not least, we're seeing a need in more bidi education for our UX designs. This is particularly interesting in touch interfaces which rely on spatial metaphors and finger gestures, like swiping. <br />
Bugs that go into this category should block the tracking bug and have <code>[rtl-design]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321813&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-design&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
The sections below are not exhaustive or accurate in all cases, for all apps, for 2.2. Please do not rely on this wiki, but be sure to reference [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo the 2.2 specification for Arabic support]. <br />
<br />
====Spatial metaphors====<br />
* Progress Indicators (The list on this wiki page is NOT complete. Please see [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 15 of the spec for complete behavior)]:<br />
** In FTU the progress indicator slides towards the right edge of the screen,<br />
** For 2.2, the back button is ALWAYS on the left and the next button is on the right,<br />
** The history of navigation (Haida model) is represented as sheets on a LTR timeline, and does not change for 2.2.<br />
** subpanels slide in from the right edge of the screen<br />
* learn more, expand, start:<br />
** in FTU, the image inviting user to start the tour is a hand with the index finger pointing right,<br />
** indicator arrows on dropboxes are always on the right<br />
* number progression:<br />
** in the Radio FM app, the frequencies increase from left to right<br />
** in the Calendar app, months are arranged from left to right<br />
* sidebars<br />
** in the Calendar app, the settings sidebar is always on the left<br />
<br />
====Finger gestures====<br />
Most animations and gestures will not change for the 2.2 release.<br />
* Swipe to dismiss notification does not change for 2.2 and works LTR.<br />
* [x] and [<] to close should be consistently on one side; right now it depends on the app (as noted in the pattern)<br />
* Scrollbar behavior is noted on [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 16 of the 2.2 spec].<br />
* Currently the swipe to unlock is always to the right, [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo as noted on page 6 of the spec].<br />
* Behavior for check boxes is [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo described on pages 18 and 19 of the spec].<br />
<br />
===Performance===<br />
Currently each app is responsible for setting the lang and dir attributes on the html element. This happens only after the 'localized' event is emitted, which is usually after the firstPaint event. This results in a jarring experience for the RTL users, as the entire content jumps from left to right a few hundred milliseconds after the launch of the app.<br />
<br />
* The refactor of l10n.js ({{bug|914414}}) will fix this by setting dir and lang early on during the launch.<br />
<br />
===Competitive analysis===<br />
<br />
Other mobile operating systems have recently improved their support for RTL languages.<br />
<br />
====Android====<br />
Android behavior should not be taken into consideration as a reference for expected RTL behavior in Firefox OS. There are many things Android does not do correctly, as noted in our work with the Unicode Standards Committee for Bidi Language support. The information in this section does not pertain to the 2.2 Firefox OS release in any capacity, but is supplementary.<br />
<br />
Starting with version 4.2 (25% penetration as of Jan 8, 2014; [http://developer.android.com/about/dashboards/index.html source]), Android has native support for RTL layout: http://android-developers.blogspot.com/2013/03/native-rtl-support-in-android-42.html. Things to note:<br />
<br />
* checkbox states: reversed (ON is on the left)<br />
* scrollbars: on the left<br />
* scrollable letter index in long lists: on the right<br />
* ordering of app icons in the apps menu: reversed<br />
* time and notification icons: reversed<br />
* apps vs widgets: reversed<br />
* back arrow (software) points to the right<br />
* timelines: reversed<br />
* calendar: next week is to the right; months are displayed vertically<br />
* progress bars in the browser: not reversed<br />
* sidebars, subpanels: reversed<br />
* swipe to unlock: you can swipe in any direction, but the icon indicating unlocking is not reversed<br />
<br />
Prior versions don't support RTL layout at all. The text is rendered RTL, but the layout remains LTR.<br />
<br />
====iOS====<br />
iOS behavior should not be taken into consideration as a reference for expected RTL behavior in Firefox OS. There are many things iOS does not do correctly, as noted in our work with the Unicode Standards Committee for Bidi Language support. The information in this section does not pertain to the 2.2 Firefox OS release in any capacity, but is supplementary.<br />
<br />
Tested on iPad with iOS 7<br />
<br />
* checkbox states: NOT reversed: off [o ], on [ o]<br />
* scrollbars: NOT reversed<br />
* ordering of workspaces on the homescreen: NOT reversed<br />
* time and icons in the notification bar: NOT reversed<br />
* back arrow: NOT reversed<br />
* calendar: week view LTR, month view vertical<br />
* progression: NOT reversed<br />
* sidebars; subpanels: NOT reversed<br />
* swipe to unlock: NOT reversed<br />
* labels: text always aligned to the left<br />
** in many places text is aligned to the left<br />
* dialogs: 'confirm' button always on the right<br />
* text inputs: reversed, exception: Safari<br />
* timer: X minutes Y seconds, always in that order, only the words 'minutes' and 'seconds' are RTL<br />
<br />
====Windows Phone 8====<br />
<br />
* changing the language requires restart<br />
* checkbox states:reversed<br />
* setting icons (e.g. wifi): not reversed<br />
* scrollbars: on the left; IE is an exception (content scrollbar on the right)<br />
* ordering of app icons in the apps menu: vertical<br />
* time and icons on the notification bar: reversed<br />
* back arrow: hardware, not reversed<br />
* timelines: reversed<br />
* month switching in the calendar: vertical<br />
* progress bars: reversed<br />
* sidebars; subpanels: reversed<br />
* swipe to unlock: vertical</div>Swilkeshttps://wiki.mozilla.org/index.php?title=L10n:B2G/RTL&diff=1055817L10n:B2G/RTL2015-02-12T18:51:47Z<p>Swilkes: Clarification that Android behavior is not necessarily something we want to emulate in Firefox OS and that it should not be used as a reference for 2.2.</p>
<hr />
<div><br />
=== Other Valuable References ===<br />
<br />
The tracking bug is {{bug|906270}}. You can also type "gaia-rtl" as a shortcut to access this bug. All RTL bugs filed must be set to block either this bug, or one of the child META bugs for app-specific RTL support. <br />
<br />
See the [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo 2.2 UX Specification].<br />
<br />
[https://groups.google.com/forum/#!msg/mozilla.dev.gaia/GzIIlTUKvAg/8kTAE3nYuXgJ Great "How To" guide] written by Julien Wajsberg<br />
<br />
How to test your app in English text that allows you to spot problems using Stas's [http://informationisart.com/27/ Pseudolocales for Firefox OS testing tools]<br />
* Please note that tests must be conducted with the phone set to Arabic as well, even if you do not read or speak Arabic. Pseudolocales is an excellent start but is not exhaustive. <br />
<br />
Developer Resources for [https://developer.mozilla.org/en-US/Apps/Build/Localization/Developing_Bidi_Apps Writing Bi Directional Enabled Code] are on developer.mozilla.org<br />
<br />
Product planning/tracking docs at https://wiki.mozilla.org/RTL<br />
<br />
===Platform===<br />
<br />
Things related to the Unicode Bidirectional Algorithm, which is implemented in Gecko. By leveraging the existing platforms which conform to the W3C standards we make sure to minimize the risk of running into problems in this category. Bugs that go into this category should block the tracking bug and have <code>[rtl-platform]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321768&columnlist=bug_severity%2Cpriority%2Cbug_status%2Cassigned_to%2Cshort_desc%2Cstatus_whiteboard&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-platform&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UI development===<br />
<br />
Things related to the code responsible for showing the UI to the user. They are mostly due to a developer hardcoding an LTR layout in the source code, e.g. when specifying the position of an icon in relation to the text label. Ideally, developers would take advantage of the Bidi Algorithm to achieve correct positioning for all languages, but this is sadly not always the case and is source of bugs for us to fix. Bugs that go into this category are the most common ones; they should block the tracking bug and don't need any special whiteboard tags: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321831&o1=substring&resolution=---&status_whiteboard_type=notregexp&query_format=advanced&status_whiteboard=rtl&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UX design===<br />
<br />
Last but not least, we're seeing a need in more bidi education for our UX designs. This is particularly interesting in touch interfaces which rely on spatial metaphors and finger gestures, like swiping. <br />
Bugs that go into this category should block the tracking bug and have <code>[rtl-design]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321813&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-design&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
The sections below are not exhaustive or accurate in all cases, for all apps, for 2.2. Please do not rely on this wiki, but be sure to reference [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo the 2.2 specification for Arabic support]. <br />
<br />
====Spatial metaphors====<br />
* Progress Indicators (The list on this wiki page is NOT complete. Please see [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 15 of the spec for complete behavior)]:<br />
** In FTU the progress indicator slides towards the right edge of the screen,<br />
** For 2.2, the back button is ALWAYS on the left and the next button is on the right,<br />
** The history of navigation (Haida model) is represented as sheets on a LTR timeline, and does not change for 2.2.<br />
** subpanels slide in from the right edge of the screen<br />
* learn more, expand, start:<br />
** in FTU, the image inviting user to start the tour is a hand with the index finger pointing right,<br />
** indicator arrows on dropboxes are always on the right<br />
* number progression:<br />
** in the Radio FM app, the frequencies increase from left to right<br />
** in the Calendar app, months are arranged from left to right<br />
* sidebars<br />
** in the Calendar app, the settings sidebar is always on the left<br />
<br />
====Finger gestures====<br />
Most animations and gestures will not change for the 2.2 release.<br />
* Swipe to dismiss notification does not change for 2.2 and works LTR.<br />
* [x] and [<] to close should be consistently on one side; right now it depends on the app (as noted in the pattern)<br />
* Scrollbar behavior is noted on [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 16 of the 2.2 spec].<br />
* Currently the swipe to unlock is always to the right, [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo as noted on page 6 of the spec].<br />
* Behavior for check boxes is [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo described on pages 18 and 19 of the spec].<br />
<br />
===Performance===<br />
Currently each app is responsible for setting the lang and dir attributes on the html element. This happens only after the 'localized' event is emitted, which is usually after the firstPaint event. This results in a jarring experience for the RTL users, as the entire content jumps from left to right a few hundred milliseconds after the launch of the app.<br />
<br />
* The refactor of l10n.js ({{bug|914414}}) will fix this by setting dir and lang early on during the launch.<br />
<br />
===Competitive analysis===<br />
<br />
Other mobile operating systems have recently improved their support for RTL languages.<br />
<br />
====Android====<br />
Android behavior should not be taken into consideration as a reference for expected RTL behavior in Firefox OS. There are many things Android does not do correctly, as noted in our work with the Unicode Standards Committee for Bidi Language support. The information in this section does not pertain to the 2.2 Firefox OS release in any capacity, but is supplementary.<br />
<br />
Starting with version 4.2 (25% penetration as of Jan 8, 2014; [http://developer.android.com/about/dashboards/index.html source]), Android has native support for RTL layout: http://android-developers.blogspot.com/2013/03/native-rtl-support-in-android-42.html. Things to note:<br />
<br />
* checkbox states: reversed (ON is on the left)<br />
* scrollbars: on the left<br />
* scrollable letter index in long lists: on the right<br />
* ordering of app icons in the apps menu: reversed<br />
* time and notification icons: reversed<br />
* apps vs widgets: reversed<br />
* back arrow (software) points to the right<br />
* timelines: reversed<br />
* calendar: next week is to the right; months are displayed vertically<br />
* progress bars in the browser: not reversed<br />
* sidebars, subpanels: reversed<br />
* swipe to unlock: you can swipe in any direction, but the icon indicating unlocking is not reversed<br />
<br />
Prior versions don't support RTL layout at all. The text is rendered RTL, but the layout remains LTR.<br />
<br />
====iOS====<br />
<br />
Tested on iPad with iOS 7<br />
<br />
* checkbox states: NOT reversed: off [o ], on [ o]<br />
* scrollbars: NOT reversed<br />
* ordering of workspaces on the homescreen: NOT reversed<br />
* time and icons in the notification bar: NOT reversed<br />
* back arrow: NOT reversed<br />
* calendar: week view LTR, month view vertical<br />
* progression: NOT reversed<br />
* sidebars; subpanels: NOT reversed<br />
* swipe to unlock: NOT reversed<br />
* labels: text always aligned to the left<br />
** in many places text is aligned to the left<br />
* dialogs: 'confirm' button always on the right<br />
* text inputs: reversed, exception: Safari<br />
* timer: X minutes Y seconds, always in that order, only the words 'minutes' and 'seconds' are RTL<br />
<br />
====Windows Phone 8====<br />
<br />
* changing the language requires restart<br />
* checkbox states:reversed<br />
* setting icons (e.g. wifi): not reversed<br />
* scrollbars: on the left; IE is an exception (content scrollbar on the right)<br />
* ordering of app icons in the apps menu: vertical<br />
* time and icons on the notification bar: reversed<br />
* back arrow: hardware, not reversed<br />
* timelines: reversed<br />
* month switching in the calendar: vertical<br />
* progress bars: reversed<br />
* sidebars; subpanels: reversed<br />
* swipe to unlock: vertical</div>Swilkeshttps://wiki.mozilla.org/index.php?title=L10n:B2G/RTL&diff=1055816L10n:B2G/RTL2015-02-12T18:49:44Z<p>Swilkes: More edits</p>
<hr />
<div><br />
=== Other Valuable References ===<br />
<br />
The tracking bug is {{bug|906270}}. You can also type "gaia-rtl" as a shortcut to access this bug. All RTL bugs filed must be set to block either this bug, or one of the child META bugs for app-specific RTL support. <br />
<br />
See the [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo 2.2 UX Specification].<br />
<br />
[https://groups.google.com/forum/#!msg/mozilla.dev.gaia/GzIIlTUKvAg/8kTAE3nYuXgJ Great "How To" guide] written by Julien Wajsberg<br />
<br />
How to test your app in English text that allows you to spot problems using Stas's [http://informationisart.com/27/ Pseudolocales for Firefox OS testing tools]<br />
* Please note that tests must be conducted with the phone set to Arabic as well, even if you do not read or speak Arabic. Pseudolocales is an excellent start but is not exhaustive. <br />
<br />
Developer Resources for [https://developer.mozilla.org/en-US/Apps/Build/Localization/Developing_Bidi_Apps Writing Bi Directional Enabled Code] are on developer.mozilla.org<br />
<br />
Product planning/tracking docs at https://wiki.mozilla.org/RTL<br />
<br />
===Platform===<br />
<br />
Things related to the Unicode Bidirectional Algorithm, which is implemented in Gecko. By leveraging the existing platforms which conform to the W3C standards we make sure to minimize the risk of running into problems in this category. Bugs that go into this category should block the tracking bug and have <code>[rtl-platform]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321768&columnlist=bug_severity%2Cpriority%2Cbug_status%2Cassigned_to%2Cshort_desc%2Cstatus_whiteboard&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-platform&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UI development===<br />
<br />
Things related to the code responsible for showing the UI to the user. They are mostly due to a developer hardcoding an LTR layout in the source code, e.g. when specifying the position of an icon in relation to the text label. Ideally, developers would take advantage of the Bidi Algorithm to achieve correct positioning for all languages, but this is sadly not always the case and is source of bugs for us to fix. Bugs that go into this category are the most common ones; they should block the tracking bug and don't need any special whiteboard tags: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321831&o1=substring&resolution=---&status_whiteboard_type=notregexp&query_format=advanced&status_whiteboard=rtl&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UX design===<br />
<br />
Last but not least, we're seeing a need in more bidi education for our UX designs. This is particularly interesting in touch interfaces which rely on spatial metaphors and finger gestures, like swiping. <br />
Bugs that go into this category should block the tracking bug and have <code>[rtl-design]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321813&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-design&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
The sections below are not exhaustive or accurate in all cases, for all apps, for 2.2. Please do not rely on this wiki, but be sure to reference [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo the 2.2 specification for Arabic support]. <br />
<br />
====Spatial metaphors====<br />
* Progress Indicators (The list on this wiki page is NOT complete. Please see [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 15 of the spec for complete behavior)]:<br />
** In FTU the progress indicator slides towards the right edge of the screen,<br />
** For 2.2, the back button is ALWAYS on the left and the next button is on the right,<br />
** The history of navigation (Haida model) is represented as sheets on a LTR timeline, and does not change for 2.2.<br />
** subpanels slide in from the right edge of the screen<br />
* learn more, expand, start:<br />
** in FTU, the image inviting user to start the tour is a hand with the index finger pointing right,<br />
** indicator arrows on dropboxes are always on the right<br />
* number progression:<br />
** in the Radio FM app, the frequencies increase from left to right<br />
** in the Calendar app, months are arranged from left to right<br />
* sidebars<br />
** in the Calendar app, the settings sidebar is always on the left<br />
<br />
====Finger gestures====<br />
Most animations and gestures will not change for the 2.2 release.<br />
* Swipe to dismiss notification does not change for 2.2 and works LTR.<br />
* [x] and [<] to close should be consistently on one side; right now it depends on the app (as noted in the pattern)<br />
* Scrollbar behavior is noted on [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 16 of the 2.2 spec].<br />
* Currently the swipe to unlock is always to the right, [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo as noted on page 6 of the spec].<br />
* Behavior for check boxes is [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo described on pages 18 and 19 of the spec].<br />
<br />
===Performance===<br />
Currently each app is responsible for setting the lang and dir attributes on the html element. This happens only after the 'localized' event is emitted, which is usually after the firstPaint event. This results in a jarring experience for the RTL users, as the entire content jumps from left to right a few hundred milliseconds after the launch of the app.<br />
<br />
* The refactor of l10n.js ({{bug|914414}}) will fix this by setting dir and lang early on during the launch.<br />
<br />
===Competitive analysis===<br />
<br />
Other mobile operating systems have recently improved their support for RTL languages.<br />
<br />
====Android====<br />
<br />
Starting with version 4.2 (25% penetration as of Jan 8, 2014; [http://developer.android.com/about/dashboards/index.html source]), Android has native support for RTL layout: http://android-developers.blogspot.com/2013/03/native-rtl-support-in-android-42.html. Things to note:<br />
<br />
* checkbox states: reversed (ON is on the left)<br />
* scrollbars: on the left<br />
* scrollable letter index in long lists: on the right<br />
* ordering of app icons in the apps menu: reversed<br />
* time and notification icons: reversed<br />
* apps vs widgets: reversed<br />
* back arrow (software) points to the right<br />
* timelines: reversed<br />
* calendar: next week is to the right; months are displayed vertically<br />
* progress bars in the browser: not reversed<br />
* sidebars, subpanels: reversed<br />
* swipe to unlock: you can swipe in any direction, but the icon indicating unlocking is not reversed<br />
<br />
Prior versions don't support RTL layout at all. The text is rendered RTL, but the layout remains LTR.<br />
<br />
====iOS====<br />
<br />
Tested on iPad with iOS 7<br />
<br />
* checkbox states: NOT reversed: off [o ], on [ o]<br />
* scrollbars: NOT reversed<br />
* ordering of workspaces on the homescreen: NOT reversed<br />
* time and icons in the notification bar: NOT reversed<br />
* back arrow: NOT reversed<br />
* calendar: week view LTR, month view vertical<br />
* progression: NOT reversed<br />
* sidebars; subpanels: NOT reversed<br />
* swipe to unlock: NOT reversed<br />
* labels: text always aligned to the left<br />
** in many places text is aligned to the left<br />
* dialogs: 'confirm' button always on the right<br />
* text inputs: reversed, exception: Safari<br />
* timer: X minutes Y seconds, always in that order, only the words 'minutes' and 'seconds' are RTL<br />
<br />
====Windows Phone 8====<br />
<br />
* changing the language requires restart<br />
* checkbox states:reversed<br />
* setting icons (e.g. wifi): not reversed<br />
* scrollbars: on the left; IE is an exception (content scrollbar on the right)<br />
* ordering of app icons in the apps menu: vertical<br />
* time and icons on the notification bar: reversed<br />
* back arrow: hardware, not reversed<br />
* timelines: reversed<br />
* month switching in the calendar: vertical<br />
* progress bars: reversed<br />
* sidebars; subpanels: reversed<br />
* swipe to unlock: vertical</div>Swilkeshttps://wiki.mozilla.org/index.php?title=L10n:B2G/RTL&diff=1055815L10n:B2G/RTL2015-02-12T18:48:55Z<p>Swilkes: Removed questions and comments that conflict with the spec, and linked to the spec instead.</p>
<hr />
<div><br />
=== Other Valuable References ===<br />
<br />
The tracking bug is {{bug|906270}}. You can also type "gaia-rtl" as a shortcut to access this bug. All RTL bugs filed must be set to block either this bug, or one of the child META bugs for app-specific RTL support. <br />
<br />
See the [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo 2.2 UX Specification].<br />
<br />
[https://groups.google.com/forum/#!msg/mozilla.dev.gaia/GzIIlTUKvAg/8kTAE3nYuXgJ Great "How To" guide] written by Julien Wajsberg<br />
<br />
How to test your app in English text that allows you to spot problems using Stas's [http://informationisart.com/27/ Pseudolocales for Firefox OS testing tools]<br />
* Please note that tests must be conducted with the phone set to Arabic as well, even if you do not read or speak Arabic. Pseudolocales is an excellent start but is not exhaustive. <br />
<br />
Developer Resources for [https://developer.mozilla.org/en-US/Apps/Build/Localization/Developing_Bidi_Apps Writing Bi Directional Enabled Code] are on developer.mozilla.org<br />
<br />
Product planning/tracking docs at https://wiki.mozilla.org/RTL<br />
<br />
===Platform===<br />
<br />
Things related to the Unicode Bidirectional Algorithm, which is implemented in Gecko. By leveraging the existing platforms which conform to the W3C standards we make sure to minimize the risk of running into problems in this category. Bugs that go into this category should block the tracking bug and have <code>[rtl-platform]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321768&columnlist=bug_severity%2Cpriority%2Cbug_status%2Cassigned_to%2Cshort_desc%2Cstatus_whiteboard&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-platform&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UI development===<br />
<br />
Things related to the code responsible for showing the UI to the user. They are mostly due to a developer hardcoding an LTR layout in the source code, e.g. when specifying the position of an icon in relation to the text label. Ideally, developers would take advantage of the Bidi Algorithm to achieve correct positioning for all languages, but this is sadly not always the case and is source of bugs for us to fix. Bugs that go into this category are the most common ones; they should block the tracking bug and don't need any special whiteboard tags: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321831&o1=substring&resolution=---&status_whiteboard_type=notregexp&query_format=advanced&status_whiteboard=rtl&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UX design===<br />
<br />
Last but not least, we're seeing a need in more bidi education for our UX designs. This is particularly interesting in touch interfaces which rely on spatial metaphors and finger gestures, like swiping. <br />
Bugs that go into this category should block the tracking bug and have <code>[rtl-design]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321813&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-design&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
The sections below are not exhaustive or accurate in all cases, for all apps, for 2.2. Please do not rely on this wiki, but be sure to reference [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo the 2.2 specification for Arabic support]. <br />
<br />
====Spatial metaphors====<br />
* Progress Indicators (see [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 15 of the spec for complete behavior)]:<br />
** In FTU the progress indicator slides towards the right edge of the screen,<br />
** For 2.2, the back button is ALWAYS on the left and the next button is on the right,<br />
** The history of navigation (Haida model) is represented as sheets on a LTR timeline, and does not change for 2.2.<br />
** subpanels slide in from the right edge of the screen<br />
* learn more, expand, start:<br />
** in FTU, the image inviting user to start the tour is a hand with the index finger pointing right,<br />
** indicator arrows on dropboxes are always on the right<br />
* number progression:<br />
** in the Radio FM app, the frequencies increase from left to right<br />
** in the Calendar app, months are arranged from left to right<br />
* sidebars<br />
** in the Calendar app, the settings sidebar is always on the left<br />
<br />
====Finger gestures====<br />
Most animations and gestures will not change for the 2.2 release.<br />
* Swipe to dismiss notification does not change for 2.2 and works LTR.<br />
* [x] and [<] to close should be consistently on one side; right now it depends on the app (as noted in the pattern)<br />
* Scrollbar behavior is noted on [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo page 16 of the 2.2 spec].<br />
* Currently the swipe to unlock is always to the right, [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo as noted on page 6 of the spec].<br />
* Behavior for check boxes is [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo described on pages 18 and 19 of the spec].<br />
<br />
===Performance===<br />
Currently each app is responsible for setting the lang and dir attributes on the html element. This happens only after the 'localized' event is emitted, which is usually after the firstPaint event. This results in a jarring experience for the RTL users, as the entire content jumps from left to right a few hundred milliseconds after the launch of the app.<br />
<br />
* The refactor of l10n.js ({{bug|914414}}) will fix this by setting dir and lang early on during the launch.<br />
<br />
===Competitive analysis===<br />
<br />
Other mobile operating systems have recently improved their support for RTL languages.<br />
<br />
====Android====<br />
<br />
Starting with version 4.2 (25% penetration as of Jan 8, 2014; [http://developer.android.com/about/dashboards/index.html source]), Android has native support for RTL layout: http://android-developers.blogspot.com/2013/03/native-rtl-support-in-android-42.html. Things to note:<br />
<br />
* checkbox states: reversed (ON is on the left)<br />
* scrollbars: on the left<br />
* scrollable letter index in long lists: on the right<br />
* ordering of app icons in the apps menu: reversed<br />
* time and notification icons: reversed<br />
* apps vs widgets: reversed<br />
* back arrow (software) points to the right<br />
* timelines: reversed<br />
* calendar: next week is to the right; months are displayed vertically<br />
* progress bars in the browser: not reversed<br />
* sidebars, subpanels: reversed<br />
* swipe to unlock: you can swipe in any direction, but the icon indicating unlocking is not reversed<br />
<br />
Prior versions don't support RTL layout at all. The text is rendered RTL, but the layout remains LTR.<br />
<br />
====iOS====<br />
<br />
Tested on iPad with iOS 7<br />
<br />
* checkbox states: NOT reversed: off [o ], on [ o]<br />
* scrollbars: NOT reversed<br />
* ordering of workspaces on the homescreen: NOT reversed<br />
* time and icons in the notification bar: NOT reversed<br />
* back arrow: NOT reversed<br />
* calendar: week view LTR, month view vertical<br />
* progression: NOT reversed<br />
* sidebars; subpanels: NOT reversed<br />
* swipe to unlock: NOT reversed<br />
* labels: text always aligned to the left<br />
** in many places text is aligned to the left<br />
* dialogs: 'confirm' button always on the right<br />
* text inputs: reversed, exception: Safari<br />
* timer: X minutes Y seconds, always in that order, only the words 'minutes' and 'seconds' are RTL<br />
<br />
====Windows Phone 8====<br />
<br />
* changing the language requires restart<br />
* checkbox states:reversed<br />
* setting icons (e.g. wifi): not reversed<br />
* scrollbars: on the left; IE is an exception (content scrollbar on the right)<br />
* ordering of app icons in the apps menu: vertical<br />
* time and icons on the notification bar: reversed<br />
* back arrow: hardware, not reversed<br />
* timelines: reversed<br />
* month switching in the calendar: vertical<br />
* progress bars: reversed<br />
* sidebars; subpanels: reversed<br />
* swipe to unlock: vertical</div>Swilkeshttps://wiki.mozilla.org/index.php?title=L10n:B2G/RTL&diff=1055812L10n:B2G/RTL2015-02-12T18:28:37Z<p>Swilkes: Corrected the incorrect link to the UX RTL spec. Added a note that pseudolocales are not a substitute for testing in Arabic: we've seen different layout issues in Arabic than we have with pseudolocales.</p>
<hr />
<div><br />
=== Other Valuable References ===<br />
<br />
The tracking bug is {{bug|906270}}. You can also type "gaia-rtl" as a shortcut to access this bug. All RTL bugs filed must be set to block either this bug, or one of the child META bugs for app-specific RTL support. <br />
<br />
See the [https://mozilla.box.com/s/bcm3s5i2v6js5uk0ws3tsywse8bgncgo 2.2 UX Specification].<br />
<br />
[https://groups.google.com/forum/#!msg/mozilla.dev.gaia/GzIIlTUKvAg/8kTAE3nYuXgJ Great "How To" guide] written by Julien Wajsberg<br />
<br />
How to test your app in English text that allows you to spot problems using Stas's [http://informationisart.com/27/ Pseudolocales for Firefox OS testing tools]<br />
* Please note that tests must be conducted with the phone set to Arabic as well, even if you do not read or speak Arabic. Pseudolocales is an excellent start but is not exhaustive. <br />
<br />
Developer Resources for [https://developer.mozilla.org/en-US/Apps/Build/Localization/Developing_Bidi_Apps Writing Bi Directional Enabled Code] are on developer.mozilla.org<br />
<br />
Product planning/tracking docs at https://wiki.mozilla.org/RTL<br />
<br />
===Platform===<br />
<br />
Things related to the Unicode Bidirectional Algorithm, which is implemented in Gecko. By leveraging the existing platforms which conform to the W3C standards we make sure to minimize the risk of running into problems in this category. Bugs that go into this category should block the tracking bug and have <code>[rtl-platform]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321768&columnlist=bug_severity%2Cpriority%2Cbug_status%2Cassigned_to%2Cshort_desc%2Cstatus_whiteboard&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-platform&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UI development===<br />
<br />
Things related to the code responsible for showing the UI to the user. They are mostly due to a developer hardcoding an LTR layout in the source code, e.g. when specifying the position of an icon in relation to the text label. Ideally, developers would take advantage of the Bidi Algorithm to achieve correct positioning for all languages, but this is sadly not always the case and is source of bugs for us to fix. Bugs that go into this category are the most common ones; they should block the tracking bug and don't need any special whiteboard tags: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321831&o1=substring&resolution=---&status_whiteboard_type=notregexp&query_format=advanced&status_whiteboard=rtl&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
===UX design===<br />
<br />
Last but not least, we're seeing a need in more bidi education for our UX designs. This is particularly interesting in touch interfaces which rely on spatial metaphors and finger gestures, like swiping. <br />
Bugs that go into this category should block the tracking bug and have <code>[rtl-design]</code> in their whiteboard: [https://bugzilla.mozilla.org/buglist.cgi?f1=blocked&list_id=9321813&o1=substring&resolution=---&status_whiteboard_type=allwordssubstr&query_format=advanced&status_whiteboard=rtl-design&v1=906270&product=Firefox%20OS bugzilla query].<br />
<br />
====Spatial metaphors====<br />
* indicating progress:<br />
** in FTU the progress indicator slides towards the right edge of the screen,<br />
** in various places, the back button is on the left and the next button is on the right,<br />
** in Haida, the history of navigation is represented as sheets on a LTR timeline,<br />
** subpanels slide in from the right edge of the screen<br />
* learn more, expand, start:<br />
** in FTU, the image inviting user to start the tour is a hand with the index finger pointing right,<br />
** indicator arrows on dropboxes are always on the right<br />
* number progression:<br />
** in the Radio FM app, the frequencies increase from left to right<br />
** in the Calendar app, months are arranged from left to right<br />
* sidebars<br />
** in the Calendar app, the settings sidebar is always on the left<br />
<br />
====Finger gestures====<br />
* swipe to dismiss notification currently only works from left to right<br />
* [x] and [<] to close should be consistently on one side; right now it depends on the app<br />
* scrollbars are on the left; is this okay for using the right hand's thumb?<br />
** for instance, for RTL, Android places scrolling indicators on the left, but a quicklook index of each letter on the right for easy thumb access<br />
* currently the swipe to unlock is always to the right,<br />
* checkbox state: off [o ], on [ o] - should this change in RTL?<br />
<br />
===Performance===<br />
Currently each app is responsible for setting the lang and dir attributes on the html element. This happens only after the 'localized' event is emitted, which is usually after the firstPaint event. This results in a jarring experience for the RTL users, as the entire content jumps from left to right a few hundred milliseconds after the launch of the app.<br />
<br />
* The refactor of l10n.js ({{bug|914414}}) will fix this by setting dir and lang early on during the launch.<br />
<br />
===Competitive analysis===<br />
<br />
Other mobile operating systems have recently improved their support for RTL languages.<br />
<br />
====Android====<br />
<br />
Starting with version 4.2 (25% penetration as of Jan 8, 2014; [http://developer.android.com/about/dashboards/index.html source]), Android has native support for RTL layout: http://android-developers.blogspot.com/2013/03/native-rtl-support-in-android-42.html. Things to note:<br />
<br />
* checkbox states: reversed (ON is on the left)<br />
* scrollbars: on the left<br />
* scrollable letter index in long lists: on the right<br />
* ordering of app icons in the apps menu: reversed<br />
* time and notification icons: reversed<br />
* apps vs widgets: reversed<br />
* back arrow (software) points to the right<br />
* timelines: reversed<br />
* calendar: next week is to the right; months are displayed vertically<br />
* progress bars in the browser: not reversed<br />
* sidebars, subpanels: reversed<br />
* swipe to unlock: you can swipe in any direction, but the icon indicating unlocking is not reversed<br />
<br />
Prior versions don't support RTL layout at all. The text is rendered RTL, but the layout remains LTR.<br />
<br />
====iOS====<br />
<br />
Tested on iPad with iOS 7<br />
<br />
* checkbox states: NOT reversed: off [o ], on [ o]<br />
* scrollbars: NOT reversed<br />
* ordering of workspaces on the homescreen: NOT reversed<br />
* time and icons in the notification bar: NOT reversed<br />
* back arrow: NOT reversed<br />
* calendar: week view LTR, month view vertical<br />
* progression: NOT reversed<br />
* sidebars; subpanels: NOT reversed<br />
* swipe to unlock: NOT reversed<br />
* labels: text always aligned to the left<br />
** in many places text is aligned to the left<br />
* dialogs: 'confirm' button always on the right<br />
* text inputs: reversed, exception: Safari<br />
* timer: X minutes Y seconds, always in that order, only the words 'minutes' and 'seconds' are RTL<br />
<br />
====Windows Phone 8====<br />
<br />
* changing the language requires restart<br />
* checkbox states:reversed<br />
* setting icons (e.g. wifi): not reversed<br />
* scrollbars: on the left; IE is an exception (content scrollbar on the right)<br />
* ordering of app icons in the apps menu: vertical<br />
* time and icons on the notification bar: reversed<br />
* back arrow: hardware, not reversed<br />
* timelines: reversed<br />
* month switching in the calendar: vertical<br />
* progress bars: reversed<br />
* sidebars; subpanels: reversed<br />
* swipe to unlock: vertical</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1033824Firefox OS/UX2014-11-15T00:22:29Z<p>Swilkes: whiteboard tag</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-03-09: L10N String Freeze (tentative)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
* Meta bug for bidi language support: https://bugzilla.mozilla.org/show_bug.cgi?id=gaia-rtl<br />
<br />
=Web Components=<br />
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks Building Blocks] reflect OS-wide UX patterns and styles, and will take the form of [http://webcomponents.org/ Web Components] as of 2.3. Building Blocks + Web Components = "Common Controls" in Mozilla parlance.<br />
<br />
* 2.3 (beginning April 2015) Common Controls reference document: https://mozilla.box.com/s/aa8tu5rf5gwpgdr00u79<br />
<br />
* Github: https://github.com/gaia-components<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"whiteboard":"ux-most-wanted-nov2014",<br />
"include_fields": "id, summary, status, assigned_to, blocks, whiteboard"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1033823Firefox OS/UX2014-11-15T00:18:54Z<p>Swilkes: Copy</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-03-09: L10N String Freeze (tentative)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
* Meta bug for bidi language support: https://bugzilla.mozilla.org/show_bug.cgi?id=gaia-rtl<br />
<br />
=Web Components=<br />
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks Building Blocks] reflect OS-wide UX patterns and styles, and will take the form of [http://webcomponents.org/ Web Components] as of 2.3. Building Blocks + Web Components = "Common Controls" in Mozilla parlance.<br />
<br />
* 2.3 (beginning April 2015) Common Controls reference document: https://mozilla.box.com/s/aa8tu5rf5gwpgdr00u79<br />
<br />
* Github: https://github.com/gaia-components<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, assigned_to, blocks, whiteboard"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1033822Firefox OS/UX2014-11-15T00:17:44Z<p>Swilkes: string freeze date</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-03-09: L10N String Freeze (tentative)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
* Meta bug for bidi language support: https://bugzilla.mozilla.org/show_bug.cgi?id=gaia-rtl<br />
<br />
=Web Components=<br />
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks Building Blocks] reflect OS-wide UX patterns and styles, and will take the form of [http://webcomponents.org/ Web Components] as of 2.3. Building Blocks + Web Components = "Common Controls" in Mozilla parlance.<br />
<br />
* 2.3 (beginning April 2015) Common Controls reference document: https://mozilla.box.com/s/aa8tu5rf5gwpgdr00u79<br />
<br />
* Github: https://github.com/gaia-components<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, assigned_to, blocks, whiteboard"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1033820Firefox OS/UX2014-11-15T00:15:24Z<p>Swilkes: Copy</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
* Meta bug for bidi language support: https://bugzilla.mozilla.org/show_bug.cgi?id=gaia-rtl<br />
<br />
=Web Components=<br />
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks Building Blocks] reflect OS-wide UX patterns and styles, and will take the form of [http://webcomponents.org/ Web Components] as of 2.3. Building Blocks + Web Components = "Common Controls" in Mozilla parlance.<br />
<br />
* 2.3 (beginning April 2015) Common Controls reference document: https://mozilla.box.com/s/aa8tu5rf5gwpgdr00u79<br />
<br />
* Github: https://github.com/gaia-components<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, assigned_to, blocks, whiteboard"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1033818Firefox OS/UX2014-11-15T00:09:48Z<p>Swilkes: Copy</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
* Meta bug for bidi language support: https://bugzilla.mozilla.org/show_bug.cgi?id=gaia-rtl<br />
<br />
=Web Components=<br />
[https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks Building Blocks] reflect OS-wide UX patterns and styles, and will take the form of [http://webcomponents.org/ Web Components] as of 2.3. Building Blocks + Web Components = "Common Controls" in Mozilla parlance.<br />
<br />
* 2.3 (beginning April 2015) Common Controls reference document: https://mozilla.box.com/s/aa8tu5rf5gwpgdr00u79<br />
<br />
* Github: https://github.com/gaia-components<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, resolution, assigned_to, blocks, ux-most-wanted-nov2014"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1033817Firefox OS/UX2014-11-14T23:57:25Z<p>Swilkes: More small stuff</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
* Meta bug for bidi language support: https://bugzilla.mozilla.org/show_bug.cgi?id=gaia-rtl<br />
<br />
=Web Components=<br />
Building Blocks reflect OS-wide UX patterns and styles, and are taking the form of Web Components as of 2.3. <br />
<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
==List of Components==<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, ux-most-wanted-nov2014"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1033816Firefox OS/UX2014-11-14T23:51:09Z<p>Swilkes: Bidi</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Bidirectional Language Support=<br />
The Firefox OS UX team is working hard to ensure the correct display of bidirectional languages like Arabic, Pashto, Urdu, Persian and Hebrew. Our 2.2 release will have interface support for Arabic and other bidirectional languages will follow in 2.3 and later.<br />
<br />
==Arabic==<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
<br />
=Web Components=<br />
Building Blocks reflect OS-wide UX patterns and styles, and are taking the form of Web Components as of 2.3. <br />
<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
==List of Components==<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, ux-most-wanted-nov2014"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1033815Firefox OS/UX2014-11-14T23:42:54Z<p>Swilkes: Copy</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
=Latest Specs + Wireframes=<br />
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
<br />
=Important Dates=<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
=Web Components=<br />
Building Blocks reflect OS-wide UX patterns and styles, and are taking the form of Web Components as of 2.3. <br />
<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
==List of Components==<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, ux-most-wanted-nov2014"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=1033814Firefox OS/UX2014-11-14T23:41:56Z<p>Swilkes: Updating 2.2 UX stuff geez</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Latest Specs + Wireframes===<br />
* 2.2: https://mozilla.box.com/s/a7qppwz9oyuzhaivznm3<br />
* Arabic language interface pattern: https://mozilla.box.com/s/0y1amh4rwpp6brcxd1hk<br />
<br />
===Important Dates===<br />
* 2014-11-24: Sprint 1 of 2.2 begins (on Gecko 37, which will be on m-c and gaia master)<br />
* 2014-12-01 to 12-05: Portland Work Week<br />
* 2015-02-23: 2.2 Feature Landing (Gecko 38, base for FxOS 2.2 will be on mozilla-aurora and gaia v2.2 branch)<br />
* 2015-04-06: 2.2 Feature Complete (Gecko 38 moves to mozilla-beta and mozilla-b2g38_v2_2 is created)<br />
* 2015-05-18: 2.2 Code Complete<br />
<br />
<br />
=Web Components=<br />
Building Blocks reflect OS-wide UX patterns and styles, and are taking the form of Web Components as of 2.3. <br />
<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
==List of Components==<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team member audits, customer support requests, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, ux-most-wanted-nov2014"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008254Arabic UI BugBash2014-08-22T00:32:32Z<p>Swilkes: /* Flashing Instructions */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
'''Please check regularly for updated information! We are adding to this page all the time.''' <br />
<br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* Translation or localization issue in the Arabic language<br />
* UI display issues, in whic RTL and/or bidi scripts are improperly displayed, in terms of alignment, overlap, truncation, and so on.<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* Please note that the WebIDE has replaced the App Manager: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
Most people will be using the Firefox OS Simulator, which includes the latest builds:<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
** '''UPDATE!''' The WebIDE has replaced the App Manager. Look here: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
<br />
If you have a Flame (or similar) device you will need:<br />
* A mini USB cable so your phone can talk to your computer.<br />
* The Android Developer Bridge (ADB) to "see" your device.<br />
** http://developer.android.com/tools/help/adb.html<br />
* In the Developer settings of your device, please make sure Developer > Debugging via USB > ADB and DevTools is on. <br />
** Debugging via USB defaults to Disabled, so you'll need to turn it on to flash your device.<br />
<br />
Now you're ready to get the latest Flame build. Visit:<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software <br />
** Please use Production master builds: http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs (i.e. "parent" or "umbrella" bugs for each category, to keep bugs organized and easy to find).<br />
<br />
If you see a bug, first decide if it's related to the Arabic language, or to the behavior or appearance of RTL or bidi script in the user interface, or if it is another issue.<br />
<br />
If the bug is definitely related to the Arabic language, or bidi or RTL UI, then here is '''how to file your bug:'''<br />
* Create a new bug by clicking "File a new bug" on the https://bugzilla.mozilla.org homepage.<br />
* On the next page, click "Firefox OS." Next, will now see bug fields to complete. <br />
* Click the "Show Advanced Fields" button.<br />
* '''IMPORTANT:''' Copy and paste this tag into the "Whiteboard" field: [fxos-arabic-bug-bash-2.1]. This will enable us to create and, later, to find all of the bugs found during the bug bash, award prizes, and so on.<br />
* For "Component" select "Gaia:L10N" in the list.<br />
* '''IMPORTANT:''' Make your bug a blocker for the appropriate Meta bug by adding one of the following Meta bug numbers to the "Blocks" field:<br />
** RTL Meta: {{Bug|906270}} (for UI display issues of bidi and RTL scripts)<br />
** Arabic Meta: {{Bug|1055447}} (for translation and other issues specific to the Arabic language itself, vs. the display of a scrip in the UI).<br />
* Create a brief (50-100 characters) Summary.<br />
* Describe the bug in as much detail as possible. Include the steps someone else should take to reproduce the bug.<br />
* Click the "Submit bug" button. <br />
<br />
Thank you! We are forever grateful for this work.<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== What does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]<br />
* Items are aligned right, not left.<br />
* There are no overlap issues. Text should not collide with or run over UI elements. Text should not be hidden by UI elements, like icons (and vice versa).<br />
* Text input should flow from right to left.<br />
* Tell us what YOU think! You know the Arabic language better than we do: tell US what you think the interface should look like and how it can improve to meet your needs and expectations.</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008253Arabic UI BugBash2014-08-21T23:53:53Z<p>Swilkes: /* What */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
'''Please check regularly for updated information! We are adding to this page all the time.''' <br />
<br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* Translation or localization issue in the Arabic language<br />
* UI display issues, in whic RTL and/or bidi scripts are improperly displayed, in terms of alignment, overlap, truncation, and so on.<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* Please note that the WebIDE has replaced the App Manager: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
** '''UPDATE!''' The WebIDE has replaced the App Manager. Look here: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs (i.e. "parent" or "umbrella" bugs for each category, to keep bugs organized and easy to find).<br />
<br />
If you see a bug, first decide if it's related to the Arabic language, or to the behavior or appearance of RTL or bidi script in the user interface, or if it is another issue.<br />
<br />
If the bug is definitely related to the Arabic language, or bidi or RTL UI, then here is '''how to file your bug:'''<br />
* Create a new bug by clicking "File a new bug" on the https://bugzilla.mozilla.org homepage.<br />
* On the next page, click "Firefox OS." Next, will now see bug fields to complete. <br />
* Click the "Show Advanced Fields" button.<br />
* '''IMPORTANT:''' Copy and paste this tag into the "Whiteboard" field: [fxos-arabic-bug-bash-2.1]. This will enable us to create and, later, to find all of the bugs found during the bug bash, award prizes, and so on.<br />
* For "Component" select "Gaia:L10N" in the list.<br />
* '''IMPORTANT:''' Make your bug a blocker for the appropriate Meta bug by adding one of the following Meta bug numbers to the "Blocks" field:<br />
** RTL Meta: {{Bug|906270}} (for UI display issues of bidi and RTL scripts)<br />
** Arabic Meta: {{Bug|1055447}} (for translation and other issues specific to the Arabic language itself, vs. the display of a scrip in the UI).<br />
* Create a brief (50-100 characters) Summary.<br />
* Describe the bug in as much detail as possible. Include the steps someone else should take to reproduce the bug.<br />
* Click the "Submit bug" button. <br />
<br />
Thank you! We are forever grateful for this work.<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== What does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]<br />
* Items are aligned right, not left.<br />
* There are no overlap issues. Text should not collide with or run over UI elements. Text should not be hidden by UI elements, like icons (and vice versa).<br />
* Text input should flow from right to left.<br />
* Tell us what YOU think! You know the Arabic language better than we do: tell US what you think the interface should look like and how it can improve to meet your needs and expectations.</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008250Arabic UI BugBash2014-08-21T23:42:12Z<p>Swilkes: /* Arabic/UI Bug Bash */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
'''Please check regularly for updated information! We are adding to this page all the time.''' <br />
<br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* Please note that the WebIDE has replaced the App Manager: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
** '''UPDATE!''' The WebIDE has replaced the App Manager. Look here: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs (i.e. "parent" or "umbrella" bugs for each category, to keep bugs organized and easy to find).<br />
<br />
If you see a bug, first decide if it's related to the Arabic language, or to the behavior or appearance of RTL or bidi script in the user interface, or if it is another issue.<br />
<br />
If the bug is definitely related to the Arabic language, or bidi or RTL UI, then here is '''how to file your bug:'''<br />
* Create a new bug by clicking "File a new bug" on the https://bugzilla.mozilla.org homepage.<br />
* On the next page, click "Firefox OS." Next, will now see bug fields to complete. <br />
* Click the "Show Advanced Fields" button.<br />
* '''IMPORTANT:''' Copy and paste this tag into the "Whiteboard" field: [fxos-arabic-bug-bash-2.1]. This will enable us to create and, later, to find all of the bugs found during the bug bash, award prizes, and so on.<br />
* For "Component" select "Gaia:L10N" in the list.<br />
* '''IMPORTANT:''' Make your bug a blocker for the appropriate Meta bug by adding one of the following Meta bug numbers to the "Blocks" field:<br />
** RTL Meta: {{Bug|906270}} (for UI display issues of bidi and RTL scripts)<br />
** Arabic Meta: {{Bug|1055447}} (for translation and other issues specific to the Arabic language itself, vs. the display of a scrip in the UI).<br />
* Create a brief (50-100 characters) Summary.<br />
* Describe the bug in as much detail as possible. Include the steps someone else should take to reproduce the bug.<br />
* Click the "Submit bug" button. <br />
<br />
Thank you! We are forever grateful for this work.<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== What does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]<br />
* Items are aligned right, not left.<br />
* There are no overlap issues. Text should not collide with or run over UI elements. Text should not be hidden by UI elements, like icons (and vice versa).<br />
* Text input should flow from right to left.<br />
* Tell us what YOU think! You know the Arabic language better than we do: tell US what you think the interface should look like and how it can improve to meet your needs and expectations.</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008249Arabic UI BugBash2014-08-21T23:41:57Z<p>Swilkes: /* Arabic/UI Bug Bash */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
'''Please check regularly for updated information! We are adding to this page all the time.''' <br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* Please note that the WebIDE has replaced the App Manager: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
** '''UPDATE!''' The WebIDE has replaced the App Manager. Look here: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs (i.e. "parent" or "umbrella" bugs for each category, to keep bugs organized and easy to find).<br />
<br />
If you see a bug, first decide if it's related to the Arabic language, or to the behavior or appearance of RTL or bidi script in the user interface, or if it is another issue.<br />
<br />
If the bug is definitely related to the Arabic language, or bidi or RTL UI, then here is '''how to file your bug:'''<br />
* Create a new bug by clicking "File a new bug" on the https://bugzilla.mozilla.org homepage.<br />
* On the next page, click "Firefox OS." Next, will now see bug fields to complete. <br />
* Click the "Show Advanced Fields" button.<br />
* '''IMPORTANT:''' Copy and paste this tag into the "Whiteboard" field: [fxos-arabic-bug-bash-2.1]. This will enable us to create and, later, to find all of the bugs found during the bug bash, award prizes, and so on.<br />
* For "Component" select "Gaia:L10N" in the list.<br />
* '''IMPORTANT:''' Make your bug a blocker for the appropriate Meta bug by adding one of the following Meta bug numbers to the "Blocks" field:<br />
** RTL Meta: {{Bug|906270}} (for UI display issues of bidi and RTL scripts)<br />
** Arabic Meta: {{Bug|1055447}} (for translation and other issues specific to the Arabic language itself, vs. the display of a scrip in the UI).<br />
* Create a brief (50-100 characters) Summary.<br />
* Describe the bug in as much detail as possible. Include the steps someone else should take to reproduce the bug.<br />
* Click the "Submit bug" button. <br />
<br />
Thank you! We are forever grateful for this work.<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== What does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]<br />
* Items are aligned right, not left.<br />
* There are no overlap issues. Text should not collide with or run over UI elements. Text should not be hidden by UI elements, like icons (and vice versa).<br />
* Text input should flow from right to left.<br />
* Tell us what YOU think! You know the Arabic language better than we do: tell US what you think the interface should look like and how it can improve to meet your needs and expectations.</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008248Arabic UI BugBash2014-08-21T23:41:05Z<p>Swilkes: /* How does a correct RTL interface look like ? */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* Please note that the WebIDE has replaced the App Manager: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
** '''UPDATE!''' The WebIDE has replaced the App Manager. Look here: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs (i.e. "parent" or "umbrella" bugs for each category, to keep bugs organized and easy to find).<br />
<br />
If you see a bug, first decide if it's related to the Arabic language, or to the behavior or appearance of RTL or bidi script in the user interface, or if it is another issue.<br />
<br />
If the bug is definitely related to the Arabic language, or bidi or RTL UI, then here is '''how to file your bug:'''<br />
* Create a new bug by clicking "File a new bug" on the https://bugzilla.mozilla.org homepage.<br />
* On the next page, click "Firefox OS." Next, will now see bug fields to complete. <br />
* Click the "Show Advanced Fields" button.<br />
* '''IMPORTANT:''' Copy and paste this tag into the "Whiteboard" field: [fxos-arabic-bug-bash-2.1]. This will enable us to create and, later, to find all of the bugs found during the bug bash, award prizes, and so on.<br />
* For "Component" select "Gaia:L10N" in the list.<br />
* '''IMPORTANT:''' Make your bug a blocker for the appropriate Meta bug by adding one of the following Meta bug numbers to the "Blocks" field:<br />
** RTL Meta: {{Bug|906270}} (for UI display issues of bidi and RTL scripts)<br />
** Arabic Meta: {{Bug|1055447}} (for translation and other issues specific to the Arabic language itself, vs. the display of a scrip in the UI).<br />
* Create a brief (50-100 characters) Summary.<br />
* Describe the bug in as much detail as possible. Include the steps someone else should take to reproduce the bug.<br />
* Click the "Submit bug" button. <br />
<br />
Thank you! We are forever grateful for this work.<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== What does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]<br />
* Items are aligned right, not left.<br />
* There are no overlap issues. Text should not collide with or run over UI elements. Text should not be hidden by UI elements, like icons (and vice versa).<br />
* Text input should flow from right to left.<br />
* Tell us what YOU think! You know the Arabic language better than we do: tell US what you think the interface should look like and how it can improve to meet your needs and expectations.</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008247Arabic UI BugBash2014-08-21T23:38:45Z<p>Swilkes: /* I found a bug! What's next? */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* Please note that the WebIDE has replaced the App Manager: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
** '''UPDATE!''' The WebIDE has replaced the App Manager. Look here: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs (i.e. "parent" or "umbrella" bugs for each category, to keep bugs organized and easy to find).<br />
<br />
If you see a bug, first decide if it's related to the Arabic language, or to the behavior or appearance of RTL or bidi script in the user interface, or if it is another issue.<br />
<br />
If the bug is definitely related to the Arabic language, or bidi or RTL UI, then here is '''how to file your bug:'''<br />
* Create a new bug by clicking "File a new bug" on the https://bugzilla.mozilla.org homepage.<br />
* On the next page, click "Firefox OS." Next, will now see bug fields to complete. <br />
* Click the "Show Advanced Fields" button.<br />
* '''IMPORTANT:''' Copy and paste this tag into the "Whiteboard" field: [fxos-arabic-bug-bash-2.1]. This will enable us to create and, later, to find all of the bugs found during the bug bash, award prizes, and so on.<br />
* For "Component" select "Gaia:L10N" in the list.<br />
* '''IMPORTANT:''' Make your bug a blocker for the appropriate Meta bug by adding one of the following Meta bug numbers to the "Blocks" field:<br />
** RTL Meta: {{Bug|906270}} (for UI display issues of bidi and RTL scripts)<br />
** Arabic Meta: {{Bug|1055447}} (for translation and other issues specific to the Arabic language itself, vs. the display of a scrip in the UI).<br />
* Create a brief (50-100 characters) Summary.<br />
* Describe the bug in as much detail as possible. Include the steps someone else should take to reproduce the bug.<br />
* Click the "Submit bug" button. <br />
<br />
Thank you! We are forever grateful for this work.<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== How does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008246Arabic UI BugBash2014-08-21T23:37:58Z<p>Swilkes: /* I found a bug! What's next? */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* Please note that the WebIDE has replaced the App Manager: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
** '''UPDATE!''' The WebIDE has replaced the App Manager. Look here: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs (i.e. "parent" or "umbrella" bugs for each category, to keep bugs organized and easy to find).<br/><br />
If you see a bug, first decide if it's related to the Arabic language, or to the behavior or appearance of RTL or bidi script in the user interface, or if it is another issue.<br/><br />
If the bug is definitely related to the Arabic language, or bidi or RTL UI, then:<br />
* Create a new bug by clicking "File a new bug" on the https://bugzilla.mozilla.org homepage.<br />
* On the next page, click "Firefox OS." Next, will now see bug fields to complete. <br />
* Click the "Show Advanced Fields" button.<br />
* '''IMPORTANT:''' Copy and paste this tag into the "Whiteboard" field: [fxos-arabic-bug-bash-2.1]. This will enable us to create and, later, to find all of the bugs found during the bug bash, award prizes, and so on.<br />
* For "Component" select "Gaia:L10N" in the list.<br />
* '''IMPORTANT:''' Make your bug a blocker for the appropriate Meta bug by adding one of the following Meta bug numbers to the "Blocks" field:<br />
** RTL Meta: {{Bug|906270}} (for UI display issues of bidi and RTL scripts)<br />
** Arabic Meta: {{Bug|1055447}} (for translation and other issues specific to the Arabic language itself, vs. the display of a scrip in the UI).<br />
* Create a brief (50-100 characters) Summary.<br />
* Describe the bug in as much detail as possible. Include the steps someone else should take to reproduce the bug.<br />
* Click the "Submit bug" button. <br />
<br />
Thank you! We are forever grateful for this work.<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== How does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008243Arabic UI BugBash2014-08-21T23:25:00Z<p>Swilkes: /* Flashing Instructions */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* Please note that the WebIDE has replaced the App Manager: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
** '''UPDATE!''' The WebIDE has replaced the App Manager. Look here: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs for each category.<br/><br />
So when you find a bug, first decide if it's related to the Arabic language, or to RTL User Interface.<br/><br />
Then make it a blocker for the Meta by adding the Meta bug number to "Blocks" section in your newly-filed bug.<br/><br />
* RTL Meta: {{Bug|906270}}<br />
* Arabic Meta: {{Bug|1055447}}<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== How does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008242Arabic UI BugBash2014-08-21T23:24:26Z<p>Swilkes: /* Prerequisites */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* Please note that the WebIDE has replaced the App Manager: https://developer.mozilla.org/en-US/docs/Tools/WebIDE<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs for each category.<br/><br />
So when you find a bug, first decide if it's related to the Arabic language, or to RTL User Interface.<br/><br />
Then make it a blocker for the Meta by adding the Meta bug number to "Blocks" section in your newly-filed bug.<br/><br />
* RTL Meta: {{Bug|906270}}<br />
* Arabic Meta: {{Bug|1055447}}<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== How does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008241Arabic UI BugBash2014-08-21T23:22:00Z<p>Swilkes: /* Prerequisites */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 can also work. Bugs filed against the 2.0 build can be checked, fixed and/or landed in 2.1 or 2.2. <br />
* A list of simulators with multiple build versions: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs for each category.<br/><br />
So when you find a bug, first decide if it's related to the Arabic language, or to RTL User Interface.<br/><br />
Then make it a blocker for the Meta by adding the Meta bug number to "Blocks" section in your newly-filed bug.<br/><br />
* RTL Meta: {{Bug|906270}}<br />
* Arabic Meta: {{Bug|1055447}}<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== How does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008240Arabic UI BugBash2014-08-21T23:19:19Z<p>Swilkes: /* Prerequisites */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. See the "Flashing Instructions" section below if you are already familiar with this. <br />
** The 2.1 build is still in progress, so 2.0 is fine. Bugs filed against the 2.0 build can then be fixed and/or landed in 2.1 or 2.2. <br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs for each category.<br/><br />
So when you find a bug, first decide if it's related to the Arabic language, or to RTL User Interface.<br/><br />
Then make it a blocker for the Meta by adding the Meta bug number to "Blocks" section in your newly-filed bug.<br/><br />
* RTL Meta: {{Bug|906270}}<br />
* Arabic Meta: {{Bug|1055447}}<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== How does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008239Arabic UI BugBash2014-08-21T23:18:18Z<p>Swilkes: /* Prerequisites */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
'''To find bugs:'''<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. <br />
** The 2.1 build is still in progress, so 2.0 is fine. Bugs filed against the 2.0 build can then be fixed and/or landed in 2.1 or 2.2. <br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
<br />
'''To participate with others during the bug bash:'''<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
'''To file bugs:'''<br />
* Create an account at https://bugzilla.mozilla.org/.<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs for each category.<br/><br />
So when you find a bug, first decide if it's related to the Arabic language, or to RTL User Interface.<br/><br />
Then make it a blocker for the Meta by adding the Meta bug number to "Blocks" section in your newly-filed bug.<br/><br />
* RTL Meta: {{Bug|906270}}<br />
* Arabic Meta: {{Bug|1055447}}<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== How does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008238Arabic UI BugBash2014-08-21T23:16:46Z<p>Swilkes: /* Prerequisites */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. <br />
** The 2.1 build is still in progress, so 2.0 is fine. Bugs filed against the 2.0 build can then be fixed and/or landed in 2.1 or 2.2. <br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
** More information on the latest Simulator add-on release is here: https://hacks.mozilla.org/2013/05/firefox-os-simulator-3-0-released/<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs for each category.<br/><br />
So when you find a bug, first decide if it's related to the Arabic language, or to RTL User Interface.<br/><br />
Then make it a blocker for the Meta by adding the Meta bug number to "Blocks" section in your newly-filed bug.<br/><br />
* RTL Meta: {{Bug|906270}}<br />
* Arabic Meta: {{Bug|1055447}}<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== How does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Arabic_UI_BugBash&diff=1008237Arabic UI BugBash2014-08-21T23:14:25Z<p>Swilkes: /* Prerequisites */</p>
<hr />
<div>= Arabic/UI Bug Bash = <br />
(still under construction, please visit again regularly for updated information!)<br/><br />
Firefox OS, The operating system by Mozilla, has gone too far in development and we've been working on improving Arabic language and Right-To-Left (RTL) User Interface in it for too long, so now the time to test this has come.<br />
During this event, the Bug Bash, you are welcome to help us test and find issues related to Arabic Localization and/or RTL UI in '''Firefox OS 2.1'''<br />
<br />
== When ==<br />
Tuesday August 26 2014<br />
* 5PM CET/9AM PST <br />
* The bug bash will last 3 hours. You may join or leave at whatever time you wish<br />
<br />
== Where == <br />
* Online on irc.mozilla.org: #bugbash (Head to this [https://wiki.mozilla.org/Irc wiki page] for details about using IRC, or just [https://client00.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2Fbugbash join via this link])<br />
* the open QA Vidyo room: https://v.mozilla.com/flex.html?roomdirect.html&key=nL4PESn1IaVh<br />
Please set up [http://www.vidyo.com/ Vidyo software] ahead of time and check a day or 2 before the bug bash that it's working correctly.<br />
<br />
== Who ==<br />
Anyone is welcome (please check prerequisites though to make sure you know what's going on)<br />
<br />
== What ==<br />
This bug bash is mainly to identify:<br />
* any possible localization issue in the Arabic language<br />
* identify UI Bidirectional issues<br />
<br />
== Prerequisites ==<br />
* Have a FirefoxOS device or a FirefoxOS simulator installed, running the 2.0 or 2.1 builds. <br />
** The 2.1 build is still in progress, so 2.0 is fine. Bugs filed against the 2.0 build can then be fixed and/or landed in 2.1 or 2.2. <br />
* Get the Firefox OS Simulator here: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator<br />
* Get the Firefox OS Simulator add-on (for the Firefox browser) here: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/<br />
* Speak the Arabic language and/or know how bidirectional (Bidi) and/or right-to-left (RTL) scripts are supposed to work and look in the user interface.<br />
* Have [http://www.vidyo.com/ Vidyo software] installed (optional, since there's also an irc backchannel: #bugbash)<br />
<br />
== Flashing Instructions ==<br />
* Simulator: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/<br />
<br />
* Geeksphone (Peak or keon): https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Geeksphone<br />
<br />
* Flame: https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Flame#Updating_your_Flame%27s_software (Please use Production master builds, http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame/ )<br />
<br />
== Prizes (Mozilla Swag \o/) ==<br />
* best blocker bug<br />
* most number of blockers<br />
* most number of bugs<br />
* best glitch / weirdest bug<br />
<br />
== Related pad ==<br />
https://etherpad.mozilla.org/Arabic-UI-BugBash<br />
(still under construction)<br />
<br />
= FAQ =<br />
<br />
== I found a bug! What's next? ==<br />
Since the Bug Bash will be about both RTL and Arabic, there are two main Meta bugs for each category.<br/><br />
So when you find a bug, first decide if it's related to the Arabic language, or to RTL User Interface.<br/><br />
Then make it a blocker for the Meta by adding the Meta bug number to "Blocks" section in your newly-filed bug.<br/><br />
* RTL Meta: {{Bug|906270}}<br />
* Arabic Meta: {{Bug|1055447}}<br />
<br />
== What is a "Meta" ? ==<br />
A Meta is a bug with a global topic that under it we collect every other bug related to that topic. Take the example of RTL Meta, every issue related to RTL will go under it, however Arabic-related bugs will go to the Arabic Meta.<br />
<br />
== How does a correct RTL interface look like ? ==<br />
<br />
[[File:Firefox_OS_Settings_Interface_in_RTL.png|thumbnail|left]]</div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=985095Firefox OS/UX2014-06-02T21:42:11Z<p>Swilkes: </p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Specs + Wireframes===<br />
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip<br />
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp<br />
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq<br />
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
===Important Dates===<br />
* April 29: Sprint 1 of 2.0 begins<br />
* May 12: Sprint 2 of 2.0 begins<br />
* May 26: Sprint 3 of 2.0 begins<br />
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).<br />
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).<br />
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).<br />
<br />
===UX Team Schedules===<br />
For Mozilla employees only.<br />
<br />
https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing<br />
<br />
=2.0 Visual Refresh=<br />
===Bug Tracking===<br />
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])<br />
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
<bugzilla><br />
{<br />
"blocks":"930561",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Visual Refresh Scope==<br />
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer. <br />
<br />
===2.0 Visual Refresh: Fuzzy Graphics Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"1016987",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950175",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Email Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950208",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Calendar Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950209",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Clock Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950212",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950751",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950760",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950765",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Settings Metabug===<br />
RESOLVED WONTFIX as this was superseded by other work. Including here in case anyone is looking for this. See bug #950787.<br />
<bugzilla><br />
{<br />
"blocks":"950787",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Lockscreen Metabug===<br />
Empty as it has no child bugs, yet. See bug #950884, currently assigned to Greg Weng for implementation, who has been working with Fang on visual design.<br />
<bugzilla><br />
{<br />
"blocks":"950884",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Vertical Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"989848",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Dialer Metabug===<br />
Empty as it has no child bugs, yet. See bug #990536. <br />
<bugzilla><br />
{<br />
"blocks":"990536",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Messaging Metabug===<br />
Empty as it has no child bugs, yet. See bug #990537. <br />
<bugzilla><br />
{<br />
"blocks":"990537",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Contacts Metabug===<br />
Empty as it has no child bugs, yet. See bug #990539. <br />
<bugzilla><br />
{<br />
"blocks":"990539",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===UI Components===<br />
Formerly known as Building Blocks.<br />
<br />
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE] <br />
<br />
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]<br />
<br />
Headers:<br />
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]<br />
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Michael Henretty; needs to be integrated with Vivien's web components work.]<br />
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [RESOLVED FIXED]<br />
<br />
===Gallery===<br />
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]<br />
<br />
===Homescreen=== <br />
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]<br />
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751<br />
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]<br />
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]<br />
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]<br />
<br />
===Font update===<br />
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872<br />
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).<br />
<br />
==System Front-end Visual Refresh==<br />
* Summary: Visual updates to headers<br />
* VXD: Przemek Abrowtowski<br />
* Team: System Front-end<br />
* Engineer: Sam Jochimek<br />
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])<br />
<br />
<bugzilla><br />
{<br />
"blocks":"950756",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
=Building Blocks=<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
===What's the problem?===<br />
The Building Blocks effort tackles an array of usability problems with the above items, including:<br />
* Inconsistent or absent usage and/or application of IxD patterns<br />
* Application failure to call or otherwise utilize standard UI components <br />
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles<br />
* Inconsistent and poorly written copy that affects translations and confuses users<br />
<br />
===How are we solving it?===<br />
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:<br />
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.<br />
<br />
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.<br />
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site. <br />
<br />
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates. <br />
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May. <br />
<br />
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.<br />
<br />
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).<br />
<br />
* We are working the Mozilla technical writer for MDN to update and publish all of the above.<br />
<br />
===Bug Tracking===<br />
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])<br />
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])<br />
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])<br />
<br />
===Who is doing what?===<br />
* Stephany: project and vendor management<br />
* Przemek<br />
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj<br />
* 2.0 List of component changes:<br />
** Headers centered font<br />
** Headers italic font (Bug 981928)<br />
** Buttons (Bug 981887)<br />
** Input fields (Bug 981882)<br />
<br />
* 2.1 List of component changes (dependent on architecture changes)<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
* Arnau<br />
** Implementation of Przemek's updated Common Controls<br />
** Have detailed list for 2.0 and 2.1<br />
** Also working on implementation of Visual Refresh for 2.0.<br />
<br />
* Casey<br />
** Gaia style architecture:<br />
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. <br />
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.<br />
** Package management: Agree on package management scheme; create implementation plan. <br />
<br />
* Amy<br />
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."<br />
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc. <br />
<br />
* Harly:<br />
** Define & gather documentation<br />
** Finalize design<br />
** Review & Circulate<br />
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)<br />
** Post on MDN<br />
** Update continuously<br />
<br />
* Esther: <br />
** Working closely with Harly on defining, updating and sharing BB documentation<br />
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).<br />
<br />
* Chuck (Esther's writer):<br />
** Copy audit and rewrite<br />
** Updating and committing strings for localization updates<br />
** Updated style guide (+ strings)will be a final deliverable<br />
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/<br />
** Will help designers and localizers<br />
** Harly's BB slides touch on title and sentence case, some punctuation<br />
<br />
* Reviewers:<br />
** Rob and Harly (Frameworks team)<br />
** Matej (copy)<br />
** Axel (L10N visual and text)<br />
** Jeff Beatty (committing new copy to repos)<br />
<br />
===Updates===<br />
====2014-04-18====<br />
* We received are reviewing the copy audit project proposal from the contractor.<br />
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.<br />
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls<br />
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.<br />
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.<br />
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward. <br />
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.<br />
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1<br />
<br />
====2014-04-01====<br />
* Copy Audit & Strings:<br />
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!<br />
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.<br />
<br />
* Building Blocks:<br />
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:<br />
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)<br />
** Add right and left button language to Confirmation Dialogs<br />
** Add input and keyboard behavior to Dialogs<br />
** Add Wizards to BB (common in FTU, app set-up for email, etc.)<br />
** Ok to have text in buttons in a Drawer<br />
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible<br />
** Create UX recommendations for Accordions<br />
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container<br />
** Add cursor and hint text behavior to Input<br />
** Add a screen showing where Banners appear when the keyboard is up<br />
** For Switches, clarify that L and R behavior is in regards to text, not the screen<br />
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist<br />
** Include an Integer Selector<br />
** Add looping behavior as an option for Selectors (hours, minutes, months, days)<br />
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.<br />
** Consider naming Picker "Media Picker"<br />
** Add a second type of Search for non-text content (a la iPhone App Store Search)<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team members, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=976950Firefox OS/UX2014-05-14T17:20:50Z<p>Swilkes: /* UI Components */</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Specs + Wireframes===<br />
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip<br />
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp<br />
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq<br />
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
===Important Dates===<br />
* April 29: Sprint 1 of 2.0 begins<br />
* May 12: Sprint 2 of 2.0 begins<br />
* May 26: Sprint 3 of 2.0 begins<br />
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).<br />
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).<br />
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).<br />
<br />
===UX Team Schedules===<br />
For Mozilla employees only.<br />
<br />
https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing<br />
<br />
=2.0 Visual Refresh=<br />
===Bug Tracking===<br />
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])<br />
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
<bugzilla><br />
{<br />
"blocks":"930561",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Visual Refresh Scope==<br />
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer. <br />
<br />
===2.0 Visual Refresh: Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950175",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Email Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950208",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Calendar Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950209",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Clock Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950212",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950751",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950760",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950765",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Settings Metabug===<br />
RESOLVED WONTFIX as this was superseded by other work. Including here in case anyone is looking for this. See bug #950787.<br />
<bugzilla><br />
{<br />
"blocks":"950787",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Lockscreen Metabug===<br />
Empty as it has no child bugs, yet. See bug #950884, currently assigned to Greg Weng for implementation, who has been working with Fang on visual design.<br />
<bugzilla><br />
{<br />
"blocks":"950884",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Vertical Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"989848",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Dialer Metabug===<br />
Empty as it has no child bugs, yet. See bug #990536. <br />
<bugzilla><br />
{<br />
"blocks":"990536",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Messaging Metabug===<br />
Empty as it has no child bugs, yet. See bug #990537. <br />
<bugzilla><br />
{<br />
"blocks":"990537",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Contacts Metabug===<br />
Empty as it has no child bugs, yet. See bug #990539. <br />
<bugzilla><br />
{<br />
"blocks":"990539",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===UI Components===<br />
Formerly known as Building Blocks.<br />
<br />
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE] <br />
<br />
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]<br />
<br />
Headers:<br />
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]<br />
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Michael Henretty; needs to be integrated with Vivien's web components work.]<br />
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [RESOLVED FIXED]<br />
<br />
===Gallery===<br />
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]<br />
<br />
===Homescreen=== <br />
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]<br />
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751<br />
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]<br />
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]<br />
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]<br />
<br />
===Font update===<br />
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872<br />
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).<br />
<br />
==System Front-end Visual Refresh==<br />
* Summary: Visual updates to headers<br />
* VXD: Przemek Abrowtowski<br />
* Team: System Front-end<br />
* Engineer: Sam Jochimek<br />
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])<br />
<br />
<bugzilla><br />
{<br />
"blocks":"950756",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
=Building Blocks=<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
===What's the problem?===<br />
The Building Blocks effort tackles an array of usability problems with the above items, including:<br />
* Inconsistent or absent usage and/or application of IxD patterns<br />
* Application failure to call or otherwise utilize standard UI components <br />
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles<br />
* Inconsistent and poorly written copy that affects translations and confuses users<br />
<br />
===How are we solving it?===<br />
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:<br />
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.<br />
<br />
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.<br />
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site. <br />
<br />
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates. <br />
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May. <br />
<br />
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.<br />
<br />
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).<br />
<br />
* We are working the Mozilla technical writer for MDN to update and publish all of the above.<br />
<br />
===Bug Tracking===<br />
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])<br />
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])<br />
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])<br />
<br />
===Who is doing what?===<br />
* Stephany: project and vendor management<br />
* Przemek<br />
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj<br />
* 2.0 List of component changes:<br />
** Headers centered font<br />
** Headers italic font (Bug 981928)<br />
** Buttons (Bug 981887)<br />
** Input fields (Bug 981882)<br />
<br />
* 2.1 List of component changes (dependent on architecture changes)<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
* Arnau<br />
** Implementation of Przemek's updated Common Controls<br />
** Have detailed list for 2.0 and 2.1<br />
** Also working on implementation of Visual Refresh for 2.0.<br />
<br />
* Casey<br />
** Gaia style architecture:<br />
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. <br />
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.<br />
** Package management: Agree on package management scheme; create implementation plan. <br />
<br />
* Amy<br />
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."<br />
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc. <br />
<br />
* Harly:<br />
** Define & gather documentation<br />
** Finalize design<br />
** Review & Circulate<br />
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)<br />
** Post on MDN<br />
** Update continuously<br />
<br />
* Esther: <br />
** Working closely with Harly on defining, updating and sharing BB documentation<br />
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).<br />
<br />
* Chuck (Esther's writer):<br />
** Copy audit and rewrite<br />
** Updating and committing strings for localization updates<br />
** Updated style guide (+ strings)will be a final deliverable<br />
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/<br />
** Will help designers and localizers<br />
** Harly's BB slides touch on title and sentence case, some punctuation<br />
<br />
* Reviewers:<br />
** Rob and Harly (Frameworks team)<br />
** Matej (copy)<br />
** Axel (L10N visual and text)<br />
** Jeff Beatty (committing new copy to repos)<br />
<br />
===Updates===<br />
====2014-04-18====<br />
* We received are reviewing the copy audit project proposal from the contractor.<br />
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.<br />
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls<br />
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.<br />
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.<br />
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward. <br />
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.<br />
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1<br />
<br />
====2014-04-01====<br />
* Copy Audit & Strings:<br />
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!<br />
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.<br />
<br />
* Building Blocks:<br />
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:<br />
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)<br />
** Add right and left button language to Confirmation Dialogs<br />
** Add input and keyboard behavior to Dialogs<br />
** Add Wizards to BB (common in FTU, app set-up for email, etc.)<br />
** Ok to have text in buttons in a Drawer<br />
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible<br />
** Create UX recommendations for Accordions<br />
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container<br />
** Add cursor and hint text behavior to Input<br />
** Add a screen showing where Banners appear when the keyboard is up<br />
** For Switches, clarify that L and R behavior is in regards to text, not the screen<br />
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist<br />
** Include an Integer Selector<br />
** Add looping behavior as an option for Selectors (hours, minutes, months, days)<br />
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.<br />
** Consider naming Picker "Media Picker"<br />
** Add a second type of Search for non-text content (a la iPhone App Store Search)<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team members, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=976948Firefox OS/UX2014-05-14T17:18:23Z<p>Swilkes: /* 2.0 Visual Refresh: Settings Metabug */</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Specs + Wireframes===<br />
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip<br />
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp<br />
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq<br />
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
===Important Dates===<br />
* April 29: Sprint 1 of 2.0 begins<br />
* May 12: Sprint 2 of 2.0 begins<br />
* May 26: Sprint 3 of 2.0 begins<br />
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).<br />
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).<br />
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).<br />
<br />
===UX Team Schedules===<br />
For Mozilla employees only.<br />
<br />
https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing<br />
<br />
=2.0 Visual Refresh=<br />
===Bug Tracking===<br />
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])<br />
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
<bugzilla><br />
{<br />
"blocks":"930561",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Visual Refresh Scope==<br />
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer. <br />
<br />
===2.0 Visual Refresh: Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950175",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Email Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950208",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Calendar Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950209",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Clock Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950212",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950751",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950760",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950765",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Settings Metabug===<br />
RESOLVED WONTFIX as this was superseded by other work. Including here in case anyone is looking for this. See bug #950787.<br />
<bugzilla><br />
{<br />
"blocks":"950787",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Lockscreen Metabug===<br />
Empty as it has no child bugs, yet. See bug #950884, currently assigned to Greg Weng for implementation, who has been working with Fang on visual design.<br />
<bugzilla><br />
{<br />
"blocks":"950884",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Vertical Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"989848",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Dialer Metabug===<br />
Empty as it has no child bugs, yet. See bug #990536. <br />
<bugzilla><br />
{<br />
"blocks":"990536",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Messaging Metabug===<br />
Empty as it has no child bugs, yet. See bug #990537. <br />
<bugzilla><br />
{<br />
"blocks":"990537",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Contacts Metabug===<br />
Empty as it has no child bugs, yet. See bug #990539. <br />
<bugzilla><br />
{<br />
"blocks":"990539",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===UI Components===<br />
Formerly known as Building Blocks.<br />
<br />
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE] <br />
<br />
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]<br />
<br />
Headers:<br />
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]<br />
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Sam, who returns from PTO on 4/28]<br />
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [NEW - Assigned to Pavel]<br />
<br />
===Gallery===<br />
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]<br />
<br />
===Homescreen=== <br />
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]<br />
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751<br />
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]<br />
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]<br />
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]<br />
<br />
===Font update===<br />
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872<br />
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).<br />
<br />
==System Front-end Visual Refresh==<br />
* Summary: Visual updates to headers<br />
* VXD: Przemek Abrowtowski<br />
* Team: System Front-end<br />
* Engineer: Sam Jochimek<br />
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])<br />
<br />
<bugzilla><br />
{<br />
"blocks":"950756",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
=Building Blocks=<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
===What's the problem?===<br />
The Building Blocks effort tackles an array of usability problems with the above items, including:<br />
* Inconsistent or absent usage and/or application of IxD patterns<br />
* Application failure to call or otherwise utilize standard UI components <br />
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles<br />
* Inconsistent and poorly written copy that affects translations and confuses users<br />
<br />
===How are we solving it?===<br />
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:<br />
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.<br />
<br />
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.<br />
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site. <br />
<br />
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates. <br />
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May. <br />
<br />
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.<br />
<br />
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).<br />
<br />
* We are working the Mozilla technical writer for MDN to update and publish all of the above.<br />
<br />
===Bug Tracking===<br />
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])<br />
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])<br />
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])<br />
<br />
===Who is doing what?===<br />
* Stephany: project and vendor management<br />
* Przemek<br />
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj<br />
* 2.0 List of component changes:<br />
** Headers centered font<br />
** Headers italic font (Bug 981928)<br />
** Buttons (Bug 981887)<br />
** Input fields (Bug 981882)<br />
<br />
* 2.1 List of component changes (dependent on architecture changes)<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
* Arnau<br />
** Implementation of Przemek's updated Common Controls<br />
** Have detailed list for 2.0 and 2.1<br />
** Also working on implementation of Visual Refresh for 2.0.<br />
<br />
* Casey<br />
** Gaia style architecture:<br />
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. <br />
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.<br />
** Package management: Agree on package management scheme; create implementation plan. <br />
<br />
* Amy<br />
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."<br />
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc. <br />
<br />
* Harly:<br />
** Define & gather documentation<br />
** Finalize design<br />
** Review & Circulate<br />
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)<br />
** Post on MDN<br />
** Update continuously<br />
<br />
* Esther: <br />
** Working closely with Harly on defining, updating and sharing BB documentation<br />
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).<br />
<br />
* Chuck (Esther's writer):<br />
** Copy audit and rewrite<br />
** Updating and committing strings for localization updates<br />
** Updated style guide (+ strings)will be a final deliverable<br />
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/<br />
** Will help designers and localizers<br />
** Harly's BB slides touch on title and sentence case, some punctuation<br />
<br />
* Reviewers:<br />
** Rob and Harly (Frameworks team)<br />
** Matej (copy)<br />
** Axel (L10N visual and text)<br />
** Jeff Beatty (committing new copy to repos)<br />
<br />
===Updates===<br />
====2014-04-18====<br />
* We received are reviewing the copy audit project proposal from the contractor.<br />
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.<br />
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls<br />
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.<br />
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.<br />
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward. <br />
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.<br />
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1<br />
<br />
====2014-04-01====<br />
* Copy Audit & Strings:<br />
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!<br />
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.<br />
<br />
* Building Blocks:<br />
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:<br />
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)<br />
** Add right and left button language to Confirmation Dialogs<br />
** Add input and keyboard behavior to Dialogs<br />
** Add Wizards to BB (common in FTU, app set-up for email, etc.)<br />
** Ok to have text in buttons in a Drawer<br />
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible<br />
** Create UX recommendations for Accordions<br />
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container<br />
** Add cursor and hint text behavior to Input<br />
** Add a screen showing where Banners appear when the keyboard is up<br />
** For Switches, clarify that L and R behavior is in regards to text, not the screen<br />
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist<br />
** Include an Integer Selector<br />
** Add looping behavior as an option for Selectors (hours, minutes, months, days)<br />
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.<br />
** Consider naming Picker "Media Picker"<br />
** Add a second type of Search for non-text content (a la iPhone App Store Search)<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team members, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=976946Firefox OS/UX2014-05-14T17:16:42Z<p>Swilkes: /* 2.0 Visual Refresh: Lockscreen Metabug */</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Specs + Wireframes===<br />
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip<br />
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp<br />
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq<br />
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
===Important Dates===<br />
* April 29: Sprint 1 of 2.0 begins<br />
* May 12: Sprint 2 of 2.0 begins<br />
* May 26: Sprint 3 of 2.0 begins<br />
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).<br />
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).<br />
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).<br />
<br />
===UX Team Schedules===<br />
For Mozilla employees only.<br />
<br />
https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing<br />
<br />
=2.0 Visual Refresh=<br />
===Bug Tracking===<br />
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])<br />
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
<bugzilla><br />
{<br />
"blocks":"930561",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Visual Refresh Scope==<br />
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer. <br />
<br />
===2.0 Visual Refresh: Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950175",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Email Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950208",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Calendar Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950209",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Clock Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950212",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950751",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950760",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950765",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Settings Metabug===<br />
Empty as it has no child bugs, yet. See bug #950787.<br />
<bugzilla><br />
{<br />
"blocks":"950787",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Lockscreen Metabug===<br />
Empty as it has no child bugs, yet. See bug #950884, currently assigned to Greg Weng for implementation, who has been working with Fang on visual design.<br />
<bugzilla><br />
{<br />
"blocks":"950884",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Vertical Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"989848",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Dialer Metabug===<br />
Empty as it has no child bugs, yet. See bug #990536. <br />
<bugzilla><br />
{<br />
"blocks":"990536",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Messaging Metabug===<br />
Empty as it has no child bugs, yet. See bug #990537. <br />
<bugzilla><br />
{<br />
"blocks":"990537",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Contacts Metabug===<br />
Empty as it has no child bugs, yet. See bug #990539. <br />
<bugzilla><br />
{<br />
"blocks":"990539",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===UI Components===<br />
Formerly known as Building Blocks.<br />
<br />
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE] <br />
<br />
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]<br />
<br />
Headers:<br />
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]<br />
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Sam, who returns from PTO on 4/28]<br />
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [NEW - Assigned to Pavel]<br />
<br />
===Gallery===<br />
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]<br />
<br />
===Homescreen=== <br />
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]<br />
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751<br />
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]<br />
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]<br />
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]<br />
<br />
===Font update===<br />
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872<br />
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).<br />
<br />
==System Front-end Visual Refresh==<br />
* Summary: Visual updates to headers<br />
* VXD: Przemek Abrowtowski<br />
* Team: System Front-end<br />
* Engineer: Sam Jochimek<br />
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])<br />
<br />
<bugzilla><br />
{<br />
"blocks":"950756",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
=Building Blocks=<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
===What's the problem?===<br />
The Building Blocks effort tackles an array of usability problems with the above items, including:<br />
* Inconsistent or absent usage and/or application of IxD patterns<br />
* Application failure to call or otherwise utilize standard UI components <br />
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles<br />
* Inconsistent and poorly written copy that affects translations and confuses users<br />
<br />
===How are we solving it?===<br />
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:<br />
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.<br />
<br />
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.<br />
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site. <br />
<br />
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates. <br />
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May. <br />
<br />
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.<br />
<br />
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).<br />
<br />
* We are working the Mozilla technical writer for MDN to update and publish all of the above.<br />
<br />
===Bug Tracking===<br />
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])<br />
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])<br />
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])<br />
<br />
===Who is doing what?===<br />
* Stephany: project and vendor management<br />
* Przemek<br />
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj<br />
* 2.0 List of component changes:<br />
** Headers centered font<br />
** Headers italic font (Bug 981928)<br />
** Buttons (Bug 981887)<br />
** Input fields (Bug 981882)<br />
<br />
* 2.1 List of component changes (dependent on architecture changes)<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
* Arnau<br />
** Implementation of Przemek's updated Common Controls<br />
** Have detailed list for 2.0 and 2.1<br />
** Also working on implementation of Visual Refresh for 2.0.<br />
<br />
* Casey<br />
** Gaia style architecture:<br />
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. <br />
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.<br />
** Package management: Agree on package management scheme; create implementation plan. <br />
<br />
* Amy<br />
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."<br />
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc. <br />
<br />
* Harly:<br />
** Define & gather documentation<br />
** Finalize design<br />
** Review & Circulate<br />
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)<br />
** Post on MDN<br />
** Update continuously<br />
<br />
* Esther: <br />
** Working closely with Harly on defining, updating and sharing BB documentation<br />
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).<br />
<br />
* Chuck (Esther's writer):<br />
** Copy audit and rewrite<br />
** Updating and committing strings for localization updates<br />
** Updated style guide (+ strings)will be a final deliverable<br />
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/<br />
** Will help designers and localizers<br />
** Harly's BB slides touch on title and sentence case, some punctuation<br />
<br />
* Reviewers:<br />
** Rob and Harly (Frameworks team)<br />
** Matej (copy)<br />
** Axel (L10N visual and text)<br />
** Jeff Beatty (committing new copy to repos)<br />
<br />
===Updates===<br />
====2014-04-18====<br />
* We received are reviewing the copy audit project proposal from the contractor.<br />
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.<br />
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls<br />
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.<br />
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.<br />
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward. <br />
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.<br />
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1<br />
<br />
====2014-04-01====<br />
* Copy Audit & Strings:<br />
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!<br />
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.<br />
<br />
* Building Blocks:<br />
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:<br />
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)<br />
** Add right and left button language to Confirmation Dialogs<br />
** Add input and keyboard behavior to Dialogs<br />
** Add Wizards to BB (common in FTU, app set-up for email, etc.)<br />
** Ok to have text in buttons in a Drawer<br />
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible<br />
** Create UX recommendations for Accordions<br />
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container<br />
** Add cursor and hint text behavior to Input<br />
** Add a screen showing where Banners appear when the keyboard is up<br />
** For Switches, clarify that L and R behavior is in regards to text, not the screen<br />
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist<br />
** Include an Integer Selector<br />
** Add looping behavior as an option for Selectors (hours, minutes, months, days)<br />
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.<br />
** Consider naming Picker "Media Picker"<br />
** Add a second type of Search for non-text content (a la iPhone App Store Search)<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team members, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=976638Firefox OS/UX2014-05-13T22:12:46Z<p>Swilkes: /* 2.0 Visual Refresh: DSDS Contacts Metabug */</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Specs + Wireframes===<br />
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip<br />
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp<br />
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq<br />
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
===Important Dates===<br />
* April 29: Sprint 1 of 2.0 begins<br />
* May 12: Sprint 2 of 2.0 begins<br />
* May 26: Sprint 3 of 2.0 begins<br />
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).<br />
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).<br />
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).<br />
<br />
===UX Team Schedules===<br />
For Mozilla employees only.<br />
<br />
https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing<br />
<br />
=2.0 Visual Refresh=<br />
===Bug Tracking===<br />
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])<br />
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
<bugzilla><br />
{<br />
"blocks":"930561",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Visual Refresh Scope==<br />
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer. <br />
<br />
===2.0 Visual Refresh: Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950175",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Email Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950208",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Calendar Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950209",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Clock Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950212",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950751",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950760",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950765",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Settings Metabug===<br />
Empty as it has no child bugs, yet. See bug #950787.<br />
<bugzilla><br />
{<br />
"blocks":"950787",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Lockscreen Metabug===<br />
Empty as it has no child bugs, yet. See bug #950884.<br />
<bugzilla><br />
{<br />
"blocks":"950884",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Vertical Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"989848",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Dialer Metabug===<br />
Empty as it has no child bugs, yet. See bug #990536. <br />
<bugzilla><br />
{<br />
"blocks":"990536",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Messaging Metabug===<br />
Empty as it has no child bugs, yet. See bug #990537. <br />
<bugzilla><br />
{<br />
"blocks":"990537",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Contacts Metabug===<br />
Empty as it has no child bugs, yet. See bug #990539. <br />
<bugzilla><br />
{<br />
"blocks":"990539",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===UI Components===<br />
Formerly known as Building Blocks.<br />
<br />
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE] <br />
<br />
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]<br />
<br />
Headers:<br />
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]<br />
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Sam, who returns from PTO on 4/28]<br />
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [NEW - Assigned to Pavel]<br />
<br />
===Gallery===<br />
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]<br />
<br />
===Homescreen=== <br />
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]<br />
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751<br />
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]<br />
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]<br />
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]<br />
<br />
===Font update===<br />
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872<br />
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).<br />
<br />
==System Front-end Visual Refresh==<br />
* Summary: Visual updates to headers<br />
* VXD: Przemek Abrowtowski<br />
* Team: System Front-end<br />
* Engineer: Sam Jochimek<br />
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])<br />
<br />
<bugzilla><br />
{<br />
"blocks":"950756",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
=Building Blocks=<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
===What's the problem?===<br />
The Building Blocks effort tackles an array of usability problems with the above items, including:<br />
* Inconsistent or absent usage and/or application of IxD patterns<br />
* Application failure to call or otherwise utilize standard UI components <br />
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles<br />
* Inconsistent and poorly written copy that affects translations and confuses users<br />
<br />
===How are we solving it?===<br />
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:<br />
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.<br />
<br />
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.<br />
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site. <br />
<br />
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates. <br />
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May. <br />
<br />
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.<br />
<br />
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).<br />
<br />
* We are working the Mozilla technical writer for MDN to update and publish all of the above.<br />
<br />
===Bug Tracking===<br />
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])<br />
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])<br />
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])<br />
<br />
===Who is doing what?===<br />
* Stephany: project and vendor management<br />
* Przemek<br />
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj<br />
* 2.0 List of component changes:<br />
** Headers centered font<br />
** Headers italic font (Bug 981928)<br />
** Buttons (Bug 981887)<br />
** Input fields (Bug 981882)<br />
<br />
* 2.1 List of component changes (dependent on architecture changes)<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
* Arnau<br />
** Implementation of Przemek's updated Common Controls<br />
** Have detailed list for 2.0 and 2.1<br />
** Also working on implementation of Visual Refresh for 2.0.<br />
<br />
* Casey<br />
** Gaia style architecture:<br />
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. <br />
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.<br />
** Package management: Agree on package management scheme; create implementation plan. <br />
<br />
* Amy<br />
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."<br />
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc. <br />
<br />
* Harly:<br />
** Define & gather documentation<br />
** Finalize design<br />
** Review & Circulate<br />
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)<br />
** Post on MDN<br />
** Update continuously<br />
<br />
* Esther: <br />
** Working closely with Harly on defining, updating and sharing BB documentation<br />
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).<br />
<br />
* Chuck (Esther's writer):<br />
** Copy audit and rewrite<br />
** Updating and committing strings for localization updates<br />
** Updated style guide (+ strings)will be a final deliverable<br />
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/<br />
** Will help designers and localizers<br />
** Harly's BB slides touch on title and sentence case, some punctuation<br />
<br />
* Reviewers:<br />
** Rob and Harly (Frameworks team)<br />
** Matej (copy)<br />
** Axel (L10N visual and text)<br />
** Jeff Beatty (committing new copy to repos)<br />
<br />
===Updates===<br />
====2014-04-18====<br />
* We received are reviewing the copy audit project proposal from the contractor.<br />
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.<br />
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls<br />
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.<br />
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.<br />
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward. <br />
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.<br />
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1<br />
<br />
====2014-04-01====<br />
* Copy Audit & Strings:<br />
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!<br />
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.<br />
<br />
* Building Blocks:<br />
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:<br />
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)<br />
** Add right and left button language to Confirmation Dialogs<br />
** Add input and keyboard behavior to Dialogs<br />
** Add Wizards to BB (common in FTU, app set-up for email, etc.)<br />
** Ok to have text in buttons in a Drawer<br />
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible<br />
** Create UX recommendations for Accordions<br />
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container<br />
** Add cursor and hint text behavior to Input<br />
** Add a screen showing where Banners appear when the keyboard is up<br />
** For Switches, clarify that L and R behavior is in regards to text, not the screen<br />
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist<br />
** Include an Integer Selector<br />
** Add looping behavior as an option for Selectors (hours, minutes, months, days)<br />
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.<br />
** Consider naming Picker "Media Picker"<br />
** Add a second type of Search for non-text content (a la iPhone App Store Search)<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team members, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=976637Firefox OS/UX2014-05-13T22:09:10Z<p>Swilkes: /* 2.0 Visual Refresh: DSDS Messaging Metabug */</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Specs + Wireframes===<br />
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip<br />
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp<br />
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq<br />
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
===Important Dates===<br />
* April 29: Sprint 1 of 2.0 begins<br />
* May 12: Sprint 2 of 2.0 begins<br />
* May 26: Sprint 3 of 2.0 begins<br />
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).<br />
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).<br />
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).<br />
<br />
===UX Team Schedules===<br />
For Mozilla employees only.<br />
<br />
https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing<br />
<br />
=2.0 Visual Refresh=<br />
===Bug Tracking===<br />
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])<br />
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
<bugzilla><br />
{<br />
"blocks":"930561",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Visual Refresh Scope==<br />
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer. <br />
<br />
===2.0 Visual Refresh: Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950175",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Email Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950208",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Calendar Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950209",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Clock Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950212",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950751",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950760",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950765",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Settings Metabug===<br />
Empty as it has no child bugs, yet. See bug #950787.<br />
<bugzilla><br />
{<br />
"blocks":"950787",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Lockscreen Metabug===<br />
Empty as it has no child bugs, yet. See bug #950884.<br />
<bugzilla><br />
{<br />
"blocks":"950884",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Vertical Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"989848",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Dialer Metabug===<br />
Empty as it has no child bugs, yet. See bug #990536. <br />
<bugzilla><br />
{<br />
"blocks":"990536",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Messaging Metabug===<br />
Empty as it has no child bugs, yet. See bug #990537. <br />
<bugzilla><br />
{<br />
"blocks":"990537",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"990539",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===UI Components===<br />
Formerly known as Building Blocks.<br />
<br />
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE] <br />
<br />
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]<br />
<br />
Headers:<br />
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]<br />
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Sam, who returns from PTO on 4/28]<br />
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [NEW - Assigned to Pavel]<br />
<br />
===Gallery===<br />
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]<br />
<br />
===Homescreen=== <br />
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]<br />
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751<br />
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]<br />
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]<br />
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]<br />
<br />
===Font update===<br />
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872<br />
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).<br />
<br />
==System Front-end Visual Refresh==<br />
* Summary: Visual updates to headers<br />
* VXD: Przemek Abrowtowski<br />
* Team: System Front-end<br />
* Engineer: Sam Jochimek<br />
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])<br />
<br />
<bugzilla><br />
{<br />
"blocks":"950756",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
=Building Blocks=<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
===What's the problem?===<br />
The Building Blocks effort tackles an array of usability problems with the above items, including:<br />
* Inconsistent or absent usage and/or application of IxD patterns<br />
* Application failure to call or otherwise utilize standard UI components <br />
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles<br />
* Inconsistent and poorly written copy that affects translations and confuses users<br />
<br />
===How are we solving it?===<br />
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:<br />
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.<br />
<br />
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.<br />
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site. <br />
<br />
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates. <br />
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May. <br />
<br />
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.<br />
<br />
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).<br />
<br />
* We are working the Mozilla technical writer for MDN to update and publish all of the above.<br />
<br />
===Bug Tracking===<br />
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])<br />
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])<br />
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])<br />
<br />
===Who is doing what?===<br />
* Stephany: project and vendor management<br />
* Przemek<br />
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj<br />
* 2.0 List of component changes:<br />
** Headers centered font<br />
** Headers italic font (Bug 981928)<br />
** Buttons (Bug 981887)<br />
** Input fields (Bug 981882)<br />
<br />
* 2.1 List of component changes (dependent on architecture changes)<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
* Arnau<br />
** Implementation of Przemek's updated Common Controls<br />
** Have detailed list for 2.0 and 2.1<br />
** Also working on implementation of Visual Refresh for 2.0.<br />
<br />
* Casey<br />
** Gaia style architecture:<br />
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. <br />
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.<br />
** Package management: Agree on package management scheme; create implementation plan. <br />
<br />
* Amy<br />
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."<br />
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc. <br />
<br />
* Harly:<br />
** Define & gather documentation<br />
** Finalize design<br />
** Review & Circulate<br />
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)<br />
** Post on MDN<br />
** Update continuously<br />
<br />
* Esther: <br />
** Working closely with Harly on defining, updating and sharing BB documentation<br />
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).<br />
<br />
* Chuck (Esther's writer):<br />
** Copy audit and rewrite<br />
** Updating and committing strings for localization updates<br />
** Updated style guide (+ strings)will be a final deliverable<br />
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/<br />
** Will help designers and localizers<br />
** Harly's BB slides touch on title and sentence case, some punctuation<br />
<br />
* Reviewers:<br />
** Rob and Harly (Frameworks team)<br />
** Matej (copy)<br />
** Axel (L10N visual and text)<br />
** Jeff Beatty (committing new copy to repos)<br />
<br />
===Updates===<br />
====2014-04-18====<br />
* We received are reviewing the copy audit project proposal from the contractor.<br />
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.<br />
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls<br />
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.<br />
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.<br />
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward. <br />
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.<br />
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1<br />
<br />
====2014-04-01====<br />
* Copy Audit & Strings:<br />
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!<br />
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.<br />
<br />
* Building Blocks:<br />
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:<br />
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)<br />
** Add right and left button language to Confirmation Dialogs<br />
** Add input and keyboard behavior to Dialogs<br />
** Add Wizards to BB (common in FTU, app set-up for email, etc.)<br />
** Ok to have text in buttons in a Drawer<br />
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible<br />
** Create UX recommendations for Accordions<br />
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container<br />
** Add cursor and hint text behavior to Input<br />
** Add a screen showing where Banners appear when the keyboard is up<br />
** For Switches, clarify that L and R behavior is in regards to text, not the screen<br />
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist<br />
** Include an Integer Selector<br />
** Add looping behavior as an option for Selectors (hours, minutes, months, days)<br />
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.<br />
** Consider naming Picker "Media Picker"<br />
** Add a second type of Search for non-text content (a la iPhone App Store Search)<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team members, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=976636Firefox OS/UX2014-05-13T22:05:44Z<p>Swilkes: /* 2.0 Visual Refresh: DSDS Dialer Metabug */</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Specs + Wireframes===<br />
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip<br />
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp<br />
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq<br />
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
===Important Dates===<br />
* April 29: Sprint 1 of 2.0 begins<br />
* May 12: Sprint 2 of 2.0 begins<br />
* May 26: Sprint 3 of 2.0 begins<br />
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).<br />
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).<br />
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).<br />
<br />
===UX Team Schedules===<br />
For Mozilla employees only.<br />
<br />
https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing<br />
<br />
=2.0 Visual Refresh=<br />
===Bug Tracking===<br />
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])<br />
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
<bugzilla><br />
{<br />
"blocks":"930561",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Visual Refresh Scope==<br />
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer. <br />
<br />
===2.0 Visual Refresh: Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950175",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Email Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950208",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Calendar Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950209",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Clock Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950212",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950751",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950760",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950765",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Settings Metabug===<br />
Empty as it has no child bugs, yet. See bug #950787.<br />
<bugzilla><br />
{<br />
"blocks":"950787",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Lockscreen Metabug===<br />
Empty as it has no child bugs, yet. See bug #950884.<br />
<bugzilla><br />
{<br />
"blocks":"950884",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Vertical Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"989848",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Dialer Metabug===<br />
Empty as it has no child bugs, yet. See bug #990536. <br />
<bugzilla><br />
{<br />
"blocks":"990536",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"990537",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"990539",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===UI Components===<br />
Formerly known as Building Blocks.<br />
<br />
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE] <br />
<br />
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]<br />
<br />
Headers:<br />
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]<br />
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Sam, who returns from PTO on 4/28]<br />
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [NEW - Assigned to Pavel]<br />
<br />
===Gallery===<br />
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]<br />
<br />
===Homescreen=== <br />
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]<br />
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751<br />
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]<br />
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]<br />
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]<br />
<br />
===Font update===<br />
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872<br />
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).<br />
<br />
==System Front-end Visual Refresh==<br />
* Summary: Visual updates to headers<br />
* VXD: Przemek Abrowtowski<br />
* Team: System Front-end<br />
* Engineer: Sam Jochimek<br />
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])<br />
<br />
<bugzilla><br />
{<br />
"blocks":"950756",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
=Building Blocks=<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
===What's the problem?===<br />
The Building Blocks effort tackles an array of usability problems with the above items, including:<br />
* Inconsistent or absent usage and/or application of IxD patterns<br />
* Application failure to call or otherwise utilize standard UI components <br />
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles<br />
* Inconsistent and poorly written copy that affects translations and confuses users<br />
<br />
===How are we solving it?===<br />
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:<br />
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.<br />
<br />
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.<br />
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site. <br />
<br />
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates. <br />
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May. <br />
<br />
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.<br />
<br />
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).<br />
<br />
* We are working the Mozilla technical writer for MDN to update and publish all of the above.<br />
<br />
===Bug Tracking===<br />
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])<br />
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])<br />
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])<br />
<br />
===Who is doing what?===<br />
* Stephany: project and vendor management<br />
* Przemek<br />
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj<br />
* 2.0 List of component changes:<br />
** Headers centered font<br />
** Headers italic font (Bug 981928)<br />
** Buttons (Bug 981887)<br />
** Input fields (Bug 981882)<br />
<br />
* 2.1 List of component changes (dependent on architecture changes)<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
* Arnau<br />
** Implementation of Przemek's updated Common Controls<br />
** Have detailed list for 2.0 and 2.1<br />
** Also working on implementation of Visual Refresh for 2.0.<br />
<br />
* Casey<br />
** Gaia style architecture:<br />
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. <br />
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.<br />
** Package management: Agree on package management scheme; create implementation plan. <br />
<br />
* Amy<br />
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."<br />
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc. <br />
<br />
* Harly:<br />
** Define & gather documentation<br />
** Finalize design<br />
** Review & Circulate<br />
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)<br />
** Post on MDN<br />
** Update continuously<br />
<br />
* Esther: <br />
** Working closely with Harly on defining, updating and sharing BB documentation<br />
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).<br />
<br />
* Chuck (Esther's writer):<br />
** Copy audit and rewrite<br />
** Updating and committing strings for localization updates<br />
** Updated style guide (+ strings)will be a final deliverable<br />
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/<br />
** Will help designers and localizers<br />
** Harly's BB slides touch on title and sentence case, some punctuation<br />
<br />
* Reviewers:<br />
** Rob and Harly (Frameworks team)<br />
** Matej (copy)<br />
** Axel (L10N visual and text)<br />
** Jeff Beatty (committing new copy to repos)<br />
<br />
===Updates===<br />
====2014-04-18====<br />
* We received are reviewing the copy audit project proposal from the contractor.<br />
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.<br />
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls<br />
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.<br />
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.<br />
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward. <br />
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.<br />
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1<br />
<br />
====2014-04-01====<br />
* Copy Audit & Strings:<br />
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!<br />
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.<br />
<br />
* Building Blocks:<br />
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:<br />
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)<br />
** Add right and left button language to Confirmation Dialogs<br />
** Add input and keyboard behavior to Dialogs<br />
** Add Wizards to BB (common in FTU, app set-up for email, etc.)<br />
** Ok to have text in buttons in a Drawer<br />
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible<br />
** Create UX recommendations for Accordions<br />
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container<br />
** Add cursor and hint text behavior to Input<br />
** Add a screen showing where Banners appear when the keyboard is up<br />
** For Switches, clarify that L and R behavior is in regards to text, not the screen<br />
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist<br />
** Include an Integer Selector<br />
** Add looping behavior as an option for Selectors (hours, minutes, months, days)<br />
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.<br />
** Consider naming Picker "Media Picker"<br />
** Add a second type of Search for non-text content (a la iPhone App Store Search)<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team members, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=976634Firefox OS/UX2014-05-13T22:03:32Z<p>Swilkes: /* 2.0 Visual Refresh: Lockscreen Metabug */</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Specs + Wireframes===<br />
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip<br />
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp<br />
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq<br />
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
===Important Dates===<br />
* April 29: Sprint 1 of 2.0 begins<br />
* May 12: Sprint 2 of 2.0 begins<br />
* May 26: Sprint 3 of 2.0 begins<br />
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).<br />
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).<br />
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).<br />
<br />
===UX Team Schedules===<br />
For Mozilla employees only.<br />
<br />
https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing<br />
<br />
=2.0 Visual Refresh=<br />
===Bug Tracking===<br />
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])<br />
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
<bugzilla><br />
{<br />
"blocks":"930561",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Visual Refresh Scope==<br />
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer. <br />
<br />
===2.0 Visual Refresh: Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950175",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Email Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950208",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Calendar Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950209",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Clock Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950212",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950751",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950760",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950765",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Settings Metabug===<br />
Empty as it has no child bugs, yet. See bug #950787.<br />
<bugzilla><br />
{<br />
"blocks":"950787",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Lockscreen Metabug===<br />
Empty as it has no child bugs, yet. See bug #950884.<br />
<bugzilla><br />
{<br />
"blocks":"950884",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Vertical Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"989848",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"990536",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"990537",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"990539",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===UI Components===<br />
Formerly known as Building Blocks.<br />
<br />
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE] <br />
<br />
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]<br />
<br />
Headers:<br />
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]<br />
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Sam, who returns from PTO on 4/28]<br />
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [NEW - Assigned to Pavel]<br />
<br />
===Gallery===<br />
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]<br />
<br />
===Homescreen=== <br />
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]<br />
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751<br />
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]<br />
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]<br />
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]<br />
<br />
===Font update===<br />
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872<br />
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).<br />
<br />
==System Front-end Visual Refresh==<br />
* Summary: Visual updates to headers<br />
* VXD: Przemek Abrowtowski<br />
* Team: System Front-end<br />
* Engineer: Sam Jochimek<br />
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])<br />
<br />
<bugzilla><br />
{<br />
"blocks":"950756",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
=Building Blocks=<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
===What's the problem?===<br />
The Building Blocks effort tackles an array of usability problems with the above items, including:<br />
* Inconsistent or absent usage and/or application of IxD patterns<br />
* Application failure to call or otherwise utilize standard UI components <br />
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles<br />
* Inconsistent and poorly written copy that affects translations and confuses users<br />
<br />
===How are we solving it?===<br />
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:<br />
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.<br />
<br />
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.<br />
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site. <br />
<br />
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates. <br />
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May. <br />
<br />
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.<br />
<br />
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).<br />
<br />
* We are working the Mozilla technical writer for MDN to update and publish all of the above.<br />
<br />
===Bug Tracking===<br />
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])<br />
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])<br />
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])<br />
<br />
===Who is doing what?===<br />
* Stephany: project and vendor management<br />
* Przemek<br />
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj<br />
* 2.0 List of component changes:<br />
** Headers centered font<br />
** Headers italic font (Bug 981928)<br />
** Buttons (Bug 981887)<br />
** Input fields (Bug 981882)<br />
<br />
* 2.1 List of component changes (dependent on architecture changes)<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
* Arnau<br />
** Implementation of Przemek's updated Common Controls<br />
** Have detailed list for 2.0 and 2.1<br />
** Also working on implementation of Visual Refresh for 2.0.<br />
<br />
* Casey<br />
** Gaia style architecture:<br />
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. <br />
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.<br />
** Package management: Agree on package management scheme; create implementation plan. <br />
<br />
* Amy<br />
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."<br />
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc. <br />
<br />
* Harly:<br />
** Define & gather documentation<br />
** Finalize design<br />
** Review & Circulate<br />
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)<br />
** Post on MDN<br />
** Update continuously<br />
<br />
* Esther: <br />
** Working closely with Harly on defining, updating and sharing BB documentation<br />
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).<br />
<br />
* Chuck (Esther's writer):<br />
** Copy audit and rewrite<br />
** Updating and committing strings for localization updates<br />
** Updated style guide (+ strings)will be a final deliverable<br />
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/<br />
** Will help designers and localizers<br />
** Harly's BB slides touch on title and sentence case, some punctuation<br />
<br />
* Reviewers:<br />
** Rob and Harly (Frameworks team)<br />
** Matej (copy)<br />
** Axel (L10N visual and text)<br />
** Jeff Beatty (committing new copy to repos)<br />
<br />
===Updates===<br />
====2014-04-18====<br />
* We received are reviewing the copy audit project proposal from the contractor.<br />
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.<br />
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls<br />
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.<br />
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.<br />
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward. <br />
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.<br />
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1<br />
<br />
====2014-04-01====<br />
* Copy Audit & Strings:<br />
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!<br />
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.<br />
<br />
* Building Blocks:<br />
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:<br />
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)<br />
** Add right and left button language to Confirmation Dialogs<br />
** Add input and keyboard behavior to Dialogs<br />
** Add Wizards to BB (common in FTU, app set-up for email, etc.)<br />
** Ok to have text in buttons in a Drawer<br />
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible<br />
** Create UX recommendations for Accordions<br />
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container<br />
** Add cursor and hint text behavior to Input<br />
** Add a screen showing where Banners appear when the keyboard is up<br />
** For Switches, clarify that L and R behavior is in regards to text, not the screen<br />
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist<br />
** Include an Integer Selector<br />
** Add looping behavior as an option for Selectors (hours, minutes, months, days)<br />
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.<br />
** Consider naming Picker "Media Picker"<br />
** Add a second type of Search for non-text content (a la iPhone App Store Search)<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team members, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkeshttps://wiki.mozilla.org/index.php?title=Firefox_OS/UX&diff=976632Firefox OS/UX2014-05-13T22:03:14Z<p>Swilkes: /* 2.0 Visual Refresh: Settings Metabug */</p>
<hr />
<div>Team members, locations, roles and areas of focus:<br />
https://wiki.mozilla.org/Gaia/UXTeam<br />
<br />
This page contains describes the major efforts the Firefox OS UX team is currently working on. Please contact Stephany Wilkes or Jaime Chen with any questions you may have. <br />
<br />
===Specs + Wireframes===<br />
* 1.3: https://mozilla.box.com/s/0u4jt353ei9ov2c150ip<br />
* 1.4: https://mozilla.box.com/s/yt7hl2leikogcuili7kp<br />
* 1.5: https://mozilla.box.com/s/641ovdmhkancwvgxv0vq<br />
* Visual Refresh: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
===Important Dates===<br />
* April 29: Sprint 1 of 2.0 begins<br />
* May 12: Sprint 2 of 2.0 begins<br />
* May 26: Sprint 3 of 2.0 begins<br />
* June 10: 2.0 FC - BRANCH. Sprint 4 of 2.0 begins (testing and stabilization).<br />
* June 23: Sprint 5 of 2.0 begins (testing and stabilization).<br />
* July 7: Sprint 6 of 2.0 begins (testing and stabilization).<br />
<br />
===UX Team Schedules===<br />
For Mozilla employees only.<br />
<br />
https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ArdCjhGHWKX1dGhOR2RPZ2xEc3cxMTdnMlh2X1ZiaUE&usp=sharing<br />
<br />
=2.0 Visual Refresh=<br />
===Bug Tracking===<br />
* Visual Refresh Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=930561 bug-930561])<br />
* Visual Refresh materials on Box: https://mozilla.box.com/s/pov1z0nx7whtwrzmd0dz<br />
<br />
<bugzilla><br />
{<br />
"blocks":"930561",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Visual Refresh Scope==<br />
This section includes all of the meta bugs for the 2.0 visual refresh, to make status by app/team clearer. <br />
<br />
===2.0 Visual Refresh: Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950175",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Email Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950208",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Calendar Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950209",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Clock Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950212",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950751",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950760",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"950765",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Settings Metabug===<br />
Empty as it has no child bugs, yet. See bug #950787.<br />
<bugzilla><br />
{<br />
"blocks":"950787",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Lockscreen Metabug===<br />
Empty as it has no child bugs, yet.<br />
<bugzilla><br />
{<br />
"blocks":"950884",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: Vertical Homescreen Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"989848",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Dialer Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"990536",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Messaging Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"990537",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===2.0 Visual Refresh: DSDS Contacts Metabug===<br />
<bugzilla><br />
{<br />
"blocks":"990539",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
===UI Components===<br />
Formerly known as Building Blocks.<br />
<br />
* Buttons (states including normal, press, disabled, function, with icon), Special Buttons, List Nav/Selection Buttons with “>": https://bugzilla.mozilla.org/show_bug.cgi?id=981887 [DONE] <br />
<br />
* Input Fields: https://bugzilla.mozilla.org/show_bug.cgi?id=981882 [DONE]<br />
<br />
Headers:<br />
* Alignment: https://bugzilla.mozilla.org/show_bug.cgi?id=983812 [REOPENED]<br />
* Truncation Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=908300 [NEW - Assigned to Sam, who returns from PTO on 4/28]<br />
* Font change: https://bugzilla.mozilla.org/show_bug.cgi?id=981928 [NEW - Assigned to Pavel]<br />
<br />
===Gallery===<br />
* Update toolbars to use BB: https://bugzilla.mozilla.org/show_bug.cgi?id=952445 [NEW - ASSIGNED to Diego]<br />
<br />
===Homescreen=== <br />
* Wallpaper: https://bugzilla.mozilla.org/show_bug.cgi?id=991366 [NEW - ASSIGNED to Patryk]<br />
* Polish for current home screen: https://bugzilla.mozilla.org/show_bug.cgi?id=950751<br />
** '''Status as of 2014-04-25:''' 13 total (2 open, 11 resolved) [NEARLY COMPLETE]<br />
* Update app icon: https://bugzilla.mozilla.org/show_bug.cgi?id=975535 [RESOLVED FIXED]<br />
* e.me: https://bugzilla.mozilla.org/show_bug.cgi?id=950769 [NEW - UNASSIGNED]<br />
<br />
===Font update===<br />
* https://bugzilla.mozilla.org/show_bug.cgi?id=987872<br />
** '''Status as of 2014-04-25''': Patryk to meet with engineering (Vivien and Jonas) to determine if there's an approach that visual design can work with on https://bugzilla.mozilla.org/show_bug.cgi?id=948856 (system fonts).<br />
<br />
==System Front-end Visual Refresh==<br />
* Summary: Visual updates to headers<br />
* VXD: Przemek Abrowtowski<br />
* Team: System Front-end<br />
* Engineer: Sam Jochimek<br />
* Metabug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=950756 bug-950756])<br />
<br />
<bugzilla><br />
{<br />
"blocks":"950756",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, depends_on, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
=Building Blocks=<br />
==Overview==<br />
"Building Blocks" is an umbrella term that encompasses system-wide:<br />
* Interaction design (IxD) patterns<br />
** Guidelines and standards that define common units of design presentation across Firefox OS<br />
* UI components<br />
** Actual interface elements in which patterns are embodied, like headers, footers, gestures, and so on<br />
* Style elements<br />
** The visual look and feel (colors, fonts, and so on) applied to the UI components that embody design patterns<br />
* Copy <br />
** Text within all of the above, as in notifications, error messages, and so on<br />
<br />
===What's the problem?===<br />
The Building Blocks effort tackles an array of usability problems with the above items, including:<br />
* Inconsistent or absent usage and/or application of IxD patterns<br />
* Application failure to call or otherwise utilize standard UI components <br />
* Legacy CSS implementation issues that prevent easy, sustainable application and updates of visual styles<br />
* Inconsistent and poorly written copy that affects translations and confuses users<br />
<br />
===How are we solving it?===<br />
In mid-March 2014, the UX team began a focused effort to address the Building Blocks issues described above, specifically:<br />
* We created a team dedicated to fixing Building Blocks problems. This group is comprised of Harly Hsu, Rob MacDonald, Przemek Abratowski, Casey Yee, Stephany Wilkes and two contractors from Plural Designs. This ensures consistent, long-term effort is applied.<br />
<br />
* We began a major IxD pattern audit and overhaul, building on an initial audit completed by Harly and presented to the UX team during a January work week. The team is making a lot of progress.<br />
** Inconsistencies are identified, design decisions are made and documented, and move on to development implementation and public documentation on the Mozilla Developer Network (MDN) site. <br />
<br />
* We are conducting research on how to better implement UI components and visual styles, for easier system-wide technical implementation, consistency and updates. <br />
** Currently, we are investigating web components and OOCSS as possibilities, and hope to report on this by the last week of April or early May. <br />
<br />
* We have development team support: the Sys FE team has Building Blocks as part of their work list and can implement the design changes we find and fix during our IxD audits.<br />
<br />
* We have engaged a technical writer to clean up and improve Firefox OS copy, tone and writing style guide (thus improving L10N strings and translation quality as well).<br />
<br />
* We are working the Mozilla technical writer for MDN to update and publish all of the above.<br />
<br />
===Bug Tracking===<br />
* Metabug: Apps not linking to Building Blocks: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967684 bug-967684])<br />
* Apply Arnau's style updates where BB are called: ([https://bugzilla.mozilla.org/show_bug.cgi?id=967843 bug-967843])<br />
* Metabug: Building Block Unification ([https://bugzilla.mozilla.org/show_bug.cgi?id=965889 bug-967843])<br />
<br />
===Who is doing what?===<br />
* Stephany: project and vendor management<br />
* Przemek<br />
* See the Designing UI Components In Code Presentation: https://mozilla.box.com/s/6gwmbiam5vttk3yhcdaj<br />
* 2.0 List of component changes:<br />
** Headers centered font<br />
** Headers italic font (Bug 981928)<br />
** Buttons (Bug 981887)<br />
** Input fields (Bug 981882)<br />
<br />
* 2.1 List of component changes (dependent on architecture changes)<br />
** sub header & link<br />
** lists<br />
** tabs & toolbars<br />
** filters<br />
** button<br />
** circle button<br />
** Navigational list link<br />
** Value selector list link<br />
** text link<br />
** input fields<br />
** progress bar <br />
** activity bars<br />
** spinners<br />
** on/off switch<br />
** check box and check mark<br />
** slider<br />
** options menu & animation<br />
** object menu & animation<br />
** system prompts<br />
** value selectors<br />
** system toasts<br />
** invites & alarms<br />
<br />
* Arnau<br />
** Implementation of Przemek's updated Common Controls<br />
** Have detailed list for 2.0 and 2.1<br />
** Also working on implementation of Visual Refresh for 2.0.<br />
<br />
* Casey<br />
** Gaia style architecture:<br />
** Plan for 2.1 przemek visuals -- level of change not possible without a new styles architecture. <br />
** Prototype and Research: Web components global styles permeability; OOCSS, SMACSS, approaches; BEM naming convention.<br />
** Package management: Agree on package management scheme; create implementation plan. <br />
<br />
* Amy<br />
** [DONE] New Visual Design templates and guidelines, i.e. "This is how we do VxD on Firefox OS."<br />
** Even after we have "design in code," we will still need to tell developers what to do: i.e. what assets need to stretch, and how; etc. <br />
<br />
* Harly:<br />
** Define & gather documentation<br />
** Finalize design<br />
** Review & Circulate<br />
** Technical writer reviews (Esther's resource and internal Mozilla - Chris?)<br />
** Post on MDN<br />
** Update continuously<br />
<br />
* Esther: <br />
** Working closely with Harly on defining, updating and sharing BB documentation<br />
** Modifying MDN version of the Building Blocks webpage (https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Building_Blocks).<br />
<br />
* Chuck (Esther's writer):<br />
** Copy audit and rewrite<br />
** Updating and committing strings for localization updates<br />
** Updated style guide (+ strings)will be a final deliverable<br />
** Need equivalent rules for Firefox OS UI: https://www.mozilla.org/en-US/styleguide/communications/copy-rules/<br />
** Will help designers and localizers<br />
** Harly's BB slides touch on title and sentence case, some punctuation<br />
<br />
* Reviewers:<br />
** Rob and Harly (Frameworks team)<br />
** Matej (copy)<br />
** Axel (L10N visual and text)<br />
** Jeff Beatty (committing new copy to repos)<br />
<br />
===Updates===<br />
====2014-04-18====<br />
* We received are reviewing the copy audit project proposal from the contractor.<br />
* Casey provided a UX team demo of the OOCSS work he has been doing, implementing Przemek's updated visual design.<br />
** Casey's sample CSS organization scheme is at: https://github.com/caseyyee/gaia-controls<br />
* As noted elsewhere on this page, we've formed a Building Blocks working group that will review and finalize designs, and then move them into developer backlogs for implementation.<br />
** Our goal is to have an initial developer backlog by April 25, which will be updated every week or so as new designs are finalized.<br />
* Vivien, Yan, Arnau and Casey have been working together on web components, which is being evaluated as a possible means of implementing Building Blocks going forward. <br />
** Our goal is to have a technically informed sense of whether or not web components are workable by early May.<br />
** Arnau has been included by Vivien as part of this effort. Here is a link to the PR that he submitted to Yan: https://github.com/yor-mozilla-com/gaia-header/pull/1<br />
<br />
====2014-04-01====<br />
* Copy Audit & Strings:<br />
** We have all of the preparatory materials needed for the copy audit and Chuck (technical writer and general contracting wizard) is reviewing these ahead of improving our voice and style guide, ahead of writing and submitting new strings. One step at a time!<br />
** Met with Jeff Beatty for a technical tutorial on TBX and TMX (string and dictionary) files and how to not break them and submit them via Github. Stephany shared findings with Esther.<br />
<br />
* Building Blocks:<br />
For a detailed view, Esther, Harly and Chuck have divided the following work list and will be working on these items in the next week or so. Our BB documentation will be updated accordingly and begin to be published to MDN when it's a bit more cohesive:<br />
** Add gestures map; swap out current dots with gestures throughout doc (we should have a new set of stencils that include all this, v6 I believe)<br />
** Add right and left button language to Confirmation Dialogs<br />
** Add input and keyboard behavior to Dialogs<br />
** Add Wizards to BB (common in FTU, app set-up for email, etc.)<br />
** Ok to have text in buttons in a Drawer<br />
** Split out behavior of Drawers to: auto-close upon selection, manual close if multi-select is possible<br />
** Create UX recommendations for Accordions<br />
** Decide upon a method for text that doesn't fit in one line in Headers and List Items; currently truncation (maybe a fade truncation) is highly recommended by Plural as opposed to resizing text or resizing a container<br />
** Add cursor and hint text behavior to Input<br />
** Add a screen showing where Banners appear when the keyboard is up<br />
** For Switches, clarify that L and R behavior is in regards to text, not the screen<br />
** Plural recommends a max of 5 Tabs for phone; also clarify that actions go in the header if tabs exist<br />
** Include an Integer Selector<br />
** Add looping behavior as an option for Selectors (hours, minutes, months, days)<br />
** Add notes to Edit Mode that clarify that "undo" remains until mode is exited. Deletion is finalized at the point of exiting.<br />
** Consider naming Picker "Media Picker"<br />
** Add a second type of Search for non-text content (a la iPhone App Store Search)<br />
<br />
=UX Most Wanted=<br />
* Summary: These come from our usability studies, UX team members, and so on.<br />
* Meta bug: ([https://bugzilla.mozilla.org/show_bug.cgi?id=994991 bug-994991])<br />
<bugzilla><br />
{<br />
"blocks": "994991",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla><br />
<br />
==Papercuts==<br />
* Summary: There are various little things that make it difficult for a Firefox OS phone to be a daily-use phone. The little things add up to big experience.<br />
* Meta bug: https://bugzilla.mozilla.org/show_bug.cgi?id=949551<br />
<br />
<bugzilla><br />
{<br />
"blocks": "949551",<br />
"include_fields": "id, summary, status, target_milestone, resolution, assigned_to, blocks, whiteboard, cf_blocking_b2g"<br />
}<br />
</bugzilla></div>Swilkes