dart-lang/chromedeveditor — pull request #3765 by ussuri (2014-11-25 23:29:51+00:00)
Title: Consolidate most of UI in spark-polymer-ui element

@devoncarew
cc: @umop, @gaurave

Consolidating the UI after it got broken at some point has been my long term goal from the code health perspective, which I tried to achieve a few times, but now finally succeeded.

This is almost a straightforward refactoring, although a pretty large one in terms of the number of lines. The main parts are pretty straightforward; there was just one tricky place which took a while to get right:

* All the innerHTML of the `` tag in `spark_polymer.html` was moved and redistributed inside `spark-polymer-ui` element itself
* The CSS migrated accordingly
* The accessors in `spark.dart` and elsewhere updated accordingly, with some additional plumbing required
* Now the tricky part. Ace's JavaScript always inserts things like `

`. That doesn't work well when the actual Ace element lives inside a Polymer element, which is CSS-isolated. So I had to do some initial node redistribution from `

` to `shadowRoot` after `` creation and then listen to and redistribute any dynamically inserted nodes as well (which happens e.g. when the theme gets changed).

BTW, the Polymer JS team has wrapped Ace into an element (`ace-element`), and they've used a similar approach to the above.