Merge pull request facebook#33 from bvaughn/portals

Experimenting with portals [WIP]
bvaughn · Mar 18, 2019 · 9b6ee0b · 9b6ee0b
2 parents d3ee02c + 5f154b3
commit 9b6ee0b
Show file tree

Hide file tree

Showing 23 changed files with 381 additions and 312 deletions.
diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json
@@ -27,13 +27,7 @@
   "devtools_page": "main.html",
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "web_accessible_resources": [
-    "elements.html",
-    "main.html",
-    "profiler.html",
-    "settings.html",
-    "build/backend.js"
-  ],
+  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
 
   "background": {
     "scripts": ["build/background.js"],

diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json
@@ -33,13 +33,7 @@
   "devtools_page": "main.html",
 
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "web_accessible_resources": [
-    "elements.html",
-    "main.html",
-    "profiler.html",
-    "settings.html",
-    "build/backend.js"
-  ],
+  "web_accessible_resources": ["main.html", "panel.html", "build/backend.js"],
 
   "background": {
     "scripts": ["build/background.js"],

diff --git a/shells/browser/shared/build.js b/shells/browser/shared/build.js
@@ -7,14 +7,7 @@ const { join } = require('path');
 
 // These files are copied along with Webpack-bundled files
 // to produce the final web extension
-const STATIC_FILES = [
-  'icons',
-  'popups',
-  'elements.html',
-  'main.html',
-  'profiler.html',
-  'settings.html',
-];
+const STATIC_FILES = ['icons', 'popups', 'main.html', 'panel.html'];
 
 const preProcess = async (destinationPath, tempPath) => {
   await remove(destinationPath); // Clean up from previously completed builds

diff --git a/shells/browser/shared/elements.html → shells/browser/shared/panel.html b/shells/browser/shared/elements.html → shells/browser/shared/panel.html
@@ -27,6 +27,6 @@
     <body>
         <!-- main react mount point -->
         <div id="container">Unable to find React on the page.</div>
-        <script src="./build/elements.js"></script>
+        <script src="./build/panel.js"></script>
     </body>
 </html>
diff --git a/shells/browser/shared/profiler.html b/shells/browser/shared/profiler.html
diff --git a/shells/browser/shared/settings.html b/shells/browser/shared/settings.html
diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js
@@ -1,8 +1,16 @@
 /* global chrome */
 
+import { createElement } from 'react';
+import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/Store';
 import inject from './inject';
+import {
+  createViewElementSource,
+  getBrowserName,
+  getBrowserTheme,
+} from './utils';
+import DevTools from 'src/devtools/views/DevTools';
 
 let panelCreated = false;
 
@@ -24,9 +32,15 @@ function createPanelIfReactLoaded() {
 
       let bridge = null;
       let store = null;
-      let elementsPanel = null;
-      let profilerPanel = null;
-      let settingsPanel = null;
+
+      let elementsPortalContainer = null;
+      let profilerPortalContainer = null;
+      let settingsPortalContainer = null;
+
+      let cloneStyleTags = null;
+      let mostRecentOverrideTab = null;
+      let render = null;
+      let root = null;
 
       function initBridgeAndStore() {
         let hasPortBeenDisconnected = false;
@@ -54,77 +68,96 @@ function createPanelIfReactLoaded() {
         // Otherwise the Store may miss important initial tree op codes.
         inject(chrome.runtime.getURL('build/backend.js'));
 
-        if (elementsPanel !== null) {
-          elementsPanel.injectBridgeAndStore(bridge, store);
-        }
-        if (profilerPanel !== null) {
-          profilerPanel.injectBridgeAndStore(bridge, store);
-        }
-        if (settingsPanel !== null) {
-          settingsPanel.injectBridgeAndStore(bridge, store);
-        }
+        const viewElementSource = createViewElementSource(bridge, store);
+
+        root = createRoot(document.createElement('div'));
+
+        render = (overrideTab = mostRecentOverrideTab) => {
+          mostRecentOverrideTab = overrideTab;
+
+          root.render(
+            createElement(DevTools, {
+              bridge,
+              browserName: getBrowserName(),
+              browserTheme: getBrowserTheme(),
+              elementsPortalContainer,
+              overrideTab,
+              profilerPortalContainer,
+              settingsPortalContainer,
+              showTabBar: false,
+              store,
+              viewElementSource,
+            })
+          );
+        };
+
+        render();
       }
 
-      initBridgeAndStore();
-
-      chrome.devtools.panels.create(
-        '⚛ Elements',
-        '',
-        'elements.html',
-        panel => {
-          panel.onShown.addListener(panel => {
-            if (elementsPanel === null) {
-              panel.injectBridgeAndStore(bridge, store);
+      cloneStyleTags = () => {
+        const linkTags = [];
+        for (let linkTag of document.getElementsByTagName('link')) {
+          if (linkTag.rel === 'stylesheet') {
+            const newLinkTag = document.createElement('link');
+            for (let attribute of linkTag.attributes) {
+              newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
             }
+            linkTags.push(newLinkTag);
+          }
+        }
+        return linkTags;
+      };
 
-            elementsPanel = panel;
+      initBridgeAndStore();
 
-            // TODO: When the user switches to the panel, check for an Elements tab selection.
-          });
-          panel.onHidden.addListener(() => {
-            // TODO: Stop highlighting and stuff.
-          });
-        }
-      );
+      chrome.devtools.panels.create('⚛ Elements', '', 'panel.html', panel => {
+        panel.onShown.addListener(panel => {
+          elementsPortalContainer = panel.container;
+          if (elementsPortalContainer != null) {
+            elementsPortalContainer.innerHTML = '';
+            render('elements');
+            panel.injectStyles(cloneStyleTags);
+          }
 
-      // TODO (profiling) Is there a way to detect profiling support and conditionally register this panel?
-      chrome.devtools.panels.create(
-        '⚛ Profiler',
-        '',
-        'profiler.html',
-        panel => {
-          panel.onShown.addListener(panel => {
-            if (settingsPanel === null) {
-              panel.injectBridgeAndStore(bridge, store);
-            }
+          // TODO: When the user switches to the panel, check for an Elements tab selection.
+        });
+        panel.onHidden.addListener(() => {
+          // TODO: Stop highlighting and stuff.
+        });
+      });
 
-            profilerPanel = panel;
-          });
-        }
-      );
-
-      chrome.devtools.panels.create(
-        '⚛ Settings',
-        '',
-        'settings.html',
-        panel => {
-          panel.onShown.addListener(panel => {
-            if (settingsPanel === null) {
-              panel.injectBridgeAndStore(bridge, store);
-            }
+      // TODO (profiling) Is there a way to detect profiling support and conditionally register this panel?
+      chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {
+        panel.onShown.addListener(panel => {
+          profilerPortalContainer = panel.container;
+          if (profilerPortalContainer != null) {
+            profilerPortalContainer.innerHTML = '';
+            render('profiler');
+            panel.injectStyles(cloneStyleTags);
+          }
+        });
+      });
 
-            settingsPanel = panel;
-          });
-        }
-      );
+      chrome.devtools.panels.create('⚛ Settings', '', 'panel.html', panel => {
+        panel.onShown.addListener(panel => {
+          settingsPortalContainer = panel.container;
+          if (settingsPortalContainer != null) {
+            settingsPortalContainer.innerHTML = '';
+            render('settings');
+            panel.injectStyles(cloneStyleTags);
+          }
+        });
+      });
 
       chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
       // Shutdown bridge and re-initialize DevTools panel when a new page is loaded.
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
         bridge.send('shutdown');
 
-        initBridgeAndStore();
+        // It's easiest to recreate the DevTools panel (to clean up potential stale state).
+        // We can revisit this in the future as a small optimization.
+        flushSync(() => root.unmount(initBridgeAndStore));
       });
     }
   );

diff --git a/shells/browser/shared/src/panel.js b/shells/browser/shared/src/panel.js
@@ -0,0 +1,18 @@
+// Portal target container.
+window.container = document.getElementById('container');
+
+let hasInjectedStyles = false;
+
+// DevTools styles are injected into the top-level document head (where the main React app is rendered).
+// This method copies those styles to the child window where each panel (e.g. Elements, Profiler) is portaled.
+window.injectStyles = getLinkTags => {
+  if (!hasInjectedStyles) {
+    hasInjectedStyles = true;
+
+    const linkTags = getLinkTags();
+
+    for (let linkTag of linkTags) {
+      document.head.appendChild(linkTag);
+    }
+  }
+};
diff --git a/shells/browser/shared/src/panels/elements.js b/shells/browser/shared/src/panels/elements.js
diff --git a/shells/browser/shared/src/panels/profiler.js b/shells/browser/shared/src/panels/profiler.js
diff --git a/shells/browser/shared/src/panels/settings.js b/shells/browser/shared/src/panels/settings.js