[DevTools] remove backend dependency from the global hook (#26563)

## Summary

- #26234 is reverted and replaced with a better approach 
- introduce a new global devtools variable to decouple the global hook's
dependency on backend/console.js, and add it to react-devtools-inline
and react-devtools-standalone

With this PR, I want to introduce a new principle to hook.js: we should
always be alert when editing this file and avoid importing from other
files.
In the past, we try to inline a lot of the implementation because we use
`.toString()` to inject this function from the extension (we still have
some old comments left). Although it is no longer inlined that way, it
has became now more important to keep it clean as it is a de facto
global API people are using (9.9K files contains it on Github search as
of today).


**File size change for extension:**
Before:
379K installHook.js

After:
 21K installHook.js
363K renderer.js

Author: mondaychen

packages/react-devtools-core/src/backend.js

@@ -11,6 +11,7 @@ import Agent from 'react-devtools-shared/src/backend/agent';
 import Bridge from 'react-devtools-shared/src/bridge';
 import {installHook} from 'react-devtools-shared/src/hook';
 import {initBackend} from 'react-devtools-shared/src/backend';
+import {installConsoleFunctionsToWindow} from 'react-devtools-shared/src/backend/console';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 import {getDefaultComponentFilters} from 'react-devtools-shared/src/utils';
@@ -38,6 +39,9 @@ type ConnectOptions = {
   ...
 };
 
+// Install a global variable to allow patching console early (during injection).
+// This provides React Native developers with components stacks even if they don't run DevTools.
+installConsoleFunctionsToWindow();
 installHook(window);
 
 const hook: ?DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;

packages/react-devtools-extensions/chrome/manifest.json

@@ -31,6 +31,7 @@
         "panel.html",
         "build/react_devtools_backend.js",
         "build/proxy.js",
+        "build/renderer.js",
         "build/installHook.js"
       ],
       "matches": [

packages/react-devtools-extensions/edge/manifest.json

@@ -31,6 +31,7 @@
         "panel.html",
         "build/react_devtools_backend.js",
         "build/proxy.js",
+        "build/renderer.js",
         "build/installHook.js"
       ],
       "matches": [

packages/react-devtools-extensions/firefox/manifest.json

@@ -32,6 +32,7 @@
     "panel.html",
     "build/react_devtools_backend.js",
     "build/proxy.js",
+    "build/renderer.js",
     "build/installHook.js"
   ],
   "background": {

packages/react-devtools-extensions/src/background.js

@@ -22,6 +22,13 @@ if (!IS_FIREFOX) {
         runAt: 'document_start',
         world: chrome.scripting.ExecutionWorld.MAIN,
       },
+      {
+        id: 'renderer',
+        matches: ['<all_urls>'],
+        js: ['build/renderer.js'],
+        runAt: 'document_start',
+        world: chrome.scripting.ExecutionWorld.MAIN,
+      },
     ],
     function () {
       // When the content scripts are already registered, an error will be thrown.

packages/react-devtools-extensions/src/contentScripts/prepareInjection.js

@@ -1,6 +1,8 @@
 /* global chrome */
 
 import nullthrows from 'nullthrows';
+import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
+import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 import {IS_FIREFOX} from '../utils';
 
 // We run scripts on the page via the service worker (backgroud.js) for
@@ -109,9 +111,15 @@ window.addEventListener('pageshow', function ({target}) {
   chrome.runtime.sendMessage(lastDetectionResult);
 });
 
-// Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
-// Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
 if (IS_FIREFOX) {
+  // If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
+  if (
+    sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true'
+  ) {
+    injectScriptSync(chrome.runtime.getURL('build/renderer.js'));
+  }
+  // Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
+  // Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
   switch (document.contentType) {
     case 'text/html':
     case 'application/xhtml+xml': {

packages/react-devtools-extensions/src/contentScripts/renderer.js

@@ -0,0 +1,33 @@
+/**
+ * In order to support reload-and-profile functionality, the renderer needs to be injected before any other scripts.
+ * Since it is a complex file (with imports) we can't just toString() it like we do with the hook itself,
+ * So this entry point (one of the web_accessible_resources) provides a way to eagerly inject it.
+ * The hook will look for the presence of a global __REACT_DEVTOOLS_ATTACH__ and attach an injected renderer early.
+ * The normal case (not a reload-and-profile) will not make use of this entry point though.
+ *
+ * @flow
+ */
+
+import {attach} from 'react-devtools-shared/src/backend/renderer';
+import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
+import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
+
+if (
+  sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true' &&
+  !window.hasOwnProperty('__REACT_DEVTOOLS_ATTACH__')
+) {
+  Object.defineProperty(
+    window,
+    '__REACT_DEVTOOLS_ATTACH__',
+    ({
+      enumerable: false,
+      // This property needs to be configurable to allow third-party integrations
+      // to attach their own renderer. Note that using third-party integrations
+      // is not officially supported. Use at your own risk.
+      configurable: true,
+      get() {
+        return attach;
+      },
+    }: Object),
+  );
+}

packages/react-devtools-extensions/webpack.config.js

@@ -55,6 +55,7 @@ module.exports = {
     panel: './src/panel.js',
     proxy: './src/contentScripts/proxy.js',
     prepareInjection: './src/contentScripts/prepareInjection.js',
+    renderer: './src/contentScripts/renderer.js',
     installHook: './src/contentScripts/installHook.js',
   },
   output: {

packages/react-devtools-inline/src/backend.js

@@ -3,6 +3,7 @@
 import Agent from 'react-devtools-shared/src/backend/agent';
 import Bridge from 'react-devtools-shared/src/bridge';
 import {initBackend} from 'react-devtools-shared/src/backend';
+import {installConsoleFunctionsToWindow} from 'react-devtools-shared/src/backend/console';
 import {installHook} from 'react-devtools-shared/src/hook';
 import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
@@ -119,5 +120,8 @@ export function createBridge(contentWindow: any, wall?: Wall): BackendBridge {
 }
 
 export function initialize(contentWindow: any): void {
+  // Install a global variable to allow patching console early (during injection).
+  // This provides React Native developers with components stacks even if they don't run DevTools.
+  installConsoleFunctionsToWindow();
   installHook(contentWindow);
 }

packages/react-devtools-shared/src/backend/console.js

@@ -413,3 +413,10 @@ export function writeConsolePatchSettingsToWindow(
     settings.hideConsoleLogsInStrictMode;
   window.__REACT_DEVTOOLS_BROWSER_THEME__ = settings.browserTheme;
 }
+
+export function installConsoleFunctionsToWindow(): void {
+  window.__REACT_DEVTOOLS_CONSOLE_FUNCTIONS__ = {
+    patchConsoleUsingWindowValues,
+    registerRendererWithConsole: registerRenderer,
+  };
+}