Jared Wein [:jaws] (please needinfo? me) Reporter
	Description • 7 years ago

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

	Amy Lee [:amylee] UX
	Comment 3 • 7 years ago

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

	Jared Wein [:jaws] (please needinfo? me) Reporter
	Comment 5 • 7 years ago

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.

	Jared Wein [:jaws] (please needinfo? me) Reporter
	Comment 7 • 7 years ago

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?

	(inactive) Nihanth Subramanya [:nhnt11]
	Comment 8 • 7 years ago

(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.

	Jared Wein [:jaws] (please needinfo? me) Reporter
	Comment 9 • 7 years ago

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?

	Dão Gottwald [:dao]
	Comment 10 • 7 years ago

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.

	Amy Lee [:amylee] UX
	Comment 11 • 7 years ago

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%

	Jared Wein [:jaws] (please needinfo? me) Reporter
	Comment 12 • 7 years ago

(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)?

	Amy Lee [:amylee] UX
	Comment 13 • 7 years ago

(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!