1359625 - [UX] Provide detailed UX specs for edit and zoom controls in the new hamburger panel

Status: RESOLVED FIXED

(Firefox :: Toolbars and Customization, enhancement, P1)

Description

[:Gijs (he/him)]

Rough set of things I was wondering:

- what hover/active styling do we use for the 'inner' zoom/edit buttons?
- does the full screen button in the zoom bit have an 'active' or "in fullscreen" state (is that just an icon swap or some kind of open/pressed state (as well)) ?
- spacing/padding numbers/sizes would be helpful as well, both for the buttons as well as the central zoom indicator
- does the central zoom indicator still cause a reset? If so, should that button (and/or should any of the "sub" buttons here) have a tooltip, like in the current main menupanel? (see e.g. bug 940304, bug 940267)

(Bryan told me he'd take this, so I'm assigning to him immediately)

Comment 1

[bbell]

Here's a spec for the the zoom controls in the Application Menu. 

https://mozilla.invisionapp.com/share/H3BIW4C9U#/230516723_Application_Menu

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

Does the 100% in the spec act as a button like the '+' and '-'? If so, why does the 100% have a different shape for the button compared to the '+' and '-'?

Comment 3

[Mike de Boer [:mikedeboer]]

Brian, we really need a more detailed spec about the _behavior_ of the zoom control percentage element. Is it just a label? Can you click it? If so, what happens?

Comment 4

[bbell]

(In reply to Mike de Boer [:mikedeboer] from comment #3)
> Brian, we really need a more detailed spec about the _behavior_ of the zoom
> control percentage element. Is it just a label? Can you click it? If so,
> what happens?

The zoom control should work exactly as it currently does in the existing Hamburger Menu, the only difference is the general look.

Comment 5

[Mike de Boer [:mikedeboer]]

What are the hover styles for the percentage label/ button?

Comment 6

[:Gijs (he/him)]

(In reply to Mike de Boer [:mikedeboer] from comment #5)
> What are the hover styles for the percentage label/ button?

+ni :-)

Comment 7

[bbell]

Please note: that the spacing on the zoom control changed in preparation for a touch-friendly version of the menu. Basically the button have some more horizontal space. 

https://mozilla.invisionapp.com/share/H3BIW4C9U#/230516723_Application_Menu

Comment 8

[bbell]

(In reply to Mike de Boer [:mikedeboer] from comment #5)
> What are the hover styles for the percentage label/ button?

The Zoom Percentage label gets the same transparent grey overlays. (updated the mock to show it in action)


If you would rather just sample the combined color and hard code it in that's fine. in that case...

hover color is: #e0e0e1
on click color is: #d5d5d6