[DX] [Form] [WebProfiler] Added abbrs with type classes

[kix]

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Tests pass?	yes
Fixed tickets	none
License	MIT
Doc PR	none

This adds an <abbr/> element having a descriptive title that displays the form element's type class name. Everyone wants to know what's the type behind a form child, yes?

Looks like this:

[dunglas]

Why <abbr>? According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr it should me used for abbreviations and this is not the case here? <div> or <span> instead?

[xabbuh]

#12267 seems to be a better fix in my opinion.

[kix]

@xabbuh, you've mixed my today's pull requests. #12267 fixes a problem giving a better solution (well, at least IMHO), while this PR adds some verbosity to the component.
@dunglas, I'm using the same pattern as used in the Events profiler tab: listener class names are wrapped with <abbr/>'s there, too.

[stof]

@kix but in the events panel, this can be considered as an abbreviation, as the display text is the short class name, and the title is the FQCN. Here, you are mixing the name of the field and the class name of the form type being used, which are 2 different things

[stof]

and giving the name of the form type would be better than its class name IMO anyway

[webmozart]

I'm not sure this is needed. Hovering for 1-2 seconds is much slower than clicking the entry and checking the type on the right, no?

[kix]

Well, technically, it's not clicking, it's the same <abbr/> there, as of Symfony 2.5.5:

[webmozart]

@kix But you can see from your screenshot that the behavior is inconsistent now. Once you hover over the type name, and then over the form name. Why (from a usability perspective) should hovering over these two different things show the same tooltip?

[kix]

A bit more consistent now:

When data.type is empty, the tip and the type name are not displayed.

[webmozart]

Better! What does the rest of you think? @symfony/deciders

[fabpot]

👍

[stof]

👍

[fabpot]

Thank you @kix.

[kix]

@fabpot 👍! Thanks for merging!