[Sources Watch Expression]: Fix focus issues when editing

Issue:
- Clicking inside the watch expression edit field will unexpectedly commit the edit
- When clicking in the edit box, the underlying tree element gets selected which steals focus and triggers the edit box's blur listener

Changes:
- Adding _disableSelectFocus property and a setter inside TreeElement class which will disable focus calls in the TreeElement.select function
- WatchExpression will set its treeElement's _disableSelectFocus property to true when the expression is being edited.

Before: https://imgur.com/WHbj6Jq
After: https://imgur.com/kvEUC0r

Bug: 1205282
Change-Id: Ie8c087bc9415d7d2d93cb14c831a01df32437d24
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2895946
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
Reviewed-by: Brandon Walderman <brwalder@microsoft.com>
Reviewed-by: Jan Scheffler <janscheffler@chromium.org>
2 files changed
tree: 482b87ee957f51322bbe0b414fc104bf03506c33
  1. .vscode/
  2. build_overrides/
  3. config/
  4. docs/
  5. front_end/
  6. inspector_overlay/
  7. node_modules/
  8. scripts/
  9. test/
  10. third_party/
  11. v8/
  12. .clang-format
  13. .editorconfig
  14. .eslintignore
  15. .eslintrc.js
  16. .gitattributes
  17. .gitignore
  18. .gn
  19. .npmignore
  20. .npmrc
  21. .style.yapf
  22. .stylelintignore
  23. .stylelintrc.json
  24. ARCHITECTURE.md
  25. AUTHORS
  26. BUILD.gn
  27. DEPS
  28. LICENSE
  29. OWNERS
  30. package-lock.json
  31. package.json
  32. PRESUBMIT.py
  33. README.md
  34. tsconfig.base.json
  35. tsconfig.json
  36. 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 in docs/triage_guidelines.md.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found in docs/workflows.md.

Additional references

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