Google Git
Sign in
chromium / devtools / devtools-frontend / 72f885bd4df9e2450146e85618f2756500a0e704
commit72f885bd4df9e2450146e85618f2756500a0e704[log] [tgz]
authorChanghao Han <changhaohan@chromium.org>Tue Jun 02 13:27:10 2020
committerCommit Bot <commit-bot@chromium.org>Tue Jun 02 13:46:50 2020
tree1ce99d3e8598ca8e6eefab4b595b83531276ab2b
parentb358e5fae987967b02dc3819f9076e9b705ae256 [diff]
Add ARIA support to adorner interactions with minor optimizations

Adorner interactions did not have proper ARIA support. This CL adds
ARIA support to simulate adorners as buttons. It also addsoptions to
simulate adorners as toggle buttons with proper ARIA setup.

Bug: chromium:1066772, chromium:1047356
Change-Id: Iab358bec713704c2a80600f8f47dcccc70ec68eb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2226557
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
2 files changed
tree: 1ce99d3e8598ca8e6eefab4b595b83531276ab2b
  1. back_end/
  2. build_overrides/
  3. docs/
  4. front_end/
  5. node_modules/
  6. scripts/
  7. test/
  8. third_party/
  9. v8/
  10. .clang-format
  11. .editorconfig
  12. .eslintignore
  13. .eslintrc.js
  14. .gitattributes
  15. .gitignore
  16. .gn
  17. .npmignore
  18. .npmrc
  19. .style.yapf
  20. .stylelintignore
  21. .stylelintrc.json
  22. AUTHORS
  23. BUILD.gn
  24. COMMON_OWNERS
  25. DEPS
  26. DESIGN_GUIDELINES.md
  27. ENG_REVIEW_OWNERS
  28. htaccess
  29. INFRA_OWNERS
  30. LICENSE
  31. LIGHTHOUSE_OWNERS
  32. OWNERS
  33. package-lock.json
  34. package.json
  35. PRESUBMIT.py
  36. protocol.json
  37. README.md
  38. tsconfig.base.json
  39. tsconfig.json
  40. WATCHLISTS
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.

Design Guidelines

Please be aware that DevTools follows additional development guidelines.

Issue triage

The issue triage guidelines can be found here.

Workflows

In order to make changes to DevTools frontend, build, run, test, and submit changes, several workflows exist. Having depot_tools set up is a common prerequisite.

Integrate standalone checkout into Chromium (strongly recommended)

This workflow will ensure that your local setup is equivalent to how Chromium infrastructure tests your change. It also allows you to develop DevTools independently of the version in your Chromium checkout. This means that you don't need to update Chromium often, in order to work on DevTools.

Remove Existing devtools-frontend subrepository

In chromium/src, run gclient sync to make sure you have installed all required submodules.

gclient sync

Then, disable gclient sync for DevTools frontend inside of Chromium by editing .gclient config. From chromium/src/, simply run

vim $(gclient root)/.gclient

In the custom_deps section, insert this line:

"src/third_party/devtools-frontend/src": None,

Then run

gclient sync -D

This removes the DevTools frontend dependency. We now create a symlink to refer to the standalone checkout (execute in chromium/src and make sure that third_party/devtools-frontend exists):

(Note that the folder names do NOT include the trailing slash)

Workflow 1: separate gclient projects

Now, There are 2 approaches to integrating your workflows: The first approach is to have separate gclient projects, one for each repository, and manually symlink between the two

Running gclient sync in chromium/src/ will update dependencies for the Chromium checkout. Running gclient sync in chromium/src/third_party/devtools-frontend/src will update dependencies for the standalone checkout.

Workflow 2: a single gclient project

The second approach is to have a single gclient project that automatically gclient sync's all dependencies for both repositories

solutions = [
  {
    # Chromium src project
    "url": "https://chromium.googlesource.com/chromium/src.git",
    "managed": False,
    "name": "src",
    "custom_deps": {
      "src/third_party/devtools-frontend/src": None,
    },
    "custom_vars": {},
  },
  {
    # devtools-frontend project
    "name": "devtools-frontend",
    "url": "https://chromium.googlesource.com/devtools/devtools-frontend",
    "custom_deps": {}
  }
]

Run gclient sync once in chromium/src/ to get the new devtools frontend checkout.

Running gclient sync anywhere within chromium/src/ or chromium/src/third_party/devtools-frontend/src will update dependencies for both checkouts.

