Toolbar: Adjusted the way the menu is positioned

[RunDevelopment]

This fixes #2134 by introducing a new positioner element between div.code-toolbar and div.toolbar.

However, this PR has two problems:

1. To be independent of the size of the pre, I basically set the size of the positioner based on the width of the pre's scrollbar (can be 0). But this won't work if e.g. the visibility/width of the scrollbar changes.
   We could just re-adjust the size of the positioner like 60 times/sec but maybe there's something better. Ideas?
2. This is a breaking change. You'll notice that I had to change quite a bit of the CSS of Toolbar. People who have some custom styles for their toolbar will also have to adjust their styles.

Screenshot

[peterbud]

@RunDevelopment : for your question 1. could this solution work?

[mAAdhaTTah]

I know this solves a real problem but this feels kinda hack-y and inelegant. Seems like it would be less work for the consumer to add padding on their own if it scrolls.

Or maybe we structure things a little differently so the scrollbar doesn't overlap? Or position it on the left side instead? Just throwing ideas out there.

[RunDevelopment]

Or maybe we structure things a little differently so the scrollbar doesn't overlap?

How? You can either have the toolbar outside the pre or inside. We currently have it outside because even if we move it inside, the same issue persists. I don't think we can solve this in pure CSS.

Details

div.foo {
	position: absolute;
	width: 100px;
	height: 20px;
	background-color: red;
	top: 0;
	right: 0;
}

Or position it on the left side instead?

The nice thing about having the toolbar on the right side is that it usually doesn't overlap with the code.

---

How about this: Same solution as for Line numbers: We refresh the layout when the element is highlighted and when the window resizes. Since that might not cover all cases, we expose a resize function that users can call.