[Spike] Consolidate page elements into single iFrame

[turbochef]

Page elements like the sidebar currently each have their own iframes. This means that adding new elements need their own html files that instantiate their own react apps, update the manifest.json to allow the browser to have access to the html file, and in order to access the redux store, devs have to instantiate a new one. I propose we consolidate all of these items into single iframe/react-app. This would significantly reduce the barrier adding page elements.

[fregante]

If I remember correctly the only reason why we are using iframes at all is because Bootstrap uses rem CSS units, which "conflict" with root font size of the page. Everything else would be sandboxed enough by ShadowRoots.

Apart from the sidebar, which probably makes extensive use of Bootstrap, I think everything else should be migrated away from bootstrap or somehow adjusted to not use rem (someone, somewhere surely already had this issue and published a fork)

At any rate, it's impractical to have a single iframe because some of our frames need to "take space" in the document, I think, like the panels. This is actually where ShadowRoot would be easier to handle as it wouldn't need the iframe resizer.

The only scenario where our iframed documents could be merged would be for the overlays.

[fregante]

Closing because:

it's impractical to have a single iframe

A POC for removing frames altogether lives in:

• POC #5944: Just use shadow DOM instead of iframes #7616

These two will make it easier to implement isolated widgets that work with or without frames:

• #7670: Remove rem units from bootstrap to avoid widget conflicts #7940
• #7670: Simplify creation of isolated widgets (IsolatedComponent) #8151

For example:

• ./SomeComponent.tsx: a regular React component
• some-component.html: an HTML page that calls render(<SomeComponent/>, document.body)
• contentScript.ts: calls renderWidget(<IsolatedComponent><SomeComponent/></IsolatedComponent>)