mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Mengdi Chen
d962f35cac
In the extension, currently we do the following: 1. check whether there's at least one React renderer on the page 2. if yes, load the backend to the page 3. initialize the backend To support multiple versions of backends, we are changing it to: 1. check the versions of React renders on the page 2. load corresponding React DevTools backends that are shipped with the extension; if they are not contained (usually prod builds of prereleases), show a UI to allow users to load them from UI 3. initialize each of the backends To enable this workflow, a backend will ignore React renderers that does not match its version This PR adds a new file "backendManager" in the extension for this purpose. ------ I've tested it on Chrome, Edge and Firefox extensions
47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
/* global chrome */
|
|
|
|
import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
|
|
|
|
export const IS_EDGE = navigator.userAgent.indexOf('Edg') >= 0;
|
|
export const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
|
|
export const IS_CHROME = IS_EDGE === false && IS_FIREFOX === false;
|
|
|
|
export type BrowserName = 'Chrome' | 'Firefox' | 'Edge';
|
|
|
|
export function getBrowserName(): BrowserName {
|
|
if (IS_EDGE) {
|
|
return 'Edge';
|
|
}
|
|
if (IS_FIREFOX) {
|
|
return 'Firefox';
|
|
}
|
|
if (IS_CHROME) {
|
|
return 'Chrome';
|
|
}
|
|
throw new Error(
|
|
'Expected browser name to be one of Chrome, Edge or Firefox.',
|
|
);
|
|
}
|
|
|
|
export function getBrowserTheme(): BrowserTheme {
|
|
if (IS_CHROME) {
|
|
// chrome.devtools.panels added in Chrome 18.
|
|
// chrome.devtools.panels.themeName added in Chrome 54.
|
|
return chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light';
|
|
} else {
|
|
// chrome.devtools.panels.themeName added in Firefox 55.
|
|
// https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.panels/themeName
|
|
if (chrome.devtools && chrome.devtools.panels) {
|
|
switch (chrome.devtools.panels.themeName) {
|
|
case 'dark':
|
|
return 'dark';
|
|
default:
|
|
return 'light';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export const COMPACT_VERSION_NAME = 'compact';
|
|
export const EXTENSION_CONTAINED_VERSIONS = [COMPACT_VERSION_NAME];
|