1209057 - CSS mix blend mode tooltip

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

Similar to CSS filters, CSS blend modes visually alter the final rendering of an element. Remembering the names of all them modes and what each of them does is hard. So, like for CSS filters, we could create an editor tooltip that shows up when you click on mix-blend-mode in the rule-view and let's you choose from a list, as well as shows a useful preview of what each mode will do.

Comment 1

[Patrick Brosset <:pbro>]

CCing Matteo who I think would be interested in following this bug.
Also adding devtools-ux flag to put this on our UX radar. We should discuss the sort of UI we want for this tool before implementing.
Tim, do you already have ideas?

Comment 2

[Matteo Ferretti [:zer0] [:matteo]]

I'm really interesting in what the UI should looks like here. I had a brief talk with Joe about it, and I can see several challenge we could facing from a UI point of view to properly represent previews for blending mode.

Comment 3

[Joe Walker [:jwalker]]

While at CSSConf I hacked this: http://codepen.io/joewalker/pen/QjGEzR

Several things struck me:

* For web people this makes no sense at all, but if you're a photoshop person it's obvious.
* Even the spec is written in photoshop terms - "multiply" makes sense with the 0.0-1.0 scale for colors that photoshop uses, but for 0x00-0xFF it makes far less sense.
* Photoshop just assumes people understand burn, etc. I don't think we should do that.
* Most web explanations just have the same 2 images, or worse, different random images to explain the differences. They're all nearly useless.
* There is a reason to use each blend mode - For for example (if my understanding is right) the sweet spot for blending text over an image would be color-dodge or color-burn depending if the text was light or dark, etc, etc. So perhaps we can work out a set of pairs of images that give a clue as to their likely use.

As Matteo pointed out there might not be much space for the images if they're supposed to be explaining things. You could distinguish multiply/darken in not much space, but others might be harder. We'd need to experiment to be sure.

Comment 4

[Tim Nguyen :ntim]

Attachment: tooltip.zip

Comment 5

[Patrick Brosset <:pbro>]

Triaging (filter on CLIMBING SHOES).

Comment 6

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).