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

RESOLVED FIXED

Status

()

Firefox
Toolbars and Customization
P1
normal
RESOLVED FIXED
a year ago
a year ago

People

(Reporter: Gijs, Assigned: bbell)

Tracking

53 Branch
Points:
---
Dependency tree / graph
Bug Flags:
qe-verify -

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [photon-structure][ux])

(Reporter)

Description

a year ago
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)
Flags: qe-verify-
Iteration: --- → 55.4 - May 1
Priority: -- → P1
(Assignee)

Comment 1

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

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

Updated

a year ago
Status: ASSIGNED → RESOLVED
Last Resolved: a year ago
Resolution: --- → FIXED
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 '-'?
Flags: needinfo?(bbell)
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?
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Status: REOPENED → ASSIGNED
Iteration: 55.4 - May 1 → 55.5 - May 15
Iteration: 55.5 - May 15 → 55.6 - May 29
(Assignee)

Comment 4

a year ago
(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.
Flags: needinfo?(bbell)
What are the hover styles for the percentage label/ button?
(Reporter)

Comment 6

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

+ni :-)
Flags: needinfo?(bbell)
(Assignee)

Comment 7

a year ago
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
Flags: needinfo?(bbell)
(Assignee)

Comment 8

a year ago
(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
(Assignee)

Updated

a year ago
Status: ASSIGNED → RESOLVED
Last Resolved: a year agoa year ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.