[Feature]: Component highlight based on the HTML prefix name

[AurelienCURTI]

Context

In order to visualize where all the UI components are placed on a webpage, it would be nice to be able to have a way to visualize it globally by adding a highlight at component level. The purpose is to identify where components from different libraries are used into the page. For example:

Those components will have an highlight purple:

• my-bespoke-component-test-1
• my-bespoke-component-test-2

Those components will have a green highlight:

• lib-component-test-1
• lib-component-test-2

Proposal

• Highlight components based on a list of HTML tag prefix name.
• If a component is a presenter and a direct child of a container of the same component, only highlight the presenter.
• Ignore components with no width (we can consider to highlight component with a min width and min height of 15px for example).
• If two differents component are on the same screen position (overlay), we should be able to visually understand which one overlay the other.
• Being able to modify the depth of the highlight to define how deep we want to highlight childs components.
• Having the name of the component by hovering it with the mice and have an easy way to copy the name into the clipboard.
• Make it more configurable as possible (providing highlight colors, desired thresholds, should we ignore container in case it contain a direct presenter, switch on/off the live refresh etc).