From 257386acace6bdf29da063beceaf1d7b11796e54 Mon Sep 17 00:00:00 2001 From: Mengdi Chen Date: Mon, 10 Apr 2023 17:07:05 -0400 Subject: [PATCH] [DevTools][BE] move shared types & constants to consolidated locations (#26572) ## Summary This pull request aims to improve the maintainability of the codebase by consolidating types and constants that are shared between the backend and frontend. This consolidation will allow us to maintain backwards compatibility in the frontend in the future. To achieve this, we have moved the shared types and constants to the following blessed files: - react-devtools-shared/src/constants - react-devtools-shared/src/types - react-devtools-shared/src/backend/types - react-devtools-shared/src/backend/NativeStyleEditor/types Please note that the inclusion of NativeStyleEditor in this list is temporary, and we plan to remove it once we have a better plugin system in place. ## How did you test this change? I have tested it by running `yarn flow dom-node`, which reports no errors. --- .../react-devtools-core/src/cachedSettings.js | 6 +- .../react-devtools-core/src/standalone.js | 2 +- .../react-devtools-extensions/src/main.js | 6 +- .../src/backend/agent.js | 9 +- .../src/backend/console.js | 18 +- .../src/backend/types.js | 16 + packages/react-devtools-shared/src/bridge.js | 2 +- .../react-devtools-shared/src/constants.js | 339 ------------------ .../src/devtools/constants.js | 338 +++++++++++++++++ .../src/devtools/views/DevTools.js | 4 +- .../views/ErrorBoundary/WorkplaceGroup.js | 2 +- .../views/Settings/GeneralSettings.js | 2 +- .../views/Settings/SettingsContext.js | 8 +- .../views/UnsupportedVersionDialog.js | 2 +- .../src/devtools/views/useThemeStyles.js | 2 +- packages/react-devtools-shared/src/hook.js | 2 +- packages/react-devtools-shared/src/types.js | 9 + packages/react-devtools-shared/src/utils.js | 3 +- .../react-devtools-timeline/src/constants.js | 2 +- 19 files changed, 398 insertions(+), 374 deletions(-) create mode 100644 packages/react-devtools-shared/src/devtools/constants.js diff --git a/packages/react-devtools-core/src/cachedSettings.js b/packages/react-devtools-core/src/cachedSettings.js index 945c0cf60a42c..a104cadfb0341 100644 --- a/packages/react-devtools-core/src/cachedSettings.js +++ b/packages/react-devtools-core/src/cachedSettings.js @@ -7,10 +7,8 @@ * @flow */ -import { - type ConsolePatchSettings, - writeConsolePatchSettingsToWindow, -} from 'react-devtools-shared/src/backend/console'; +import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/types'; +import {writeConsolePatchSettingsToWindow} from 'react-devtools-shared/src/backend/console'; import {castBool, castBrowserTheme} from 'react-devtools-shared/src/utils'; // Note: all keys should be optional in this type, because users can use newer diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index eba5b89be5c39..bf5f9cf0ba21a 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -30,7 +30,7 @@ import { __DEBUG__, LOCAL_STORAGE_DEFAULT_TAB_KEY, } from 'react-devtools-shared/src/constants'; -import {localStorageSetItem} from '../../react-devtools-shared/src/storage'; +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'; diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index 95d36f1915e53..1303e2a0c132e 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/packages/react-devtools-extensions/src/main.js @@ -6,7 +6,6 @@ import {createRoot} from 'react-dom/client'; import Bridge from 'react-devtools-shared/src/bridge'; import Store from 'react-devtools-shared/src/devtools/store'; import {IS_CHROME, IS_EDGE, getBrowserTheme} from './utils'; -import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants'; import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger'; import { getAppendComponentStack, @@ -21,7 +20,10 @@ import { localStorageSetItem, } from 'react-devtools-shared/src/storage'; import DevTools from 'react-devtools-shared/src/devtools/views/DevTools'; -import {__DEBUG__} from 'react-devtools-shared/src/constants'; +import { + __DEBUG__, + LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY, +} from 'react-devtools-shared/src/constants'; import {logEvent} from 'react-devtools-shared/src/Logger'; const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY = diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 0b78fce3c22ca..2dfed90734aa5 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -25,7 +25,7 @@ import { initialize as setupTraceUpdates, toggleEnabled as setTraceUpdatesEnabled, } from './views/TraceUpdates'; -import {patch as patchConsole, type ConsolePatchSettings} from './console'; +import {patch as patchConsole} from './console'; import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge'; import type {BackendBridge} from 'react-devtools-shared/src/bridge'; @@ -37,10 +37,13 @@ import type { PathMatch, RendererID, RendererInterface, + ConsolePatchSettings, } from './types'; -import type {ComponentFilter} from '../types'; +import type { + ComponentFilter, + BrowserTheme, +} from 'react-devtools-shared/src/types'; import {isSynchronousXHRSupported} from './utils'; -import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools'; const debug = (methodName: string, ...args: Array) => { if (__DEBUG__) { diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index 27ca30114c090..3b669b218cd68 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -8,8 +8,12 @@ */ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes'; -import type {CurrentDispatcherRef, ReactRenderer, WorkTagMap} from './types'; -import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools'; +import type { + CurrentDispatcherRef, + ReactRenderer, + WorkTagMap, + ConsolePatchSettings, +} from './types'; import {format, formatWithStyles} from './utils'; import {getInternalReactConstants} from './renderer'; @@ -136,7 +140,7 @@ export function registerRenderer( } } -const consoleSettingsRef = { +const consoleSettingsRef: ConsolePatchSettings = { appendComponentStack: false, breakOnConsoleErrors: false, showInlineWarningsAndErrors: false, @@ -144,14 +148,6 @@ const consoleSettingsRef = { browserTheme: 'dark', }; -export type ConsolePatchSettings = { - appendComponentStack: boolean, - breakOnConsoleErrors: boolean, - showInlineWarningsAndErrors: boolean, - hideConsoleLogsInStrictMode: boolean, - browserTheme: BrowserTheme, -}; - // Patches console methods to append component stack for the current fiber. // Call unpatch() to remove the injected behavior. export function patch({ diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 3bf60b8cb5416..8de4c23dd3f84 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -7,6 +7,13 @@ * @flow */ +/** + * WARNING: + * This file contains types that are conceptually related to React internals and + * DevTools backends, but can be passed to frontend via the bridge. + * Be mindful of backwards compatibility when making changes. + */ + import type {ReactContext, Wakeable} from 'shared/ReactTypes'; import type {Source} from 'shared/ReactElementType'; import type {Fiber} from 'react-reconciler/src/ReactInternalTypes'; @@ -17,6 +24,7 @@ import type { } from 'react-devtools-shared/src/types'; import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor'; import type {TimelineDataExport} from 'react-devtools-timeline/src/types'; +import type {BrowserTheme} from 'react-devtools-shared/src/types'; type BundleType = | 0 // PROD @@ -492,3 +500,11 @@ export type DevToolsHook = { ... }; + +export type ConsolePatchSettings = { + appendComponentStack: boolean, + breakOnConsoleErrors: boolean, + showInlineWarningsAndErrors: boolean, + hideConsoleLogsInStrictMode: boolean, + browserTheme: BrowserTheme, +}; diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index c2dd07d393ea9..c24d65a076e01 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -15,9 +15,9 @@ import type { OwnersList, ProfilingDataBackend, RendererID, + ConsolePatchSettings, } from 'react-devtools-shared/src/backend/types'; import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types'; -import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/console'; const BATCH_DURATION = 100; diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js index b6d5c5b0e17b3..5c2454a36f909 100644 --- a/packages/react-devtools-shared/src/constants.js +++ b/packages/react-devtools-shared/src/constants.js @@ -66,342 +66,3 @@ export const LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE = 'React::DevTools::hideConsoleLogsInStrictMode'; export const PROFILER_EXPORT_VERSION = 5; - -export const CHANGE_LOG_URL = - 'https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md'; - -export const UNSUPPORTED_VERSION_URL = - 'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back'; - -export const REACT_DEVTOOLS_WORKPLACE_URL = - 'https://fburl.com/react-devtools-workplace-group'; - -import type { - Theme, - DisplayDensity, -} from './devtools/views/Settings/SettingsContext'; - -export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { - light: { - '--color-attribute-name': '#ef6632', - '--color-attribute-name-not-editable': '#23272f', - '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)', - '--color-attribute-value': '#1a1aa6', - '--color-attribute-value-inverted': '#ffffff', - '--color-attribute-editable-value': '#1a1aa6', - '--color-background': '#ffffff', - '--color-background-hover': 'rgba(0, 136, 250, 0.1)', - '--color-background-inactive': '#e5e5e5', - '--color-background-invalid': '#fff0f0', - '--color-background-selected': '#0088fa', - '--color-button-background': '#ffffff', - '--color-button-background-focus': '#ededed', - '--color-button': '#5f6673', - '--color-button-disabled': '#cfd1d5', - '--color-button-active': '#0088fa', - '--color-button-focus': '#23272f', - '--color-button-hover': '#23272f', - '--color-border': '#eeeeee', - '--color-commit-did-not-render-fill': '#cfd1d5', - '--color-commit-did-not-render-fill-text': '#000000', - '--color-commit-did-not-render-pattern': '#cfd1d5', - '--color-commit-did-not-render-pattern-text': '#333333', - '--color-commit-gradient-0': '#37afa9', - '--color-commit-gradient-1': '#63b19e', - '--color-commit-gradient-2': '#80b393', - '--color-commit-gradient-3': '#97b488', - '--color-commit-gradient-4': '#abb67d', - '--color-commit-gradient-5': '#beb771', - '--color-commit-gradient-6': '#cfb965', - '--color-commit-gradient-7': '#dfba57', - '--color-commit-gradient-8': '#efbb49', - '--color-commit-gradient-9': '#febc38', - '--color-commit-gradient-text': '#000000', - '--color-component-name': '#6a51b2', - '--color-component-name-inverted': '#ffffff', - '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)', - '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)', - '--color-component-badge-count': '#777d88', - '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)', - '--color-console-error-badge-text': '#ffffff', - '--color-console-error-background': '#fff0f0', - '--color-console-error-border': '#ffd6d6', - '--color-console-error-icon': '#eb3941', - '--color-console-error-text': '#fe2e31', - '--color-console-warning-badge-text': '#000000', - '--color-console-warning-background': '#fffbe5', - '--color-console-warning-border': '#fff5c1', - '--color-console-warning-icon': '#f4bd00', - '--color-console-warning-text': '#64460c', - '--color-context-background': 'rgba(0,0,0,.9)', - '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)', - '--color-context-background-selected': '#178fb9', - '--color-context-border': '#3d424a', - '--color-context-text': '#ffffff', - '--color-context-text-selected': '#ffffff', - '--color-dim': '#777d88', - '--color-dimmer': '#cfd1d5', - '--color-dimmest': '#eff0f1', - '--color-error-background': 'hsl(0, 100%, 97%)', - '--color-error-border': 'hsl(0, 100%, 92%)', - '--color-error-text': '#ff0000', - '--color-expand-collapse-toggle': '#777d88', - '--color-link': '#0000ff', - '--color-modal-background': 'rgba(255, 255, 255, 0.75)', - '--color-bridge-version-npm-background': '#eff0f1', - '--color-bridge-version-npm-text': '#000000', - '--color-bridge-version-number': '#0088fa', - '--color-primitive-hook-badge-background': '#e5e5e5', - '--color-primitive-hook-badge-text': '#5f6673', - '--color-record-active': '#fc3a4b', - '--color-record-hover': '#3578e5', - '--color-record-inactive': '#0088fa', - '--color-resize-bar': '#eeeeee', - '--color-resize-bar-active': '#dcdcdc', - '--color-resize-bar-border': '#d1d1d1', - '--color-resize-bar-dot': '#333333', - '--color-timeline-internal-module': '#d1d1d1', - '--color-timeline-internal-module-hover': '#c9c9c9', - '--color-timeline-internal-module-text': '#444', - '--color-timeline-native-event': '#ccc', - '--color-timeline-native-event-hover': '#aaa', - '--color-timeline-network-primary': '#fcf3dc', - '--color-timeline-network-primary-hover': '#f0e7d1', - '--color-timeline-network-secondary': '#efc457', - '--color-timeline-network-secondary-hover': '#e3ba52', - '--color-timeline-priority-background': '#f6f6f6', - '--color-timeline-priority-border': '#eeeeee', - '--color-timeline-user-timing': '#c9cacd', - '--color-timeline-user-timing-hover': '#93959a', - '--color-timeline-react-idle': '#d3e5f6', - '--color-timeline-react-idle-hover': '#c3d9ef', - '--color-timeline-react-render': '#9fc3f3', - '--color-timeline-react-render-hover': '#83afe9', - '--color-timeline-react-render-text': '#11365e', - '--color-timeline-react-commit': '#c88ff0', - '--color-timeline-react-commit-hover': '#b281d6', - '--color-timeline-react-commit-text': '#3e2c4a', - '--color-timeline-react-layout-effects': '#b281d6', - '--color-timeline-react-layout-effects-hover': '#9d71bd', - '--color-timeline-react-layout-effects-text': '#3e2c4a', - '--color-timeline-react-passive-effects': '#b281d6', - '--color-timeline-react-passive-effects-hover': '#9d71bd', - '--color-timeline-react-passive-effects-text': '#3e2c4a', - '--color-timeline-react-schedule': '#9fc3f3', - '--color-timeline-react-schedule-hover': '#2683E2', - '--color-timeline-react-suspense-rejected': '#f1cc14', - '--color-timeline-react-suspense-rejected-hover': '#ffdf37', - '--color-timeline-react-suspense-resolved': '#a6e59f', - '--color-timeline-react-suspense-resolved-hover': '#89d281', - '--color-timeline-react-suspense-unresolved': '#c9cacd', - '--color-timeline-react-suspense-unresolved-hover': '#93959a', - '--color-timeline-thrown-error': '#ee1638', - '--color-timeline-thrown-error-hover': '#da1030', - '--color-timeline-text-color': '#000000', - '--color-timeline-text-dim-color': '#ccc', - '--color-timeline-react-work-border': '#eeeeee', - '--color-search-match': 'yellow', - '--color-search-match-current': '#f7923b', - '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)', - '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)', - '--color-scroll-caret': 'rgba(150, 150, 150, 0.5)', - '--color-tab-selected-border': '#0088fa', - '--color-text': '#000000', - '--color-text-invalid': '#ff0000', - '--color-text-selected': '#ffffff', - '--color-toggle-background-invalid': '#fc3a4b', - '--color-toggle-background-on': '#0088fa', - '--color-toggle-background-off': '#cfd1d5', - '--color-toggle-text': '#ffffff', - '--color-warning-background': '#fb3655', - '--color-warning-background-hover': '#f82042', - '--color-warning-text-color': '#ffffff', - '--color-warning-text-color-inverted': '#fd4d69', - - // The styles below should be kept in sync with 'root.css' - // They are repeated there because they're used by e.g. tooltips or context menus - // which get rendered outside of the DOM subtree (where normal theme/styles are written). - '--color-scroll-thumb': '#c2c2c2', - '--color-scroll-track': '#fafafa', - '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)', - '--color-tooltip-text': '#ffffff', - }, - dark: { - '--color-attribute-name': '#9d87d2', - '--color-attribute-name-not-editable': '#ededed', - '--color-attribute-name-inverted': '#282828', - '--color-attribute-value': '#cedae0', - '--color-attribute-value-inverted': '#ffffff', - '--color-attribute-editable-value': 'yellow', - '--color-background': '#282c34', - '--color-background-hover': 'rgba(255, 255, 255, 0.1)', - '--color-background-inactive': '#3d424a', - '--color-background-invalid': '#5c0000', - '--color-background-selected': '#178fb9', - '--color-button-background': '#282c34', - '--color-button-background-focus': '#3d424a', - '--color-button': '#afb3b9', - '--color-button-active': '#61dafb', - '--color-button-disabled': '#4f5766', - '--color-button-focus': '#a2e9fc', - '--color-button-hover': '#ededed', - '--color-border': '#3d424a', - '--color-commit-did-not-render-fill': '#777d88', - '--color-commit-did-not-render-fill-text': '#000000', - '--color-commit-did-not-render-pattern': '#666c77', - '--color-commit-did-not-render-pattern-text': '#ffffff', - '--color-commit-gradient-0': '#37afa9', - '--color-commit-gradient-1': '#63b19e', - '--color-commit-gradient-2': '#80b393', - '--color-commit-gradient-3': '#97b488', - '--color-commit-gradient-4': '#abb67d', - '--color-commit-gradient-5': '#beb771', - '--color-commit-gradient-6': '#cfb965', - '--color-commit-gradient-7': '#dfba57', - '--color-commit-gradient-8': '#efbb49', - '--color-commit-gradient-9': '#febc38', - '--color-commit-gradient-text': '#000000', - '--color-component-name': '#61dafb', - '--color-component-name-inverted': '#282828', - '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)', - '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)', - '--color-component-badge-count': '#8f949d', - '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)', - '--color-console-error-badge-text': '#000000', - '--color-console-error-background': '#290000', - '--color-console-error-border': '#5c0000', - '--color-console-error-icon': '#eb3941', - '--color-console-error-text': '#fc7f7f', - '--color-console-warning-badge-text': '#000000', - '--color-console-warning-background': '#332b00', - '--color-console-warning-border': '#665500', - '--color-console-warning-icon': '#f4bd00', - '--color-console-warning-text': '#f5f2ed', - '--color-context-background': 'rgba(255,255,255,.95)', - '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)', - '--color-context-background-selected': '#0088fa', - '--color-context-border': '#eeeeee', - '--color-context-text': '#000000', - '--color-context-text-selected': '#ffffff', - '--color-dim': '#8f949d', - '--color-dimmer': '#777d88', - '--color-dimmest': '#4f5766', - '--color-error-background': '#200', - '--color-error-border': '#900', - '--color-error-text': '#f55', - '--color-expand-collapse-toggle': '#8f949d', - '--color-link': '#61dafb', - '--color-modal-background': 'rgba(0, 0, 0, 0.75)', - '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)', - '--color-bridge-version-npm-text': '#ffffff', - '--color-bridge-version-number': 'yellow', - '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)', - '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)', - '--color-record-active': '#fc3a4b', - '--color-record-hover': '#a2e9fc', - '--color-record-inactive': '#61dafb', - '--color-resize-bar': '#282c34', - '--color-resize-bar-active': '#31363f', - '--color-resize-bar-border': '#3d424a', - '--color-resize-bar-dot': '#cfd1d5', - '--color-timeline-internal-module': '#303542', - '--color-timeline-internal-module-hover': '#363b4a', - '--color-timeline-internal-module-text': '#7f8899', - '--color-timeline-native-event': '#b2b2b2', - '--color-timeline-native-event-hover': '#949494', - '--color-timeline-network-primary': '#fcf3dc', - '--color-timeline-network-primary-hover': '#e3dbc5', - '--color-timeline-network-secondary': '#efc457', - '--color-timeline-network-secondary-hover': '#d6af4d', - '--color-timeline-priority-background': '#1d2129', - '--color-timeline-priority-border': '#282c34', - '--color-timeline-user-timing': '#c9cacd', - '--color-timeline-user-timing-hover': '#93959a', - '--color-timeline-react-idle': '#3d485b', - '--color-timeline-react-idle-hover': '#465269', - '--color-timeline-react-render': '#2683E2', - '--color-timeline-react-render-hover': '#1a76d4', - '--color-timeline-react-render-text': '#11365e', - '--color-timeline-react-commit': '#731fad', - '--color-timeline-react-commit-hover': '#611b94', - '--color-timeline-react-commit-text': '#e5c1ff', - '--color-timeline-react-layout-effects': '#611b94', - '--color-timeline-react-layout-effects-hover': '#51167a', - '--color-timeline-react-layout-effects-text': '#e5c1ff', - '--color-timeline-react-passive-effects': '#611b94', - '--color-timeline-react-passive-effects-hover': '#51167a', - '--color-timeline-react-passive-effects-text': '#e5c1ff', - '--color-timeline-react-schedule': '#2683E2', - '--color-timeline-react-schedule-hover': '#1a76d4', - '--color-timeline-react-suspense-rejected': '#f1cc14', - '--color-timeline-react-suspense-rejected-hover': '#e4c00f', - '--color-timeline-react-suspense-resolved': '#a6e59f', - '--color-timeline-react-suspense-resolved-hover': '#89d281', - '--color-timeline-react-suspense-unresolved': '#c9cacd', - '--color-timeline-react-suspense-unresolved-hover': '#93959a', - '--color-timeline-thrown-error': '#fb3655', - '--color-timeline-thrown-error-hover': '#f82042', - '--color-timeline-text-color': '#282c34', - '--color-timeline-text-dim-color': '#555b66', - '--color-timeline-react-work-border': '#3d424a', - '--color-search-match': 'yellow', - '--color-search-match-current': '#f7923b', - '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)', - '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)', - '--color-scroll-caret': '#4f5766', - '--color-shadow': 'rgba(0, 0, 0, 0.5)', - '--color-tab-selected-border': '#178fb9', - '--color-text': '#ffffff', - '--color-text-invalid': '#ff8080', - '--color-text-selected': '#ffffff', - '--color-toggle-background-invalid': '#fc3a4b', - '--color-toggle-background-on': '#178fb9', - '--color-toggle-background-off': '#777d88', - '--color-toggle-text': '#ffffff', - '--color-warning-background': '#ee1638', - '--color-warning-background-hover': '#da1030', - '--color-warning-text-color': '#ffffff', - '--color-warning-text-color-inverted': '#ee1638', - - // The styles below should be kept in sync with 'root.css' - // They are repeated there because they're used by e.g. tooltips or context menus - // which get rendered outside of the DOM subtree (where normal theme/styles are written). - '--color-scroll-thumb': '#afb3b9', - '--color-scroll-track': '#313640', - '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)', - '--color-tooltip-text': '#000000', - }, - compact: { - '--font-size-monospace-small': '9px', - '--font-size-monospace-normal': '11px', - '--font-size-monospace-large': '15px', - '--font-size-sans-small': '10px', - '--font-size-sans-normal': '12px', - '--font-size-sans-large': '14px', - '--line-height-data': '18px', - }, - comfortable: { - '--font-size-monospace-small': '10px', - '--font-size-monospace-normal': '13px', - '--font-size-monospace-large': '17px', - '--font-size-sans-small': '12px', - '--font-size-sans-normal': '14px', - '--font-size-sans-large': '16px', - '--line-height-data': '22px', - }, -}; - -// HACK -// -// Sometimes the inline target is rendered before root styles are applied, -// which would result in e.g. NaN itemSize being passed to react-window list. -const COMFORTABLE_LINE_HEIGHT: number = parseInt( - THEME_STYLES.comfortable['--line-height-data'], - 10, -); -const COMPACT_LINE_HEIGHT: number = parseInt( - THEME_STYLES.compact['--line-height-data'], - 10, -); - -export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT}; diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js new file mode 100644 index 0000000000000..6783eadbbd3a8 --- /dev/null +++ b/packages/react-devtools-shared/src/devtools/constants.js @@ -0,0 +1,338 @@ +export const CHANGE_LOG_URL = + 'https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md'; + +export const UNSUPPORTED_VERSION_URL = + 'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back'; + +export const REACT_DEVTOOLS_WORKPLACE_URL = + 'https://fburl.com/react-devtools-workplace-group'; + +import type { + Theme, + DisplayDensity, +} from './devtools/views/Settings/SettingsContext'; + +export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { + light: { + '--color-attribute-name': '#ef6632', + '--color-attribute-name-not-editable': '#23272f', + '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)', + '--color-attribute-value': '#1a1aa6', + '--color-attribute-value-inverted': '#ffffff', + '--color-attribute-editable-value': '#1a1aa6', + '--color-background': '#ffffff', + '--color-background-hover': 'rgba(0, 136, 250, 0.1)', + '--color-background-inactive': '#e5e5e5', + '--color-background-invalid': '#fff0f0', + '--color-background-selected': '#0088fa', + '--color-button-background': '#ffffff', + '--color-button-background-focus': '#ededed', + '--color-button': '#5f6673', + '--color-button-disabled': '#cfd1d5', + '--color-button-active': '#0088fa', + '--color-button-focus': '#23272f', + '--color-button-hover': '#23272f', + '--color-border': '#eeeeee', + '--color-commit-did-not-render-fill': '#cfd1d5', + '--color-commit-did-not-render-fill-text': '#000000', + '--color-commit-did-not-render-pattern': '#cfd1d5', + '--color-commit-did-not-render-pattern-text': '#333333', + '--color-commit-gradient-0': '#37afa9', + '--color-commit-gradient-1': '#63b19e', + '--color-commit-gradient-2': '#80b393', + '--color-commit-gradient-3': '#97b488', + '--color-commit-gradient-4': '#abb67d', + '--color-commit-gradient-5': '#beb771', + '--color-commit-gradient-6': '#cfb965', + '--color-commit-gradient-7': '#dfba57', + '--color-commit-gradient-8': '#efbb49', + '--color-commit-gradient-9': '#febc38', + '--color-commit-gradient-text': '#000000', + '--color-component-name': '#6a51b2', + '--color-component-name-inverted': '#ffffff', + '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)', + '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)', + '--color-component-badge-count': '#777d88', + '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)', + '--color-console-error-badge-text': '#ffffff', + '--color-console-error-background': '#fff0f0', + '--color-console-error-border': '#ffd6d6', + '--color-console-error-icon': '#eb3941', + '--color-console-error-text': '#fe2e31', + '--color-console-warning-badge-text': '#000000', + '--color-console-warning-background': '#fffbe5', + '--color-console-warning-border': '#fff5c1', + '--color-console-warning-icon': '#f4bd00', + '--color-console-warning-text': '#64460c', + '--color-context-background': 'rgba(0,0,0,.9)', + '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)', + '--color-context-background-selected': '#178fb9', + '--color-context-border': '#3d424a', + '--color-context-text': '#ffffff', + '--color-context-text-selected': '#ffffff', + '--color-dim': '#777d88', + '--color-dimmer': '#cfd1d5', + '--color-dimmest': '#eff0f1', + '--color-error-background': 'hsl(0, 100%, 97%)', + '--color-error-border': 'hsl(0, 100%, 92%)', + '--color-error-text': '#ff0000', + '--color-expand-collapse-toggle': '#777d88', + '--color-link': '#0000ff', + '--color-modal-background': 'rgba(255, 255, 255, 0.75)', + '--color-bridge-version-npm-background': '#eff0f1', + '--color-bridge-version-npm-text': '#000000', + '--color-bridge-version-number': '#0088fa', + '--color-primitive-hook-badge-background': '#e5e5e5', + '--color-primitive-hook-badge-text': '#5f6673', + '--color-record-active': '#fc3a4b', + '--color-record-hover': '#3578e5', + '--color-record-inactive': '#0088fa', + '--color-resize-bar': '#eeeeee', + '--color-resize-bar-active': '#dcdcdc', + '--color-resize-bar-border': '#d1d1d1', + '--color-resize-bar-dot': '#333333', + '--color-timeline-internal-module': '#d1d1d1', + '--color-timeline-internal-module-hover': '#c9c9c9', + '--color-timeline-internal-module-text': '#444', + '--color-timeline-native-event': '#ccc', + '--color-timeline-native-event-hover': '#aaa', + '--color-timeline-network-primary': '#fcf3dc', + '--color-timeline-network-primary-hover': '#f0e7d1', + '--color-timeline-network-secondary': '#efc457', + '--color-timeline-network-secondary-hover': '#e3ba52', + '--color-timeline-priority-background': '#f6f6f6', + '--color-timeline-priority-border': '#eeeeee', + '--color-timeline-user-timing': '#c9cacd', + '--color-timeline-user-timing-hover': '#93959a', + '--color-timeline-react-idle': '#d3e5f6', + '--color-timeline-react-idle-hover': '#c3d9ef', + '--color-timeline-react-render': '#9fc3f3', + '--color-timeline-react-render-hover': '#83afe9', + '--color-timeline-react-render-text': '#11365e', + '--color-timeline-react-commit': '#c88ff0', + '--color-timeline-react-commit-hover': '#b281d6', + '--color-timeline-react-commit-text': '#3e2c4a', + '--color-timeline-react-layout-effects': '#b281d6', + '--color-timeline-react-layout-effects-hover': '#9d71bd', + '--color-timeline-react-layout-effects-text': '#3e2c4a', + '--color-timeline-react-passive-effects': '#b281d6', + '--color-timeline-react-passive-effects-hover': '#9d71bd', + '--color-timeline-react-passive-effects-text': '#3e2c4a', + '--color-timeline-react-schedule': '#9fc3f3', + '--color-timeline-react-schedule-hover': '#2683E2', + '--color-timeline-react-suspense-rejected': '#f1cc14', + '--color-timeline-react-suspense-rejected-hover': '#ffdf37', + '--color-timeline-react-suspense-resolved': '#a6e59f', + '--color-timeline-react-suspense-resolved-hover': '#89d281', + '--color-timeline-react-suspense-unresolved': '#c9cacd', + '--color-timeline-react-suspense-unresolved-hover': '#93959a', + '--color-timeline-thrown-error': '#ee1638', + '--color-timeline-thrown-error-hover': '#da1030', + '--color-timeline-text-color': '#000000', + '--color-timeline-text-dim-color': '#ccc', + '--color-timeline-react-work-border': '#eeeeee', + '--color-search-match': 'yellow', + '--color-search-match-current': '#f7923b', + '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)', + '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)', + '--color-scroll-caret': 'rgba(150, 150, 150, 0.5)', + '--color-tab-selected-border': '#0088fa', + '--color-text': '#000000', + '--color-text-invalid': '#ff0000', + '--color-text-selected': '#ffffff', + '--color-toggle-background-invalid': '#fc3a4b', + '--color-toggle-background-on': '#0088fa', + '--color-toggle-background-off': '#cfd1d5', + '--color-toggle-text': '#ffffff', + '--color-warning-background': '#fb3655', + '--color-warning-background-hover': '#f82042', + '--color-warning-text-color': '#ffffff', + '--color-warning-text-color-inverted': '#fd4d69', + + // The styles below should be kept in sync with 'root.css' + // They are repeated there because they're used by e.g. tooltips or context menus + // which get rendered outside of the DOM subtree (where normal theme/styles are written). + '--color-scroll-thumb': '#c2c2c2', + '--color-scroll-track': '#fafafa', + '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)', + '--color-tooltip-text': '#ffffff', + }, + dark: { + '--color-attribute-name': '#9d87d2', + '--color-attribute-name-not-editable': '#ededed', + '--color-attribute-name-inverted': '#282828', + '--color-attribute-value': '#cedae0', + '--color-attribute-value-inverted': '#ffffff', + '--color-attribute-editable-value': 'yellow', + '--color-background': '#282c34', + '--color-background-hover': 'rgba(255, 255, 255, 0.1)', + '--color-background-inactive': '#3d424a', + '--color-background-invalid': '#5c0000', + '--color-background-selected': '#178fb9', + '--color-button-background': '#282c34', + '--color-button-background-focus': '#3d424a', + '--color-button': '#afb3b9', + '--color-button-active': '#61dafb', + '--color-button-disabled': '#4f5766', + '--color-button-focus': '#a2e9fc', + '--color-button-hover': '#ededed', + '--color-border': '#3d424a', + '--color-commit-did-not-render-fill': '#777d88', + '--color-commit-did-not-render-fill-text': '#000000', + '--color-commit-did-not-render-pattern': '#666c77', + '--color-commit-did-not-render-pattern-text': '#ffffff', + '--color-commit-gradient-0': '#37afa9', + '--color-commit-gradient-1': '#63b19e', + '--color-commit-gradient-2': '#80b393', + '--color-commit-gradient-3': '#97b488', + '--color-commit-gradient-4': '#abb67d', + '--color-commit-gradient-5': '#beb771', + '--color-commit-gradient-6': '#cfb965', + '--color-commit-gradient-7': '#dfba57', + '--color-commit-gradient-8': '#efbb49', + '--color-commit-gradient-9': '#febc38', + '--color-commit-gradient-text': '#000000', + '--color-component-name': '#61dafb', + '--color-component-name-inverted': '#282828', + '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)', + '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)', + '--color-component-badge-count': '#8f949d', + '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)', + '--color-console-error-badge-text': '#000000', + '--color-console-error-background': '#290000', + '--color-console-error-border': '#5c0000', + '--color-console-error-icon': '#eb3941', + '--color-console-error-text': '#fc7f7f', + '--color-console-warning-badge-text': '#000000', + '--color-console-warning-background': '#332b00', + '--color-console-warning-border': '#665500', + '--color-console-warning-icon': '#f4bd00', + '--color-console-warning-text': '#f5f2ed', + '--color-context-background': 'rgba(255,255,255,.95)', + '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)', + '--color-context-background-selected': '#0088fa', + '--color-context-border': '#eeeeee', + '--color-context-text': '#000000', + '--color-context-text-selected': '#ffffff', + '--color-dim': '#8f949d', + '--color-dimmer': '#777d88', + '--color-dimmest': '#4f5766', + '--color-error-background': '#200', + '--color-error-border': '#900', + '--color-error-text': '#f55', + '--color-expand-collapse-toggle': '#8f949d', + '--color-link': '#61dafb', + '--color-modal-background': 'rgba(0, 0, 0, 0.75)', + '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)', + '--color-bridge-version-npm-text': '#ffffff', + '--color-bridge-version-number': 'yellow', + '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)', + '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)', + '--color-record-active': '#fc3a4b', + '--color-record-hover': '#a2e9fc', + '--color-record-inactive': '#61dafb', + '--color-resize-bar': '#282c34', + '--color-resize-bar-active': '#31363f', + '--color-resize-bar-border': '#3d424a', + '--color-resize-bar-dot': '#cfd1d5', + '--color-timeline-internal-module': '#303542', + '--color-timeline-internal-module-hover': '#363b4a', + '--color-timeline-internal-module-text': '#7f8899', + '--color-timeline-native-event': '#b2b2b2', + '--color-timeline-native-event-hover': '#949494', + '--color-timeline-network-primary': '#fcf3dc', + '--color-timeline-network-primary-hover': '#e3dbc5', + '--color-timeline-network-secondary': '#efc457', + '--color-timeline-network-secondary-hover': '#d6af4d', + '--color-timeline-priority-background': '#1d2129', + '--color-timeline-priority-border': '#282c34', + '--color-timeline-user-timing': '#c9cacd', + '--color-timeline-user-timing-hover': '#93959a', + '--color-timeline-react-idle': '#3d485b', + '--color-timeline-react-idle-hover': '#465269', + '--color-timeline-react-render': '#2683E2', + '--color-timeline-react-render-hover': '#1a76d4', + '--color-timeline-react-render-text': '#11365e', + '--color-timeline-react-commit': '#731fad', + '--color-timeline-react-commit-hover': '#611b94', + '--color-timeline-react-commit-text': '#e5c1ff', + '--color-timeline-react-layout-effects': '#611b94', + '--color-timeline-react-layout-effects-hover': '#51167a', + '--color-timeline-react-layout-effects-text': '#e5c1ff', + '--color-timeline-react-passive-effects': '#611b94', + '--color-timeline-react-passive-effects-hover': '#51167a', + '--color-timeline-react-passive-effects-text': '#e5c1ff', + '--color-timeline-react-schedule': '#2683E2', + '--color-timeline-react-schedule-hover': '#1a76d4', + '--color-timeline-react-suspense-rejected': '#f1cc14', + '--color-timeline-react-suspense-rejected-hover': '#e4c00f', + '--color-timeline-react-suspense-resolved': '#a6e59f', + '--color-timeline-react-suspense-resolved-hover': '#89d281', + '--color-timeline-react-suspense-unresolved': '#c9cacd', + '--color-timeline-react-suspense-unresolved-hover': '#93959a', + '--color-timeline-thrown-error': '#fb3655', + '--color-timeline-thrown-error-hover': '#f82042', + '--color-timeline-text-color': '#282c34', + '--color-timeline-text-dim-color': '#555b66', + '--color-timeline-react-work-border': '#3d424a', + '--color-search-match': 'yellow', + '--color-search-match-current': '#f7923b', + '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)', + '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)', + '--color-scroll-caret': '#4f5766', + '--color-shadow': 'rgba(0, 0, 0, 0.5)', + '--color-tab-selected-border': '#178fb9', + '--color-text': '#ffffff', + '--color-text-invalid': '#ff8080', + '--color-text-selected': '#ffffff', + '--color-toggle-background-invalid': '#fc3a4b', + '--color-toggle-background-on': '#178fb9', + '--color-toggle-background-off': '#777d88', + '--color-toggle-text': '#ffffff', + '--color-warning-background': '#ee1638', + '--color-warning-background-hover': '#da1030', + '--color-warning-text-color': '#ffffff', + '--color-warning-text-color-inverted': '#ee1638', + + // The styles below should be kept in sync with 'root.css' + // They are repeated there because they're used by e.g. tooltips or context menus + // which get rendered outside of the DOM subtree (where normal theme/styles are written). + '--color-scroll-thumb': '#afb3b9', + '--color-scroll-track': '#313640', + '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)', + '--color-tooltip-text': '#000000', + }, + compact: { + '--font-size-monospace-small': '9px', + '--font-size-monospace-normal': '11px', + '--font-size-monospace-large': '15px', + '--font-size-sans-small': '10px', + '--font-size-sans-normal': '12px', + '--font-size-sans-large': '14px', + '--line-height-data': '18px', + }, + comfortable: { + '--font-size-monospace-small': '10px', + '--font-size-monospace-normal': '13px', + '--font-size-monospace-large': '17px', + '--font-size-sans-small': '12px', + '--font-size-sans-normal': '14px', + '--font-size-sans-large': '16px', + '--line-height-data': '22px', + }, +}; + +// HACK +// +// Sometimes the inline target is rendered before root styles are applied, +// which would result in e.g. NaN itemSize being passed to react-window list. +const COMFORTABLE_LINE_HEIGHT: number = parseInt( + THEME_STYLES.comfortable['--line-height-data'], + 10, +); +const COMPACT_LINE_HEIGHT: number = parseInt( + THEME_STYLES.compact['--line-height-data'], + 10, +); + +export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT}; diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js index 59a2ab55fed67..ea7a996d3235c 100644 --- a/packages/react-devtools-shared/src/devtools/views/DevTools.js +++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js @@ -40,6 +40,7 @@ import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected'; import {useLocalStorage} from './hooks'; import ThemeProvider from './ThemeProvider'; import {LOCAL_STORAGE_DEFAULT_TAB_KEY} from '../../constants'; +import {logEvent} from '../../Logger'; import styles from './DevTools.css'; @@ -49,9 +50,8 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co import type {FetchFileWithCaching} from './Components/FetchFileWithCachingContext'; import type {HookNamesModuleLoaderFunction} from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; -import {logEvent} from '../../Logger'; +import type {BrowserTheme} from 'react-devtools-shared/src/types'; -export type BrowserTheme = 'dark' | 'light'; export type TabID = 'components' | 'profiler'; export type ViewElementSource = ( diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js index 77d780ffc8a1d..1e04c304a743d 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js @@ -9,7 +9,7 @@ import * as React from 'react'; import {isInternalFacebookBuild} from 'react-devtools-feature-flags'; -import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/constants'; +import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/devtools/constants'; import Icon from '../Icon'; import styles from './shared.css'; diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js index 9ab4cb301b49f..d56f32f81142c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js @@ -11,7 +11,7 @@ import * as React from 'react'; import {useContext, useMemo} from 'react'; import {SettingsContext} from './SettingsContext'; import {StoreContext} from '../context'; -import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants'; +import {CHANGE_LOG_URL} from 'react-devtools-shared/src/devtools/constants'; import styles from './SettingsShared.css'; diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js index 566b80179072b..40eea803deded 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js @@ -18,8 +18,6 @@ import { useMemo, } from 'react'; import { - COMFORTABLE_LINE_HEIGHT, - COMPACT_LINE_HEIGHT, LOCAL_STORAGE_BROWSER_THEME, LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY, LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS, @@ -28,11 +26,15 @@ import { LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY, LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE, } from 'react-devtools-shared/src/constants'; +import { + COMFORTABLE_LINE_HEIGHT, + COMPACT_LINE_HEIGHT, +} from 'react-devtools-shared/src/devtools/constants'; import {useLocalStorage} from '../hooks'; import {BridgeContext} from '../context'; import {logEvent} from 'react-devtools-shared/src/Logger'; -import type {BrowserTheme} from '../DevTools'; +import type {BrowserTheme} from 'react-devtools-shared/src/types'; export type DisplayDensity = 'comfortable' | 'compact'; export type Theme = 'auto' | 'light' | 'dark'; diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js index f40d2ef66047f..7f2421893003c 100644 --- a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js @@ -12,7 +12,7 @@ import {Fragment, useContext, useEffect, useState} from 'react'; import {unstable_batchedUpdates as batchedUpdates} from 'react-dom'; import {ModalDialogContext} from './ModalDialog'; import {StoreContext} from './context'; -import {UNSUPPORTED_VERSION_URL} from 'react-devtools-shared/src/constants'; +import {UNSUPPORTED_VERSION_URL} from '../constants'; import styles from './UnsupportedVersionDialog.css'; diff --git a/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js index 96e8cf03b9452..25b5ae0547a8d 100644 --- a/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js +++ b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js @@ -9,7 +9,7 @@ import {useContext, useMemo} from 'react'; import {SettingsContext} from './Settings/SettingsContext'; -import {THEME_STYLES} from '../../constants'; +import {THEME_STYLES} from '../constants'; const useThemeStyles = (): any => { const {theme, displayDensity, browserTheme} = useContext(SettingsContext); diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index 09e7843b71faa..0d0d2785ba2be 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -8,7 +8,7 @@ * @flow */ -import type {BrowserTheme} from './devtools/views/DevTools'; +import type {BrowserTheme} from './types'; import type { DevToolsHook, Handler, diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js index 3e83590b6ae6e..51376553a3a45 100644 --- a/packages/react-devtools-shared/src/types.js +++ b/packages/react-devtools-shared/src/types.js @@ -7,6 +7,15 @@ * @flow */ +/** + * WARNING: + * This file contains types that are designed for React DevTools UI and how it interacts with the backend. + * They might be used in different versions of DevTools backends. + * Be mindful of backwards compatibility when making changes. + */ + +export type BrowserTheme = 'dark' | 'light'; + export type Wall = { // `listen` returns the "unlisten" function. listen: (fn: Function) => Function, diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 58845219d9591..5d6a9f3b60bd2 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -53,9 +53,8 @@ import {localStorageGetItem, localStorageSetItem} from './storage'; import {meta} from './hydration'; import isArray from './isArray'; -import type {ComponentFilter, ElementType} from './types'; +import type {ComponentFilter, ElementType, BrowserTheme} from './types'; import type {LRUCache} from 'react-devtools-shared/src/types'; -import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools'; // $FlowFixMe[method-unbinding] const hasOwnProperty = Object.prototype.hasOwnProperty; diff --git a/packages/react-devtools-timeline/src/constants.js b/packages/react-devtools-timeline/src/constants.js index cf1e20718a382..92c75d8e9f9cd 100644 --- a/packages/react-devtools-timeline/src/constants.js +++ b/packages/react-devtools-timeline/src/constants.js @@ -10,7 +10,7 @@ export { COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT, -} from 'react-devtools-shared/src/constants.js'; +} from 'react-devtools-shared/src/devtools/constants.js'; export const REACT_TOTAL_NUM_LANES = 31;