1277079 - Let users change units in the CSS filter tooltip

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[una.kravets]

Attachment: Screen Shot 2016-05-31 at 4.35.35 PM.jpg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

Steps to reproduce:

Open CSS filter property on any element. Click the filter button.


Actual results:

The filter popup worked fine, but I was unable to change the unit (% by default) in this tool. Most filters (especially CSS filters) are unitless by default, but take a variety of values, and not all align with "%".


Expected results:

I should be able to change the unit as an option. It would also make sense to be unitless by default, and a slider with visual representation of changes would make the most sense as well.

Comment 1

[Patrick Brosset <:pbro>]

So, let's review the various CSS filter functions that the tooltips allows to add/edit:

- Let's take out url and drop-shadow because they are just handled as strings for now.

- blur: accepts a css length, which means a number followed by any CSS length unit (px, em, pc, in, mm, ...). If you open the filter tooltip and add a new blur function, then the default unit that is preset in the UI is px, and you can't change it.
However, if you type filter: blur(2em); in the inspector, and *then* open the tooltip, then the unit is em, but you can't change it there either.
So for this one, it would make sense to be able to select any CSS length unit from a list.
Or perhaps just leaving the unit out and letting users type them in the field?

- hue-rotate: accepts an angle, which means a number followed by any CSS angle unit (deg, turn, grad, rad).
Here the tooltip does the same thing that is does for the blur function: by default "deg" is selected and can't change it. But if you entered filter: hue-rotate(1turn) before, then the tooltip will use the "turn" unit (but won't let you change it).
So for this one, it would also make sense to be able to select from a list of CSS angle units.
Or, again, perhaps leaving the unit out and letting users type them in the field?

- brightness: accepts a number of a percentage. So, for instance, 34% or 0.34.
If you open the tooltip and add a new brightness function, then by default it lets you enter it as a percentage (and shows the unit % next to the field).
I don't believe this is much of a problem because 34% or 0.34 are essentially the same thing, there are no other units to convert to.
If you have filter: brightness(0.34) in the inspector and *then* open the tooltip, that will get converted to 34%.
Not sure if we should have a way to switch between % and unitless for this one. I don't see a big added value for users.

- Same thing for contrast, grayscale, invert, opacity, saturate and sepia.

I will move the slider discussion to a separate bug to avoid mixing things here.

Helen, what do you think about the above? I think being able to change units for hue-rotate and blur makes a lot of sense. Not so sure we should do anything about the other ones, I don't see a big added value for those.

Comment 2

[Patrick Brosset <:pbro>]

See also bug 1217301 which is about making the UX of the tooltip better.

Comment 3

[Patrick Brosset <:pbro>]

So I filed bug 1277182 for the discussion about the slider, so I'm renaming this one to be only about units.

Comment 4

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Patrick Brosset <:pbro> from comment #1)
> So, let's review the various CSS filter functions that the tooltips allows
> to add/edit:
> 
> - Let's take out url and drop-shadow because they are just handled as
> strings for now.
Doing this simplifies things a lot design-wise. Arguably, drop-shadow might require its own editor and url is so text-based I'm not sure what one would get out of doing it in the Rules view vs. their own editor.

> - blur: accepts a css length, which means a number followed by any CSS
> length unit (px, em, pc, in, mm, ...). If you open the filter tooltip and
> add a new blur function, then the default unit that is preset in the UI is
> px, and you can't change it.
> However, if you type filter: blur(2em); in the inspector, and *then* open
> the tooltip, then the unit is em, but you can't change it there either.
> So for this one, it would make sense to be able to select any CSS length
> unit from a list.
> Or perhaps just leaving the unit out and letting users type them in the
> field?
Sounds like for all of these letting users just type it in will be more seamless. They're already typing as it is, and trying to put an input next to a select next to a slider seems... clunky.

> - hue-rotate: accepts an angle, which means a number followed by any CSS
> angle unit (deg, turn, grad, rad).
> Here the tooltip does the same thing that is does for the blur function: by
> default "deg" is selected and can't change it. But if you entered filter:
> hue-rotate(1turn) before, then the tooltip will use the "turn" unit (but
> won't let you change it).
> So for this one, it would also make sense to be able to select from a list
> of CSS angle units.
> Or, again, perhaps leaving the unit out and letting users type them in the
> field?
I would imagine that as a user is messing with the slider we'll need to default to a unit. Perhaps on keydown in the input area everything is reset and either unitless/the typed unit is assumed; otherwise, we default to px for blur, deg for hue-rotate, whichever unit seems to be the most prevalent.

> - brightness: accepts a number of a percentage. So, for instance, 34% or
> 0.34.
> If you open the tooltip and add a new brightness function, then by default
> it lets you enter it as a percentage (and shows the unit % next to the
> field).
> I don't believe this is much of a problem because 34% or 0.34 are
> essentially the same thing, there are no other units to convert to.
> If you have filter: brightness(0.34) in the inspector and *then* open the
> tooltip, that will get converted to 34%.
> Not sure if we should have a way to switch between % and unitless for this
> one. I don't see a big added value for users.
Agreed.

Comment 5

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).