Element highlighter

[pwjablonski]

Hey! This is my first pass. Would love to get feedback if I'm on the right track in approaching this.

This feature detects if the cursor is located in within a CSS block and determines the associated selector. It then sends the selector to the preview window and adds a highlighter div to cover the corresponding elements based on the elements' positions.

I used C9 core as a starting point specifically
livecss,js

Couple Points

• Works for the CSS only
• Highlight scheme (shadowing/ color) is borrowed from C9. Might want to update.
• Doesn't include the selector label with the highlight as C9
• Doesn't display padding margin on elements which would be great to have.
• Currently, works only if cursor between braces of CSS block

For HTML
This is a lot more tricky and still wrapping my head around it. Quite a few more steps to think through.

• C9 used an HTML Instrumentor and Simple DOM.