Google Git
Sign in
chromium / devtools / devtools-frontend / f2ae96f53cec1141a6da05af1d50061fb8bc7c30
commitf2ae96f53cec1141a6da05af1d50061fb8bc7c30[log] [tgz]
authorMichael Liao <[email protected]>Mon Oct 21 19:01:04 2019
committerCommit Bot <[email protected]>Wed Oct 23 20:28:17 2019
treec589e75e52e303649e325a051a0e342cb4b096bd
parent57c1e2466dd9e21079969bfc10e27d34b99ee33c [diff]
DevTools [Layers]: Adding paint profiler link for sidepanel nodes

Re-upload of https://chromium-review.googlesource.com/c/chromium/src/+/1626027 to new repository

Issue:
- Paint profiler link is only available when selecting a node on the 3D canvas
- 3D canvas is only cursor accessible
Changes:
- Made Paint Profile tab keyboard accessible (via link and sidebar context menu)

Changing PaintProfilerLink from padding to margin (focus indicator):
https://imgur.com/a/B6kATQS

Bug: 963183
Change-Id: I79498b210539f9c2c8a114ef323f66f8baf61b92
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1872877
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Michael Liao <[email protected]>
7 files changed
tree: c589e75e52e303649e325a051a0e342cb4b096bd
  1. build_overrides/
  2. docs/
  3. front_end/
  4. node_modules/
  5. scripts/
  6. test/
  7. third_party/
  8. v8/
  9. .clang-format
  10. .eslintignore
  11. .eslintrc.js
  12. .gitignore
  13. .gn
  14. .npmignore
  15. .style.yapf
  16. BUILD.gn
  17. DEPS
  18. ENG_REVIEW_OWNERS
  19. htaccess
  20. karma.conf.js
  21. LICENSE
  22. OWNERS
  23. package.json
  24. PRESUBMIT.py
  25. protocol.json
  26. README.md
  27. tsconfig.json
README.md

Chrome DevTools frontend

NPM package

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

Source code

The frontend is available on chromium.googlesource.com.

Getting Started (Standalone)

As standalone project, Chrome DevTools front-end can be checked out and built independently from Chromium.

Checking out source

Get depot_tools first.

mkdir devtools
cd devtools
git clone https://chromium.googlesource.com/devtools/devtools-frontend
gclient config https://chromium.googlesource.com/devtools/devtools-frontend --unmanaged

Build

cd devtools-frontend
gclient sync
gn gen out/Default
autoninja -C out/Default

Run in Chromium (from M79 onwards)

To run the production build, use

<path-to-chrome>/chrome --custom-devtools-frontend=file://$(realpath out/Default/resources/inspector)

To run the debug build (directly symlinked to the original unminified source files), build both Chromium and DevTools frontend with the GN flag debug_devtools=true, and use

<path-to-chrome>/chrome --custom-devtools-frontend=file://$(realpath out/Default/resources/inspector/debug)

Getting Started (as part of Chromium)

DevTools frontend can also be developed as part of Chromium.

Follow instructions to check out Chromium. DevTools frontend can be found under chromium/src/third_party/devtools-frontend/src/.

Build as part of Chromium

Refer to instructions to build Chromium. To only build DevTools frontend, use devtools_frontend_resources as build target.

Integrate standalone DevTools into Chromium

Change your working directory to the integrated DevTools frontend:

cd path/to/chromium/src/third_party/devtools-frontend/src

Add standalone DevTools frontend as remote:

git remote add standalone file://path/to/devtools/devtools-frontend/
git fetch standalone
git checkout standalone/branch-of-your-choice

Hacking

Useful Commands

npm run format-py

Formats your Python code using yapf

Note: Yapf is a command line tool. You will have to install this manually, either from PyPi through pip install yapf or if you want to enable multiprocessing in Python 2.7, pip install futures

Development

NPM package

DevTools frontend is available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES2015 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