mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-06 20:11:38 +08:00

Files

T

Alex Rudenko 6dface0617 Combine overlays into a single resource

This CL combines all overlays in a single entrypoint so that all
overlays are shipped in a single bundle. It introduces a new
call `setOverlay` that is made by the backend to specify which
overlay is active. Overlays implement install/uninstall methods
which allow enabling/disabling overlays without destroying the
page. Note that old entrypoints such as tool_highlight.js can be
removed after this CL lands. The changes give the following
advantages:

- we ship less code by shipping a single bundle (previously, different
bundles contained the same modules).
- we are one step closer to shipping the overlay page via CDP.
- we are able to more easily combine different overlays.

Backend CL: https://crrev.com/c/2461111

Change-Id: I872a1d801879d90cc6d73adec5e88879216d1985
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2460917
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>

2020-10-13 12:13:18 +00:00

3.0 KiB

Raw Blame History

Inspector Overlay

Inspector Overlay provides JS/CSS modules which are responsible for rendering the overlay content when you inspect an element in DevTools.

How build works

Overlay modules are built using rollup and copied to $root_gen_dir.
CSS files are imported using a custom rollup plugin that transforms CSS into a CSSStyleSheet. Only use CSS imports in the bundle entrypoint.
inspector_overlay_resources.grd file is copied as well and it defines how modules are packaged in a .pak file.
The Chromium build uses inspector_overlay_resources.grd and produces a .pak file.
inspector_overlay_agent.cc extracts the modules and inlines them onto the overlay page.

Inspector overlay constraints

Inspector overlay resources are packaged into a single JS file, and, therefore, require all resources like CSS or images to be bundled into JS files. Unlike DevTools themselves, inspector overlay does not have an ability to handle dynamic number of resources because it does not have an embedded server. The backend references a particular bundle using a generated static resource ID. Therefore, inspector overlay is using a custom rollup plugin to bundle CSS and that approach should not be used in DevTools itself because importing CSS this way is not standard and DevTools does not require bundling CSS in JS.

Local Development

To iterate on the overlay UI locally, start a web server in the root folder and open one of the debug/*.html files.

For example:

python -m SimpleHTTPServer 8000
Go to http://localhost:8000/inspector_overlay/debug/tool_highlight_top_arrow.html
Run autoninja -C out/Default to rebuild.

In this mode, JS modules will be served without bundling.

Importing modules from DevTools

It's possible to re-use modules from DevTools for the overlay implementation. To import a module, use the import statement with a relative path to the module. It's important to keep the size of the shipped overlay modules minimal so it's better to include only small standalone utilities. The build tooling will also check the size of the generated modules and notify you if they are too big.

Tests

Overlay modules can be unit tested like other parts of DevTools. For an example, see test/unittests/front_end/inspector_overlay/common_test.ts.

Lifecycle of the overlay

When the backend installs an overlay bundle, it installs a global InspectorOverlayHost object that allows the overlay to communicate with the backend. Then it makes the following calls in order:

setPlatform('windows'|'mac'|'linux'|'other') to notify the overlay about the current platform.
setOverlay(toolName) to notify the overlay about what tool is currently enabled.

Then when the overlay is being painted, the following calls are made by the backend:

reset(params) to notify the overlay about actual params of the page such as viewport size, device scale factor and others.
Invokes tool-specific methods such as drawHighlight.

In the overlay code, these calls are received through a global dispatch(methodName, ...args) function.

3.0 KiB Raw Blame History