Make cosmetic changes to the Element Picker for blocking an element on a page

[Mikey1993]

As someone on the http://lifehacker.com/hmm-maybe-ublock-is-fighting-with-noscript-on-the-l-1682000585 post about uBlock was frustrated as he didn't understand what to do after picking the element he wanted to block.

Maybe the mechanism of blocking an element could be more intuitive and more obvious for the noviest users by simple, but powerful cosmetic changes to the Element Picker.

Couple improvements popping to my head:

1) The little bottom right menu should have minimum size, so that it can't be missed even if there are very little cosmetic filters to show below the textarea.

2) Leaving the blocking interface should be as easy as clicking outside the menu (the shaded area).
Explanation: users who think their browser/page stalled often will try to just click anywhere (which probably happens outside the Element picker small dialog) to find it out. (inspired by #810)
This has been fixed by the fact that the element picking action is initiated now up after clicking outside the menu + the cursor is changed to reflect the situation better.

3) When there is a long cosmetic rule in the textarea, there are no scrollbars - let's make some?

4) When there is a long cosmetic rule in the textarea the text is overlapsing the buttons, this should be otherwise, buttons should overlap the text always (also when scrolling).

5) Buttons on the texarea shouldn't fade, this makes people confused especially after selecting the element they want to block. (maybe fade them only when not mouse overing them and focused on the textarea)

6) The bottom right menu should have the overall color (border color?) always stand out from the background (especially in situations when the whole page is mistakenly selected and the menu blends with the color and being too transperant to the user)

What do you think?

[Snapy]

@Mikey1993 Yes, a redesign of the element picker would be great.
@gorhill The element picker dialog should be more visible : next to/under the selected element as in this comment or by implementing suggestion 6. Also regarding your comment that they may be a blocked element behind the dialog you could move it (if feasible) to the bottom right if this is the case.
Suggestion 3 is also really needed as if I select the text of the above comment I can use a cosmetic filter which I don't see the end (except by ctrl+clicking) ##.comment-body.markdown-body.markdown-format.js-c.
I think it's the only part that hasn't had any big cosmetic changes since its first implementation.
Thanks again for this great piece of software.