BramusSep 29

Although it’s not a core task of my role as Chrome DevRel, I took the time to build something that I needed into DevTools: debugging support for CSS `@starting-style` rules.

The feature is ready for testing in Chrome Canary.

Show threadBramusSep 29

The design I went for is detailed in https://goo.gle/devtools-starting-style-debugging-design and differs a bit from how other browsers approach this problem.

(See next messages)

[Design] @starting-style debugging in the Styles Tab

@starting-style debugging Attention: Externally visible, non-confidential Author: Status: Short Link: go/chrome-devtools:starting-style-debugging-design or https://bit.ly/devtools-starting-style-debugging-design Created: / Last Updated: One-page overview Summary Give authors control o...

Google Docs
Show threadBramusSep 29

1. I expect **correctness** from DevTools, and have it show only what you are actively seeing on the screen.

When inspecting a square in https://codepen.io/bramus/pen/MWPLgjy , we don’t show the `@starting-style { background-color: yellow }` rule by default because that doesn't match the state on the page.

Show threadBramusSep 29

2. To easily **discover** elements that are affected by a `@starting-style` rule, a new pill is shown next in the elements tree.

We chose using this adorner over tucking it away in the `:hov` panel, because that one is collapsed by default.

Show threadBramus

3. To allow you to **inspect and edit** these `@starting-style`s, you can click the pill to force the element into its `@starting-style`-state.

The element will be painted with its `@starting-style` rules applied, and DevTools will therefore also shows those style rules.

Sep 29 at 2:41pmWeb
Show threadBramusSep 29
You can try out the feature in Chrome Canary by launching Canary with the `--enable-features=DevToolsStartingStyleDebugging` CLI flag, or by flipping on “DevTools @starting-style debugging” through `chrome://flags`.
Show threadBramusSep 29
If you find a bug, have a demo where it’s not working as you’d expect it to work, or have feedback about this in general: feel free to reach out to me here (DM) or file a Chromium bug.
Show threadBramusSep 29
Thanks go out to pfaffe and alexrudenko on the DevTools team, and futhark on the Style team for guiding me through this 🙏
Show threadBramusOct 21

UPDATE: I flipped the flag on this one today and it’s now enabled by default. Expect it in tomorrow’s Chrome Canary build.

(If you can’t wait to try it out, you can manually flip the flag in today’s Canary/Beta/Dev builds. Go to chrome://flags and look for starting-style)

Show threadAdam ArgyleSep 29
@bramus nice, badge strategy works great!