1353362 - [ux] Provide design spec for redesigned panel subviews

Status: RESOLVED FIXED

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

Description

[:Gijs (he/him)]

In order to implement bug 1353360 a spec would be helpful. If there is one in the invision doc and I missed it, I apologize - please point it out to me. :-)

In particular:

- asset for the 'back' arrow on these subviews
- hover/active styling for the arrow button
- size of the arrow button and thereby minimum size for the header (actual size will depend on system font sizes and so might vary)
- some kind of styling guidance for the edge of the subview while mid-animation now that we no longer keep a dimmed bit at the side. I assume we'll want a border of some kind in order to make the background of the main and subviews not look continuous between those two parts mid-transition/animation.

Based on the mocks so far I'm assuming:

- the text in the header should be both horizontally and vertically centered
-- horizontal centering ignores the presence of the back button, ie text is centered against the left and right edges of the panel, not against the edge of the back icon or button and the edge of the panel
- text should be bold, and otherwise system foreground color
- 1px solid grey line at the bottom of the header (like existing Firefox)

If any of these assumptions are wrong or there's something else I'm missing that would be good to know.

Comment 1

[Aaron Benson]

Those are all correct assumptions! :) 

A more detailed design spec can now be found here: https://mozilla.invisionapp.com/share/A7AFC1ZGW#/screens/227399322

Icon assets can be found here: https://drive.google.com/drive/folders/0B6F4iApRJzosVTdaZjN3UHY5NG8

Comment 2

[Aaron Benson]

The link to InVision in Comment 1 is broken, here's an updated link: https://mozilla.invisionapp.com/share/ZKBC94BPQ#/229252106_Menus