[go: nahoru, domu]
Google Git
Sign in
chromium / devtools / devtools-frontend / f4de8bffbcc6dc1a274c8fd2ee367c2de053ead7 / . / inspector_overlay
tree: dd68902503e7f4cdca7437a39eacbffb0ef94b1f [path history] [tgz]
  1. debug/
  2. BUILD.gn
  3. common.css
  4. common.js
  5. css_grid_label_helpers.js
  6. highlight_common.js
  7. highlight_grid_common.js
  8. loadCSS.rollup.js
  9. OWNERS
  10. README.md
  11. resources.grd
  12. tool_distances.ts
  13. tool_distances_impl.ts
  14. tool_highlight.css
  15. tool_highlight.js
  16. tool_highlight_grid.css
  17. tool_highlight_grid.js
  18. tool_highlight_grid_impl.js
  19. tool_highlight_impl.js
  20. tool_paused.css
  21. tool_paused.js
  22. tool_paused_impl.js
  23. tool_screenshot.css
  24. tool_screenshot.js
  25. tool_screenshot_impl.js
  26. tool_source_order.css
  27. tool_source_order.ts
  28. tool_source_order_impl.ts
  29. tool_viewport_size.js
  30. tool_viewport_size_impl.js
inspector_overlay/README.md

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.