DevTools: Improper function call in Styles pane

A bug in the Styles pane exists due to un-followed typing within
the _setActiveProperty function. The line previous to the expression
in question goes through treeElement.property, which is a
StylePropertyTreeElement. Its property `ownerStyle` returns an
SDK.CSSStyleDeclaration. We can see that SDK.CSSStyleDeclaration is
initialized with a property `parentRule` of type SDK.CSSRule, which
is the inferred type of `rule` in the outcome of the line in question.
However, SDK.CSSRule does not contain a member function called
`selectorText()`; only SDK.CSSStyleRule does.

Ostensibly it's possible that this is of type CSSKeyframesRule or
CSSKeyframeRule, and neither of these contains meaningful definitions
of something that matches a "selector," so it isn't really practically
possible to address via polymorphism.

This corrects the value-check and only calls the function if the
rule in question is of type SDK.CSSStyleRule.

Change-Id: I960e2b49ce9734134b55007149a39a97861739dd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1872447
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Lorne Mitchell <lomitch@microsoft.com>
1 file changed
tree: d1d5f55f298e32e4f9b503bcb166d98d68fb1a11
  1. build_overrides/
  2. docs/
  3. front_end/
  4. node_modules/
  5. scripts/
  6. test/
  7. third_party/
  8. v8/
  9. .clang-format
  10. .eslintignore
  11. .eslintrc.js
  12. .gitignore
  13. .gn
  14. .npmignore
  15. .style.yapf
  16. BUILD.gn
  17. DEPS
  18. ENG_REVIEW_OWNERS
  19. htaccess
  20. karma.conf.js
  21. LICENSE
  22. OWNERS
  23. package.json
  24. PRESUBMIT.py
  25. protocol.json
  26. README.md
  27. tsconfig.json
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.

Getting Started (Standalone)

As standalone project, Chrome DevTools front-end can be checked out and built independently from Chromium.

Checking out source

Get depot_tools first.

mkdir devtools
cd devtools
git clone https://chromium.googlesource.com/devtools/devtools-frontend
gclient config https://chromium.googlesource.com/devtools/devtools-frontend --unmanaged

Build

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

Run in Chromium (from M79 onwards)

To run the production build, use

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

Getting Started (as part of Chromium)

DevTools frontend can also be developed as part of Chromium.

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

Build as part of Chromium

Refer to instructions to build Chromium. To only build DevTools frontend, use devtools_frontend_resources as build target.

Hacking

Useful Commands

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

Development

NPM package

DevTools frontend 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.

Getting in touch