Automatic Symlink

To automatically symlink between the devtools-frontend and chromium/src, you can add the following hook to your .gclient file that manages your chromium/src repository after your list of solutions

hooks = [
  {
    # Ensure devtools is symlinked in the correct location on every gclient sync
    'name': 'Symlink Depot Tools',
    'pattern': '.',
    'action': [
        'python',
        '<path>/<to>/devtools-frontend/scripts/deps/ensure_symlink.py',
        '<path>/<to>/chromium/src',
        '<path>/<to>/devtools-frontend'
    ],
  }
]

Now, running gclient sync -D will no longer remove your symlink.

Standalone workflow

As a standalone project, Chrome DevTools frontend can be checked out and built independently from Chromium. The main advantage is not having to check out and build Chromium. However, there is also no way to run layout tests in this workflow.

Checking out source

To check out the source for DevTools frontend only, follow these steps:

mkdir devtools
cd devtools
fetch devtools-frontend
Build

To build, follow these steps:

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

The resulting build artifacts can be found in out/Default/resources/inspector.

Update to latest

To update to latest tip of tree version:

git fetch origin
git checkout origin/master
gclient sync
Run in Chromium

These steps work with Chromium 79 or later. To run the production build, use

(Requires brew install coreutils on Mac.)

<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)

You can inspect DevTools with DevTools by undocking DevTools and then open the developers tools (F12 on Windows/Linux, Cmd+Option+I on Mac).

Obsolete debugging setup - not recommended

Before the introduction of --custom-devtools-frontend, you could also set a GN flag on your Chromium build called debug_devtools. This flag is replaced by --custom-devtools-frontend and you are strongly recommended to use the new runtime binary flag, in favor of the Chromium GN flag. debug_devtools is only used when debugging layout tests living in Chromium and will be removed once that is no longer required.

Test

Test are available by running scripts in scripts/test/.

Create a change

Usual steps for creating a change work out of the box.

Managing dependencies

Note that this will only work with the above two workflows

  • To sync dependencies from Chromium to DevTools frontend, use scripts/deps/roll_deps.py && npm run generate-protocol-resources.

The following scripts run as AutoRollers, but can be manually invoked if desired:

  • To roll the HEAD commit of DevTools frontend into Chromium, use scripts/deps/roll_to_chromium.py.
  • To update DevTools frontend's DEPS, use roll-dep.

Chromium workflow (discouraged)

DevTools frontend can also be developed as part of the full Chromium checkout. This workflow can be used to make small patches to DevTools as a Chromium engineer. However, it is different to our infrastructure setup and how to execute general maintenance work.

Checking out source

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

Build

Refer to instructions to build Chromium. To only build DevTools frontend, use devtools_frontend_resources as build target. The resulting build artifacts for DevTools frontend can be found in out/Default/resources/inspector.

Consider building with the GN flag debug_devtools=true to symlink to the original unminified source.

Run

Run Chrome with DevTools frontend bundled:

out/Default/chrome
Test

Test are available by running scripts in third_party/devtools-frontend/src/scripts/test/. After building content shell, we can also run layout tests that are relevant for DevTools frontend:

autoninja -C out/Default content_shell
third_party/blink/tools/run_web_tests.py http/tests/devtools
Create a change

Usual steps for creating a change work out of the box, when executed in third_party/devtools-frontend/src/.

Testing

Please refer to the overview document. The current test status can be seen at the test waterfall.

Additional references

Merges and Cherry-Picks

Merge request/approval is handled by Chromium Release Managers. DevTools follows The Zen of Merge Requests. In exceptional cases please get in touch with hablich@chromium.org.

Step-by-step guide on how to merge:

  1. Request and receive approval to merge
  2. Backmerges are done to the chromium/xxxx (e.g. chromium/3979) branch respectively on the DevTools frontend repo
  3. Use Omahaproxy to find out what branch a major Chromium version has (column true_branch). Open the to-be-merged commit in Gerrit e.g. Example
  4. Click hamburger menu on the top right and select Cherry Pick
  5. Select branch to merge to e.g. chromium/3968
  6. Cherry Pick CL is created e.g. Example
  7. Get it reviewed if necessary
  8. Click hamburger menu on the cherry pick CL and select Submit
  9. Done

Useful Commands

git cl format --js

Formats all code using clang-format.

npm run check

Runs all static analysis checks on DevTools code.

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 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