Skip to content

[feat] Align browser preview toolbar with Creator - #894

Merged
wuzhiming merged 15 commits into
cocos:mainfrom
sekiroxxxx:codex/browser-preview-toolbar-main
Sep 2, 2026
Merged

[feat] Align browser preview toolbar with Creator#894
wuzhiming merged 15 commits into
cocos:mainfrom
sekiroxxxx:codex/browser-preview-toolbar-main

Conversation

@sekiroxxxx

@sekiroxxxx sekiroxxxx commented Aug 29, 2026

Copy link
Copy Markdown
Contributor

Background

PinK's external browser preview previously showed only the game canvas and lacked the device simulation, performance, pause, and debug controls available in Creator's preview page. Simple Browser remains an in-editor lightweight visual preview and is out of scope.

Implementation

  • Enable the browser preview toolbar only when previewToolbar=1 is present; regular browser preview and Simple Browser are unchanged.
  • Reuse existing engine Screen, Game, Debug, and Stats capabilities for device resolution, orientation rotation, webpage fullscreen, native fullscreen, FPS display, pause, step, and step length controls.
  • Align the device picker, responsive toolbar layout, pause-only Step and Step Length controls, and the webpage-fullscreen top-hover toolbar behavior with Creator.
  • Persist device, rotation, Show FPS, and Debug Mode through the existing preview Socket so they are restored after refresh and applied before game initialization.
  • Keep the preview options process-scoped; no project configuration or engine-wide persistence is introduced.

Known Engine Behavior

The current engine implementation does not route cc.warn() to the in-page log panel for INFO_FOR_WEB_PAGE or WARN_FOR_WEB_PAGE.

Although the web-page branch initially assigns a warning handler that writes to the panel, later shared logic overwrites it with console.warn. As a result, log and error can appear in the in-page panel while warn remains in browser DevTools. This behavior also exists in Creator because it uses the same engine implementation.

This PR intentionally does not patch the engine from the CLI layer, preserving the established Creator and engine behavior.

Scope

  • Only affects external browser game previews opened with previewToolbar=1.
  • Does not change Simple Browser, scene adaptation, shared engine modules, or project configuration persistence.

image

Test Plan

  • Open an external browser preview with the toolbar, select device resolutions, and use Rotate to verify simulated size and orientation updates.
  • Enter Webpage Full Screen, reveal the toolbar at the top edge, and select another device.
  • Pause and resume the game to verify Step and Step Length visibility.
  • Change Show FPS, device, rotation, and Debug Mode; refresh and verify that the selections persist.
  • Verify Info, Warn, Error, and For Web Page Debug Modes against the current engine logging behavior.

Verification

  • Ran the preview route and toolbar-state regression test.
  • Completed the full CLI compilation and generated the dist artifact.
  • Compared toolbar interactions, device simulation, and Debug Mode initialization with Creator's preview page.

Comment thread static/web/game.ejs
@wuzhiming
wuzhiming merged commit 8f40334 into cocos:main Sep 2, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants