Add new UI elements

[jviereck]

Adding new functionality is done ATM by adding a new entry to the context menu. This won't scale and is not very discoverable. Therefore I propose we add a "option" button to the toolbar like here on the right of the camera:

This allows us to add new functionality easily without adding new buttons to the toolbar.

\cc @shorlander --- the designer of the current viewer look, what do you think about this?

\cc @Snuffleupagus, @gigaherz as we where discussing about adding new functionality to the context menu won't scale.

[gigaherz]

I don't know how practical this idea would be, or how wanted, or if I already exposed it before, but I'll go ahead and write it here.

Some months ago (when it was decided to use a context menu for the rotation because the toolbar had a limited space in small-screen devices), I tought that it may make the most sense to make an hierarchy of toolbar items, each with a priority level, so that when there's enough space, more items can be shown, and if the space is limited, the less common actions are moved away into the "overflow panel".

In this sense there could be for example:

1. The sidebar toggle, with highest priority,
2. The page selector group, with highest priotity, and internally split into the up/down buttons with the same priority, and the input box with a lower priority (so that the input area can be hidden if necessary, but not the page change buttons).
3. The zoom controls, with high priority but lower than the page change, and the page fitting/zoom box also lower than the zoom controls.
4. Page rotation controls, with lower priority,
5. Scrolling mode (singl/continuous),
6. Multiple pages at once setting,
7. ...

On top of the grouping/priority hierarchy, a setting could be added to the viewer to define the max value shown by default, regardless of the available space, to avoid cluttering if the number of configurable features grows too large, but hopefully customizable by the user for those like me who like to have everything shown at once.

The overflow area, in turn, could look like one of multiple things, from secondary toolbar space in a panel, to a vertical menu similar to the context menu, or even some sort of "smart" layout that tries to fit the options in a rectangular area as compact as possible (no I'm not going to write that one ;P).

[Snuffleupagus]

@jviereck This echoes ideas I've been thinking about as well.
@gigaherz Nice concept, but I wouldn't want to implement it either ;-)

but hopefully customizable by the user for those like me who like to have everything shown at once.

+1

[timvandermeij]

I really prefer such an Android-like option button. In my opinion, the context menu is not a suitable place for these options. In the context menu, these functionalities will barely be discovered as the position is not logical. I think an option button with a submenu containing the items that are currently in the context menu is a great way of making the options more discoverable and keeping them compact at the same time.

[jviereck]

See also this opinion: http://input.mozilla.org/en-US/opinion/3586678

Built in pdf reader: when you right click on the pdf, the menu is so long with so many useless options such as "save video as", "save audio as", but since the file is a pdf, I don't see why these options exist

[jviereck]

Filed a bug over at Bugzilla to request feedback from the UX people: https://bugzilla.mozilla.org/show_bug.cgi?id=844584

[timvandermeij]

I am currently working on a small design that will show you how I think we can use an options button. It will probably be done later this day.

PS: note that I'm not a UX person. The real designers should design the button etc., my design is just to show a possibility of what we can do.

[timvandermeij]

I agree with the opinion to add a settings button in the toolbar. Such a button is way more discoverable for users than the context menu. I have made a small design for how I think this should look like. In the design below, I have added the options button in the top-right corner. If that button is clicked, a black layer with 85% opacity will be layed over the viewing area. After that, a modal box will show up like in the design. The advantage of such a box is that we can group all options together in one place and we can extend such a box with categories, etc. if we get more options. For this design, I have only taken the two-up view options, but other issues are also discussing adding options "somewhere", so this box can be that "somewhere" :)

I'd like to hear how everyone thinks about such an approach. Again, I'm not a UX designer, so those people should to the design for this box, but my design is just a prototype for what we could do. Since there is an increasing need for a better place to put all options in, I hope this will inspire new ideas and, in the end, a better solution than the context menu.

[Snuffleupagus]

@timvandermeij Looks nice, but I'm worried that it might add unnecessary steps to the interaction, and sort of break the work flow.
I'm visualizing (not a UX guy either) opening a secondary toolbar for easier access to functions that are now in the context menu.

In my opinion, your design is probably best for changing more persistent settings, that should apply to all PDFs.

Your work do look nice, so please don't take this as me being negative!

[gigaherz]

I do not personally think a modal dialog is user-friendly for those options. Usually when you realize you want a different page mode, you'd want it to be effective fast, so that you can continue browsing the document. If you have to click through a menu to access the options, then click the options, then click yet again to accept the changes, it becomes annoying.

I think, at least in this case, a simple sub-menu with 3 selections would work better: "Single Page", "Two Page", "Two Page with separate cover". As things are right now, the cover option is a mode that builds on two-page mode, so it could just as well be another radio entry.

I apparently agree with @Snuffleupagus, but he was faster ;P

[timvandermeij]

Thank you for your nice feedback! You are right, a modal box is indeed better for persistent options, for example "Enable two page view for all PDFs".

Your suggestions indeed seem better to me. I think I can make such a small design again today, but then in the way that @Snuffleupagus suggested.

[timvandermeij]

I have made a new design and you were totally right, I like this one a lot better. I look forward to reading your feedback again!

[gigaherz]

That does look nice.

[Snuffleupagus]

Now it's my time to agree with @gigaherz, it looks good!

[jviereck]

@ timvandermeij, thanks a lot for your design spikes! Do you have some HTML code for them or is it photoshopped at this point?

I have made a new design and you were totally right, I like this one a lot better. I look forward to reading your feedback again!

This one looks promising to me. From the screenshot it looks like you've implemented this as another sidebar? Can we just have a popup menu like the build-in findbar?

The modular settings window you've showed before could be used for more advanced settings. There might be an option "Advanced settings" in the drop-down setting panel that you get once you press the bottom to the top-right. I agree with @gigaherz that having only this kind of modal window for all the settings is too heavy for small settings to change.

[timvandermeij]

@jviereck: I have it all in a PSD file for now. If you want to, I can share the PSD file here. Just let me know :)

Personally, I don't think that a pop-up menu like the findbar would work, as we will need to add more settings here. For example, now I have only added the first/last page options to the settings sidebar, but we will also need to add both rotation options and the page view options (two-up, etc.) there, so I think that a pop-up menu would be either too small or, if we make it larger, disturb the user. The sidebar sliding in seems more elegant to me (just like the left sidebar). What do others think about this?

The modal dialog can indeed be used later on if we have more persistent settings, like "Always use two page view for all PDFs".

[jviereck]

@jviereck: I have it all in a PSD file for now. If you want to, I can share the PSD file here. Just let me know :)

That would be cool :) Maybe some rendered PNGs in case someone cannot open PSD formats would be cool as well!

[timvandermeij]

@jviereck: I have made an updated design. The PSD file and the rendered PNG can be found in #2792. Let's continue the discussion over there to keep everything in one place.

[timvandermeij]

@brendandahl, @yurydelendik: Could one of you please review #2792? It's finished and ready to be reviewed. Many other PRs depend on this particular PR since they would like to add functionality to the secondary toolbar, hence my request. Thank you in advance :)

[timvandermeij]

@brendandahl, @yurydelendik: could one you please close this issue as it is resolved by #2792? Please also close https://bugzilla.mozilla.org/show_bug.cgi?id=844584.

[yurydelendik]

yep, closing as resolved