commit | 966040b2c0bcb237726b6aff0e415e9e89b0f077 | [log] [tgz] |
---|---|---|
author | Jack Lynch <jalyn@microsoft.com> | Thu Apr 23 20:11:44 2020 |
committer | Commit Bot <commit-bot@chromium.org> | Thu Apr 23 22:01:51 2020 |
tree | eea91464c6005e6b9df88934e1dd11f7b4c80202 | |
parent | e1767ded36b942ee86f6a91df35524379fd095c1 [diff] |
Add chords to the DevTools This CL adds the ability to bind actions to a sequence of two keypresses, rather than just one (e.g. Ctrl+K Ctrl+O). VS Code refers to these as chords [1]. As we move forward with custom keyboard shortcuts, it's necessary to implement chords in the DevTools so that users can match their shortcuts to editor shortcuts that use chords or assign custom chords. This CL also adds a Ctrl+K Ctrl+S shortcut to open the shortcuts settings for testing purposes, but I plan to remove that shortcut before landing this change. It will return later as part of the VS Code editor preset. My implementation of chords here is focused on two-keypress shortcuts, e.g. Ctrl+K Ctrl+Shift+Q would be a valid chord but Ctrl+K Ctrl+K Ctrl+O would not be because it has three parts. Limiting chords to two parts simplifies the implementation and matches a similar restriction in VS Code. Although other editors like vim and Atom allow shortcuts of arbitrary length, that's not really a feature that users have asked for and it would introduce extra complexity into ShortcutRegistry for questionable gain. However, the new structure of ShortcutRegistry leaves open the possibility of enabling arbitrary-length shortcuts in the future. ShortcutRegistry's approach to handling a key has been changed as follows: If a keypress comprises only modifiers (e.g Ctrl+Shift), then it's ignored. The DevTools already disallow modifier-only shortcuts, so this change just prevents modifiers from clearing the chord timeout. If the first half of a chord has been pressed within the timeout (currently 1000ms), then clear the timeout and try to execute the current key as the second half of a chord. If that isn't a valid chord, then try to execute both keys as separate shortcuts in sequence. If there isn't an active timeout and the keypress is potentially the first part of a chord, then set _activePrefixKey and _activePrefixTimeout. If the timeout expires without a second key being pressed, attempt to handle the keypress as an individual shortcut. If the keypress isn't potentialy the first part of a chord and there isn't an active timeout, then it will be handled as normal. There were a few shortcuts handled outside of ShortcutRegistry (e.g. sources.rename, debugger.toggle-breakpoint) that made the assumption that checking the key of a single event was enough to determine whether it matched a shortcut, so that flow has been reworked to centralize all shortcut-matching in ShortcutRegistry.handleKey(). Custom shortcuts design doc: https://docs.google.com/document/d/1oOPSWPxCHvMoBZ0Fw9jwFZt6gP4lrsrsl8DEAp-Hy7o/edit [1] https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-rules Bug: 174309 Change-Id: I1b3f384d7c65e41d0dbc5e32854fb331e052823f Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2125620 Commit-Queue: Jack Lynch <jalyn@microsoft.com> Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.
The frontend is available on chromium.googlesource.com.
Please be aware that DevTools follows additional development guidelines.
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.
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.
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)
ln -s path/to/standalone/devtools-frontend third_party/devtools-frontend/src
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.
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.
To check out the source for DevTools frontend only, follow these steps:
mkdir devtools cd devtools fetch devtools-frontend
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
.
To update to latest tip of tree version:
git fetch origin git checkout origin/master gclient sync
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).
Test are available by running scripts in scripts/test/
.
Usual steps for creating a change work out of the box.
scripts/deps/roll_deps.py && npm run generate-protocol-resources
.The following scripts run as AutoRollers, but can be manually invoked if desired:
scripts/deps/roll_to_chromium.py
.roll-dep
.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.
Follow instructions to check out Chromium. DevTools frontend can be found under third_party/devtools-frontend/src/
.
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 Chrome with DevTools frontend bundled:
out/Default/chrome
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
Usual steps for creating a change work out of the box, when executed in third_party/devtools-frontend/src/
.
Please refer to the overview document. The current test status can be seen at the test waterfall.
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:
git cl format --js
Formats all code using clang-format.
npm run check
Runs all static analysis checks on DevTools code.
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.
All devtools commits: View the log or follow @DevToolsCommits on Twitter
All open DevTools tickets on crbug.com
File a new DevTools ticket: new.crbug.com
Code reviews mailing list: devtools-reviews@chromium.org
@ChromeDevTools on Twitter
Chrome DevTools mailing list: groups.google.com/forum/google-chrome-developer-tools