Firefox & add-ons UI mockups

284 views
Skip to first unread message

Jeff Griffiths

unread,
Mar 13, 2012, 5:12:46 PM3/13/12
to mozilla-la...@googlegroups.com, Stephen Horlander
In case you missed the weekly meeting today, Firefox UI designer Stephen
Horlander dropped by to show us these mockups:

http://people.mozilla.com/~shorlander/files/addons-in-toolbar-i01/addons-in-toolbar.html

I'll break down the capabilities based on our discussion with Stephen.
Stephen: please correct anything I get wrong!

* there will be dedicated UI space for add-on buttons to the left of the
location bar, as well as the ability to place add-on buttons inside the
location bar similar to how the Firefox Share add-on currently works.

* add-on buttons are single-purpose, and can be 1 of 5 different types:
Toggles, Panels, Toolbars, Widgets and Sidebars

* Toggles: a button that is either on or off, and visually reflects this
state

* Panels: a button that displays an anchored panel, similar to how you
can anchor a panel to a widget in the SDK currently.

* Toolbars: a button that toggles the visibility of a toolbar

* Widgets: a 'live' widget of some sort that displays web content; the
example used in the mocks is a weather widget. Stephen commented that
there will likely be limits on the width of these, perhaps 2 or 3
'button-widths'.

* Sidebars: a button that toggles the visibility of a sidebar.

The last screenshots on that page illustrate how add-on buttons in the
toolbar might overflow into an anchored list.

We'd love any feedback regarding these concepts particularly from the
perspective of add-ons developers.

cheers, Jeff

Erik Vold

unread,
Mar 13, 2012, 5:40:18 PM3/13/12
to mozilla-la...@googlegroups.com
Hey,

See below:

On 2012-03-13, at 2:12 PM, Jeff Griffiths <jgrif...@mozilla.com> wrote:

> * there will be dedicated UI space for add-on buttons to the left of the location bar, as well as the ability to place add-on buttons inside the location bar similar to how the Firefox Share add-on currently works.

The add-on bar is still an option right?

> * add-on buttons are single-purpose, and can be 1 of 5 different types: Toggles, Panels, Toolbars, Widgets and Sidebars

Maybe a menu type? submenus in a panel would be strange afaict.

Also imho FF shouldn't use one set of button types while add-on sdk users are forced to use a different type. Addon authors should be able to create buttons that match the style of native buttons.

> * Toolbars: a button that toggles the visibility of a toolbar

Users could still toggle the toolbar the normal way, without a button right?

> * Sidebars: a button that toggles the visibility of a sidebar.

Don't forget horizontal bars, they seem to be used too.

Erik


Jeff Griffiths

unread,
Mar 13, 2012, 6:01:17 PM3/13/12
to Erik Vold, mozilla-la...@googlegroups.com
On 12-03-13 2:40 PM, Erik Vold wrote:
...

> On 2012-03-13, at 2:12 PM, Jeff Griffiths<jgrif...@mozilla.com>
> wrote:
>
>> * there will be dedicated UI space for add-on buttons to the left
>> of the location bar, as well as the ability to place add-on buttons
>> inside the location bar similar to how the Firefox Share add-on
>> currently works.
>
> The add-on bar is still an option right?

My impression is that we want to kill the add-on bar.

>> * add-on buttons are single-purpose, and can be 1 of 5 different
>> types: Toggles, Panels, Toolbars, Widgets and Sidebars
>
> Maybe a menu type? submenus in a panel would be strange afaict.

I asked about this - the feeling was that an anchored panel should cover
most use cases.

> Also imho FF shouldn't use one set of button types while add-on sdk
> users are forced to use a different type. Addon authors should be
> able to create buttons that match the style of native buttons.

I *think* the idea is that these would be the native buttons provided by
Firefox.

>> * Toolbars: a button that toggles the visibility of a toolbar
>
> Users could still toggle the toolbar the normal way, without a button
> right?

I don't know, but I assume so. I assume based on our history with this
sort of thing that the UI bits would al have some sort of corresponding
menu access.

>> * Sidebars: a button that toggles the visibility of a sidebar.
>
> Don't forget horizontal bars, they seem to be used too.

You mean, a Firebug/Web Console-style interface? This wasn't covered in
the mocks, obviously, perhaps Stephen can comment.

Dave Townsend

unread,
Mar 14, 2012, 1:53:46 AM3/14/12
to mozilla-la...@googlegroups.com, Stephen Horlander
There are a few more options than are shown in just those mockups. You can display your item as either a button in the location bar, a button in the toolbar or a small widget in the toolbar. Each of those can either be a toggle, a sidebar toggle, a toolbar toggle, open a panel, etc. though we may restrict the larger widgets from some of those behaviours.

grbradt

unread,
Mar 14, 2012, 8:19:53 AM3/14/12
to mozilla-labs-jetpack
Hi,
I think a widget limited to 2 or 3 button-widths totally sucks. I
don't think users will want to click a button to get information they
now get without interaction. Not to mention a major rewrite of most of
my add-ons would be required. If it came to that, I would just abandon
them.

regards,
George

Alexandre poirot

unread,
Mar 14, 2012, 9:11:03 AM3/14/12
to mozilla-la...@googlegroups.com
Hi Georges,

Can you give us some links to your addons?
It would be helpfull to bring your usecases in the discussion.
From what we have seen, all usecase we have found of "large widgets" were limited to some sort of toolbar. Like grooveshark addon which display play/pause/next buttons.
Other medium width usecases that we have seen are memory/cpu meters that can fit in 2-3 button width, and looks like something that can be displayed in a popup.
So that I'm really eager to see what is your usecase!


++
Alex

2012/3/14 grbradt <grb...@gmail.com>
--
You received this message because you are subscribed to the Google Groups "mozilla-labs-jetpack" group.
To post to this group, send email to mozilla-la...@googlegroups.com.
To unsubscribe from this group, send email to mozilla-labs-jet...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mozilla-labs-jetpack?hl=en.


Alexandre poirot

unread,
Mar 14, 2012, 9:20:39 AM3/14/12
to mozilla-la...@googlegroups.com
Hi Erik,

I totally agree with you about being able to show a menu from a widget. Panels are powerfull, but it is hard to have a native look and feel. And it is especially hard to fake somekind of menu with Panel API, whereas it looks like a common usecase! (I have made multiple xul addons that display an icon in status bar which just display a menu)

About addon-bar, we clearly would like to get rid of it. I still have some doubt about that. I'm still wondering if we can put all widgets in the urlbar. Do you have same feeling? Do you have some examples? Do you think some usecases of widget will be hard to move to urlbar?

Otherwise, I really like these mockups and the way it behaves. It looks fantastic! I'm really happy to see some work being done around toolbars. I hope that it will be a win for users. i.e. having this simple cross icon in order to close toolbars, and having a clear/simple pattern to show a toolbar (click on a widget).


++
Alex

2012/3/13 Erik Vold <erik...@gmail.com>

grbradt

unread,
Mar 14, 2012, 10:44:13 AM3/14/12
to mozilla-labs-jetpack
Hi,
The two I would be most concerned about are:

Canadian Weather (SDK-based)
https://addons.mozilla.org/en-US/firefox/addon/canadian-weather/?src=dp-dl-othersby

Simple Clocks (XUL-based)
https://addons.mozilla.org/en-US/firefox/addon/simple-clocks/?src=dp-dl-othersby

Both can be quite wide depending on the amount of data the user
chooses to display.
Regards,
George

On Mar 14, 9:11 am, Alexandre poirot <poirot.a...@gmail.com> wrote:
> Hi Georges,
>
> Can you give us some links to your addons?
> It would be helpfull to bring your usecases in the discussion.
> From what we have seen, all usecase we have found of "large widgets" were
> limited to some sort of toolbar. Like grooveshark addon which display
> play/pause/next buttons.
> Other medium width usecases that we have seen are memory/cpu meters that
> can fit in 2-3 button width, and looks like something that can be displayed
> in a popup.
> So that I'm really eager to see what is your usecase!
>
> ++
> Alex
>
> 2012/3/14 grbradt <grbr...@gmail.com>

