Canary stops supporting shadow piercing combinators? about chrome-devtools-zerodarkmatrix-theme HOT 17 CLOSED

Simple enough. Hopefully they don't screw the pooch on this one. Glad you brought the issue to their attention early. It has a lot better shot of getting resolved before landing in stable, thanks to you.

from chrome-devtools-zerodarkmatrix-theme.

Yup they finally removed support for shadow piercing combinators. I filed an issue awhile ago and it seemed like they intended to keep supporting custom UI themes in some way, but it's been pretty radio silent. Might want to star it to bump it up in queue.

The only hack I can think of right now is to open up the devtool's devtools and run a script to inject the theme into all the shadow roots.

It'll be a pain in the ass and doesn't solve for shadow dom elements that don't exist yet. But yea, that's all I've got so far. 😞

from chrome-devtools-zerodarkmatrix-theme.

Might want to star it to bump it up in queue.

Done. The initial response seemed pretty positive, so hopefully it wasn't BS.

I'm a fan of ZDM, but I've also sporadically side-loaded it with different personal stylesheets. Mostly I'm not crazy about the peach in the html. Anyway, I just recently wasted a bunch of time making a new one specifically to only affect the native dark theme and fix some of its fugliness. I went to check it in Canary, and it barely worked at all.

I use the /deep/ combinator because I'm lazy, so I figured I'd check yours since you use ::shadow IIRC. Yours didn't work either. I should've checked first, because I wouldn't have wasted my time on something that's not gonna work in a couple/few months.

Here's what I came up with, if you're curious (it only affects the dark theme):

https://sabercathost.com/hy8X/DevTools_Dark_Theme_Fixed_(2).zip

If the changes are made as you suggested, will the code with combinators continue to work, or will it need to be altered?

from chrome-devtools-zerodarkmatrix-theme.

Thanks!

If the changes are made as you suggested, will the code with combinators continue to work, or will it need to be altered?

All shadow piercing selectors are pretty much dead so they'll have to be altered in some fashion. Deleting any instance of /deep/ or ::shadow may do the trick.

from chrome-devtools-zerodarkmatrix-theme.

I can't manage it to work anymore. Any solutions ?

from chrome-devtools-zerodarkmatrix-theme.

@thefunkyjoint - If you're on Chrome version > 60, the theme won't work anymore. There's a bug filed to fix this. Star the issue to stay in the loop - https://bugs.chromium.org/p/chromium/issues/detail?id=709732

from chrome-devtools-zerodarkmatrix-theme.

They're going to continue support for custom UI themes. Thanks to everyone that starred the issue!

from chrome-devtools-zerodarkmatrix-theme.

Hey @mauricecruz

I just updated to v62. I'm a bit confused, and figure you've been fixing your CSS already, so you may have some insight. I saw your announcement that combinators cause performance issues with the new injection method, which I noticed right off the bat.

My interpretation was that combinators weren't gonna work at all anymore, and that the new injection method would pierce all the shadow DOMs automatically. This appears to be very limited and buggy unless I'm missing something.

Since I used /deep/, I figured removing all instances of it would do the trick, but it doesn't really. First off, the injection method doesn't seem to allow for parent elements in "parent" shadow DOMs for selectors, which is pretty shitty. I used the dark theme selector as a parent throughout the entire code so that the CSS only affected the dark theme. I also sometimes used multiple /deep/ combinators to have different CSS for selectors based on panels, like:

.-theme-with-dark-background /deep/ .panel.security /deep/ .tree-outline li.selected .selection

Parents in previous shadow DOMs don't seem to work in the new injection method, and on top of that random CSS appears to fail even with no parental issues, like:

input[type="checkbox"] {
    filter: invert(1);
}

does nothing, but if I re-add the combinator (which aren't supposed to work), the code works. I don't get why combinators are working at all, or why some code fails without them, or why devtools eats up CPU and slows to a crawl with too many of them. Are we supposed to use them for the code where they are still required, and hope not to reach the magic limit where performance is borked? Am I missing something? Have you figured out anything useful so far?

from chrome-devtools-zerodarkmatrix-theme.

Seems there is no magic number. Performance just gets incrementally worse the more combinators you use. I got everything working again by getting rid of the first instance of .-theme-with-dark-background /deep/ used in all selectors, but leaving the others, like:

.-theme-with-dark-background /deep/ .panel.security /deep/ .tree-outline li.selected .selection

is now:

.panel.security /deep/ .tree-outline li.selected .selection

This reduced the number of combinators used from 205 to 51, almost exactly 1/4. At 205, devtools were practically unusable, freezing with a CPU spike for 5-10 seconds when opening/loading any changes. Now, it's pretty much a quarter of that, freezing for a second or two. Nowhere near as bad, but I still don't want to use them like this. I've got a pretty decent i7, so I imagine the same code on a weaker processor would be far worse.

Still very interested to know what you've figured out about it so far.

from chrome-devtools-zerodarkmatrix-theme.

On vacation right now so won't get to a lengthy response for about another week. Essentially, you need to remove all /deep/ and ::shadow selectors because they're no longer effective.

Custom css gets injected into every shadow dom root. There's alot of them, so keeping the selector chain short is crucial.

Leverage the :host and :host-context combinators to apply style to specific shadow roots.

from chrome-devtools-zerodarkmatrix-theme.

Appreciate you pointing me in the right direction. I'll see what luck I have with those combinators sometime soon, and post the results here. If I'm still begging for help, hopefully you'll take pity when you get back.

Thanks, and enjoy your vacation!

from chrome-devtools-zerodarkmatrix-theme.

Thanks! Check my zero base themes repo for implementation examples.

from chrome-devtools-zerodarkmatrix-theme.

Got it all working for the most part. For the sake of anyone in the future searching for syntax help, using the example I posted above, you can combine combinators like this:

:host-context(.-theme-with-dark-background):host-context(.security) .tree-outline li.selected .selection

Still one element that won't cooperate, no matter what I try. I'm convinced it's a bug, but maybe you can prove otherwise whenever you get around to it. I'm inverting checkboxes with:

:host-context(.-theme-with-dark-background) input[type="checkbox"] {
    filter: invert(1)!important;
}

All checkboxes are inverted, except for the ones in the element panel sidebar dropdown for pseudo-element states:

I've tried every variation of selector I can think of, and the only way it works is by still using /deep/. The normal selector above should work, and it does for all other checkboxes, so I'm assuming there's an issue with the new injection method.

from chrome-devtools-zerodarkmatrix-theme.

You back around? Wonder if you can shed any light on why those particular checkboxes (above pic) refuse to cooperate. I never figured it out.

If it helps for easier testing, it works with the built-in dark theme enabled:

DevTools Dark Theme Fixed.zip

from chrome-devtools-zerodarkmatrix-theme.

@narcolepticinsomniac - hey sorry for the delay. Got swept up with work and holidays.

Hmm so I'm beginning to notice that the theme styles don't get injected into all the shadow roots. Dynamic ones in particular. Which I think includes the element state dropdowns.

In those shadow dom nodes, I don't see the custom theme styles in there.

from chrome-devtools-zerodarkmatrix-theme.

@mauricecruz I missed your response here. There's definitely some flaws. Have you reported an issue yet? Seems like Paul Irish would likely be willing to fix it if he was made aware.

from chrome-devtools-zerodarkmatrix-theme.

Hmm so I'm beginning to notice that the theme styles don't get injected into all the shadow roots

This is getting worse, no? In v64, The dock/undock/side-dock buttons in the dropdown seem to be unstylable.

from chrome-devtools-zerodarkmatrix-theme.