Add live CSS diagnostics

[danmoseley]

This would be a straightforward extension of what was done for debugger and console. Like those two, it should be simple, targeted explicitly at the 20% of functionality that you need 80% of the time, primarily experimenting with styles.

• View and modify styles (add, remove, modify, enable/disable .. with diffs shown in margin)
• View DOM (tree, with expand/contract, synchronizing styles pane)

Possibly?

• Overridden styles (too much content - and strikethrough is not possible)

And not these

• Edit DOM (drag, cut/copy/paste, insert, type)
• Event listeners
• DOM breakpoints
• Layout box diagram

Since we're in the editor itself, it must be easy to take your modifications back into your code. The UX here needs some thought, perhaps a way to show only the diffs, and a click on each navigates you through the selectors it came from, so you can type.

[danmoseley]

Working on a v0.1 ... just inspect element and modify styles. No DOM tree yet.

[danmoseley]

Changed the title from "Add DOM explorer" to "Add live CSS diagnostics" because we think we can do better than porting a minimally featured DOM explorer, because by definition we have the actual CSS (or SASS, LESS) open. We should somehow match the live styles information on the selected element with the actual CSS (or SASS, LESS) sources it comes from. Ideally you can see all the styles applied to the element, yet also edit them directly.

[danmoseley]

This work is partially done, in the dom_explorer branch. Needs a volunteer to continue.