Add-ons in the Fennec UI
Madhava Enros, Mozilla

Fennec design themes and goals
• Maximize screen space dedicated to content
• Minimize typing wherever possible
• Give primacy of interaction to a finger-oriented touchscreen
• accommodate finger size
• increase the physicality of the interface
• Support the quick lookup scenario

also: block popups,
share location, install
software, etc.

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Fusce tristique. Cras ipsum
urna, semper vitae, aliquet eget, rutrum
sed, pede. Morbi at sapien. Etiam cursus
tincidunt est. Praesent et mauris. Nullam
sodales, nulla et facilisis lobortis, libero
enim posuere lacus, vitae convallis sapien
odio in enim. Quisque pede. Cras dui. Sed
lobortis leo vel velit. Aenean aliquam, lacus
eu porta suscipit, magna nisi cursus leo, in
dignissim felis felis ultrices urna.
Pellentesque accumsan porta ipsum.
Aenean egestas.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed,
pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et
mauris. Nullam sodales, nulla et facilisis lobortis, libero enim
posuere lacus, vitae convallis sapien odio in enim. Quisque pede.
Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta
suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna.
Pellentesque accumsan porta ipsum. Aenean egestas.
+ various transient alerts,
awesomescreen

What about starting from Firefox?

}
menubars
toolbars
sidebars no
statusbars
context menus

menubars
random access to many options
toolbars
quick actions, alerts, ambient indicators, search
sidebars
concurrent/background tasks, tools for content area
statusbars
quick access, alerts, ambient indicators,
context menus
object related actions, hiding many action (unfortunately)

sidebars become permanent tabs?
quick access go on awesomebar screen?
above titlebar or below content?
ambient indicators become alerts?
or, better, peek indicators?
tap and hold for context access
be creative - here: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Fusce tristique. Cras ipsum
urna, semper vitae, aliquet eget, rutrum
sed, pede. Morbi at sapien. Etiam cursus
tincidunt est. Praesent et mauris. Nullam
sodales, nulla et facilisis lobortis, libero
enim posuere lacus, vitae convallis sapien
odio in enim. Quisque pede. Cras dui. Sed
lobortis leo vel velit. Aenean aliquam, lacus
eu porta suscipit, magna nisi cursus leo, in
dignissim felis felis ultrices urna.
Pellentesque accumsan porta ipsum.
Aenean egestas.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed,
pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et
or in gestures
mauris. Nullam sodales, nulla et facilisis lobortis, libero enim
posuere lacus, vitae convallis sapien odio in enim. Quisque pede.
Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta
suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna.
Pellentesque accumsan porta ipsum. Aenean egestas.

Did he say “peek?”
3
12

a
b
c d Lorem ipsum dolor sit amet, consectetuer e f g
adipiscing elit. Fusce tristique. Cras ipsum
urna, semper vitae, aliquet eget, rutrum
sed, pede. Morbi at sapien. Etiam cursus
tincidunt est. Praesent et mauris. Nullam
sodales, nulla et facilisis lobortis, libero
enim posuere lacus, vitae convallis sapien
odio in enim. Quisque pede. Cras dui. Sed
lobortis leo vel velit. Aenean aliquam, lacus
eu porta suscipit, magna nisi cursus leo, in
dignissim felis felis ultrices urna.
Pellentesque accumsan porta ipsum.
Aenean egestas.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed,
pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et
mauris. Nullam sodales, nulla et facilisis lobortis, libero enim
posuere lacus, vitae convallis sapien odio in enim. Quisque pede.
Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta
suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna.
Pellentesque accumsan porta ipsum. Aenean egestas.
h

Technical resources
http://starkravingfinkle.org/blog/2009/05/resources-for-fennec-add-on-developers/
https://wiki.mozilla.org/Mobile/Fennec/Architecture
https://wiki.mozilla.org/Mobile/Fennec/Extensions
https://wiki.mozilla.org/Mobile/Fennec/CodeSnippets
https://wiki.mozilla.org/Mobile/Fennec/Extensions/BestPractices

Please get in touch!
madhava@mozilla.com
twitter: madhava
blog: madhava.com/egotism/
madhava in #UX and #mobile
Bug 477628 - Fennec should offer a pleasant user-experience
https://bugzilla.mozilla.org/show_bug.cgi?id=477628