Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: Add scheduling profiler to DevTools #19892

Closed
wants to merge 16 commits into from
Closed

RFC: Add scheduling profiler to DevTools #19892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
771f777
Remove unused scheduling profiler assets
taneliang Sep 22, 2020
0812891
Bump worker-loader to fix error when using an inline: 'no-fallback'
taneliang Sep 22, 2020
f9e8129
Add scheduling profiler to inline DevTools and shell
taneliang Sep 22, 2020
bf26246
Fix core build
taneliang Sep 22, 2020
d46c447
Add scheduling profiler to extensions
taneliang Sep 22, 2020
3f80831
Fix event listeners listening to wrong iframe document
taneliang Sep 22, 2020
5cd54fb
Hide app name except in standalone app
taneliang Sep 22, 2020
b08b826
Add top border to match other DevTools
taneliang Sep 22, 2020
25334f6
Relax Firefox extension CSP to load worker blob
taneliang Sep 22, 2020
5b8cf43
Sync scheduling profiler package version with other DevTools packages
taneliang Sep 22, 2020
aff9466
Remove unused DEVTOOLS_VERSION env var from scheduling profiler
taneliang Sep 22, 2020
899cd9a
Move SchedulingProfilerFeatureFlags -> react-devtools-shared/src/DevT…
taneliang Sep 23, 2020
4e68b5f
Gate scheduling profiler tab/panel behind enableIntegratedSchedulingP…
taneliang Sep 23, 2020
825ad62
Force scheduling profiler extension panel light mode if enableSPDarkM…
taneliang Sep 23, 2020
41b7a3b
Fix lint
taneliang Sep 23, 2020
bc1a8e6
Add file-loader as dev dep to force yarn to hoist it
taneliang Sep 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 32 additions & 8 deletions packages/react-devtools-core/webpack.standalone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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$/,
Expand All @@ -89,6 +106,13 @@ module.exports = {
},
],
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: true, // Inline image assets
},
},
],
},
};
2 changes: 1 addition & 1 deletion packages/react-devtools-extensions/firefox/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may be a little unsafe, but it's necessary if we want to load our worker as a blob. https://bugzilla.mozilla.org/show_bug.cgi?id=1294996

"web_accessible_resources": [
"main.html",
"panel.html",
Expand Down
5 changes: 4 additions & 1 deletion packages/react-devtools-extensions/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,20 @@
"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",
"open": "^7.0.2",
"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"
Expand Down
27 changes: 27 additions & 0 deletions packages/react-devtools-extensions/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -70,6 +71,7 @@ function createPanelIfReactLoaded() {

let componentsPortalContainer = null;
let profilerPortalContainer = null;
let schedulingProfilerPortalContainer = null;

let cloneStyleTags = null;
let mostRecentOverrideTab = null;
Expand Down Expand Up @@ -215,6 +217,7 @@ function createPanelIfReactLoaded() {
enabledInspectedElementContextMenu: true,
overrideTab,
profilerPortalContainer,
schedulingProfilerPortalContainer,
showTabBar: false,
store,
warnIfUnsupportedVersionDetected: true,
Expand Down Expand Up @@ -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.
Expand Down
40 changes: 32 additions & 8 deletions packages/react-devtools-extensions/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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$/,
Expand All @@ -87,6 +104,13 @@ module.exports = {
},
],
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: true, // Inline image assets
},
},
],
},
};
5 changes: 4 additions & 1 deletion packages/react-devtools-inline/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
40 changes: 32 additions & 8 deletions packages/react-devtools-inline/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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$/,
Expand All @@ -79,6 +96,13 @@ module.exports = {
},
],
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: true, // Inline image assets
},
},
],
},
};
36 changes: 0 additions & 36 deletions packages/react-devtools-scheduling-profiler/buildUtils.js
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions packages/react-devtools-scheduling-profiler/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -22,14 +22,14 @@
"@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",
"vercel": "^20.1.0",
"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"
}
}
2 changes: 1 addition & 1 deletion packages/react-devtools-scheduling-profiler/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function App() {
return (
<div className={styles.DevTools}>
<div className={styles.TabContent}>
<SchedulingProfiler />
<SchedulingProfiler showAppInfo={true} />
</div>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 * {
Expand Down
Loading