diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js index 4d00d0f2d3a67..aa3336b2d338e 100644 --- a/packages/react-devtools-core/webpack.standalone.js +++ b/packages/react-devtools-core/webpack.standalone.js @@ -17,6 +17,15 @@ const __DEV__ = NODE_ENV === 'development'; const DEVTOOLS_VERSION = getVersionString(); +const babelOptions = { + configFile: resolve( + __dirname, + '..', + 'react-devtools-shared', + 'babel.config.js', + ), +}; + module.exports = { mode: __DEV__ ? 'development' : 'production', devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map', @@ -57,17 +66,25 @@ module.exports = { ], module: { rules: [ + { + test: /\.worker\.js$/, + use: [ + { + loader: 'worker-loader', + options: { + inline: 'no-fallback', + }, + }, + { + loader: 'babel-loader', + options: babelOptions, + }, + ], + }, { test: /\.js$/, loader: 'babel-loader', - options: { - configFile: resolve( - __dirname, - '..', - 'react-devtools-shared', - 'babel.config.js', - ), - }, + options: babelOptions, }, { test: /\.css$/, @@ -89,6 +106,13 @@ module.exports = { }, ], }, + { + test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], + loader: 'url-loader', + options: { + limit: true, // Inline image assets + }, + }, ], }, }; diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index ebe8547f10f5b..e0fc8ff65e9d4 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/packages/react-devtools-extensions/firefox/manifest.json @@ -32,7 +32,7 @@ "devtools_page": "main.html", - "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", + "content_security_policy": "script-src 'self' 'unsafe-eval' blob:; object-src 'self'", "web_accessible_resources": [ "main.html", "panel.html", diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json index 218e9aa79939f..c802cd55b5b12 100644 --- a/packages/react-devtools-extensions/package.json +++ b/packages/react-devtools-extensions/package.json @@ -33,6 +33,7 @@ "chrome-launch": "^1.1.4", "crx": "^5.0.0", "css-loader": "^1.0.1", + "file-loader": "^6.1.0", "firefox-profile": "^1.0.2", "node-libs-browser": "0.5.3", "nullthrows": "^1.0.0", @@ -40,10 +41,12 @@ "os-name": "^3.1.0", "raw-loader": "^3.1.0", "style-loader": "^0.23.1", + "url-loader": "^4.1.0", "web-ext": "^3.0.0", "webpack": "^4.43.0", "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.10.3" + "webpack-dev-server": "^3.10.3", + "worker-loader": "^3.0.3" }, "dependencies": { "web-ext": "^4" diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index 00e3735c72c11..2a9d8ee6e88e1 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/packages/react-devtools-extensions/src/main.js @@ -17,6 +17,7 @@ import { localStorageSetItem, } from 'react-devtools-shared/src/storage'; import DevTools from 'react-devtools-shared/src/devtools/views/DevTools'; +import {enableIntegratedSchedulingProfiler} from 'react-devtools-shared/src/DevToolsFeatureFlags'; const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY = 'React::DevTools::supportsProfiling'; @@ -70,6 +71,7 @@ function createPanelIfReactLoaded() { let componentsPortalContainer = null; let profilerPortalContainer = null; + let schedulingProfilerPortalContainer = null; let cloneStyleTags = null; let mostRecentOverrideTab = null; @@ -215,6 +217,7 @@ function createPanelIfReactLoaded() { enabledInspectedElementContextMenu: true, overrideTab, profilerPortalContainer, + schedulingProfilerPortalContainer, showTabBar: false, store, warnIfUnsupportedVersionDetected: true, @@ -347,6 +350,30 @@ function createPanelIfReactLoaded() { }, ); + if (enableIntegratedSchedulingProfiler) { + chrome.devtools.panels.create( + isChrome ? '⚛️ Scheduling Profiler' : 'Scheduling Profiler', + '', + 'panel.html', + extensionPanel => { + extensionPanel.onShown.addListener(panel => { + if (currentPanel === panel) { + return; + } + + currentPanel = panel; + schedulingProfilerPortalContainer = panel.container; + + if (schedulingProfilerPortalContainer != null) { + ensureInitialHTMLIsCleared(schedulingProfilerPortalContainer); + render('scheduling-profiler'); + panel.injectStyles(cloneStyleTags); + } + }); + }, + ); + } + chrome.devtools.network.onNavigated.removeListener(checkPageForReact); // Re-initialize DevTools panel when a new page is loaded. diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index e2720ec240a99..b8d95adc42f6d 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/packages/react-devtools-extensions/webpack.config.js @@ -16,6 +16,15 @@ const __DEV__ = NODE_ENV === 'development'; const DEVTOOLS_VERSION = getVersionString(); +const babelOptions = { + configFile: resolve( + __dirname, + '..', + 'react-devtools-shared', + 'babel.config.js', + ), +}; + module.exports = { mode: __DEV__ ? 'development' : 'production', devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map', @@ -59,17 +68,25 @@ module.exports = { ], module: { rules: [ + { + test: /\.worker\.js$/, + use: [ + { + loader: 'worker-loader', + options: { + inline: 'no-fallback', + }, + }, + { + loader: 'babel-loader', + options: babelOptions, + }, + ], + }, { test: /\.js$/, loader: 'babel-loader', - options: { - configFile: resolve( - __dirname, - '..', - 'react-devtools-shared', - 'babel.config.js', - ), - }, + options: babelOptions, }, { test: /\.css$/, @@ -87,6 +104,13 @@ module.exports = { }, ], }, + { + test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], + loader: 'url-loader', + options: { + limit: true, // Inline image assets + }, + }, ], }, }; diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index 62f6fe1cba2f4..030bf5783182b 100644 --- a/packages/react-devtools-inline/package.json +++ b/packages/react-devtools-inline/package.json @@ -34,10 +34,13 @@ "babel-loader": "^8.0.4", "cross-env": "^3.1.4", "css-loader": "^1.0.1", + "file-loader": "^6.1.0", "raw-loader": "^3.1.0", "style-loader": "^0.23.1", + "url-loader": "^4.1.0", "webpack": "^4.43.0", "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.10.3" + "webpack-dev-server": "^3.10.3", + "worker-loader": "^3.0.3" } } diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js index 85c7da82ea3ea..4025d5d144ca3 100644 --- a/packages/react-devtools-inline/webpack.config.js +++ b/packages/react-devtools-inline/webpack.config.js @@ -15,6 +15,15 @@ const __DEV__ = true; // NODE_ENV === 'development'; const DEVTOOLS_VERSION = getVersionString(); +const babelOptions = { + configFile: resolve( + __dirname, + '..', + 'react-devtools-shared', + 'babel.config.js', + ), +}; + module.exports = { mode: __DEV__ ? 'development' : 'production', devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map', @@ -51,17 +60,25 @@ module.exports = { ], module: { rules: [ + { + test: /\.worker\.js$/, + use: [ + { + loader: 'worker-loader', + options: { + inline: 'no-fallback', + }, + }, + { + loader: 'babel-loader', + options: babelOptions, + }, + ], + }, { test: /\.js$/, loader: 'babel-loader', - options: { - configFile: resolve( - __dirname, - '..', - 'react-devtools-shared', - 'babel.config.js', - ), - }, + options: babelOptions, }, { test: /\.css$/, @@ -79,6 +96,13 @@ module.exports = { }, ], }, + { + test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], + loader: 'url-loader', + options: { + limit: true, // Inline image assets + }, + }, ], }, }; diff --git a/packages/react-devtools-scheduling-profiler/buildUtils.js b/packages/react-devtools-scheduling-profiler/buildUtils.js deleted file mode 100644 index b0971c4861112..0000000000000 --- a/packages/react-devtools-scheduling-profiler/buildUtils.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -const {execSync} = require('child_process'); -const {readFileSync} = require('fs'); -const {resolve} = require('path'); - -function getGitCommit() { - try { - return execSync('git show -s --format=%h') - .toString() - .trim(); - } catch (error) { - // Mozilla runs this command from a git archive. - // In that context, there is no Git revision. - return null; - } -} - -function getVersionString() { - const packageVersion = JSON.parse( - readFileSync(resolve(__dirname, './package.json')), - ).version; - - const commit = getGitCommit(); - - return `${packageVersion}-${commit}`; -} - -module.exports = { - getVersionString, -}; diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json index 705261279e304..b497fae10482e 100644 --- a/packages/react-devtools-scheduling-profiler/package.json +++ b/packages/react-devtools-scheduling-profiler/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "react-devtools-scheduling-profiler", - "version": "0.0.0", + "version": "4.8.2", "license": "MIT", "scripts": { "build": "cross-env NODE_ENV=production cross-env TARGET=remote webpack --config webpack.config.js", @@ -22,7 +22,7 @@ "@reach/tooltip": "^0.11.2", "babel-loader": "^8.1.0", "css-loader": "^4.2.1", - "file-loader": "^6.0.0", + "file-loader": "^6.1.0", "html-webpack-plugin": "^4.3.0", "style-loader": "^1.2.1", "url-loader": "^4.1.0", @@ -30,6 +30,6 @@ "webpack": "^4.44.1", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0", - "worker-loader": "^3.0.2" + "worker-loader": "^3.0.3" } } diff --git a/packages/react-devtools-scheduling-profiler/src/App.js b/packages/react-devtools-scheduling-profiler/src/App.js index 9a27253b6c032..4ab78ee7fb7c4 100644 --- a/packages/react-devtools-scheduling-profiler/src/App.js +++ b/packages/react-devtools-scheduling-profiler/src/App.js @@ -27,7 +27,7 @@ export default function App() { return (
- +
); diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css index e16279192b83e..86da509e1eb8b 100644 --- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css +++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css @@ -8,6 +8,7 @@ font-size: var(--font-size-sans-normal); background-color: var(--color-background); color: var(--color-text); + border-top: 1px solid var(--color-border); } .SchedulingProfiler, .SchedulingProfiler * { diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js index 2f232b6bbe183..05603f1dd0c9d 100644 --- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js +++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js @@ -14,6 +14,7 @@ import type {ImportWorkerOutputData} from './import-worker/import.worker'; import * as React from 'react'; import {Suspense, useCallback, useState} from 'react'; import {createResource} from 'react-devtools-shared/src/devtools/cache'; +import portaledContent from 'react-devtools-shared/src/devtools/views/portaledContent'; import ReactLogo from 'react-devtools-shared/src/devtools/views/ReactLogo'; import ImportButton from './ImportButton'; @@ -55,7 +56,7 @@ function createDataResourceFromImportedFile(file: File): DataResource { ); } -export function SchedulingProfiler(_: {||}) { +export function SchedulingProfiler({showAppInfo}: {|showAppInfo?: boolean|}) { const [dataResource, setDataResource] = useState(null); const handleFileSelect = useCallback((file: File) => { @@ -65,9 +66,13 @@ export function SchedulingProfiler(_: {||}) { return (
- - Concurrent Mode Profiler -
+ {showAppInfo && ( + <> + + Concurrent Mode Profiler +
+ + )}
@@ -143,3 +148,5 @@ const DataResourceComponent = ({ } return ; }; + +export default portaledContent(SchedulingProfiler); diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerFeatureFlags.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerFeatureFlags.js deleted file mode 100644 index 7558576c31781..0000000000000 --- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerFeatureFlags.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - */ - -export const enableDarkMode = false; diff --git a/packages/react-devtools-scheduling-profiler/src/assets/logo.svg b/packages/react-devtools-scheduling-profiler/src/assets/logo.svg deleted file mode 100644 index 2e5df0d3ab2f2..0000000000000 --- a/packages/react-devtools-scheduling-profiler/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg b/packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg deleted file mode 100644 index 6b60c1042f58d..0000000000000 --- a/packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/react-devtools-scheduling-profiler/src/hooks.js b/packages/react-devtools-scheduling-profiler/src/hooks.js index 6096d6b950546..f4c0415ff62ba 100644 --- a/packages/react-devtools-scheduling-profiler/src/hooks.js +++ b/packages/react-devtools-scheduling-profiler/src/hooks.js @@ -17,7 +17,7 @@ import { updateDisplayDensity, updateThemeVariables, } from 'react-devtools-shared/src/devtools/views/Settings/SettingsContext'; -import {enableDarkMode} from './SchedulingProfilerFeatureFlags'; +import {enableSchedulingProfilerDarkMode} from 'react-devtools-shared/src/DevToolsFeatureFlags'; export type BrowserTheme = 'dark' | 'light'; @@ -44,7 +44,7 @@ export function useBrowserTheme(): void { useLayoutEffect(() => { const documentElements = [((document.documentElement: any): HTMLElement)]; - if (enableDarkMode) { + if (enableSchedulingProfilerDarkMode) { switch (theme) { case 'light': updateThemeVariables('light', documentElements); diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js b/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js index b08d9bbbbb466..3b374aebbee79 100644 --- a/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js +++ b/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js @@ -175,15 +175,16 @@ export function useCanvasInteraction( return false; }; - document.addEventListener('mousemove', onDocumentMouseMove); - document.addEventListener('mouseup', onDocumentMouseUp); + const ownerDocument = canvas.ownerDocument; + ownerDocument.addEventListener('mousemove', onDocumentMouseMove); + ownerDocument.addEventListener('mouseup', onDocumentMouseUp); canvas.addEventListener('mousedown', onCanvasMouseDown); canvas.addEventListener('wheel', onCanvasWheel); return () => { - document.removeEventListener('mousemove', onDocumentMouseMove); - document.removeEventListener('mouseup', onDocumentMouseUp); + ownerDocument.removeEventListener('mousemove', onDocumentMouseMove); + ownerDocument.removeEventListener('mouseup', onDocumentMouseUp); canvas.removeEventListener('mousedown', onCanvasMouseDown); canvas.removeEventListener('wheel', onCanvasWheel); diff --git a/packages/react-devtools-scheduling-profiler/webpack.config.js b/packages/react-devtools-scheduling-profiler/webpack.config.js index b69a5d1b411ee..a4607dec08e8a 100644 --- a/packages/react-devtools-scheduling-profiler/webpack.config.js +++ b/packages/react-devtools-scheduling-profiler/webpack.config.js @@ -4,7 +4,6 @@ const {resolve} = require('path'); const {DefinePlugin} = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); -const {getVersionString} = require('./buildUtils'); const NODE_ENV = process.env.NODE_ENV; if (!NODE_ENV) { @@ -22,8 +21,6 @@ const shouldUseDevServer = TARGET === 'local'; const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules'); -const DEVTOOLS_VERSION = getVersionString(); - const imageInlineSizeLimit = 10000; const babelOptions = { @@ -56,7 +53,6 @@ const config = { __DEV__, __PROFILE__: false, __EXPERIMENTAL__: true, - 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, }), new HtmlWebpackPlugin({ title: 'React Concurrent Mode Profiler', diff --git a/packages/react-devtools-shared/src/DevToolsFeatureFlags.js b/packages/react-devtools-shared/src/DevToolsFeatureFlags.js new file mode 100644 index 0000000000000..9a933515230d1 --- /dev/null +++ b/packages/react-devtools-shared/src/DevToolsFeatureFlags.js @@ -0,0 +1,19 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +export const enableIntegratedSchedulingProfiler = false; + +/** + * Enables dark mode in https://react-devtools-scheduling-profiler.vercel.app + * and the scheduling profiler browser extension panel. + * + * This flag does *not* disable dark mode in the scheduling profiler tabs in + * the `react-devtools-shell` and `react-devtools-core` packages. + */ +export const enableSchedulingProfilerDarkMode = false; diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js index cb5c36cf680bc..e6ed8225ef3aa 100644 --- a/packages/react-devtools-shared/src/devtools/views/DevTools.js +++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js @@ -14,6 +14,8 @@ import '@reach/tooltip/styles.css'; import * as React from 'react'; import {useEffect, useLayoutEffect, useMemo, useRef} from 'react'; +import SchedulingProfiler from 'react-devtools-scheduling-profiler/src/SchedulingProfiler'; +import {enableIntegratedSchedulingProfiler} from '../../DevToolsFeatureFlags'; import Store from '../store'; import {BridgeContext, ContextMenuContext, StoreContext} from './context'; import Components from './Components/Components'; @@ -37,7 +39,7 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; export type BrowserTheme = 'dark' | 'light'; -export type TabID = 'components' | 'profiler'; +export type TabID = 'components' | 'profiler' | 'scheduling-profiler'; export type ViewElementSource = ( id: number, inspectedElement: InspectedElement, @@ -74,6 +76,7 @@ export type Props = {| // but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels. componentsPortalContainer?: Element, profilerPortalContainer?: Element, + schedulingProfilerPortalContainer?: Element, |}; const componentsTab = { @@ -88,8 +91,16 @@ const profilerTab = { label: 'Profiler', title: 'React Profiler', }; +const schedulingProfilerTab = { + id: ('scheduling-profiler': TabID), + icon: 'profiler', + label: 'Scheduling Profiler', + title: 'React Scheduling Profiler', +}; -const tabs = [componentsTab, profilerTab]; +const tabs = enableIntegratedSchedulingProfiler + ? [componentsTab, profilerTab, schedulingProfilerTab] + : [componentsTab, profilerTab]; export default function DevTools({ bridge, @@ -100,6 +111,7 @@ export default function DevTools({ enabledInspectedElementContextMenu = false, overrideTab, profilerPortalContainer, + schedulingProfilerPortalContainer, showTabBar = false, store, warnIfLegacyBackendDetected = false, @@ -188,7 +200,10 @@ export default function DevTools({ + profilerPortalContainer={profilerPortalContainer} + schedulingProfilerPortalContainer={ + schedulingProfilerPortalContainer + }> @@ -221,6 +236,13 @@ export default function DevTools({ hidden={tab !== 'profiler'}>
+
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 2a89a9fe679b7..b16dc2bccee28 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js @@ -26,6 +26,7 @@ import {useLocalStorage} from '../hooks'; import {BridgeContext} from '../context'; import type {BrowserTheme} from '../DevTools'; +import {enableSchedulingProfilerDarkMode} from '../../../DevToolsFeatureFlags'; export type DisplayDensity = 'comfortable' | 'compact'; export type Theme = 'auto' | 'light' | 'dark'; @@ -61,6 +62,7 @@ type Props = {| children: React$Node, componentsPortalContainer?: Element, profilerPortalContainer?: Element, + schedulingProfilerPortalContainer?: Element, |}; function SettingsContextController({ @@ -68,6 +70,7 @@ function SettingsContextController({ children, componentsPortalContainer, profilerPortalContainer, + schedulingProfilerPortalContainer, }: Props) { const bridge = useContext(BridgeContext); @@ -111,8 +114,18 @@ function SettingsContextController({ .documentElement: any): HTMLElement), ); } + if (schedulingProfilerPortalContainer != null) { + array.push( + ((schedulingProfilerPortalContainer.ownerDocument + .documentElement: any): HTMLElement), + ); + } return array; - }, [componentsPortalContainer, profilerPortalContainer]); + }, [ + componentsPortalContainer, + profilerPortalContainer, + schedulingProfilerPortalContainer, + ]); useLayoutEffect(() => { switch (displayDensity) { @@ -128,18 +141,46 @@ function SettingsContextController({ }, [displayDensity, documentElements]); useLayoutEffect(() => { - switch (theme) { - case 'light': - updateThemeVariables('light', documentElements); - break; - case 'dark': - updateThemeVariables('dark', documentElements); - break; - case 'auto': - updateThemeVariables(browserTheme, documentElements); - break; - default: - throw Error(`Unsupported theme value "${theme}"`); + if (enableSchedulingProfilerDarkMode) { + switch (theme) { + case 'light': + updateThemeVariables('light', documentElements); + break; + case 'dark': + updateThemeVariables('dark', documentElements); + break; + case 'auto': + updateThemeVariables(browserTheme, documentElements); + break; + default: + throw Error(`Unsupported theme value "${theme}"`); + } + } else { + const schedulingProfilerDocumentElement = + schedulingProfilerPortalContainer != null + ? ((schedulingProfilerPortalContainer.ownerDocument + .documentElement: any): HTMLElement) + : null; + if (schedulingProfilerDocumentElement) { + updateThemeVariables('light', [schedulingProfilerDocumentElement]); + } + + const otherDocumentElements = documentElements.filter( + element => element !== schedulingProfilerDocumentElement, + ); + switch (theme) { + case 'light': + updateThemeVariables('light', otherDocumentElements); + break; + case 'dark': + updateThemeVariables('dark', otherDocumentElements); + break; + case 'auto': + updateThemeVariables(browserTheme, otherDocumentElements); + break; + default: + throw Error(`Unsupported theme value "${theme}"`); + } } }, [browserTheme, theme, documentElements]); diff --git a/yarn.lock b/yarn.lock index f6501ea3d7a65..d928c28b04456 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2137,6 +2137,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd" integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ== +"@types/json-schema@^7.0.5": + version "7.0.6" + resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" + integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== + "@types/minimatch@*", "@types/minimatch@^3.0.3": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d" @@ -2753,6 +2758,11 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da" integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ== +ajv-keywords@^3.5.2: + version "3.5.2" + resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d" + integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ== + ajv-merge-patch@4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/ajv-merge-patch/-/ajv-merge-patch-4.1.0.tgz#cd580e5860ac53431d6aa901fa3d5e2eb2b74a6c" @@ -2781,6 +2791,16 @@ ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2: json-schema-traverse "^0.4.1" uri-js "^4.2.2" +ajv@^6.12.4: + version "6.12.5" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.5.tgz#19b0e8bae8f476e5ba666300387775fb1a00a4da" + integrity sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag== + dependencies: + fast-deep-equal "^3.1.1" + fast-json-stable-stringify "^2.0.0" + json-schema-traverse "^0.4.1" + uri-js "^4.2.2" + ajv@^6.5.5, ajv@^6.9.1: version "6.10.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52" @@ -6387,13 +6407,13 @@ file-entry-cache@^5.0.1: dependencies: flat-cache "^2.0.1" -file-loader@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f" - integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ== +file-loader@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.1.0.tgz#65b9fcfb0ea7f65a234a1f10cdd7f1ab9a33f253" + integrity sha512-26qPdHyTsArQ6gU4P1HJbAbnFTyT2r0pG7czh1GFAd9TZbj0n94wWbupgixZH/ET/meqi2/5+F7DhW4OAXD+Lg== dependencies: loader-utils "^2.0.0" - schema-utils "^2.6.5" + schema-utils "^2.7.1" file-uri-to-path@1.0.0: version "1.0.0" @@ -12182,6 +12202,15 @@ schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0: ajv "^6.12.2" ajv-keywords "^3.4.1" +schema-utils@^2.7.1: + version "2.7.1" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7" + integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg== + dependencies: + "@types/json-schema" "^7.0.5" + ajv "^6.12.4" + ajv-keywords "^3.5.2" + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -14387,10 +14416,10 @@ worker-farm@^1.7.0: dependencies: errno "~0.1.7" -worker-loader@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-3.0.2.tgz#f82386a96366d24dbf6c2420f5bed04d3fe5a229" - integrity sha512-a3Hk9/3OCKkiK00gRIenNd4pdwBQn2Hu2L39WPGqR5WlX90u++mAVK7K1i6zUQyio4zqpnaastJ7J0xCBaA3VA== +worker-loader@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-3.0.3.tgz#a9e3a1840589bd2d279da74c9e0e4acdadecbeec" + integrity sha512-yLUJqzloOnoh2/9OisTrUbUHd2a3Tfx8o8ilXHEQJ9Z/x/O/Ll+yZZOoVLT8G33IT2oCrjsIZ6jNB3OVIYCllA== dependencies: loader-utils "^2.0.0" schema-utils "^2.7.0"