feat(devtools): support opera beta (080b77cb) · Commits · e / tools / webadb

apps/demo/package.json

+7 −7

Original line number	Diff line number	Diff line
		@@ -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",
		@@ -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",
		@@ -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"

apps/demo/src/pages/chrome-devtools-frame.tsx

+24 −1

Original line number	Diff line number	Diff line
		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 {
		@@ -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;

apps/demo/src/pages/chrome-devtools.tsx

+24 −24

Original line number	Diff line number	Diff line
		@@ -46,12 +46,16 @@ class AdbUndiciSocket extends Duplex {
		}

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

		async _write(
		@@ -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 {
		@@ -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)) {

common/config/rush/pnpm-lock.yaml

+135 −172

File changed.

Preview size limit exceeded, changes collapsed.

common/config/rush/repo-state.json

+1 −1

Original line number	Diff line number	Diff line
		// DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
		{
		"pnpmShrinkwrapHash": "5641492d01a605bf62c48e2cebc82e3dc960ae21",
		"pnpmShrinkwrapHash": "e870870fc8dda7ac7abb3a0c8dcebb664c086262",
		"preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
		}