978487 - [rule view] Show tooltip of `content` property with rendered Unicode code point (e.g., icon fonts)

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Dane MacMillan [:danemacmillan]]

With the contagious adoption of icon fonts for front-end work, I think it would be apt to make the text that displays in a pseudo-element's `content` smarter. By smarter, I'm referring in particular to the use of Unicode code points, which enable the use of modern icon fonts. Here's a typical CSS rule to achieve that end, so long as a corresponding font character entity has been mapped to that code point:

>    .icon-align-right:before {
>        content: '\f105';
>    }

I'm going to attach an image of how Firefox's Developer Tools display this in the Inspector's "Rules" tab, and how Chrome displays it in their Developer Tools.

Firefox:
http://i.imgur.com/UyFDH9g.png

Chrome:
http://i.imgur.com/93PfdoB.png

They're both correct presentations, but for different reasons. Chrome's literal *copy* of the string defined in the original CSS rule is more useful for debugging purposes, while Firefox's literal *interpretation* of the string as a single character entity is more useful for seeing the abstract magic behind Unicode. I'd say Firefox's is a more advanced way of presenting this information, and assumes a certain level of knowledge from its user, because while Chrome's presentation may be as cryptic to any novice first stumbling upon the rule, it's still easier to perform a Web search against it and find semi-meaningful clues to eventually discover the meaning.

Having laid that out, I think Firefox's Developer Tools stopped just short of a very swagedelic™, useful feature. Hovering over the value of a pseudo-element's content should display a preview tooltip of its rendered content, similar to how images appear in a tooltip when hovering over a `url()` rule (see http://i.imgur.com/ChoQBxJ.png). This is what I mean by "smarter" in the opening sentence. 

In the case of icon fonts, or generally all Unicode code points, I think a rendered preview of the Unicode character entity it's meant to represent should be displayed. Icon fonts are not going anywhere. I think this is a great but more subtle example of adapting to modern Web development workflows, much like how the Developer Tools recently announced support for SASS and LESS editing. I for one don't memorize Unicode code points. I'm probably not alone. If the Developer Tools can show previews of CSS transforms (so awesome, by the way), I think this could be a quick and useful win for the tools.

This is just my reflection on the feature, but I know it could even be taken a step further, to the point that not just Unicode characters trigger a tooltip preview, but the entire string of the pseudo-element's content--perhaps even styled--would be previewed, even if it's just a boring string of text (so the experience is standardized). I do think that, if this feature is created, the value of content (in the case of Unicode code points) should not remain as a semi-interpreted character entity, but should be a literal copy of the string as its written in the original CSS rule, as Chrome does it.

---

For wholeness, I include a bug report I found that is similar in intention, but ultimately very different in execution: bug 371965. I also agree with the assessment that closed that bug; I don't think Unicode code points should be displayed directly in the rule, but should rather be a literal copy (as Chrome does it), with the addition of the preview tooltip and all inner content interpreted.

Comment 1

[Dane MacMillan [:danemacmillan]]

I've noticed that previews also appear for the "font-family" property, which is also great. I think it's only a matter of time before the "content" property is viewed as the next natural candidate for tooltip previews. It would make a lot of sense.

Comment 2

[Brian Grinstead [:bgrins]]

The content property could be an interesting field to preview with a tooltip.  If we changed to the literal copy of the string in the displayed text, and combined that with a tooltip showing the content with the computed font family this could be handy.

Comment 3

[Brian Grinstead [:bgrins]]

Here is a test case showing an icon font in use: http://jsfiddle.net/bgrins/9W7dJ/