From 78f3efa54d80194265e9309ff41f1126142fe5b2 Mon Sep 17 00:00:00 2001 From: Gabriel Trompiz Date: Wed, 13 Oct 2021 12:39:09 -0500 Subject: [PATCH 1/3] Allow Profiler to be used with no connected clients (#22127) --- .../react-devtools-core/src/standalone.js | 15 +++++++++++++++ packages/react-devtools/app.html | 19 +++++++++++++++++++ 2 files changed, 34 insertions(+) diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index c37bb945338c2..bd3fdef623c00 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -43,6 +43,7 @@ let node: HTMLElement = ((null: any): HTMLElement); let nodeWaitingToConnectHTML: string = ''; let projectRoots: Array = []; let statusListener: StatusListener = (message: string) => {}; +let overrideTab: string | null = null; // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration. function hookNamesModuleLoaderFunction() { @@ -113,6 +114,7 @@ function reload() { store: ((store: any): Store), warnIfLegacyBackendDetected: true, viewElementSourceFunction, + overrideTab, }), ); }, 100); @@ -179,6 +181,16 @@ function onError({code, message}) { } } +function openProfiler() { + // Mocked up bridge and store to allow the DevTools to be rendered + bridge = new Bridge({listen: () => {}, send: () => {}}); + store = new Store(bridge, {}); + + overrideTab = 'profiler'; + + reload(); +} + function initialize(socket: WebSocket) { const listeners = []; socket.onmessage = event => { @@ -232,6 +244,8 @@ function initialize(socket: WebSocket) { supportsNativeInspection: false, }); + overrideTab = null; + log('Connected'); reload(); } @@ -372,6 +386,7 @@ const DevtoolsUI = { setProjectRoots, setStatusListener, startServer, + openProfiler, }; export default DevtoolsUI; diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html index c2193698fca75..fc631cea1ca6a 100644 --- a/packages/react-devtools/app.html +++ b/packages/react-devtools/app.html @@ -142,6 +142,16 @@ before importing React DOM. +
+
Profiler
+
+ Open the Profiler tab to inspect saved profiles. +
+
Starting the server…
@@ -201,6 +211,12 @@ } } + function openProfiler() { + window.devtools + .setContentDOMNode(document.getElementById("container")) + .openProfiler(); + } + const link = $('#rn-help-link'); link.addEventListener('click', event => { event.preventDefault(); @@ -217,6 +233,9 @@ $byIp.addEventListener('click', selectAllAndCopy); $byIp.addEventListener('focus', selectAllAndCopy); + const $profiler = $("#profiler"); + $profiler.addEventListener('click', openProfiler); + let devtools; try { devtools = require("react-devtools-core/standalone").default; From d366b31984ef744cbafc87389638fa6a2edfddcd Mon Sep 17 00:00:00 2001 From: Gabriel Trompiz Date: Wed, 13 Oct 2021 13:49:33 -0500 Subject: [PATCH 2/3] Stopped passing overrideTab as a prop to DevTools in the standalone ver. --- packages/react-devtools-core/src/standalone.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index bd3fdef623c00..40f52dbf55080 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -43,7 +43,6 @@ let node: HTMLElement = ((null: any): HTMLElement); let nodeWaitingToConnectHTML: string = ''; let projectRoots: Array = []; let statusListener: StatusListener = (message: string) => {}; -let overrideTab: string | null = null; // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration. function hookNamesModuleLoaderFunction() { @@ -114,7 +113,6 @@ function reload() { store: ((store: any): Store), warnIfLegacyBackendDetected: true, viewElementSourceFunction, - overrideTab, }), ); }, 100); @@ -186,8 +184,6 @@ function openProfiler() { bridge = new Bridge({listen: () => {}, send: () => {}}); store = new Store(bridge, {}); - overrideTab = 'profiler'; - reload(); } @@ -244,8 +240,6 @@ function initialize(socket: WebSocket) { supportsNativeInspection: false, }); - overrideTab = null; - log('Connected'); reload(); } From cd728ea082f33abde09ec891ce7cded6be3b778f Mon Sep 17 00:00:00 2001 From: Gabriel Trompiz Date: Wed, 13 Oct 2021 18:41:48 -0500 Subject: [PATCH 3/3] Modified the default tab key when opening DevTools in "Profiler" mode --- packages/react-devtools-core/src/standalone.js | 12 +++++++++++- packages/react-devtools-shared/src/constants.js | 2 ++ .../src/devtools/views/DevTools.js | 3 ++- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 40f52dbf55080..fae70937ea0aa 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -30,7 +30,11 @@ import {readFileSync} from 'fs'; import {installHook} from 'react-devtools-shared/src/hook'; import DevTools from 'react-devtools-shared/src/devtools/views/DevTools'; import {doesFilePathExist, launchEditor} from './editor'; -import {__DEBUG__} from 'react-devtools-shared/src/constants'; +import { + __DEBUG__, + LOCAL_STORAGE_DEFAULT_TAB_KEY, +} from 'react-devtools-shared/src/constants'; +import {localStorageSetItem} from '../../react-devtools-shared/src/storage'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types'; @@ -184,6 +188,12 @@ function openProfiler() { bridge = new Bridge({listen: () => {}, send: () => {}}); store = new Store(bridge, {}); + // Ensure the Profiler tab is shown initially. + localStorageSetItem( + LOCAL_STORAGE_DEFAULT_TAB_KEY, + JSON.stringify('profiler'), + ); + reload(); } diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js index 60ce987e267f5..40c28a0f6abdf 100644 --- a/packages/react-devtools-shared/src/constants.js +++ b/packages/react-devtools-shared/src/constants.js @@ -20,6 +20,8 @@ export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4; export const TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS = 5; export const TREE_OPERATION_REMOVE_ROOT = 6; +export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab'; + export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY = 'React::DevTools::componentFilters'; diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js index 0fa4a440136aa..781ad9d902f68 100644 --- a/packages/react-devtools-shared/src/devtools/views/DevTools.js +++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js @@ -38,6 +38,7 @@ import UnsupportedVersionDialog from './UnsupportedVersionDialog'; import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected'; import {useLocalStorage} from './hooks'; import ThemeProvider from './ThemeProvider'; +import {LOCAL_STORAGE_DEFAULT_TAB_KEY} from '../../constants'; import styles from './DevTools.css'; @@ -143,7 +144,7 @@ export default function DevTools({ hideViewSourceAction, }: Props) { const [currentTab, setTab] = useLocalStorage( - 'React::DevTools::defaultTab', + LOCAL_STORAGE_DEFAULT_TAB_KEY, defaultTab, );