diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e0ec0f..444cc65 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ All packages share one version and are released together (see DEV.md, "Releasing ## Unreleased +## 0.2.0 + +Based on Chrome 156 (156.0.8078.80). + - From jsDelivr or unpkg, the probe needs no other attribute: it loads the frontend of its own version from there, and shell mode works (without the Service Worker). Shell configs from such a CDN are trusted only in the probe's package and the frontend's at that version, no longer anywhere on the CDN. `data-no-panel` goes without the panel: a page from such a CDN only debugged remotely (`data-remote`) needs it, or it now gets a panel too. - The docked panel is resized with a grip on the middle of its inner edge, on the page's side, in place of the bar across its whole edge: it covers neither DevTools nor more of the page than it shows, and looks the same in and out of shell mode. The undocked window keeps its bar, which moves it. - Device mode in shell mode, as in Chrome: DevTools lays out the page and itself, the toolbar's device button sizes the page as a device (scaled to fit) and its menu takes screenshots, docked or undocked. It sets the page's size only, not its pixel ratio, user agent or touch input. A grip against the middle of DevTools' edge, on the page's side, resizes them without covering DevTools, larger on touch screens. Outside shell mode the button is still the screencast's. diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index cdd3d6b..c2ba41e 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -4,6 +4,10 @@ ## Unreleased +## 0.2.0 + +基于 Chrome 156（156.0.8078.80）。 + - 探针来自 jsDelivr 或 unpkg 时，不用再写其他属性：它会从同一个 CDN 加载同版本的前端，外壳模式也能用（没有 Service Worker）。来自这类 CDN 时，外壳配置只信任探针所在的包和同版本的前端包，不再信任整个 CDN。新增 `data-no-panel`，不挂载面板：从这类 CDN 引入、只做远程调试（`data-remote`）的页面需要加上它，否则现在也会出现面板。 - 停靠的面板改用内侧边缘正中、靠页面一侧的抓手调整大小，取代原来贯穿整条边的横条：它不遮挡 DevTools，也只占页面上它看得见的那一小块，外壳模式内外样式一致。浮动窗口仍保留用来移动的横条。 - 外壳模式下新增设备模式，和 Chrome 一样：由 DevTools 排布页面和自己，工具栏上的设备按钮按设备尺寸设置页面（缩放到适合窗口），它的菜单可以截图，停靠和取消停靠时都能用。它只设置页面的尺寸，不改变像素比、UA 和触摸输入。DevTools 面板边缘正中、靠页面一侧有一个抓手，用来调整大小，不遮挡 DevTools，触屏上更大。非外壳模式下，这个按钮仍然是投屏。 diff --git a/packages/devtools-anywhere/package.json b/packages/devtools-anywhere/package.json index 04b118a..91bbb00 100644 --- a/packages/devtools-anywhere/package.json +++ b/packages/devtools-anywhere/package.json @@ -1,6 +1,6 @@ { "name": "devtools-anywhere", - "version": "0.1.0", + "version": "0.2.0", "description": "Real Chrome DevTools inside any web page, with early capture", "keywords": [ "cdp", diff --git a/packages/devtools-frontend-locales/package.json b/packages/devtools-frontend-locales/package.json index 8bd2a92..51d4657 100644 --- a/packages/devtools-frontend-locales/package.json +++ b/packages/devtools-frontend-locales/package.json @@ -1,6 +1,6 @@ { "name": "@devtools-anywhere/devtools-frontend-locales", - "version": "0.1.0", + "version": "0.2.0", "description": "UI translations of @devtools-anywhere/devtools-frontend beyond English and Chinese", "keywords": [ "chrome-devtools", diff --git a/packages/devtools-frontend/package.json b/packages/devtools-frontend/package.json index 3e2814f..6a69e57 100644 --- a/packages/devtools-frontend/package.json +++ b/packages/devtools-frontend/package.json @@ -1,6 +1,6 @@ { "name": "@devtools-anywhere/devtools-frontend", - "version": "0.1.0", + "version": "0.2.0", "description": "Chrome DevTools frontend built from the official sources for devtools-anywhere", "keywords": [ "chrome-devtools", diff --git a/packages/relay-core/package.json b/packages/relay-core/package.json index cce8350..fcda292 100644 --- a/packages/relay-core/package.json +++ b/packages/relay-core/package.json @@ -1,6 +1,6 @@ { "name": "@devtools-anywhere/relay-core", - "version": "0.1.0", + "version": "0.2.0", "private": true, "description": "Internal: the relay logic shared by shell mode and the remote server, bundled into both", "license": "MIT", diff --git a/packages/remote-server/package.json b/packages/remote-server/package.json index 94c4207..a7cab82 100644 --- a/packages/remote-server/package.json +++ b/packages/remote-server/package.json @@ -1,6 +1,6 @@ { "name": "@devtools-anywhere/remote-server", - "version": "0.1.0", + "version": "0.2.0", "description": "Relay that lets Chrome DevTools on one machine inspect a page running on another device", "keywords": [ "cdp", diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index 6ec775a..f747938 100644 --- a/packages/vite-plugin/package.json +++ b/packages/vite-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@devtools-anywhere/vite-plugin", - "version": "0.1.0", + "version": "0.2.0", "description": "Vite plugin that injects devtools-anywhere in development", "keywords": [ "chrome-devtools", diff --git a/tests/e2e/real-frontend.test.ts b/tests/e2e/real-frontend.test.ts index 590163f..9081ff5 100644 --- a/tests/e2e/real-frontend.test.ts +++ b/tests/e2e/real-frontend.test.ts @@ -243,9 +243,17 @@ test('the Sources panel shows source and Watch, without breakpoints or pausing c // asElement() is typed as a handle to any Node; the page function returns an Element or null. (await query('[aria-label="Add watch expression"]')).asElement() as ElementHandle | null; await (await waitFor(async () => laidOut(await addWatch()))).click(); + // As in Chrome, adding a watch expression starts editing it: its prompt takes the focus. That + // prompt is clicked (other prompts may be in the DOM), which also gives the frontend's frame the keys. const prompt = async () => // asElement() is typed as a handle to any Node; the page function returns an Element or null. - (await query('.text-prompt[contenteditable]')).asElement() as ElementHandle | null; + ( + await frontend.evaluateHandle(() => { + let active = document.activeElement; + while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement; + return active?.matches('.text-prompt[contenteditable]') ? active : null; + }) + ).asElement() as ElementHandle | null; await (await waitFor(async () => laidOut(await prompt()))).click(); await frontend.page().keyboard.type('document.title'); await frontend.page().keyboard.press('Enter');