Plus Button (3/3): wire feature into drawer + main panel tab strips

Gate `createTabbedLocation`'s plus-button install and the drawer's
legacy three-dot more-tabs button on `hostConfig.devToolsPlusButton`
so the panel tab strip and the drawer get the plus button when the
`DevToolsPlusButton` base::Feature is enabled.

- ViewManager: install the plus button before `appendApplicableItems`
  so the first layout pass reserves its width.
- InspectorDrawerView: drop the legacy more-tabs button when the plus
  button is on; hide the slotted button when the drawer is vertically
  minimized via the existing `.hide-element` container.
- Distinguish jslog contexts per surface
  (`plus-button-panel` / `plus-button-drawer`) and register both in
  `KnownContextValues`.
- Add unit tests for symmetric same-titled-tab dedup and the
  vertical-minimized hide, plus an e2e suite covering both surfaces
  and the per-surface jslog assertion.

Related:
  Prototype: https://crrev.com/c/7792390
  CL1: https://crrev.com/c/7814020
  CL2: https://crrev.com/c/7846805
  Chromium enum: https://crrev.com/c/7853628
  Chromium feature param: https://crrev.com/c/7857037
  Chromium flags: https://crrev.com/c/7883967

Bug: 506004822
Change-Id: I258f1188ab334149b8414c7855390d1c7f1a96df
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7882040
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Guangyue Xu <guangyue.xu@microsoft.com>
8 files changed
tree: 108f90b5d336276a458f8ec0729d318df1612cdf
  1. .agents/
  2. .gemini/
  3. .github/
  4. .vscode/
  5. build_overrides/
  6. config/
  7. docs/
  8. extension-api/
  9. extensions/
  10. front_end/
  11. inspector_overlay/
  12. mcp/
  13. node_modules/
  14. scripts/
  15. test/
  16. third_party/
  17. v8/
  18. .clang-format
  19. .clang-format-ignore
  20. .editorconfig
  21. .env.template
  22. .geminiignore
  23. .git-blame-ignore-revs
  24. .gitallowed
  25. .gitattributes
  26. .gitignore
  27. .gitmodules
  28. .gn
  29. .mailmap
  30. .npmignore
  31. .npmrc
  32. .style.yapf
  33. .stylelintignore
  34. .stylelintrc.json
  35. AUTHORS
  36. BUILD.gn
  37. codereview.settings
  38. CONTRIBUTING.md
  39. DEPS
  40. DIR_METADATA
  41. eslint.config.mjs
  42. favicon.ico
  43. LICENSE
  44. OWNERS
  45. package-lock.json
  46. package.json
  47. PRESUBMIT.py
  48. README.md
  49. SECURITY.md
  50. WATCHLISTS
README.md

Chrome DevTools frontend

npm package

The client-side of the Chrome DevTools, including all TypeScript & CSS to run the DevTools webapp.

Source code and documentation

The frontend is available on chromium.googlesource.com. Check out the Chromium DevTools documentation for instructions to set up, use, and maintain a DevTools front-end checkout, as well as design guidelines, and architectural documentation.

Source mirrors

DevTools frontend repository is mirrored on GitHub.

DevTools frontend is also available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES modules, so consuming this package in other tools may require some effort.

The version number of the npm package (e.g. 1.0.373466) refers to the Chromium commit position of latest frontend git commit. It's incremented with every Chromium commit, however the package is updated roughly daily.

Getting in touch

There are a few options to keep an eye on the latest and greatest of DevTools development: