1354140 - [UX] Provide design spec for customize mode

Status: RESOLVED FIXED

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

Description

[:Gijs (he/him)]

(background: https://mozilla.invisionapp.com/share/5ZAEYEW8M#/screens/225203398 )

It would be helpful to have a design spec for customize mode, perhaps not immediately, but "soon".

Some things that clarity would be helpful for:
- what size are the icons going to be?
-- note that changing this compared to the status quo (specifically, if we're picking an icon size other than the current toolbar or panel icons) has add-on impact, even with webextensions, so if we know this is changing it would be helpful to know it sooner rather than later. If we're making the icons smaller, ideally there shouldn't be too much impact from downsizing them, but in practice there will still be some.
- item spacing, padding, margin, etc.
- label wrapping for customizable button labels. This was an almighty pain for the current set of things, also because while word-wrap purely based on words (ie spaces between bits) works in English, it doesn't in some other languages. Are we just keeping what we do now?
-- like in other places, I'm assuming we're using OS-based text sizes and so, because of the wrapping problem, the sizing of the labels should be in em or some other text-size-related unit, rather than defining the text size in px, if at all possible.
- footer button labels - the mockups have 2 different labels for the "Toolbars" button
- footer button wrapping - right now, if you use customize mode in a narrow window, we will wrap the buttons in the footer. With the new styling of the footer it looks like the buttons are essentially the size of the footer, so that it's not immediately obvious how that should work
- hover/active styling for the footer buttons

I'm assuming we can keep the actual popups from the toolbar/theme buttons the same (at least for now).

Comment 1

[Aaron Benson]

Updated spec: https://mozilla.invisionapp.com/share/BXBFSCU6P#/229252091_Customization