Skip to content

Commit

Permalink
feat(devtools): support opera beta
Browse files Browse the repository at this point in the history
  • Loading branch information
yume-chan committed Apr 15, 2023
1 parent 475465e commit 21d433b
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 32 deletions.
14 changes: 7 additions & 7 deletions packages/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
"lint": "next lint"
},
"dependencies": {
"@fluentui/react": "^8.106.7",
"@fluentui/react": "^8.107.5",
"@fluentui/react-file-type-icons": "^8.8.13",
"@fluentui/react-hooks": "^8.6.20",
"@fluentui/react-icons": "^2.0.196",
"@fluentui/react-icons": "^2.0.200",
"@fluentui/style-utilities": "^8.9.6",
"@griffel/react": "^1.5.5",
"@griffel/react": "^1.5.7",
"@yume-chan/adb": "workspace:^0.0.19",
"@yume-chan/adb-backend-direct-sockets": "workspace:^0.0.9",
"@yume-chan/adb-backend-webusb": "workspace:^0.0.19",
Expand All @@ -38,10 +38,10 @@
"fflate": "^0.7.4",
"mobx": "^6.7.0",
"mobx-react-lite": "^3.4.3",
"next": "13.2.4",
"next": "13.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webm-muxer": "^2.1.2",
"webm-muxer": "^2.2.3",
"xterm": "^5.1.0",
"xterm-addon-fit": "^0.7.0",
"xterm-addon-search": "^0.11.0",
Expand All @@ -53,10 +53,10 @@
"@next/mdx": "^13.2.4",
"@types/dom-webcodecs": "^0.1.6",
"@types/node": "^18.15.3",
"@types/react": "18.0.33",
"@types/react": "18.0.35",
"@yume-chan/next-pwa": "5.6.0-mod.2",
"eslint": "^8.36.0",
"eslint-config-next": "13.2.4",
"eslint-config-next": "13.3.0",
"prettier": "^2.8.4",
"source-map-loader": "^4.0.1",
"typescript": "^5.0.3"
Expand Down
25 changes: 24 additions & 1 deletion packages/demo/src/pages/chrome-devtools-frame.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
import { Stack } from "@fluentui/react";
import { makeStyles } from "@griffel/react";
import { useEffect } from "react";

const useClasses = makeStyles({
body: {
"@media (prefers-color-scheme: dark)": {
backgroundColor: "rgb(41, 42, 45)",
color: "#ddd",
},
},
});

function ChromeDevToolsFrame() {
const classes = useClasses();

useEffect(() => {
var WebSocketOriginal = globalThis.WebSocket;
globalThis.WebSocket = class WebSocket extends EventTarget {
Expand Down Expand Up @@ -92,7 +105,17 @@ function ChromeDevToolsFrame() {
document.body.appendChild(script);
}, []);

return null;
return (
<Stack
className={classes.body}
verticalFill
verticalAlign="center"
horizontalAlign="center"
>
<div>Loading DevTools...</div>
<div>(requires network connection)</div>
</Stack>
);
}
ChromeDevToolsFrame.noLayout = true;
export default ChromeDevToolsFrame;
48 changes: 24 additions & 24 deletions packages/demo/src/pages/chrome-devtools.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,15 @@ class AdbUndiciSocket extends Duplex {
}

async _read(size: number): Promise<void> {
const result = await this._reader.read();
if (result.done) {
this.emit("end");
} else {
this.push(result.value);
try {
const result = await this._reader.read();
if (result.done) {
this.emit("end");
} else {
this.push(result.value);
}
} catch {
//ignore
}
}

Expand Down Expand Up @@ -157,30 +161,26 @@ const {
function getPopupParams(page: Page) {
const frontendUrl = page.devtoolsFrontendUrl;
const [frontendBase, params] = frontendUrl.split("?");
let frontendScript: string;
let script: string;
if (
frontendBase.startsWith("https://aka.ms/docs-landing-page/serve_rev/")
frontendBase.startsWith("https://chrome-devtools-frontend.appspot.com")
) {
// Edge
frontendScript = frontendBase
.replace(
"https://aka.ms/docs-landing-page/serve_rev/",
"https://devtools.azureedge.net/serve_file/"
)
.replace("inspector.html", "entrypoints/inspector/inspector.js");
} else if (frontendBase.startsWith("https://devtools.opera.com/")) {
// Opera doesn't host its DevTools
// use Edge's instead
frontendScript =
"https://devtools.azureedge.net/serve_file/@de5387e0c9d4198cd2d786b4eb445a1fb74a3d18/entrypoints/inspector/inspector.js";
} else {
// Chrome
frontendScript = frontendBase.replace(
// For Chrome, use the specified version.
script = frontendBase.replace(
"inspector.html",
"front_end/entrypoints/inspector/inspector.js"
);
} else {
// Otherwise wse a fixed version from Chrome's distribution, updated regularly.
// Can't find Opera's own distribution.
// Edge's distribution has only nightly versions.
script =
"https://chrome-devtools-frontend.appspot.com/serve_internal_file/@7edf0130cbb9f0611d524fe4870b2d4aa7f8279f/front_end/entrypoints/inspector/inspector.js";
}
return { script: frontendScript, params };
return {
script,
params,
};
}

interface Browser {
Expand All @@ -203,7 +203,7 @@ const STATE = makeAutoObservable(
async function getBrowsers() {
const device = GLOBAL_STATE.device!;
const sockets = await device.subprocess.spawnAndWaitLegacy(
`cat /proc/net/unix | grep -E "@chrome_devtools_remote|@chrome_devtools_remote_[0-9]+|@com.opera.browser.devtools" | awk '{print substr($8, 2)}'`
`cat /proc/net/unix | grep -E "@chrome_devtools_remote|@chrome_devtools_remote_[0-9]+|@com.opera.browser.devtools|@com.opera.browser.beta.devtools" | awk '{print substr($8, 2)}'`
);
const browsers: Browser[] = [];
for (const socket of sockets.split("\n").filter(Boolean)) {
Expand Down

0 comments on commit 21d433b

Please sign in to comment.