Google Git
Sign in
chromium / devtools / devtools-frontend / 54daf0889b1eef0e54bd11a46830d8914f7e3886
commit54daf0889b1eef0e54bd11a46830d8914f7e3886[log] [tgz]
authorCollin Baker <[email protected]>Fri May 17 21:26:07 2019
committerCommit Bot <[email protected]>Fri May 17 21:26:07 2019
treee1db037e962e45977187dacb7dc5e6c8acf0293c
parent227bcf368194eba35dd1bab38784bfe6ef06bfd7 [diff]
Revert "DevTools: Make Settings Blackboxing Pane Accessible"

This reverts commit b8296ec2e06868d1365a61bbf0f283e297682252.

Reason for revert: reverting to allow revert @ crrev.com/c/1618170

Original change's description:
> DevTools: Make Settings Blackboxing Pane Accessible
> 
> This change provides fixes for these issues:
> Problem: The content title was heading role
> Fix: Added heading role of level 1
> Problem: Aria-label was missing in drop-downs
> Fix: Added aria-label in drop-downs
> 
> Tested keyboard navigation
> - navigate up/down drop-down items using arrow keys
> - Checkbox is checked/unchecked using space bar
> - Tab into/out (no tab traps)
> 
> Tested screen reader
> - reads checkbox label
> - reads items selected from the drop down list
> 
> Bug: 963183
> 
> Change-Id: Iaab2dd37323427215f765b3d7bbef885861c210f
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1605506
> Commit-Queue: Chandani Shrestha <[email protected]>
> Reviewed-by: Joel Einbinder <[email protected]>
> Cr-Commit-Position: refs/heads/master@{#660991}

[email protected],[email protected],[email protected],[email protected],[email protected],[email protected],[email protected]

Change-Id: I043b25bb968124defd01edd2058bb2603bc1e386
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 963183
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1618026
Reviewed-by: Collin Baker <[email protected]>
Commit-Queue: Collin Baker <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#661029}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: a25e20c256ea242b295b9f808e5a57bfd5629db1
1 file changed
tree: e1db037e962e45977187dacb7dc5e6c8acf0293c
  1. front_end/
  2. scripts/
  3. services/
  4. .clang-format
  5. .eslintignore
  6. .eslintrc.js
  7. .gitignore
  8. .npmignore
  9. .style.yapf
  10. BUILD.gn
  11. htaccess
  12. LICENSE
  13. OWNERS
  14. package.json
  15. PRESUBMIT.py
  16. protocol.json
  17. readme.md
readme.md

Chrome DevTools frontend

NPM package

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

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

Package versioning

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.

Source code

The frontend is available through a git subtree mirror on chromium.googlesource.com, with a regularly updating GitHub mirror at github.com/ChromeDevTools/devtools-frontend. The codebase's true location is in third_party/blink/renderer/devtools/ in Chromium's git repo.

Getting Started

  1. Clone the repo
  2. Go to repo root and run: npm start
    • This launches Chrome Canary and starts the dev server with 1 command
  3. Go to http://localhost:9222#custom=true&experiments=true

Power user tips:

You can customize the port for the dev server: e.g. PORT=8888 npm start.

You can also launch chrome and start the server separately:

  • npm run chrome
  • npm run server

When you start Chrome separately, you can pass extra args to Chrome:

npm run chrome -- https://news.ycombinator.com

(e.g. this launches Hacker News on startup)

If you want to reset your development profile for Chrome, pass in “--reset-profile”:

npm start -- --reset-profile

OR

npm run chrome -- --reset-profile

Hacking

Useful Commands

Simpler npm commands w/ dtrun

If you want to run these npm commands anywhere in the chromium repo (e.g. in chromium/src), you'll want to setup our dtrun CLI helper.

One-time setup:

npm run setup-dtrun

Now, you can use any of the following commands by simply doing: dtrun test.

In addition, you no longer need to pass double dashes (e.g. --) before you pass in the flags. So you can do: dtrun test -d inspector/test.html.

npm run format

Formats your code using clang-format

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

npm test

Builds devtools and runs all inspector/devtools web tests.

Note: If you're using a full chromium checkout and compiled content shell in out/Release, then npm test uses that. Otherwise, with only a front-end checkout (i.e. cloning from GitHub), then npm test will fetch a previously compiled content shell from the cloud (and cache it for future test runs).

npm test basics

# run specific tests
npm test -- inspector/sources inspector/console

# debug a specific test. Any one of:
npm run debug-test inspector/cookie-resource-match.html
npm test -- --debug-devtools inspector/cookie-resource-match.html 
npm test -- -d inspector/cookie-resource-match.html 

# pass in additional flags to the test harness
npm test -- -f --child-processes=16

# ...for example, use a higher test timeout
npm test -- --time-out-ms=6000000 <test_path>

Tip: Learn about the test harness flags

--fetch-content-shell

# If you're using a full chromium checkout and have a compiled content shell, 
# this will fetch a pre-compiled content shell. This is useful if you 
# haven't compiled your content shell recently
npm test -- --fetch-content-shell

--target=SUB_DIRECTORY_NAME

# If you're using a build sub-directory that's not out/Release, 
# such as out/Default, then use --target=SUB_DIRECTORY_NAME
npm test -- --target=Default

Development

Getting in touch