Give information to the user relative to what he'll be aligning to

Summary:

In "Object/Align and Distribute" there are multiple "relative to :" elements you can align to.

Current

When in "Object/Align and Distribute", there's no visual information relative to what you'll be aligning to which make it easy to quickly align to the wrong thing.

Proposed

1. When the "Relative to:" drop down is open, highlight relative to what you'll be aligning to (you are hovering).
2. When hovering a relative to button, do the same, highlight relative to what you'll be aligning to.
3. Have a live preview checkbox to switch the behavior of hovering a relative to button. So that that the resulting behavior can be previewed.

As an example, if you select a few objects and are hovering the relative to "Selection Area", the group of selected objects will be highlighted.

Then when hovering the alignment buttons a preview of the alignment should show the end result, prior to applying it. I added a line to show it's a preview of that alignment type.

Related issue

This issue cames from #12063, but does not fix it.