Widget Customizer: Improve behavior of widget highlighting

[westonruter]

Regarding the Widget Customizer merge #27112, when you hover over a widget in the customizer panel, the corresponding widget in the preview gets a highlight. Currently the widget gets this highlight via a red box-shadow and leaves much room for improvement. Additionally, the widget in the preview should scroll into view. Correspondingly, when hovering of a widget in the preview the corresponding widget control in the customizer panel gets a highlight, as does the containing customizer section.

See also:
​https://github.com/x-team/wp-widget-customizer/issues/85
​https://github.com/x-team/wp-widget-customizer/issues/56
​https://github.com/x-team/wp-widget-customizer/pull/16

[ocean90]

when you hover over a widget in the customizer panel, the corresponding widget in the preview gets a highlight.

Seems like this is either broken or removed.

Not sure if some scrolling in the controls and/or preview on widget mouseover could be to noisy.

[westonruter]

Restore Widget Customizer highlighting of widgets in preview. Also on GitHub: ​https://github.com/x-team/wordpress-develop/pull/2

[westonruter]

I've fixed the broken highlight, restoring the original Widget Customizer behavior. It should be further improved beyond this.

[ocean90]

27358.diff​ was committed in [27584].

[ocean90]

Helen mentioned, that shift click doesn't work in Firefox. It opens the widget, but immediately closes again.

[nacin]

Getting this off the enhancements report.

[westonruter]

Fix Firefox shift+click problem to open widget due to apparent difference with Chrome in how jQuery implements :focusable selector. Specify focus on first focusable element inside .widget-content, and remove click trigger now handled by expandForm()

[ocean90]

In 27701:

Widget Customizer: Fix shift+click issue in Firefox to open a widget.

props westonruter.
see #27358.

[ocean90]

In 27702:

Widget Customizer: Improve widget highlighting.

• Prefix box-shadow in inject_preview_css()
• Remove border-radius in inject_preview_css()
• Prevent hidden box-shadows in Customizer

see #27358.

[ocean90]

27358.3.diff​ uses the same colors as in [27741].

[ocean90]

In 27814:

Widget Customizer: Set hightlight color to blue. Same color as in [27741].

fixes #27358.