(extension) improve extension debug page [DA-405]#330
Conversation
|
Task linked: DA-405 Better debugging page |
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly upgrades the debugging capabilities of the extension by introducing a new interactive 'Playground' for testing different web content types and a refactored, more informative internal debug panel. These changes aim to streamline the development and troubleshooting process, providing developers with better tools to understand and interact with the extension's state and behavior across various scenarios. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
danmaku-anywhere-web | 92c3a4e | Commit Preview URL Branch Preview URL |
Mar 18 2026, 04:36 AM |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new "Playground" page for debugging, replacing the old iframe debug page. This is a significant improvement, offering a more powerful and flexible environment for testing different scenarios like same-origin iframes, cross-origin iframes, and native videos. The code is well-structured, with new reusable components for panels. The extension's debugging capabilities are also enhanced by adding more information to events and providing new debug commands. The refactoring in file-tree.ts to use immutable patterns is a great improvement for stability and predictability. I've found one issue with signal binding in the new playground page that should be addressed.
| <p-select | ||
| [options]="panelTypeOptions" | ||
| optionLabel="label" | ||
| optionValue="value" | ||
| [(ngModel)]="$selectedType" | ||
| size="small" | ||
| /> |
There was a problem hiding this comment.
The two-way binding [(ngModel)] does not work directly with Angular signals. You should use separate property binding [ngModel] to read the signal's value and event binding (ngModelChange) to update it.
| <p-select | |
| [options]="panelTypeOptions" | |
| optionLabel="label" | |
| optionValue="value" | |
| [(ngModel)]="$selectedType" | |
| size="small" | |
| /> | |
| <p-select | |
| [options]="panelTypeOptions" | |
| optionLabel="label" | |
| optionValue="value" | |
| [ngModel]="$selectedType()" | |
| (ngModelChange)="$selectedType.set($event)" | |
| size="small" | |
| /> |
There was a problem hiding this comment.
Pull request overview
Improves developer/debug tooling across the browser extension and the web app by expanding the extension’s debug page (frames/state/options + frame commands) and replacing the web app’s iframe debug route with a more flexible “Playground” for embedding same-/cross-origin iframes and native video.
Changes:
- Extension: enhance Debug page UI (tabs + copy-to-clipboard snapshot), show detected frames/video info, and add a debug RPC to trigger the skip button.
- Controller/player: enrich
relay:event:videoChangepayload with video metadata and store it per frame. - Web app: replace
/debug/iframewith/debug/playground, and adjust local file-tree expand/collapse behavior to trigger UI updates.
Reviewed changes
Copilot reviewed 25 out of 25 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/danmaku-anywhere/src/content/player/videoSkip/VideoSkip.service.ts | Adds a debug method to force-show the skip button. |
| packages/danmaku-anywhere/src/content/player/PlayerCommandHandler.service.ts | Sends video metadata on video changes; adds debug RPC command handler. |
| packages/danmaku-anywhere/src/content/controller/ui/router/routes.tsx | Updates DebugPage import to the new debug module path. |
| packages/danmaku-anywhere/src/content/controller/ui/floatingPanel/pages/debug/index.ts | Adds a barrel export for the new DebugPage location. |
| packages/danmaku-anywhere/src/content/controller/ui/floatingPanel/pages/debug/components/StatePanel.tsx | New panel to render controller state in a readable form. |
| packages/danmaku-anywhere/src/content/controller/ui/floatingPanel/pages/debug/components/OptionsPanel.tsx | New panel to render extension options JSON. |
| packages/danmaku-anywhere/src/content/controller/ui/floatingPanel/pages/debug/components/FramesPanel.tsx | New panel listing frames, video info, and debug actions. |
| packages/danmaku-anywhere/src/content/controller/ui/floatingPanel/pages/debug/components/DebugShared.tsx | Shared UI helpers for the debug panels. |
| packages/danmaku-anywhere/src/content/controller/ui/floatingPanel/pages/debug/DebugPage.tsx | New tabbed Debug page with copy-state toolbar action. |
| packages/danmaku-anywhere/src/content/controller/ui/floatingPanel/pages/DebugPage.tsx | Removes the previous monolithic DebugPage implementation. |
| packages/danmaku-anywhere/src/content/controller/store/store.ts | Extends frame state with videoInfo; adds debugShowSkipButton action. |
| packages/danmaku-anywhere/src/content/controller/danmaku/frame/FrameManager.tsx | Stores video metadata per frame and handles updated videoChange payload. |
| packages/danmaku-anywhere/src/common/standalone/standaloneHandlers.ts | Adds a no-op handler for the new debug skip-button command in standalone mode. |
| packages/danmaku-anywhere/src/common/rpcClient/background/types.ts | Updates RPC types: new debug command + videoChange event payload type. |
| packages/danmaku-anywhere/src/background/rpc/RpcManager.ts | Pass-through wiring for the new debug skip-button command. |
| app/web/src/app/layout/components/sidebar/sidebar.component.ts | Renames debug nav entry from iframe debug to Playground. |
| app/web/src/app/features/local/util/file-tree.ts | Changes expand/collapse to clone tree nodes and rebuild indexes. |
| app/web/src/app/features/local/services/local-player.service.ts | Forces UI refresh after expand/collapse via bumpTree(). |
| app/web/src/app/features/debug/playground/playground-page.component.ts | New Playground page supporting multiple debug panels. |
| app/web/src/app/features/debug/playground/panels/same-origin-iframe-panel.component.ts | Adds same-origin iframe debug panel. |
| app/web/src/app/features/debug/playground/panels/native-video-panel.component.ts | Adds native video debug panel with selectable sample URLs. |
| app/web/src/app/features/debug/playground/panels/debug-panel.component.ts | Shared panel chrome (title + remove button + content slots). |
| app/web/src/app/features/debug/playground/panels/cross-origin-iframe-panel.component.ts | Adds cross-origin iframe panel with presets and editable URL. |
| app/web/src/app/features/debug/iframe-debug-page.component.ts | Removes the old iframe debug page. |
| app/web/src/app/app.routes.ts | Replaces /debug/iframe route with /debug/playground. |
Comments suppressed due to low confidence (1)
packages/danmaku-anywhere/src/content/controller/danmaku/frame/FrameManager.tsx:72
- When a video is removed you set
hasVideo: falsebut leavevideoInfointact. The debug Frames panel rendersframe.videoInfoeven whenhasVideois false, so it can display stale src/size after a removal. ClearvideoInfoin thevideoRemovedHandlerupdate (or conditionally render it based onhasVideo).
const videoRemovedHandler = useEventCallback((frameId: number) => {
if (activeFrame?.frameId === frameId) {
setVideoId(undefined)
if (activeFrame.mounted) {
unmountDanmaku.mutate(frameId)
}
}
updateFrame(frameId, { hasVideo: false, mounted: false })
})
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function cloneWithExpanded(nodes: TreeNode[], expanded: boolean): TreeNode[] { | ||
| return nodes.map((n) => { | ||
| if (n.type === 'directory' || n.type === 'removableDirectory') { | ||
| n.expanded = expanded | ||
| if (n.children) | ||
| n.children.forEach((c) => { | ||
| setExpanded([c], expanded) | ||
| }) | ||
| return { | ||
| ...n, | ||
| expanded, | ||
| children: n.children | ||
| ? cloneWithExpanded(n.children, expanded) | ||
| : undefined, | ||
| } | ||
| } | ||
| return { ...n } | ||
| }) |
| const handleCopyState = () => { | ||
| // biome-ignore lint/suspicious/noExplicitAny: debug page serialization | ||
| const snapshot = produce(state, (draft: any) => { | ||
| delete draft.danmaku.comments | ||
| if (draft.danmaku.episodes) { | ||
| for (const item of draft.danmaku.episodes) { | ||
| if ('comments' in item) { | ||
| delete item.comments | ||
| } | ||
| } | ||
| } | ||
| draft.frame.allFrames = Object.fromEntries( | ||
| draft.frame.allFrames.entries() | ||
| ) | ||
| draft.options = options | ||
| }) | ||
| void navigator.clipboard.writeText(JSON.stringify(snapshot, null, 2)) | ||
| setCopied(true) | ||
| setTimeout(() => setCopied(false), 1500) | ||
| } |
| protected readonly $sanitizedUrl = computed(() => | ||
| this.domSanitizer.bypassSecurityTrustResourceUrl(this.$url()) | ||
| ) | ||
|
|
| debugShowSkipButton() { | ||
| this.logger.debug('Showing debug skip button') | ||
| const time = this.currentVideo?.currentTime ?? 120 | ||
| const target = new SkipTarget({ | ||
| startTime: time, | ||
| endTime: time + 90, | ||
| }) | ||
| this.showSkipButton(target) | ||
| } |
No description provided.