Google Git
Sign in
chromium / devtools / devtools-frontend / 1cb771bfe063f93c17d4efbb4615c04716a6aa8f / . / front_end / inspector_overlay
tree: 00ca00c00faf790bcc7395497ff8bf04e1873dfe [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. OWNERS
  9. README.md
  10. resources.grd
  11. tool_distances.js
  12. tool_distances_impl.js
  13. tool_highlight.js
  14. tool_highlight_grid.js
  15. tool_highlight_grid_impl.js
  16. tool_highlight_impl.js
  17. tool_paused.js
  18. tool_paused_impl.js
  19. tool_screenshot.js
  20. tool_screenshot_impl.js
  21. tool_source_order.js
  22. tool_source_order_impl.js
  23. tool_viewport_size.js
  24. tool_viewport_size_impl.js
front_end/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.
  • 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.

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/front_end/inspector_overlay/debug/tool_highlight_top_arrow.html

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.