feat: selector inspector panel (closes #7375)

[felis2803]

Closes #7375.

Use cases

1. Picking + generation. Click on the Pick button and select the element with a mouse click. As a result, several selectors matching this element will be generated. The first of the generated selectors will be placed in the selector input, the rest are available in the list of selectors, which can be expanded by clicking on the arrow to the left of the Copy button.
2. Debug selector. Start typing the selector in CSS or TestCafe format. As you type, all matching elements will be highlighted with a frame. In addition, to the right of the input field there is an indicator that shows the number of matching elements.

Peculiarities

In the picking mode all elements of TestCafe UI, except for the frame that highlights the element, disappear.

Input selector format. The Selector Inspector recognizes selectors in two formats: CSS and TestCafe.
CSS: div > div input, p:nth-child(2), span[custom-attribute="value"].className
TestCafe: Selector('.my-class'), Selector('div').withText('Hello World!')

Match indicator. It has three states: not found, incorrect selector and found: {number of elements}.

List of generated selectors. Cleared as soon as the user starts typing in the selector input field.

Highlighting elements matching the input selector is active only when the selector input has focus.

Restrictions

1. The inspector is currently only available in debug mode (await t.debug()).
2. Picking does not work in iframes.
3. Picking doesn't work with Shadow DOM.
4. The selector generator is not configurable.
5. There is only one generator so far, and the user will not be able to redefine the generation function.

Initial state

Picking

Selector typing

Selecting a selector from a list

Copy selector

[github-actions]

Release v2.4.0-rc.1 addresses this.