Skip to content

Commit 9ddecf3

Browse files
bytemainbytemain
authored
Merge pull request #19 from opensumi/feat/compatible-with-3.0
2 parents 9ae9822 + 036bde0 commit 9ddecf3

File tree

8 files changed

+87
-82
lines changed

8 files changed

+87
-82
lines changed

‎package.json

+8-12
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@
44
"type": "module",
55
"description": "A Chrome DevTools Extension for OpenSumi.",
66
"license": "MIT",
7-
"repository": {
8-
"type": "git",
9-
"url": ""
10-
},
7+
"repository": "[email protected]:opensumi/devtools.git",
118
"scripts": {
129
"build": "cross-env NODE_ENV='production' BABEL_ENV='production' node utils/build.js",
1310
"start": "cross-env NODE_ENV='development' BABEL_ENV='development' node utils/server.js",
@@ -17,22 +14,21 @@
1714
"prepare": "husky install"
1815
},
1916
"dependencies": {
20-
"@hot-loader/react-dom": "^17.0.2",
21-
"react": "^17.0.2",
22-
"react-data-grid": "^7.0.0-beta.13",
23-
"react-dom": "^17.0.2",
17+
"react": "^18.2.0",
18+
"react-data-grid": "^7.0.0-beta.43",
19+
"react-dom": "^18.2.0",
2420
"react-hot-loader": "^4.13.0",
2521
"react-json-view": "^1.21.3",
26-
"react-tabs": "^4.2.1"
22+
"react-tabs": "^6.0.2"
2723
},
2824
"devDependencies": {
2925
"@babel/core": "^7.17.0",
3026
"@babel/plugin-proposal-class-properties": "^7.16.7",
3127
"@babel/preset-env": "^7.16.11",
3228
"@babel/preset-react": "^7.16.7",
3329
"@types/chrome": "^0.0.177",
34-
"@types/react": "^17.0.39",
35-
"@types/react-dom": "^17.0.11",
30+
"@types/react": "^18.2.79",
31+
"@types/react-dom": "^18.2.25",
3632
"babel-eslint": "^10.1.0",
3733
"babel-loader": "^8.2.3",
3834
"babel-preset-react-app": "^10.0.1",
@@ -68,4 +64,4 @@
6864
"webpack-cli": "^4.9.2",
6965
"webpack-dev-server": "^4.3.1"
7066
}
71-
}
67+
}

‎src/pages/Panel/index.jsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
2-
import { render } from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import Devtools from '../../ui/index';
44

5-
render(<Devtools />, window.document.querySelector('#panel'));
6-
7-
if (module.hot) module.hot.accept();
5+
const client = createRoot(window.document.querySelector('#panel'));
6+
client.render(<Devtools />);

‎src/ui/Ipc/Ipc.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect, useRef, useMemo, createContext } from 'react';
22
import ResizableTable from '../ResizableTable/ResizableTable';
3+
import 'react-data-grid/lib/styles.css';
34
import DataGrid from 'react-data-grid';
45
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
56
import JsonView from 'react-json-view';
@@ -43,7 +44,7 @@ const Ipc = ({ isCompact }) => {
4344

4445
// run if autoScroll or bottomRow changes
4546
useEffect(() => {
46-
gridRef.current && autoScroll && gridRef.current.scrollToRow(bottomRow);
47+
gridRef.current && autoScroll && gridRef.current.scrollToCell({ rowIdx: bottomRow });
4748
}, [autoScroll, bottomRow]);
4849

4950
// it is not very elegent to use two variables to store same thing

‎src/ui/Rpc/Rpc.jsx

+22-4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useMemo, createContext } from 'reac
22
import ResizableTable from '../ResizableTable/ResizableTable';
33
import NetSpeed from '../NetSpeed/NetSpeed';
44
import NetLatency from '../NetLatency/NetLatency';
5+
import 'react-data-grid/lib/styles.css';
56
import DataGrid from 'react-data-grid';
67
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
78
import JsonView from 'react-json-view';
@@ -38,6 +39,7 @@ const Rpc = ({ isCompact, isElectron }) => {
3839
send: 0, // the unit is bytes/s
3940
receive: 0,
4041
});
42+
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
4143
const [latency, setLatency] = useState(null);
4244

