Better layout abstraction (using distributed content?)

[warpech]

Currently, puppet-js-view-model-tree.html and html-imports-list.html have the same visual pattern, which is:

• container (:host) fills in the width and the height of the tab content
• fixed #toolbar
• scrollable #view

In order to make puppet-js-view-model-tree.html and html-imports-list.html layout-agnostic, this visual pattern should be moved to starcounter-debug-aid.html using distributed content.

In my opinion, the logic should be to treat all shadow root children of puppet-js-view-model-tree.html and html-imports-list.html as toolbars, except for the last child, which should be the scrollable view.

Would it work with distributed content, given that we can change Shadow DOM of puppet-js-view-model-tree.html and html-imports-list.html to Light DOM?

[warpech]

This is outdated. After migrating to the browser extension, the structure is completely different.