Open Bug 1352127 Opened 3 years ago Updated 2 years ago

Toolbar button hover and pressed animations

Categories

(Firefox :: General, defect, P4)

52 Branch
defect

Tracking

()

People

(Reporter: jaws, Unassigned)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [reserve-photon-visual][p1])

Attachments

(1 file, 2 obsolete files)

Spec coming soon from UX. Flagging @amylee for the spec.
Flags: needinfo?(amlee)
Attached video Standard_Icon_Rollover.mp4 (obsolete) —
Flags: needinfo?(amlee)
Whiteboard: [photon]
Whiteboard: [photon] → [photon-animation]
Points: --- → 5
Flags: qe-verify+
Priority: -- → P2
QA Contact: jwilliams
Attached video Icon Rollover - Door Hanger.mp4 (obsolete) —
Attachment #8853086 - Attachment is obsolete: true
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
Duplicate of this bug: 1365572
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.
Assignee: nobody → jaws
Status: NEW → ASSIGNED
Iteration: --- → 55.6 - May 29
Priority: P2 → P1
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?
Attachment #8869491 - Flags: feedback?(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 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?
Attachment #8869491 - Flags: feedback?(dao+bmo)
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.
Attachment #8869491 - Flags: feedback?(dao+bmo)
Iteration: 55.6 - May 29 → 55.7 - Jun 12
Iteration: 55.7 - Jun 12 → 56.1 - Jun 26
Blocks: 1375872
Iteration: 56.1 - Jun 26 → 56.2 - Jul 10
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%
Iteration: 56.2 - Jul 10 → 56.3 - Jul 24
Assignee: jaws → nobody
Status: ASSIGNED → NEW
Iteration: 56.3 - Jul 24 → ---
Points: 5 → ---
Priority: P1 → P2
QA Contact: jwilliams → brindusa.tot
Whiteboard: [photon-animation] → [photon-visual]
Whiteboard: [photon-visual] → [reserve-photon-visual][p1]
Priority: P2 → P3
Attachment #8859196 - Attachment is obsolete: true
(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)?
Flags: needinfo?(amlee)
(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!
Flags: needinfo?(amlee)
Priority: P3 → P4
You need to log in before you can comment on or make changes to this bug.