4345
const timer = useRef(null);
@@ -51,7 +53,7 @@ const Rpc = ({ isCompact, isElectron }) => {
5153

5254
// run if autoScroll or bottomRow changes
5355
useEffect(() => {
54-
gridRef.current && autoScroll && gridRef.current.scrollToRow(bottomRow);
56+
gridRef.current && autoScroll && gridRef.current.scrollToCell({ rowIdx: bottomRow });
5557
}, [autoScroll, bottomRow]);
5658

5759
// it is not very elegent to use two variables to store same thing
@@ -260,13 +262,29 @@ const Rpc = ({ isCompact, isElectron }) => {
260262
rowKeyGetter={(row) => row.id}
261263
headerRowHeight={filters.enabled ? 52 : 25}
262264
rowHeight={20}
263-
onRowClick={(row) => {
264-
setSelectedRow(row);
265+
onCellClick={(cell) => {
266+
if (cell.column) {
267+
const { key } = cell.column;
268+
if (key === 'send') {
269+
setSelectedTabIndex(0);
270+
} else if (key === 'receive') {
271+
setSelectedTabIndex(1);
272+
}
273+
}
274+
if (cell.row) {
275+
setSelectedRow(cell.row);
276+
}
265277
}}
266278
/>
267279
</FilterContext.Provider>
268280
<div>
269-
<Tabs forceRenderTabPanel={true}>
281+
<Tabs
282+
forceRenderTabPanel={true}
283+
selectedIndex={selectedTabIndex}
284+
onSelect={(index) => {
285+
setSelectedTabIndex(index);
286+
}}
287+
>
270288
<TabList>
271289
<Tab>Send</Tab>
272290
<Tab>Receive</Tab>

‎src/ui/Rpc/messageHelper.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ const serviceMethodSplit = (serviceMethod) => {
22
if (serviceMethod.startsWith('on')) {
33
serviceMethod = serviceMethod.slice(3);
44
}
5+
if (serviceMethod.includes('||')) {
6+
// for ExtProtocol
7+
return serviceMethod.split('||');
8+
}
9+
510
return serviceMethod.split(':');
611
};
712

@@ -56,7 +61,7 @@ const updateMessages = (oldMessages, newRawMessages) => {
5661
msg.method = serviceMethodSplitResult[1];
5762
msg.receive = JSON.stringify(message.arguments);
5863
} else if (msg.type === 'onRequest') {
59-
msg.type = '↓↑';
64+
msg.type = '↓';
6065
msg.requestId = message.requestId;
6166
msg.service = serviceMethodSplitResult[0];
6267
msg.method = serviceMethodSplitResult[1];

‎src/ui/Rpc/rdgHelper.jsx

+8
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
3030
name: 'ID',
3131
minWidth: 40,
3232
width: 50,
33+
maxWidth: 70,
3334
cellClass: 'rdg-body-cell',
3435
headerCellClass: 'rdg-header-cell',
3536
frozen: true,
@@ -39,6 +40,7 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
3940
name: 'Time',
4041
minWidth: 75,
4142
width: 75,
43+
maxWidth: 100,
4244
cellClass: 'rdg-body-cell',
4345
headerCellClass: 'rdg-header-cell',
4446
},
@@ -47,6 +49,7 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
4749
name: 'Type',
4850
minWidth: 40,
4951
width: 50,
52+
maxWidth: 70,
5053
cellClass: 'rdg-body-cell column-type',
5154
headerCellClass: 'rdg-header-cell filter-cell',
5255
headerRenderer: (p) => (
@@ -133,6 +136,7 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
133136
{
134137
key: 'send',
135138
name: 'Send',
139+
width: 150,
136140
cellClass: 'rdg-body-cell',
137141
headerCellClass: 'rdg-header-cell filter-cell',
138142
headerRenderer: (p) => (
@@ -154,8 +158,12 @@ const generateColumns = (FilterContext, setFilters, services, methods) => {
154158
{
155159
key: 'receive',
156160
name: 'Receive',
161+
width: 150,
157162
cellClass: 'rdg-body-cell',
158163
headerCellClass: 'rdg-header-cell filter-cell',
164+
onclick: (e) => {
165+
console.log('clicked');
166+
},
159167
headerRenderer: (p) => (
160168
<FilterRenderer {...p}>
161169
{({ filters, ...rest }) => (

‎webpack.config.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,13 @@ const __dirname = dirname(__filename);
1313

1414
const ASSET_PATH = process.env.ASSET_PATH || '/';
1515

16-
const alias = {
17-
'react-dom': '@hot-loader/react-dom',
18-
'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
19-
'react/jsx-runtime': 'react/jsx-runtime.js',
20-
};
21-
2216
// load the secrets
2317
const secretsPath = path.join(__dirname, 'secrets.' + env.NODE_ENV + '.js');
2418

2519
const fileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'eot', 'otf', 'svg', 'ttf', 'woff', 'woff2'];
2620

21+
const alias = {};
22+
2723
if (fileSystem.existsSync(secretsPath)) {
2824
alias['secrets'] = secretsPath;
2925
}

‎yarn.lock

+36-54
Original file line numberDiff line numberDiff line change
@@ -1057,15 +1057,6 @@
10571057
minimatch "^3.1.2"
10581058
strip-json-comments "^3.1.1"
10591059

1060-
"@hot-loader/react-dom@^17.0.2":
1061-
version "17.0.2"
1062-
resolved "https://registry.npmmirror.com/@hot-loader/react-dom/-/react-dom-17.0.2.tgz#0b24e484093e8f97eb5c72bebdda44fc20bc8400"
1063-
integrity sha512-G2RZrFhsQClS+bdDh/Ojpk3SgocLPUGnvnJDTQYnmKSSwXtU+Yh+8QMs+Ia3zaAvBiOSpIIDSUxuN69cvKqrWg==
1064-
dependencies:
1065-
loose-envify "^1.1.0"
1066-
object-assign "^4.1.1"
1067-
scheduler "^0.20.2"
1068-
10691060
"@humanwhocodes/config-array@^0.9.2":
10701061
version "0.9.5"
10711062
resolved "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
@@ -1324,32 +1315,26 @@
13241315
resolved "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
13251316
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
13261317

1327-
"@types/react-dom@^17.0.11":
1328-
version "17.0.17"
1329-
resolved "https://registry.npmmirror.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
1330-
integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==
1318+
"@types/react-dom@^18.2.25":
1319+
version "18.2.25"
1320+
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.25.tgz#2946a30081f53e7c8d585eb138277245caedc521"
1321+
integrity sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==
13311322
dependencies:
1332-
"@types/react" "^17"
1323+
"@types/react" "*"
13331324

1334-
"@types/react@^17", "@types/react@^17.0.39":
1335-
version "17.0.47"
1336-
resolved "https://registry.npmmirror.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78"
1337-
integrity sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==
1325+
"@types/react@*", "@types/react@^18.2.79":
1326+
version "18.2.79"
1327+
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
1328+
integrity sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==
13381329
dependencies:
13391330
"@types/prop-types" "*"
1340-
"@types/scheduler" "*"
13411331
csstype "^3.0.2"
13421332

13431333
"@types/[email protected]":
13441334
version "0.12.0"
13451335
resolved "https://registry.npmmirror.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
13461336
integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
13471337

1348-
"@types/scheduler@*":
1349-
version "0.16.2"
1350-
resolved "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
1351-
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
1352-
13531338
"@types/serve-index@^1.9.1":
13541339
version "1.9.1"
13551340
resolved "https://registry.npmmirror.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -2095,10 +2080,10 @@ clone-deep@^4.0.1:
20952080
kind-of "^6.0.2"
20962081
shallow-clone "^3.0.0"
20972082

2098-
clsx@^1.1.0, clsx@^1.1.1:
2099-
version "1.2.1"
2100-
resolved "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
2101-
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
2083+
clsx@^2.0.0:
2084+
version "2.1.0"
2085+
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
2086+
integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
21022087

21032088
color-convert@^1.9.0:
21042089
version "1.9.3"
@@ -4580,21 +4565,20 @@ react-base16-styling@^0.6.0:
45804565
lodash.flow "^3.3.0"
45814566
pure-color "^1.2.0"
45824567

4583-
react-data-grid@^7.0.0-beta.13:
4584-
version "7.0.0-beta.13"
4585-
resolved "https://registry.npmmirror.com/react-data-grid/-/react-data-grid-7.0.0-beta.13.tgz#c0728258cbbb033af611eed50ed124744a76ee76"
4586-
integrity sha512-vhBdkC2KqAawmmzYTcNlfhfjcYFQsinNr5pPTUG6/3DzLfYWo1S6nl48wgPWgyD9uDclV3H5NWvKSSwQTTsYMQ==
4568+
react-data-grid@^7.0.0-beta.43:
4569+
version "7.0.0-beta.43"
4570+
resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-7.0.0-beta.43.tgz#102832abf4f23cdc6dc7ddf865612caa39be8061"
4571+
integrity sha512-uqzhXsaeIpCnNsB1zODWzP88od6r5Q5UA5GnEhba9XmUMFUy2VcUTTfABmbAiVGdJkUzWJTx1l0hZn0WNGE/hQ==
45874572
dependencies:
4588-
clsx "^1.1.1"
4573+
clsx "^2.0.0"
45894574

4590-
react-dom@^17.0.2:
4591-
version "17.0.2"
4592-
resolved "https://registry.npmmirror.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
4593-
integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
4575+
react-dom@^18.2.0:
4576+
version "18.2.0"
4577+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
4578+
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
45944579
dependencies:
45954580
loose-envify "^1.1.0"
4596-
object-assign "^4.1.1"
4597-
scheduler "^0.20.2"
4581+
scheduler "^0.23.0"
45984582

45994583
react-hot-loader@^4.13.0:
46004584
version "4.13.0"
@@ -4630,12 +4614,12 @@ react-lifecycles-compat@^3.0.4:
46304614
resolved "https://registry.npmmirror.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
46314615
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
46324616

4633-
react-tabs@^4.2.1:
4634-
version "4.2.1"
4635-
resolved "https://registry.npmmirror.com/react-tabs/-/react-tabs-4.2.1.tgz#82e2dc787555e791f909746dd64164d780d7d477"
4636-
integrity sha512-nQcEN3KrAsSry6f9Jz2oyMQsnh+sLEy31YjlskL/mnI3KU/c7BeyD1VzHZmmcJ15UEFu12pYOXYkdTzZ0uyIbw==
4617+
react-tabs@^6.0.2:
4618+
version "6.0.2"
4619+
resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-6.0.2.tgz#bc1065c3828561fee285a8fd045f22e0fcdde1eb"
4620+
integrity sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==
46374621
dependencies:
4638-
clsx "^1.1.0"
4622+
clsx "^2.0.0"
46394623
prop-types "^15.5.0"
46404624

46414625
react-textarea-autosize@^8.3.2:
@@ -4647,13 +4631,12 @@ react-textarea-autosize@^8.3.2:
46474631
use-composed-ref "^1.3.0"
46484632
use-latest "^1.2.1"
46494633

4650-
react@^17.0.2:
4651-
version "17.0.2"
4652-
resolved "https://registry.npmmirror.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
4653-
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
4634+
react@^18.2.0:
4635+
version "18.2.0"
4636+
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
4637+
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
46544638
dependencies:
46554639
loose-envify "^1.1.0"
4656-
object-assign "^4.1.1"
46574640

46584641
readable-stream@^2.0.1:
46594642
version "2.3.7"
@@ -4877,13 +4860,12 @@ sass@^1.52.3:
48774860
immutable "^4.0.0"
48784861
source-map-js ">=0.6.2 <2.0.0"
48794862

4880-
scheduler@^0.20.2:
4881-
version "0.20.2"
4882-
resolved "https://registry.npmmirror.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
4883-
integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
4863+
scheduler@^0.23.0:
4864+
version "0.23.0"
4865+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
4866+
integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
48844867
dependencies:
48854868
loose-envify "^1.1.0"
4886-
object-assign "^4.1.1"
48874869

48884870
schema-utils@^2.6.5:
48894871
version "2.7.1"

0 commit comments

Comments
 (0)