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



5 years ago
9 months ago


(Reporter: danemacmillan, Unassigned)


(Blocks 1 bug)

Firefox Tracking Flags

(Not tracked)


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.



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.
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.
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.
Ever confirmed: true
Priority: -- → P3
Summary: Display preview of rendered Unicode code point (e.g., icon fonts) in Inspector's "Rules" tab for pseudo-elements' content property → [rule view] Show tooltip of `content` property with rendered Unicode code point (e.g., icon fonts)
Here is a test case showing an icon font in use: http://jsfiddle.net/bgrins/9W7dJ/
Blocks: 711947
Depends on: 987797
Duplicate of this bug: 1146079
See Also: → 839818


Last year
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.