1327266 - When I open filter tooltip (to edit CSS filter), it deletes variables from value

Status: NEW

(DevTools :: Inspector: Rules, defect, P3)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1. Open url [1]
2. Open inspector -> ruleview
3. Click on the circle near filter value ("filter circle")

AR:  "var(--fil-ter)" completely disappeared. Filter was changed.
ER:  Either X or Y or Z
 X) Ruleview should determine current value of var --fil-ter and show filter tooltip for that value
 Y) Filter tooltip should have special option "variable" (variable may depend on things like :hover)
 Z) Filter circle shouldn't appear if "var(...)" is involved.  Reference: color circle (see url [1])

> [1] data:text/html,A<style>body{--co-lor:red;--fil-ter:blur(1px) brightness(0);--animation-function:ease;color:var(--co-lor);filter:var(--fil-ter) drop-shadow(15px 15px 0px green);

Comment 1

[Tim Nguyen :ntim]

The demo snippet works because the current way CSS vars work goes against the spec: bug 1290093.

But the case with filter: var(--fil-ter); is totally valid, and should be fixed.

Tom, can this be a mentored bug ?

Comment 2

[Tom Tromey :tromey]

(In reply to Tim Nguyen :ntim (use needinfo?) from comment #1)
> The demo snippet works because the current way CSS vars work goes against
> the spec: bug 1290093.

I couldn't see any token pasting in the demo.

The reason "color" doesn't get a swatch is that output-parser checks colorUtils.isValidCSSColor
with the text, and var(...) isn't considered valid there.

See bug 1222774 for some discussion of the issues with variables and color swatches.

> But the case with filter: var(--fil-ter); is totally valid, and should be
> fixed.
> 
> Tom, can this be a mentored bug ?

I suspect it is harder than it looks.  If the variable or the filter itself is animated,
I don't think we can even get the computed value to try to parse it?  (I searched for
the existing bug about this but couldn't find it...)