[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.
Mengdi Chen committed
Apr 10, 2023 at 17:07 UTC
451736b557ebf53dd6d6b92c55cad14f7eba864c
19 files changed
+398
-374
packages/react-devtools-core/src/cachedSettings.js
+2
-4
@@ -7,10 +7,8 @@
7
* @flow
8
*/
9
10
-import {
11
- type ConsolePatchSettings,
12
- writeConsolePatchSettingsToWindow,
13
-} from 'react-devtools-shared/src/backend/console';
10
+import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/types';
11
+import {writeConsolePatchSettingsToWindow} from 'react-devtools-shared/src/backend/console';
12
import {castBool, castBrowserTheme} from 'react-devtools-shared/src/utils';
13
14
// Note: all keys should be optional in this type, because users can use newer
packages/react-devtools-core/src/standalone.js
+1
-1
@@ -30,7 +30,7 @@ import {
30
__DEBUG__,
31
LOCAL_STORAGE_DEFAULT_TAB_KEY,
32
} from 'react-devtools-shared/src/constants';
33
-import {localStorageSetItem} from '../../react-devtools-shared/src/storage';
33
+import {localStorageSetItem} from 'react-devtools-shared/src/storage';
34
35
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
36
import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
packages/react-devtools-extensions/src/main.js
+4
-2
@@ -6,7 +6,6 @@ import {createRoot} from 'react-dom/client';
6
import Bridge from 'react-devtools-shared/src/bridge';
7
import Store from 'react-devtools-shared/src/devtools/store';
8
import {IS_CHROME, IS_EDGE, getBrowserTheme} from './utils';
9
-import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
9
import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
10
import {
11
getAppendComponentStack,
@@ -21,7 +20,10 @@ import {
20
localStorageSetItem,
21
} from 'react-devtools-shared/src/storage';
22
import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
24
-import {__DEBUG__} from 'react-devtools-shared/src/constants';
23
+import {
24
+ __DEBUG__,
25
+ LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
26
+} from 'react-devtools-shared/src/constants';
27
import {logEvent} from 'react-devtools-shared/src/Logger';
28
29
const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
packages/react-devtools-shared/src/backend/agent.js
+6
-3
@@ -25,7 +25,7 @@ import {
25
initialize as setupTraceUpdates,
26
toggleEnabled as setTraceUpdatesEnabled,
27
} from './views/TraceUpdates';
28
-import {patch as patchConsole, type ConsolePatchSettings} from './console';
28
+import {patch as patchConsole} from './console';
29
import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
30
31
import type {BackendBridge} from 'react-devtools-shared/src/bridge';
@@ -37,10 +37,13 @@ import type {
37
PathMatch,
38
RendererID,
39
RendererInterface,
40
+ ConsolePatchSettings,
41
} from './types';
41
-import type {ComponentFilter} from '../types';
42
+import type {
43
+ ComponentFilter,
44
+ BrowserTheme,
45
+} from 'react-devtools-shared/src/types';
46
import {isSynchronousXHRSupported} from './utils';
43
-import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
47
48
const debug = (methodName: string, ...args: Array<string>) => {
49
if (__DEBUG__) {
packages/react-devtools-shared/src/backend/console.js
+7
-11
@@ -8,8 +8,12 @@
8
*/
9
10
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
11
-import type {CurrentDispatcherRef, ReactRenderer, WorkTagMap} from './types';
12
-import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
11
+import type {
12
+ CurrentDispatcherRef,
13
+ ReactRenderer,
14
+ WorkTagMap,
15
+ ConsolePatchSettings,
16
+} from './types';
17
import {format, formatWithStyles} from './utils';
18
19
import {getInternalReactConstants} from './renderer';
@@ -136,7 +140,7 @@ export function registerRenderer(
140
}
141
}
142
139
-const consoleSettingsRef = {
143
+const consoleSettingsRef: ConsolePatchSettings = {
144
appendComponentStack: false,
145
breakOnConsoleErrors: false,
146
showInlineWarningsAndErrors: false,
@@ -144,14 +148,6 @@ const consoleSettingsRef = {
148
browserTheme: 'dark',
149
};
150
147
-export type ConsolePatchSettings = {
148
- appendComponentStack: boolean,
149
- breakOnConsoleErrors: boolean,
150
- showInlineWarningsAndErrors: boolean,
151
- hideConsoleLogsInStrictMode: boolean,
152
- browserTheme: BrowserTheme,
153
-};
154
-
151
// Patches console methods to append component stack for the current fiber.
152
// Call unpatch() to remove the injected behavior.
153
export function patch({
packages/react-devtools-shared/src/backend/types.js
+16
@@ -7,6 +7,13 @@
7
* @flow
8
*/
9
10
+/**
11
+ * WARNING:
12
+ * This file contains types that are conceptually related to React internals and
13
+ * DevTools backends, but can be passed to frontend via the bridge.
14
+ * Be mindful of backwards compatibility when making changes.
15
+ */
16
+
17
import type {ReactContext, Wakeable} from 'shared/ReactTypes';
18
import type {Source} from 'shared/ReactElementType';
19
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
@@ -17,6 +24,7 @@ import type {
24
} from 'react-devtools-shared/src/types';
25
import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
26
import type {TimelineDataExport} from 'react-devtools-timeline/src/types';
27
+import type {BrowserTheme} from 'react-devtools-shared/src/types';
28
29
type BundleType =
30
| 0 // PROD
@@ -492,3 +500,11 @@ export type DevToolsHook = {
500
501
...
502
};
503
+
504
+export type ConsolePatchSettings = {
505
+ appendComponentStack: boolean,
506
+ breakOnConsoleErrors: boolean,
507
+ showInlineWarningsAndErrors: boolean,
508
+ hideConsoleLogsInStrictMode: boolean,
509
+ browserTheme: BrowserTheme,
510
+};
packages/react-devtools-shared/src/bridge.js
+1
-1
@@ -15,9 +15,9 @@ import type {
15
OwnersList,
16
ProfilingDataBackend,
17
RendererID,
18
+ ConsolePatchSettings,
19
} from 'react-devtools-shared/src/backend/types';
20
import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
20
-import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/console';
21
22
const BATCH_DURATION = 100;
23
packages/react-devtools-shared/src/constants.js
-339
@@ -66,342 +66,3 @@ export const LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE =
66
'React::DevTools::hideConsoleLogsInStrictMode';
67
68
export const PROFILER_EXPORT_VERSION = 5;
69
-
70
-export const CHANGE_LOG_URL =
71
- 'https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md';
72
-
73
-export const UNSUPPORTED_VERSION_URL =
74
- 'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back';
75
-
76
-export const REACT_DEVTOOLS_WORKPLACE_URL =
77
- 'https://fburl.com/react-devtools-workplace-group';
78
-
79
-import type {
80
- Theme,
81
- DisplayDensity,
82
-} from './devtools/views/Settings/SettingsContext';
83
-
84
-export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
85
- light: {
86
- '--color-attribute-name': '#ef6632',
87
- '--color-attribute-name-not-editable': '#23272f',
88
- '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
89
- '--color-attribute-value': '#1a1aa6',
90
- '--color-attribute-value-inverted': '#ffffff',
91
- '--color-attribute-editable-value': '#1a1aa6',
92
- '--color-background': '#ffffff',
93
- '--color-background-hover': 'rgba(0, 136, 250, 0.1)',
94
- '--color-background-inactive': '#e5e5e5',
95
- '--color-background-invalid': '#fff0f0',
96
- '--color-background-selected': '#0088fa',
97
- '--color-button-background': '#ffffff',
98
- '--color-button-background-focus': '#ededed',
99
- '--color-button': '#5f6673',
100
- '--color-button-disabled': '#cfd1d5',
101
- '--color-button-active': '#0088fa',
102
- '--color-button-focus': '#23272f',
103
- '--color-button-hover': '#23272f',
104
- '--color-border': '#eeeeee',
105
- '--color-commit-did-not-render-fill': '#cfd1d5',
106
- '--color-commit-did-not-render-fill-text': '#000000',
107
- '--color-commit-did-not-render-pattern': '#cfd1d5',
108
- '--color-commit-did-not-render-pattern-text': '#333333',
109
- '--color-commit-gradient-0': '#37afa9',
110
- '--color-commit-gradient-1': '#63b19e',
111
- '--color-commit-gradient-2': '#80b393',
112
- '--color-commit-gradient-3': '#97b488',
113
- '--color-commit-gradient-4': '#abb67d',
114
- '--color-commit-gradient-5': '#beb771',
115
- '--color-commit-gradient-6': '#cfb965',
116
- '--color-commit-gradient-7': '#dfba57',
117
- '--color-commit-gradient-8': '#efbb49',
118
- '--color-commit-gradient-9': '#febc38',
119
- '--color-commit-gradient-text': '#000000',
120
- '--color-component-name': '#6a51b2',
121
- '--color-component-name-inverted': '#ffffff',
122
- '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',
123
- '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
124
- '--color-component-badge-count': '#777d88',
125
- '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
126
- '--color-console-error-badge-text': '#ffffff',
127
- '--color-console-error-background': '#fff0f0',
128
- '--color-console-error-border': '#ffd6d6',
129
- '--color-console-error-icon': '#eb3941',
130
- '--color-console-error-text': '#fe2e31',
131
- '--color-console-warning-badge-text': '#000000',
132
- '--color-console-warning-background': '#fffbe5',
133
- '--color-console-warning-border': '#fff5c1',
134
- '--color-console-warning-icon': '#f4bd00',
135
- '--color-console-warning-text': '#64460c',
136
- '--color-context-background': 'rgba(0,0,0,.9)',
137
- '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
138
- '--color-context-background-selected': '#178fb9',
139
- '--color-context-border': '#3d424a',
140
- '--color-context-text': '#ffffff',
141
- '--color-context-text-selected': '#ffffff',
142
- '--color-dim': '#777d88',
143
- '--color-dimmer': '#cfd1d5',
144
- '--color-dimmest': '#eff0f1',
145
- '--color-error-background': 'hsl(0, 100%, 97%)',
146
- '--color-error-border': 'hsl(0, 100%, 92%)',
147
- '--color-error-text': '#ff0000',
148
- '--color-expand-collapse-toggle': '#777d88',
149
- '--color-link': '#0000ff',
150
- '--color-modal-background': 'rgba(255, 255, 255, 0.75)',
151
- '--color-bridge-version-npm-background': '#eff0f1',
152
- '--color-bridge-version-npm-text': '#000000',
153
- '--color-bridge-version-number': '#0088fa',
154
- '--color-primitive-hook-badge-background': '#e5e5e5',
155
- '--color-primitive-hook-badge-text': '#5f6673',
156
- '--color-record-active': '#fc3a4b',
157
- '--color-record-hover': '#3578e5',
158
- '--color-record-inactive': '#0088fa',
159
- '--color-resize-bar': '#eeeeee',
160
- '--color-resize-bar-active': '#dcdcdc',
161
- '--color-resize-bar-border': '#d1d1d1',
162
- '--color-resize-bar-dot': '#333333',
163
- '--color-timeline-internal-module': '#d1d1d1',
164
- '--color-timeline-internal-module-hover': '#c9c9c9',
165
- '--color-timeline-internal-module-text': '#444',
166
- '--color-timeline-native-event': '#ccc',
167
- '--color-timeline-native-event-hover': '#aaa',
168
- '--color-timeline-network-primary': '#fcf3dc',
169
- '--color-timeline-network-primary-hover': '#f0e7d1',
170
- '--color-timeline-network-secondary': '#efc457',
171
- '--color-timeline-network-secondary-hover': '#e3ba52',
172
- '--color-timeline-priority-background': '#f6f6f6',
173
- '--color-timeline-priority-border': '#eeeeee',
174
- '--color-timeline-user-timing': '#c9cacd',
175
- '--color-timeline-user-timing-hover': '#93959a',
176
- '--color-timeline-react-idle': '#d3e5f6',
177
- '--color-timeline-react-idle-hover': '#c3d9ef',
178
- '--color-timeline-react-render': '#9fc3f3',
179
- '--color-timeline-react-render-hover': '#83afe9',
180
- '--color-timeline-react-render-text': '#11365e',
181
- '--color-timeline-react-commit': '#c88ff0',
182
- '--color-timeline-react-commit-hover': '#b281d6',
183
- '--color-timeline-react-commit-text': '#3e2c4a',
184
- '--color-timeline-react-layout-effects': '#b281d6',
185
- '--color-timeline-react-layout-effects-hover': '#9d71bd',
186
- '--color-timeline-react-layout-effects-text': '#3e2c4a',
187
- '--color-timeline-react-passive-effects': '#b281d6',
188
- '--color-timeline-react-passive-effects-hover': '#9d71bd',
189
- '--color-timeline-react-passive-effects-text': '#3e2c4a',
190
- '--color-timeline-react-schedule': '#9fc3f3',
191
- '--color-timeline-react-schedule-hover': '#2683E2',
192
- '--color-timeline-react-suspense-rejected': '#f1cc14',
193
- '--color-timeline-react-suspense-rejected-hover': '#ffdf37',
194
- '--color-timeline-react-suspense-resolved': '#a6e59f',
195
- '--color-timeline-react-suspense-resolved-hover': '#89d281',
196
- '--color-timeline-react-suspense-unresolved': '#c9cacd',
197
- '--color-timeline-react-suspense-unresolved-hover': '#93959a',
198
- '--color-timeline-thrown-error': '#ee1638',
199
- '--color-timeline-thrown-error-hover': '#da1030',
200
- '--color-timeline-text-color': '#000000',
201
- '--color-timeline-text-dim-color': '#ccc',
202
- '--color-timeline-react-work-border': '#eeeeee',
203
- '--color-search-match': 'yellow',
204
- '--color-search-match-current': '#f7923b',
205
- '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
206
- '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
207
- '--color-scroll-caret': 'rgba(150, 150, 150, 0.5)',
208
- '--color-tab-selected-border': '#0088fa',
209
- '--color-text': '#000000',
210
- '--color-text-invalid': '#ff0000',
211
- '--color-text-selected': '#ffffff',
212
- '--color-toggle-background-invalid': '#fc3a4b',
213
- '--color-toggle-background-on': '#0088fa',
214
- '--color-toggle-background-off': '#cfd1d5',
215
- '--color-toggle-text': '#ffffff',
216
- '--color-warning-background': '#fb3655',
217
- '--color-warning-background-hover': '#f82042',
218
- '--color-warning-text-color': '#ffffff',
219
- '--color-warning-text-color-inverted': '#fd4d69',
220
-
221
- // The styles below should be kept in sync with 'root.css'
222
- // They are repeated there because they're used by e.g. tooltips or context menus
223
- // which get rendered outside of the DOM subtree (where normal theme/styles are written).
224
- '--color-scroll-thumb': '#c2c2c2',
225
- '--color-scroll-track': '#fafafa',
226
- '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
227
- '--color-tooltip-text': '#ffffff',
228
- },
229
- dark: {
230
- '--color-attribute-name': '#9d87d2',
231
- '--color-attribute-name-not-editable': '#ededed',
232
- '--color-attribute-name-inverted': '#282828',
233
- '--color-attribute-value': '#cedae0',
234
- '--color-attribute-value-inverted': '#ffffff',
235
- '--color-attribute-editable-value': 'yellow',
236
- '--color-background': '#282c34',
237
- '--color-background-hover': 'rgba(255, 255, 255, 0.1)',
238
- '--color-background-inactive': '#3d424a',
239
- '--color-background-invalid': '#5c0000',
240
- '--color-background-selected': '#178fb9',
241
- '--color-button-background': '#282c34',
242
- '--color-button-background-focus': '#3d424a',
243
- '--color-button': '#afb3b9',
244
- '--color-button-active': '#61dafb',
245
- '--color-button-disabled': '#4f5766',
246
- '--color-button-focus': '#a2e9fc',
247
- '--color-button-hover': '#ededed',
248
- '--color-border': '#3d424a',
249
- '--color-commit-did-not-render-fill': '#777d88',
250
- '--color-commit-did-not-render-fill-text': '#000000',
251
- '--color-commit-did-not-render-pattern': '#666c77',
252
- '--color-commit-did-not-render-pattern-text': '#ffffff',
253
- '--color-commit-gradient-0': '#37afa9',
254
- '--color-commit-gradient-1': '#63b19e',
255
- '--color-commit-gradient-2': '#80b393',
256
- '--color-commit-gradient-3': '#97b488',
257
- '--color-commit-gradient-4': '#abb67d',
258
- '--color-commit-gradient-5': '#beb771',
259
- '--color-commit-gradient-6': '#cfb965',
260
- '--color-commit-gradient-7': '#dfba57',
261
- '--color-commit-gradient-8': '#efbb49',
262
- '--color-commit-gradient-9': '#febc38',
263
- '--color-commit-gradient-text': '#000000',
264
- '--color-component-name': '#61dafb',
265
- '--color-component-name-inverted': '#282828',
266
- '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
267
- '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
268
- '--color-component-badge-count': '#8f949d',
269
- '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
270
- '--color-console-error-badge-text': '#000000',
271
- '--color-console-error-background': '#290000',
272
- '--color-console-error-border': '#5c0000',
273
- '--color-console-error-icon': '#eb3941',
274
- '--color-console-error-text': '#fc7f7f',
275
- '--color-console-warning-badge-text': '#000000',
276
- '--color-console-warning-background': '#332b00',
277
- '--color-console-warning-border': '#665500',
278
- '--color-console-warning-icon': '#f4bd00',
279
- '--color-console-warning-text': '#f5f2ed',
280
- '--color-context-background': 'rgba(255,255,255,.95)',
281
- '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
282
- '--color-context-background-selected': '#0088fa',
283
- '--color-context-border': '#eeeeee',
284
- '--color-context-text': '#000000',
285
- '--color-context-text-selected': '#ffffff',
286
- '--color-dim': '#8f949d',
287
- '--color-dimmer': '#777d88',
288
- '--color-dimmest': '#4f5766',
289
- '--color-error-background': '#200',
290
- '--color-error-border': '#900',
291
- '--color-error-text': '#f55',
292
- '--color-expand-collapse-toggle': '#8f949d',
293
- '--color-link': '#61dafb',
294
- '--color-modal-background': 'rgba(0, 0, 0, 0.75)',
295
- '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
296
- '--color-bridge-version-npm-text': '#ffffff',
297
- '--color-bridge-version-number': 'yellow',
298
- '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
299
- '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
300
- '--color-record-active': '#fc3a4b',
301
- '--color-record-hover': '#a2e9fc',
302
- '--color-record-inactive': '#61dafb',
303
- '--color-resize-bar': '#282c34',
304
- '--color-resize-bar-active': '#31363f',
305
- '--color-resize-bar-border': '#3d424a',
306
- '--color-resize-bar-dot': '#cfd1d5',
307
- '--color-timeline-internal-module': '#303542',
308
- '--color-timeline-internal-module-hover': '#363b4a',
309
- '--color-timeline-internal-module-text': '#7f8899',
310
- '--color-timeline-native-event': '#b2b2b2',
311
- '--color-timeline-native-event-hover': '#949494',
312
- '--color-timeline-network-primary': '#fcf3dc',
313
- '--color-timeline-network-primary-hover': '#e3dbc5',
314
- '--color-timeline-network-secondary': '#efc457',
315
- '--color-timeline-network-secondary-hover': '#d6af4d',
316
- '--color-timeline-priority-background': '#1d2129',
317
- '--color-timeline-priority-border': '#282c34',
318
- '--color-timeline-user-timing': '#c9cacd',
319
- '--color-timeline-user-timing-hover': '#93959a',
320
- '--color-timeline-react-idle': '#3d485b',
321
- '--color-timeline-react-idle-hover': '#465269',
322
- '--color-timeline-react-render': '#2683E2',
323
- '--color-timeline-react-render-hover': '#1a76d4',
324
- '--color-timeline-react-render-text': '#11365e',
325
- '--color-timeline-react-commit': '#731fad',
326
- '--color-timeline-react-commit-hover': '#611b94',
327
- '--color-timeline-react-commit-text': '#e5c1ff',
328
- '--color-timeline-react-layout-effects': '#611b94',
329
- '--color-timeline-react-layout-effects-hover': '#51167a',
330
- '--color-timeline-react-layout-effects-text': '#e5c1ff',
331
- '--color-timeline-react-passive-effects': '#611b94',
332
- '--color-timeline-react-passive-effects-hover': '#51167a',
333
- '--color-timeline-react-passive-effects-text': '#e5c1ff',
334
- '--color-timeline-react-schedule': '#2683E2',
335
- '--color-timeline-react-schedule-hover': '#1a76d4',
336
- '--color-timeline-react-suspense-rejected': '#f1cc14',
337
- '--color-timeline-react-suspense-rejected-hover': '#e4c00f',
338
- '--color-timeline-react-suspense-resolved': '#a6e59f',
339
- '--color-timeline-react-suspense-resolved-hover': '#89d281',
340
- '--color-timeline-react-suspense-unresolved': '#c9cacd',
341
- '--color-timeline-react-suspense-unresolved-hover': '#93959a',
342
- '--color-timeline-thrown-error': '#fb3655',
343
- '--color-timeline-thrown-error-hover': '#f82042',
344
- '--color-timeline-text-color': '#282c34',
345
- '--color-timeline-text-dim-color': '#555b66',
346
- '--color-timeline-react-work-border': '#3d424a',
347
- '--color-search-match': 'yellow',
348
- '--color-search-match-current': '#f7923b',
349
- '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
350
- '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
351
- '--color-scroll-caret': '#4f5766',
352
- '--color-shadow': 'rgba(0, 0, 0, 0.5)',
353
- '--color-tab-selected-border': '#178fb9',
354
- '--color-text': '#ffffff',
355
- '--color-text-invalid': '#ff8080',
356
- '--color-text-selected': '#ffffff',
357
- '--color-toggle-background-invalid': '#fc3a4b',
358
- '--color-toggle-background-on': '#178fb9',
359
- '--color-toggle-background-off': '#777d88',
360
- '--color-toggle-text': '#ffffff',
361
- '--color-warning-background': '#ee1638',
362
- '--color-warning-background-hover': '#da1030',
363
- '--color-warning-text-color': '#ffffff',
364
- '--color-warning-text-color-inverted': '#ee1638',
365
-
366
- // The styles below should be kept in sync with 'root.css'
367
- // They are repeated there because they're used by e.g. tooltips or context menus
368
- // which get rendered outside of the DOM subtree (where normal theme/styles are written).
369
- '--color-scroll-thumb': '#afb3b9',
370
- '--color-scroll-track': '#313640',
371
- '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
372
- '--color-tooltip-text': '#000000',
373
- },
374
- compact: {
375
- '--font-size-monospace-small': '9px',
376
- '--font-size-monospace-normal': '11px',
377
- '--font-size-monospace-large': '15px',
378
- '--font-size-sans-small': '10px',
379
- '--font-size-sans-normal': '12px',
380
- '--font-size-sans-large': '14px',
381
- '--line-height-data': '18px',
382
- },
383
- comfortable: {
384
- '--font-size-monospace-small': '10px',
385
- '--font-size-monospace-normal': '13px',
386
- '--font-size-monospace-large': '17px',
387
- '--font-size-sans-small': '12px',
388
- '--font-size-sans-normal': '14px',
389
- '--font-size-sans-large': '16px',
390
- '--line-height-data': '22px',
391
- },
392
-};
393
-
394
-// HACK
395
-//
396
-// Sometimes the inline target is rendered before root styles are applied,
397
-// which would result in e.g. NaN itemSize being passed to react-window list.
398
-const COMFORTABLE_LINE_HEIGHT: number = parseInt(
399
- THEME_STYLES.comfortable['--line-height-data'],
400
- 10,
401
-);
402
-const COMPACT_LINE_HEIGHT: number = parseInt(
403
- THEME_STYLES.compact['--line-height-data'],
404
- 10,
405
-);
406
-
407
-export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
packages/react-devtools-shared/src/devtools/constants.js
new
+338
@@ -0,0 +1,338 @@
1
+export const CHANGE_LOG_URL =
2
+ 'https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md';
3
+
4
+export const UNSUPPORTED_VERSION_URL =
5
+ 'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back';
6
+
7
+export const REACT_DEVTOOLS_WORKPLACE_URL =
8
+ 'https://fburl.com/react-devtools-workplace-group';
9
+
10
+import type {
11
+ Theme,
12
+ DisplayDensity,
13
+} from './devtools/views/Settings/SettingsContext';
14
+
15
+export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
16
+ light: {
17
+ '--color-attribute-name': '#ef6632',
18
+ '--color-attribute-name-not-editable': '#23272f',
19
+ '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
20
+ '--color-attribute-value': '#1a1aa6',
21
+ '--color-attribute-value-inverted': '#ffffff',
22
+ '--color-attribute-editable-value': '#1a1aa6',
23
+ '--color-background': '#ffffff',
24
+ '--color-background-hover': 'rgba(0, 136, 250, 0.1)',
25
+ '--color-background-inactive': '#e5e5e5',
26
+ '--color-background-invalid': '#fff0f0',
27
+ '--color-background-selected': '#0088fa',
28
+ '--color-button-background': '#ffffff',
29
+ '--color-button-background-focus': '#ededed',
30
+ '--color-button': '#5f6673',
31
+ '--color-button-disabled': '#cfd1d5',
32
+ '--color-button-active': '#0088fa',
33
+ '--color-button-focus': '#23272f',
34
+ '--color-button-hover': '#23272f',
35
+ '--color-border': '#eeeeee',
36
+ '--color-commit-did-not-render-fill': '#cfd1d5',
37
+ '--color-commit-did-not-render-fill-text': '#000000',
38
+ '--color-commit-did-not-render-pattern': '#cfd1d5',
39
+ '--color-commit-did-not-render-pattern-text': '#333333',
40
+ '--color-commit-gradient-0': '#37afa9',
41
+ '--color-commit-gradient-1': '#63b19e',
42
+ '--color-commit-gradient-2': '#80b393',
43
+ '--color-commit-gradient-3': '#97b488',
44
+ '--color-commit-gradient-4': '#abb67d',
45
+ '--color-commit-gradient-5': '#beb771',
46
+ '--color-commit-gradient-6': '#cfb965',
47
+ '--color-commit-gradient-7': '#dfba57',
48
+ '--color-commit-gradient-8': '#efbb49',
49
+ '--color-commit-gradient-9': '#febc38',
50
+ '--color-commit-gradient-text': '#000000',
51
+ '--color-component-name': '#6a51b2',
52
+ '--color-component-name-inverted': '#ffffff',
53
+ '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',
54
+ '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
55
+ '--color-component-badge-count': '#777d88',
56
+ '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
57
+ '--color-console-error-badge-text': '#ffffff',
58
+ '--color-console-error-background': '#fff0f0',
59
+ '--color-console-error-border': '#ffd6d6',
60
+ '--color-console-error-icon': '#eb3941',
61
+ '--color-console-error-text': '#fe2e31',
62
+ '--color-console-warning-badge-text': '#000000',
63
+ '--color-console-warning-background': '#fffbe5',
64
+ '--color-console-warning-border': '#fff5c1',
65
+ '--color-console-warning-icon': '#f4bd00',
66
+ '--color-console-warning-text': '#64460c',
67
+ '--color-context-background': 'rgba(0,0,0,.9)',
68
+ '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
69
+ '--color-context-background-selected': '#178fb9',
70
+ '--color-context-border': '#3d424a',
71
+ '--color-context-text': '#ffffff',
72
+ '--color-context-text-selected': '#ffffff',
73
+ '--color-dim': '#777d88',
74
+ '--color-dimmer': '#cfd1d5',
75
+ '--color-dimmest': '#eff0f1',
76
+ '--color-error-background': 'hsl(0, 100%, 97%)',
77
+ '--color-error-border': 'hsl(0, 100%, 92%)',
78
+ '--color-error-text': '#ff0000',
79
+ '--color-expand-collapse-toggle': '#777d88',
80
+ '--color-link': '#0000ff',
81
+ '--color-modal-background': 'rgba(255, 255, 255, 0.75)',
82
+ '--color-bridge-version-npm-background': '#eff0f1',
83
+ '--color-bridge-version-npm-text': '#000000',
84
+ '--color-bridge-version-number': '#0088fa',
85
+ '--color-primitive-hook-badge-background': '#e5e5e5',
86
+ '--color-primitive-hook-badge-text': '#5f6673',
87
+ '--color-record-active': '#fc3a4b',
88
+ '--color-record-hover': '#3578e5',
89
+ '--color-record-inactive': '#0088fa',
90
+ '--color-resize-bar': '#eeeeee',
91
+ '--color-resize-bar-active': '#dcdcdc',
92
+ '--color-resize-bar-border': '#d1d1d1',
93
+ '--color-resize-bar-dot': '#333333',
94
+ '--color-timeline-internal-module': '#d1d1d1',
95
+ '--color-timeline-internal-module-hover': '#c9c9c9',
96
+ '--color-timeline-internal-module-text': '#444',
97
+ '--color-timeline-native-event': '#ccc',
98
+ '--color-timeline-native-event-hover': '#aaa',
99
+ '--color-timeline-network-primary': '#fcf3dc',
100
+ '--color-timeline-network-primary-hover': '#f0e7d1',
101
+ '--color-timeline-network-secondary': '#efc457',
102
+ '--color-timeline-network-secondary-hover': '#e3ba52',
103
+ '--color-timeline-priority-background': '#f6f6f6',
104
+ '--color-timeline-priority-border': '#eeeeee',
105
+ '--color-timeline-user-timing': '#c9cacd',
106
+ '--color-timeline-user-timing-hover': '#93959a',
107
+ '--color-timeline-react-idle': '#d3e5f6',
108
+ '--color-timeline-react-idle-hover': '#c3d9ef',
109
+ '--color-timeline-react-render': '#9fc3f3',
110
+ '--color-timeline-react-render-hover': '#83afe9',
111
+ '--color-timeline-react-render-text': '#11365e',
112
+ '--color-timeline-react-commit': '#c88ff0',
113
+ '--color-timeline-react-commit-hover': '#b281d6',
114
+ '--color-timeline-react-commit-text': '#3e2c4a',
115
+ '--color-timeline-react-layout-effects': '#b281d6',
116
+ '--color-timeline-react-layout-effects-hover': '#9d71bd',
117
+ '--color-timeline-react-layout-effects-text': '#3e2c4a',
118
+ '--color-timeline-react-passive-effects': '#b281d6',
119
+ '--color-timeline-react-passive-effects-hover': '#9d71bd',
120
+ '--color-timeline-react-passive-effects-text': '#3e2c4a',
121
+ '--color-timeline-react-schedule': '#9fc3f3',
122
+ '--color-timeline-react-schedule-hover': '#2683E2',
123
+ '--color-timeline-react-suspense-rejected': '#f1cc14',
124
+ '--color-timeline-react-suspense-rejected-hover': '#ffdf37',
125
+ '--color-timeline-react-suspense-resolved': '#a6e59f',
126
+ '--color-timeline-react-suspense-resolved-hover': '#89d281',
127
+ '--color-timeline-react-suspense-unresolved': '#c9cacd',
128
+ '--color-timeline-react-suspense-unresolved-hover': '#93959a',
129
+ '--color-timeline-thrown-error': '#ee1638',
130
+ '--color-timeline-thrown-error-hover': '#da1030',
131
+ '--color-timeline-text-color': '#000000',
132
+ '--color-timeline-text-dim-color': '#ccc',
133
+ '--color-timeline-react-work-border': '#eeeeee',
134
+ '--color-search-match': 'yellow',
135
+ '--color-search-match-current': '#f7923b',
136
+ '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
137
+ '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
138
+ '--color-scroll-caret': 'rgba(150, 150, 150, 0.5)',
139
+ '--color-tab-selected-border': '#0088fa',
140
+ '--color-text': '#000000',
141
+ '--color-text-invalid': '#ff0000',
142
+ '--color-text-selected': '#ffffff',
143
+ '--color-toggle-background-invalid': '#fc3a4b',
144
+ '--color-toggle-background-on': '#0088fa',
145
+ '--color-toggle-background-off': '#cfd1d5',
146
+ '--color-toggle-text': '#ffffff',
147
+ '--color-warning-background': '#fb3655',
148
+ '--color-warning-background-hover': '#f82042',
149
+ '--color-warning-text-color': '#ffffff',
150
+ '--color-warning-text-color-inverted': '#fd4d69',
151
+
152
+ // The styles below should be kept in sync with 'root.css'
153
+ // They are repeated there because they're used by e.g. tooltips or context menus
154
+ // which get rendered outside of the DOM subtree (where normal theme/styles are written).
155
+ '--color-scroll-thumb': '#c2c2c2',
156
+ '--color-scroll-track': '#fafafa',
157
+ '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
158
+ '--color-tooltip-text': '#ffffff',
159
+ },
160
+ dark: {
161
+ '--color-attribute-name': '#9d87d2',
162
+ '--color-attribute-name-not-editable': '#ededed',
163
+ '--color-attribute-name-inverted': '#282828',
164
+ '--color-attribute-value': '#cedae0',
165
+ '--color-attribute-value-inverted': '#ffffff',
166
+ '--color-attribute-editable-value': 'yellow',
167
+ '--color-background': '#282c34',
168
+ '--color-background-hover': 'rgba(255, 255, 255, 0.1)',
169
+ '--color-background-inactive': '#3d424a',
170
+ '--color-background-invalid': '#5c0000',
171
+ '--color-background-selected': '#178fb9',
172
+ '--color-button-background': '#282c34',
173
+ '--color-button-background-focus': '#3d424a',
174
+ '--color-button': '#afb3b9',
175
+ '--color-button-active': '#61dafb',
176
+ '--color-button-disabled': '#4f5766',
177
+ '--color-button-focus': '#a2e9fc',
178
+ '--color-button-hover': '#ededed',
179
+ '--color-border': '#3d424a',
180
+ '--color-commit-did-not-render-fill': '#777d88',
181
+ '--color-commit-did-not-render-fill-text': '#000000',
182
+ '--color-commit-did-not-render-pattern': '#666c77',
183
+ '--color-commit-did-not-render-pattern-text': '#ffffff',
184
+ '--color-commit-gradient-0': '#37afa9',
185
+ '--color-commit-gradient-1': '#63b19e',
186
+ '--color-commit-gradient-2': '#80b393',
187
+ '--color-commit-gradient-3': '#97b488',
188
+ '--color-commit-gradient-4': '#abb67d',
189
+ '--color-commit-gradient-5': '#beb771',
190
+ '--color-commit-gradient-6': '#cfb965',
191
+ '--color-commit-gradient-7': '#dfba57',
192
+ '--color-commit-gradient-8': '#efbb49',
193
+ '--color-commit-gradient-9': '#febc38',
194
+ '--color-commit-gradient-text': '#000000',
195
+ '--color-component-name': '#61dafb',
196
+ '--color-component-name-inverted': '#282828',
197
+ '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
198
+ '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
199
+ '--color-component-badge-count': '#8f949d',
200
+ '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
201
+ '--color-console-error-badge-text': '#000000',
202
+ '--color-console-error-background': '#290000',
203
+ '--color-console-error-border': '#5c0000',
204
+ '--color-console-error-icon': '#eb3941',
205
+ '--color-console-error-text': '#fc7f7f',
206
+ '--color-console-warning-badge-text': '#000000',
207
+ '--color-console-warning-background': '#332b00',
208
+ '--color-console-warning-border': '#665500',
209
+ '--color-console-warning-icon': '#f4bd00',
210
+ '--color-console-warning-text': '#f5f2ed',
211
+ '--color-context-background': 'rgba(255,255,255,.95)',
212
+ '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
213
+ '--color-context-background-selected': '#0088fa',
214
+ '--color-context-border': '#eeeeee',
215
+ '--color-context-text': '#000000',
216
+ '--color-context-text-selected': '#ffffff',
217
+ '--color-dim': '#8f949d',
218
+ '--color-dimmer': '#777d88',
219
+ '--color-dimmest': '#4f5766',
220
+ '--color-error-background': '#200',
221
+ '--color-error-border': '#900',
222
+ '--color-error-text': '#f55',
223
+ '--color-expand-collapse-toggle': '#8f949d',
224
+ '--color-link': '#61dafb',
225
+ '--color-modal-background': 'rgba(0, 0, 0, 0.75)',
226
+ '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
227
+ '--color-bridge-version-npm-text': '#ffffff',
228
+ '--color-bridge-version-number': 'yellow',
229
+ '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
230
+ '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
231
+ '--color-record-active': '#fc3a4b',
232
+ '--color-record-hover': '#a2e9fc',
233
+ '--color-record-inactive': '#61dafb',
234
+ '--color-resize-bar': '#282c34',
235
+ '--color-resize-bar-active': '#31363f',
236
+ '--color-resize-bar-border': '#3d424a',
237
+ '--color-resize-bar-dot': '#cfd1d5',
238
+ '--color-timeline-internal-module': '#303542',
239
+ '--color-timeline-internal-module-hover': '#363b4a',
240
+ '--color-timeline-internal-module-text': '#7f8899',
241
+ '--color-timeline-native-event': '#b2b2b2',
242
+ '--color-timeline-native-event-hover': '#949494',
243
+ '--color-timeline-network-primary': '#fcf3dc',
244
+ '--color-timeline-network-primary-hover': '#e3dbc5',
245
+ '--color-timeline-network-secondary': '#efc457',
246
+ '--color-timeline-network-secondary-hover': '#d6af4d',
247
+ '--color-timeline-priority-background': '#1d2129',
248
+ '--color-timeline-priority-border': '#282c34',
249
+ '--color-timeline-user-timing': '#c9cacd',
250
+ '--color-timeline-user-timing-hover': '#93959a',
251
+ '--color-timeline-react-idle': '#3d485b',
252
+ '--color-timeline-react-idle-hover': '#465269',
253
+ '--color-timeline-react-render': '#2683E2',
254
+ '--color-timeline-react-render-hover': '#1a76d4',
255
+ '--color-timeline-react-render-text': '#11365e',
256
+ '--color-timeline-react-commit': '#731fad',
257
+ '--color-timeline-react-commit-hover': '#611b94',
258
+ '--color-timeline-react-commit-text': '#e5c1ff',
259
+ '--color-timeline-react-layout-effects': '#611b94',
260
+ '--color-timeline-react-layout-effects-hover': '#51167a',
261
+ '--color-timeline-react-layout-effects-text': '#e5c1ff',
262
+ '--color-timeline-react-passive-effects': '#611b94',
263
+ '--color-timeline-react-passive-effects-hover': '#51167a',
264
+ '--color-timeline-react-passive-effects-text': '#e5c1ff',
265
+ '--color-timeline-react-schedule': '#2683E2',
266
+ '--color-timeline-react-schedule-hover': '#1a76d4',
267
+ '--color-timeline-react-suspense-rejected': '#f1cc14',
268
+ '--color-timeline-react-suspense-rejected-hover': '#e4c00f',
269
+ '--color-timeline-react-suspense-resolved': '#a6e59f',
270
+ '--color-timeline-react-suspense-resolved-hover': '#89d281',
271
+ '--color-timeline-react-suspense-unresolved': '#c9cacd',
272
+ '--color-timeline-react-suspense-unresolved-hover': '#93959a',
273
+ '--color-timeline-thrown-error': '#fb3655',
274
+ '--color-timeline-thrown-error-hover': '#f82042',
275
+ '--color-timeline-text-color': '#282c34',
276
+ '--color-timeline-text-dim-color': '#555b66',
277
+ '--color-timeline-react-work-border': '#3d424a',
278
+ '--color-search-match': 'yellow',
279
+ '--color-search-match-current': '#f7923b',
280
+ '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
281
+ '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
282
+ '--color-scroll-caret': '#4f5766',
283
+ '--color-shadow': 'rgba(0, 0, 0, 0.5)',
284
+ '--color-tab-selected-border': '#178fb9',
285
+ '--color-text': '#ffffff',
286
+ '--color-text-invalid': '#ff8080',
287
+ '--color-text-selected': '#ffffff',
288
+ '--color-toggle-background-invalid': '#fc3a4b',
289
+ '--color-toggle-background-on': '#178fb9',
290
+ '--color-toggle-background-off': '#777d88',
291
+ '--color-toggle-text': '#ffffff',
292
+ '--color-warning-background': '#ee1638',
293
+ '--color-warning-background-hover': '#da1030',
294
+ '--color-warning-text-color': '#ffffff',
295
+ '--color-warning-text-color-inverted': '#ee1638',
296
+
297
+ // The styles below should be kept in sync with 'root.css'
298
+ // They are repeated there because they're used by e.g. tooltips or context menus
299
+ // which get rendered outside of the DOM subtree (where normal theme/styles are written).
300
+ '--color-scroll-thumb': '#afb3b9',
301
+ '--color-scroll-track': '#313640',
302
+ '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
303
+ '--color-tooltip-text': '#000000',
304
+ },
305
+ compact: {
306
+ '--font-size-monospace-small': '9px',
307
+ '--font-size-monospace-normal': '11px',
308
+ '--font-size-monospace-large': '15px',
309
+ '--font-size-sans-small': '10px',
310
+ '--font-size-sans-normal': '12px',
311
+ '--font-size-sans-large': '14px',
312
+ '--line-height-data': '18px',
313
+ },
314
+ comfortable: {
315
+ '--font-size-monospace-small': '10px',
316
+ '--font-size-monospace-normal': '13px',
317
+ '--font-size-monospace-large': '17px',
318
+ '--font-size-sans-small': '12px',
319
+ '--font-size-sans-normal': '14px',
320
+ '--font-size-sans-large': '16px',
321
+ '--line-height-data': '22px',
322
+ },
323
+};
324
+
325
+// HACK
326
+//
327
+// Sometimes the inline target is rendered before root styles are applied,
328
+// which would result in e.g. NaN itemSize being passed to react-window list.
329
+const COMFORTABLE_LINE_HEIGHT: number = parseInt(
330
+ THEME_STYLES.comfortable['--line-height-data'],
331
+ 10,
332
+);
333
+const COMPACT_LINE_HEIGHT: number = parseInt(
334
+ THEME_STYLES.compact['--line-height-data'],
335
+ 10,
336
+);
337
+
338
+export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
packages/react-devtools-shared/src/devtools/views/DevTools.js
+2
-2
@@ -40,6 +40,7 @@ import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
40
import {useLocalStorage} from './hooks';
41
import ThemeProvider from './ThemeProvider';
42
import {LOCAL_STORAGE_DEFAULT_TAB_KEY} from '../../constants';
43
+import {logEvent} from '../../Logger';
44
45
import styles from './DevTools.css';
46
@@ -49,9 +50,8 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
50
import type {FetchFileWithCaching} from './Components/FetchFileWithCachingContext';
51
import type {HookNamesModuleLoaderFunction} from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
52
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
52
-import {logEvent} from '../../Logger';
53
+import type {BrowserTheme} from 'react-devtools-shared/src/types';
54
54
-export type BrowserTheme = 'dark' | 'light';
55
export type TabID = 'components' | 'profiler';
56
57
export type ViewElementSource = (
packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
+1
-1
@@ -9,7 +9,7 @@
9
10
import * as React from 'react';
11
import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
12
-import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/constants';
12
+import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/devtools/constants';
13
import Icon from '../Icon';
14
import styles from './shared.css';
15
packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+1
-1
@@ -11,7 +11,7 @@ import * as React from 'react';
11
import {useContext, useMemo} from 'react';
12
import {SettingsContext} from './SettingsContext';
13
import {StoreContext} from '../context';
14
-import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
14
+import {CHANGE_LOG_URL} from 'react-devtools-shared/src/devtools/constants';
15
16
import styles from './SettingsShared.css';
17
packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+5
-3
@@ -18,8 +18,6 @@ import {
18
useMemo,
19
} from 'react';
20
import {
21
- COMFORTABLE_LINE_HEIGHT,
22
- COMPACT_LINE_HEIGHT,
21
LOCAL_STORAGE_BROWSER_THEME,
22
LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
23
LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
@@ -28,11 +26,15 @@ import {
26
LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
27
LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
28
} from 'react-devtools-shared/src/constants';
29
+import {
30
+ COMFORTABLE_LINE_HEIGHT,
31
+ COMPACT_LINE_HEIGHT,
32
+} from 'react-devtools-shared/src/devtools/constants';
33
import {useLocalStorage} from '../hooks';
34
import {BridgeContext} from '../context';
35
import {logEvent} from 'react-devtools-shared/src/Logger';
36
35
-import type {BrowserTheme} from '../DevTools';
37
+import type {BrowserTheme} from 'react-devtools-shared/src/types';
38
39
export type DisplayDensity = 'comfortable' | 'compact';
40
export type Theme = 'auto' | 'light' | 'dark';
packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
+1
-1
@@ -12,7 +12,7 @@ import {Fragment, useContext, useEffect, useState} from 'react';
12
import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
13
import {ModalDialogContext} from './ModalDialog';
14
import {StoreContext} from './context';
15
-import {UNSUPPORTED_VERSION_URL} from 'react-devtools-shared/src/constants';
15
+import {UNSUPPORTED_VERSION_URL} from '../constants';
16
17
import styles from './UnsupportedVersionDialog.css';
18
packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
+1
-1
@@ -9,7 +9,7 @@
9
10
import {useContext, useMemo} from 'react';
11
import {SettingsContext} from './Settings/SettingsContext';
12
-import {THEME_STYLES} from '../../constants';
12
+import {THEME_STYLES} from '../constants';
13
14
const useThemeStyles = (): any => {
15
const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
packages/react-devtools-shared/src/hook.js
+1
-1
@@ -8,7 +8,7 @@
8
* @flow
9
*/
10
11
-import type {BrowserTheme} from './devtools/views/DevTools';
11
+import type {BrowserTheme} from './types';
12
import type {
13
DevToolsHook,
14
Handler,
packages/react-devtools-shared/src/types.js
+9
@@ -7,6 +7,15 @@
7
* @flow
8
*/
9
10
+/**
11
+ * WARNING:
12
+ * This file contains types that are designed for React DevTools UI and how it interacts with the backend.
13
+ * They might be used in different versions of DevTools backends.
14
+ * Be mindful of backwards compatibility when making changes.
15
+ */
16
+
17
+export type BrowserTheme = 'dark' | 'light';
18
+
19
export type Wall = {
20
// `listen` returns the "unlisten" function.
21
listen: (fn: Function) => Function,
packages/react-devtools-shared/src/utils.js
+1
-2
@@ -53,9 +53,8 @@ import {localStorageGetItem, localStorageSetItem} from './storage';
53
import {meta} from './hydration';
54
import isArray from './isArray';
55
56
-import type {ComponentFilter, ElementType} from './types';
56
+import type {ComponentFilter, ElementType, BrowserTheme} from './types';
57
import type {LRUCache} from 'react-devtools-shared/src/types';
58
-import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
58
59
// $FlowFixMe[method-unbinding]
60
const hasOwnProperty = Object.prototype.hasOwnProperty;
packages/react-devtools-timeline/src/constants.js
+1
-1
@@ -10,7 +10,7 @@
10
export {
11
COMFORTABLE_LINE_HEIGHT,
12
COMPACT_LINE_HEIGHT,
13
-} from 'react-devtools-shared/src/constants.js';
13
+} from 'react-devtools-shared/src/devtools/constants.js';
14
15
export const REACT_TOTAL_NUM_LANES = 31;
16