1352127 - Toolbar button hover and pressed animations

Status: NEW

(Firefox :: Theme, enhancement, P5)

Description

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

Spec coming soon from UX. Flagging @amylee for the spec.

Comment 1

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

Attachment: Standard_Icon_Rollover.mp4

Comment 2

[Amy Lee [:amylee] UX]

Attachment: Icon Rollover - Door Hanger.mp4

Comment 3

[Amy Lee [:amylee] UX]

Spec for Standard Rollover State

--------------
Hover

Grey Box
Size: 34x28 px
Colour: #000000
Opacity 5%

Icon
Colour: #4D4D4D
Scale 100%
Size 16x16 px

---------------
On Press

Grey Box
Size: 34x28 px
Colour: #000000
Opacity: 10%

Icon
Colour: #30A3FF
transform: scale(1.08)


----------------
On Release

Grey Box
Colour: #000000
Opacity 5%

Icon
Colour: #30A3FF

Comment 5

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

As discussed on Vidyo, the icon color will not change to #30A3FF on release.

This bug will only focus on the transforming the icon to scale(1.08) on press.

Comment 6

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

Attachment: Bug 1352127 - Increase the size of the toolbarbutton icons in :hover:active.

We cannot use transform:scale(1.08); because that would also increase the visual size of the button since the hover and active background-color is applied directly to the .toolbarbutton-icon. Changing the padding and min-width allows the icon size to grow independently.

Review commit: https://reviewboard.mozilla.org/r/141112/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/141112/

Comment 7

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

Comment on attachment 8869491 [details]
Bug 1352127 - Increase the size of the toolbarbutton icons in :hover:active.

Nihanth, what do you think of this approach? I see you are changing the paddings again in bug 1365901. Note that the current patch does not work for the downloads button (after it has been clicked) and the pocket button. I have not tested with every button in the palette.

Also, do you know of a way to transition this size change of the background element?

Comment 8

[(inactive) Nihanth Subramanya [:nhnt11]]

(In reply to Jared Wein [:jaws] (behind on reviews and bugmail) (please needinfo? me) from comment #7)
> Comment on attachment 8869491 [details]
> Bug 1352127 - Increase the size of the toolbarbutton icons in :hover:active.
> 
> Nihanth, what do you think of this approach? I see you are changing the
> paddings again in bug 1365901. Note that the current patch does not work for
> the downloads button (after it has been clicked) and the pocket button. I
> have not tested with every button in the palette.
> 
> Also, do you know of a way to transition this size change of the background
> element?

I haven't tested the patch yet, but I had attempted to work on this in bug 1365572 before we marked it as a dupe of this. Based on a glance at your patch, it seems like you're trying to do something very similar to what I had come up with locally.

I wish there was a better approach. This feels pretty hacky, and I don't know of a way to apply a transition to this (but my expertise on transitions is very minimal).

The right thing to do would be to refactor the toolbar button code so that the rules are applied on the buttons themselves rather than the icons, but my attempt at that was... not fun.

I was wondering if, as a hack, there might be a way to add a mask on top of the icon, which is shaped like a 28x28px square with a border radius. Or maybe set the background to this shape and use `overflow: hidden;`. This would allow us to simply scale the icon and not care about the background growing.

These ideas aren't well formed yet, sorry for being fuzzy with technicality.

Comment 9

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

Comment on attachment 8869491 [details]
Bug 1352127 - Increase the size of the toolbarbutton icons in :hover:active.

Hey Dão, what do you think about this approach and Nihanth's ideas?

Comment 10

[Dão Gottwald [:dao]]

Comment on attachment 8869491 [details]
Bug 1352127 - Increase the size of the toolbarbutton icons in :hover:active.

Feels pretty messy.

I can look into moving the background styling from the image nodes to the toolbarbutton nodes. The main problem I think is that it won't work for the back button.

Comment 11

[Amy Lee [:amylee] UX]

Revised spec for Standard Rollover State
These are opacity changes for hover and on press states on the icon itself and the surrounding grey box to create a greater contrast between the two states. 


--------------
Hover

Grey Box
Size: 34x28 px
Colour: #0c0c0d
Opacity 10%

Icon
Size 16x16 px
Colour: #0c0c0d
Opacity 80%



---------------
On Press

Grey Box
Size: 34x28 px
Colour: #0c0c0d
Opacity 20%

Icon
Colour: #0c0c0d
Opacity 90%


----------------
On Release (Same as on Hover)

Grey Box
Size: 34x28 px
Colour: #0c0c0d
Opacity 10%

Icon
Size 16x16 px
Colour: #0c0c0d
Opacity 80%

Comment 12

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

(In reply to Amy Lee [:amylee] UX from comment #11)
> Revised spec for Standard Rollover State
> These are opacity changes for hover and on press states on the icon itself
> and the surrounding grey box to create a greater contrast between the two
> states. 

What colors should be used in the inverted state (i.e. on compact dark theme)?

Comment 13

[Amy Lee [:amylee] UX]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #12)
> (In reply to Amy Lee [:amylee] UX from comment #11)
> > Revised spec for Standard Rollover State
> > These are opacity changes for hover and on press states on the icon itself
> > and the surrounding grey box to create a greater contrast between the two
> > states. 
> 
> What colors should be used in the inverted state (i.e. on compact dark
> theme)?

Hi Jared, 

The correct colours for dark theme is fine. You can just make the changes for the light theme. Thanks!