Paul Morris

unread,
Mar 15, 2012, 5:22:24 PM3/15/12
to mozilla-la...@googlegroups.com
Hi Jeff, ZER0, and everyone,

Thanks for sharing the UI mockups, they look really good! 

Instead of killing the add-on bar, why not give it a nice retirement?  So still an option for users, but up to them to turn it on, and move their add-ons to it.  That way you're not taking customization options away. 

Or at least... would it make sense to offer it as an add-on?  (If that wouldn't be too meta...)  I'm thinking of "Vertical Toolbar" https://addons.mozilla.org/en-US/firefox/addon/vertical-toolbar/  

On limiting widget widths, I'd rather see "best UI" guidance than a hard-coded requirement.  Who knows what people might come up with?  Seems like a pretty big gap between 2-3 button widths and a full toolbar, (if you want something always visible).  You may end up seeing add-ons that use half-full toolbars or that just string multiple widgets together, neither of which would be that pretty...

Cheers,
-Paul

Jeff Griffiths

unread,
Mar 16, 2012, 11:59:39 AM3/16/12
to mozilla-la...@googlegroups.com
Hi Paul,

Thanks for the feedback!

When I stated previously that 'My impression was that we wanted to
kill the add-on bar', I worded that too strongly. At best we might
initially deprecate the add-on bar, and by we I do not mean the SDK
team but the Firefox team.

No decision has been made, no secret patches exits, etc.

Another uncertainty is how ( and when ) these features will be added
to Firefox. I do not know what the implementation for the new toolbar
buttons will look like for developers, I just know that the SDK team
is keenly interested in supporting them as we get many many requests
for a toolbar button ( instead of the current Widget implementation ).

Dave Townsend

unread,
Mar 20, 2012, 4:02:45 PM3/20/12
to mozilla-la...@googlegroups.com
Hey Paul, can you help me understand why you'd like to keep the add-on bar in the status area as an option in the future? I know the UX team would rather it just went away and it'd certainly be more work for us to keep it as an option in the API so I'd like to have a good idea of what cases there are where it makes more sense than just moving everything to the toolbar.
--
You received this message because you are subscribed to the Google Groups
"mozilla-labs-jetpack" group.
To post to this group, send email to mozilla-labs-jetpack@googlegroups.com
.
To unsubscribe from this group, send email to

Paul Morris

unread,
Mar 20, 2012, 8:43:57 PM3/20/12
to mozilla-la...@googlegroups.com
Hey Dave, I'm just thinking about someone who had a lot of add-ons and found that the URL/main toolbar was not enough room for them all.  The optional add-on bar would offer another place to put them, to keep them all visible, especially on smaller screens.

Having it also just keeps open more possibilities for what people can do with addons (especially if widgets are allowed to be wider than 2-3 button widths, but I understand that that doesn't look like the direction things are going).  Since customization and user choice are things that set Firefox apart from other browsers, and people are slow to change ("Status-4-Evar" has over 150,000 users, for example: https://addons.mozilla.org/en-US/firefox/addon/status-4-evar/) ...so those might be reasons to keep it around as an option as people transition to add-ons in the main toolbar.

All of that said, I can understand the desire to keep things simple and minimize workloads.  Personally I would probably avoid using the add-on bar if I could to give more screen to content...  (I'm more concerned about the idea of width limits on widgets, but I suppose these things are interrelated and go together.)

(Just another thought of something to consider: the option of putting toolbars at the bottom of the window, as well as at the top.)

Cheers,
-Paul


Dave Townsend wrote:
To view this discussion on the web visit https://groups.google.com/d/msg/mozilla-labs-jetpack/-/dZ_4QB0TqpsJ.
To post to this group, send email to mozilla-la...@googlegroups.com.
To unsubscribe from this group, send email to mozilla-labs-jet...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages