Provide additional identifying information for event sources

[sissbruecker]

In addition to the tag name and event type we should provide additional information about the element from which an event originated. If we only show tag name and event type, for example vaadin-button :: click, that is not enough to identify the operation that was triggered in a view. This is problematic, as without additional instrumentation from the application's side, there is no information which method in the application's code was triggered. Providing additional information about the event source should help with that.

Additional attributes

I would suggest to provide the following element information as attributes in event spans:

• ID
• Label
• Text content
• Classes (maybe)
• Theme variants (maybe)

Extended span name

Additionally the event span name could be extended by the information that is the most useful one to identify the element. For example we could go through the list above, pick the first infomation that is available, and then append that to the element tag name in the span name.

Example 1

<vaadin-button id="save-button">Save</vaadin-button>

Pick the ID save-button: vaadin-button[id='save-button'] :: click

Example 2

<vaadin-button>Save</vaadin-button>

Pick the text content Save: vaadin-button[text='Save'] :: click

Example 3

<vaadin-button class="save-icon"><vaadin-icon icon="save"></vaadin-icon></vaadin-button>

Pick the class save-icon: vaadin-button[class='save-icon'] :: click

[caalador]

We now have added ID and text Others should be considered later if they make sense or help in some way.

[sissbruecker]

@caalador How about adding support for label, which is often used for field components?

[caalador]

label sounds more like an span attribute as for flow it is just an element property field. If components have a linked element then that could make sense, but those are connected through the id attribute in which case that would also sound more like an span attribute.

[heruan]

Closed in #91