1130761 - CSS multiple background highlighter

Status: NEW

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

Description

[Tim Nguyen :ntim]

It'd be nice to be able to view how each background is positioned if there are multiple ones.

For example : http://jsfiddle.net/ntim/k89k93d5/ , on <label>, there are multiple radial gradients, it'd be nice if hovering each of them would highlight each radial gradient in the element.

Comment 1

[Tim Nguyen :ntim]

Patrick, What do you think of this idea ?

Comment 2

[Patrick Brosset <:pbro>]

Good point. The demo you linked to would definitely be easier to work on with such a tool. I wonder how/if it should be coupled with the highlighter in bug 1108288.

If I understand correctly, your use case is primarily being able to visually associate an entry in the background-image declaration with the corresponding gradient in the page, right?

I like the idea, but I'm uncertain if this should happen on hover of the gradient value. In fact, I think I'd like to move a little bit away from the highlight-on-hover thing in the rule-view, as it sometimes causes confusion (see bug 1106272).
Also, we may want to have special editor tooltips for gradients. What about when we have such a tooltip, then highlight the position/size of the gradient when the tooltip is opened?

Comment 3

[Tim Nguyen :ntim]

(In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #2)
> Good point. The demo you linked to would definitely be easier to work on
> with such a tool. I wonder how/if it should be coupled with the highlighter
> in bug 1108288.
> 
> If I understand correctly, your use case is primarily being able to visually
> associate an entry in the background-image declaration with the
> corresponding gradient in the page, right?
Yes, but not simply with gradients, with all kinds of background-images.

> I like the idea, but I'm uncertain if this should happen on hover of the
> gradient value. In fact, I think I'd like to move a little bit away from the
> highlight-on-hover thing in the rule-view, as it sometimes causes confusion
> (see bug 1106272).
> Also, we may want to have special editor tooltips for gradients. What about
> when we have such a tooltip, then highlight the position/size of the
> gradient when the tooltip is opened?
Yeah, that sounds good to me.

Comment 4

[Julian Descottes [:jdescottes]]

Inspector bug triage. Filter on CLIMBING SHOES.