commit | 039ac407e9dfa3e809bd7716d67eeb4d71e170a5 | [log] [tgz] |
---|---|---|
author | Chandani Shrestha <chshrest@microsoft.com> | Thu Oct 17 17:33:26 2019 |
committer | Commit Bot <commit-bot@chromium.org> | Thu Oct 17 17:33:26 2019 |
tree | ef741446be4e5ac19a43f602fb3b1ad4cf1ec0b7 | |
parent | 4e9cd76f0e9248ae4f370698e15ce9ed0c853a74 [diff] |
DevTools: Make swatches screen reader accessible Screen-reader accessibility: Each palette is assigned a role button so, when user navigates to each palette it reads e.g. 'Color #3F51B5 button' This change was reviewed earlier here https://chromium-review.googlesource.com/c/chromium/src/+/1687564 which has been broken down 1. Make swatches in color palette keyboard accessible https://chromium-review.googlesource.com/c/chromium/src/+/1817344 2. Make swatches screen reader accessible https://chromium-review.googlesource.com/c/chromium/src/+/1816875 3. Make shades of a color palette keyboard accessible https://chromium-review.googlesource.com/c/chromium/src/+/1816873 4. Make close button keyboard accessible https://chromium-review.googlesource.com/c/chromium/src/+/1816874 Gif showing keyboard navigation which has been split out from this change https://imgur.com/m3iVkOj Bug: 963183 Change-Id: I244edc0cabf5aa5d6df51d3cf31efa00f64a666c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1816875 Commit-Queue: Chandani Shrestha <chshrest@microsoft.com> Reviewed-by: Yang Guo <yangguo@chromium.org> Reviewed-by: John Emau <John.Emau@microsoft.com> Cr-Original-Commit-Position: refs/heads/master@{#706983} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: 77e5b8057fc2e31439f22c0018ad7213961f5646
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.
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.
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.
npm start
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-profileOR
npm run chrome -- --reset-profile
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), thennpm 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>
--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
@ChromeDevTools on Twitter
Chrome DevTools mailing list: groups.google.com/forum/google-chrome-developer-tools
The tests are run through Karma.
python scripts/run_tests.py
You can also specify with which Chrome binary to run tests by setting the chrome-binary
variable.
python scripts/run_tests.py --chrome-binary=/path/to/chromium/build/chromium