Skip to content

Commit a118800

Browse files
author
Brian Vaughn
committed
Import scheduling profiler into DevTools Profiler tab
1 parent 3101872 commit a118800

File tree

20 files changed

+186
-186
lines changed

20 files changed

+186
-186
lines changed

‎packages/react-devtools-core/webpack.standalone.js

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,15 @@ const __DEV__ = NODE_ENV === 'development';
1818

1919
const DEVTOOLS_VERSION = getVersionString();
2020

21+
const babelOptions = {
22+
configFile: resolve(
23+
__dirname,
24+
'..',
25+
'react-devtools-shared',
26+
'babel.config.js',
27+
),
28+
};
29+
2130
module.exports = {
2231
mode: __DEV__ ? 'development' : 'production',
2332
devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
@@ -62,17 +71,25 @@ module.exports = {
6271
],
6372
module: {
6473
rules: [
74+
{
75+
test: /\.worker\.js$/,
76+
use: [
77+
{
78+
loader: 'worker-loader',
79+
options: {
80+
inline: 'no-fallback',
81+
},
82+
},
83+
{
84+
loader: 'babel-loader',
85+
options: babelOptions,
86+
},
87+
],
88+
},
6589
{
6690
test: /\.js$/,
6791
loader: 'babel-loader',
68-
options: {
69-
configFile: resolve(
70-
__dirname,
71-
'..',
72-
'react-devtools-shared',
73-
'babel.config.js',
74-
),
75-
},
92+
options: babelOptions,
7693
},
7794
{
7895
test: /\.css$/,

‎packages/react-devtools-extensions/firefox/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
"devtools_page": "main.html",
3434

35-
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
35+
"content_security_policy": "script-src 'self' 'unsafe-eval' blob:; object-src 'self'",
3636
"web_accessible_resources": [
3737
"main.html",
3838
"panel.html",

‎packages/react-devtools-extensions/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"chrome-launch": "^1.1.4",
3838
"crx": "^5.0.0",
3939
"css-loader": "^1.0.1",
40+
"file-loader": "^6.1.0",
4041
"firefox-profile": "^1.0.2",
4142
"fs-extra": "^4.0.2",
4243
"jest-fetch-mock": "^3.0.3",
@@ -55,7 +56,8 @@
5556
"web-ext": "^3.0.0",
5657
"webpack": "^4.43.0",
5758
"webpack-cli": "^3.3.11",
58-
"webpack-dev-server": "^3.10.3"
59+
"webpack-dev-server": "^3.10.3",
60+
"worker-loader": "^3.0.3"
5961
},
6062
"dependencies": {
6163
"web-ext": "^4"

‎packages/react-devtools-extensions/webpack.config.js

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@ const DEVTOOLS_VERSION = getVersionString();
1919

2020
const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
2121

22+
const babelOptions = {
23+
configFile: resolve(
24+
__dirname,
25+
'..',
26+
'react-devtools-shared',
27+
'babel.config.js',
28+
),
29+
};
30+
2231
module.exports = {
2332
mode: __DEV__ ? 'development' : 'production',
2433
devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
@@ -81,17 +90,25 @@ module.exports = {
8190
],
8291

8392
rules: [
93+
{
94+
test: /\.worker\.js$/,
95+
use: [
96+
{
97+
loader: 'worker-loader',
98+
options: {
99+
inline: 'no-fallback',
100+
},
101+
},
102+
{
103+
loader: 'babel-loader',
104+
options: babelOptions,
105+
},
106+
],
107+
},
84108
{
85109
test: /\.js$/,
86110
loader: 'babel-loader',
87-
options: {
88-
configFile: resolve(
89-
__dirname,
90-
'..',
91-
'react-devtools-shared',
92-
'babel.config.js',
93-
),
94-
},
111+
options: babelOptions,
95112
},
96113
{
97114
test: /\.css$/,

‎packages/react-devtools-inline/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,12 @@
3434
"babel-loader": "^8.0.4",
3535
"cross-env": "^3.1.4",
3636
"css-loader": "^1.0.1",
37+
"file-loader": "^6.1.0",
3738
"raw-loader": "^3.1.0",
3839
"style-loader": "^0.23.1",
3940
"webpack": "^4.43.0",
4041
"webpack-cli": "^3.3.11",
41-
"webpack-dev-server": "^3.10.3"
42+
"webpack-dev-server": "^3.10.3",
43+
"worker-loader": "^3.0.3"
4244
}
4345
}

‎packages/react-devtools-inline/webpack.config.js

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,15 @@ const __DEV__ = NODE_ENV === 'development';
1616

1717
const DEVTOOLS_VERSION = getVersionString();
1818

19+
const babelOptions = {
20+
configFile: resolve(
21+
__dirname,
22+
'..',
23+
'react-devtools-shared',
24+
'babel.config.js',
25+
),
26+
};
27+
1928
module.exports = {
2029
mode: __DEV__ ? 'development' : 'production',
2130
devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',
@@ -65,17 +74,25 @@ module.exports = {
6574
],
6675
module: {
6776
rules: [
77+
{
78+
test: /\.worker\.js$/,
79+
use: [
80+
{
81+
loader: 'worker-loader',
82+
options: {
83+
inline: 'no-fallback',
84+
},
85+
},
86+
{
87+
loader: 'babel-loader',
88+
options: babelOptions,
89+
},
90+
],
91+
},
6892
{
6993
test: /\.js$/,
7094
loader: 'babel-loader',
71-
options: {
72-
configFile: resolve(
73-
__dirname,
74-
'..',
75-
'react-devtools-shared',
76-
'babel.config.js',
77-
),
78-
},
95+
options: babelOptions,
7996
},
8097
{
8198
test: /\.css$/,

‎packages/react-devtools-scheduling-profiler/buildUtils.js

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎packages/react-devtools-scheduling-profiler/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"name": "react-devtools-scheduling-profiler",
4-
"version": "0.0.0",
4+
"version": "4.14.0",
55
"license": "MIT",
66
"scripts": {
77
"build": "cross-env NODE_ENV=production cross-env TARGET=remote webpack --config webpack.config.js",

‎packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css

Lines changed: 1 addition & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,5 @@
1-
.SchedulingProfiler {
2-
width: 100%;
3-
height: 100%;
4-
position: relative;
5-
display: flex;
6-
flex-direction: column;
7-
font-family: var(--font-family-sans);
8-
font-size: var(--font-size-sans-normal);
9-
background-color: var(--color-background);
10-
color: var(--color-text);
11-
}
12-
13-
.SchedulingProfiler, .SchedulingProfiler * {
14-
box-sizing: border-box;
15-
-webkit-font-smoothing: var(--font-smoothing);
16-
}
17-
181
.Content {
2+
width: 100%;
193
position: relative;
204
flex: 1 1 auto;
215
display: flex;
@@ -51,58 +35,3 @@
5135
font-size: var(--font-size-sans-large);
5236
margin-bottom: 0.5rem;
5337
}
54-
55-
.Toolbar {
56-
height: 2.25rem;
57-
padding: 0 0.25rem;
58-
flex: 0 0 auto;
59-
display: flex;
60-
align-items: center;
61-
border-bottom: 1px solid var(--color-border);
62-
}
63-
64-
.VRule {
65-
height: 20px;
66-
width: 1px;
67-
border-left: 1px solid var(--color-border);
68-
padding-left: 0.25rem;
69-
margin-left: 0.25rem;
70-
}
71-
72-
.Spacer {
73-
flex: 1;
74-
}
75-
76-
.Link {
77-
color: var(--color-button);
78-
}
79-
80-
.ScreenshotWrapper {
81-
max-width: 30rem;
82-
padding: 0 1rem;
83-
margin-bottom: 2rem;
84-
}
85-
86-
.Screenshot {
87-
width: 100%;
88-
border-radius: 0.4em;
89-
border: 2px solid var(--color-border);
90-
}
91-
92-
.AppName {
93-
font-size: var(--font-size-sans-large);
94-
margin-right: 0.5rem;
95-
user-select: none;
96-
}
97-
98-
@media screen and (max-width: 350px) {
99-
.AppName {
100-
display: none;
101-
}
102-
}
103-
104-
@media screen and (max-height: 600px) {
105-
.ScreenshotWrapper {
106-
display: none;
107-
}
108-
}

‎packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js

Lines changed: 11 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@ import type {ImportWorkerOutputData} from './import-worker/import.worker';
1414
import * as React from 'react';
1515
import {Suspense, useCallback, useState} from 'react';
1616
import {createResource} from 'react-devtools-shared/src/devtools/cache';
17-
import ReactLogo from 'react-devtools-shared/src/devtools/views/ReactLogo';
1817

1918
import ImportButton from './ImportButton';
2019
import CanvasPage from './CanvasPage';
2120
import ImportWorker from './import-worker/import.worker';
2221

23-
import profilerBrowser from './assets/profilerBrowser.png';
2422
import styles from './SchedulingProfiler.css';
2523

2624
type DataResource = Resource<void, File, ReactProfilerData | Error>;
@@ -63,39 +61,23 @@ export function SchedulingProfiler(_: {||}) {
6361
}, []);
6462

6563
return (
66-
<div className={styles.SchedulingProfiler}>
67-
<div className={styles.Toolbar}>
68-
<ReactLogo />
69-
<span className={styles.AppName}>Concurrent Mode Profiler</span>
70-
<div className={styles.VRule} />
71-
<ImportButton onFileSelect={handleFileSelect} />
72-
<div className={styles.Spacer} />
73-
</div>
74-
<div className={styles.Content}>
75-
{dataResource ? (
76-
<Suspense fallback={<ProcessingData />}>
77-
<DataResourceComponent
78-
dataResource={dataResource}
79-
onFileSelect={handleFileSelect}
80-
/>
81-
</Suspense>
82-
) : (
83-
<Welcome onFileSelect={handleFileSelect} />
84-
)}
85-
</div>
64+
<div className={styles.Content}>
65+
{dataResource ? (
66+
<Suspense fallback={<ProcessingData />}>
67+
<DataResourceComponent
68+
dataResource={dataResource}
69+
onFileSelect={handleFileSelect}
70+
/>
71+
</Suspense>
72+
) : (
73+
<Welcome onFileSelect={handleFileSelect} />
74+
)}
8675
</div>
8776
);
8877
}
8978

9079
const Welcome = ({onFileSelect}: {|onFileSelect: (file: File) => void|}) => (
9180
<div className={styles.EmptyStateContainer}>
92-
<div className={styles.ScreenshotWrapper}>
93-
<img
94-
src={profilerBrowser}
95-
className={styles.Screenshot}
96-
alt="Profiler screenshot"
97-
/>
98-
</div>
9981
<div className={styles.Header}>Welcome!</div>
10082
<div className={styles.Row}>
10183
Click the import button

‎packages/react-devtools-scheduling-profiler/src/assets/logo.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/react-devtools-scheduling-profiler/src/assets/profilerBrowser.png

-75.7 KB
Binary file not shown.

‎packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)