Better browsersync

[geoffp]

Addresses #252, #159

Summary of changes:
This blacklists the UI chrome to exempt it from browsersync's snippet injection, meaning that the only thing it's glommed onto is the iframe itself and the stuff inside it. This should hopefully eliminate most of the spooky behavior that comes from BS, and in my testing, makes CSS injection and auto-page-refresh (upon editing pattern HTML) work correctly under both grunt & gulp.

Bonus: this also moves the browsersync badge to the lower right and chills it out some -- a request from my team that I think would be welcome to others.

[bmuenzenmeyer]

@geoff I owe you a beer for this when you come my way 😄 🍻

will give it a quick review before merge.

Thanks friend!

[geoffp]

Ah yeah, earnin' the 🍻

I had to read the browsersync code to figure this out -- the docs were not at all clear even on what the right option key was to use, whether it wanted a string, or array of strings, what the given path was relative to, yada yada. I think it's supposed to be a public URL fragment starting with a slash.

[bmuenzenmeyer]

@geoffp thanks for this!

[bramsmulders]

Guys, one quick note i'd like to point out from the top of my head. You NEED the refresh of the patternlab ui when adding, renaming or removing a pattern otherwise there will be no updated pattern menu.

I thought of the solution mentioned above once, and i could not implement it in my own fork due to the problem outlined above.

EDIT: Added renaming to list of actions which needs to trigger the UI refresh

[geoffp]

Yeah, that's true -- I don't think I've ever been able to get a file-watcher to detect new files. Maybe once, but it was fragile. In fact, I think I once saw a bug report in Node.js itself about that.

That might be worth looking into again.