Removal of shadow piercing combinators/selectors affects 'allow custom UI themes' devtools experiment
Reported by
maurice....@gmail.com,
Apr 8 2017
|
|||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Steps to reproduce the problem:
The removal of /deep/ and ::shadow support is scheduled in m60 (~Aug 2017). When that happens, custom UI themes that use those selectors will no longer work.
This will severely affect the ability to customize UI for devtools.
What is the expected behavior?
What went wrong?
To continue support for this feature, the method that injects the stylesheet '_onApplyStyleSheet' should accept selectors that provide a path where the stylesheet will be injected.
Here's a working example:
Usage:
applyStyles([], styles) // injects styles into document head
applyStyles(['.console-view', '.toolbar'], styles)
// equivalent of executing document.querySelector('.console-view').shadowRoot.querySelector('.toolbar').shadowRoot.append(styles)
function applyStyles([head, ...tail], styleSheet, node) {
if (head === undefined && !tail.length) {
let styleSheet = createElement('style');
styleSheet.textContent = message.styleSheet;
if (!node) {
document.head.appendChild(styleSheet);
} else {
node.appendChild(styleSheet);
}
return
}
if (!node) node = document.querySelector('body');
let element = (node.querySelector(head) || {}).shadowRoot;
applyStyles(tail, styleSheet, element);
}
Did this work before? N/A
Chrome version: 57.0.2987.133 Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 25.0 r0
Please continue supporting this feature. I'm the author of Zero Dark Matrix (https://chrome.google.com/webstore/detail/devtools-theme-zero-dark/bomhdjeadceaggdgfoefmpeafkjhegbo). Without this change, my theme would be rendered useless.
,
Apr 12 2017
My current plan is to allow inject the theme stylesheet into every shadow root, like we do with inspectorCommon.css. Would that give you enough flexibility?
,
Apr 13 2017
I think that would work. Would this method also take care of shadow dom elements that get added/removed dynamically?
,
Jul 26 2017
Hi - is this work still planned?? Looks like Canary build no longer allows shadow piercing.
,
Jul 30 2017
Please keep this working. The number one reason for me is that I can pick DevTools themes that are easy on the eyes for long sessions. I'm a user of both the Zero Dark Matrix and Magoon themes for Chrome DevTools. (https://chrome.google.com/webstore/detail/magoon-chrome-devtools-th/aaimlcmkljmacmacanfbhfgjkahgaihm). Magoon is based on Maurice's Zero Base Themes. https://github.com/mauricecruz/zero-base-themes As are other themes. For example : s10wen.com/blog/2014/03/12/chrome-dev-tools-theming-with-zero-base-themes/ Zero Base Themes is endorsed by Mr. Chrome DevTools himself : https://twitter.com/paul_irish/status/448223255682240512
,
Aug 3 2017
Please continue to support themes. If anything, I would hope you'd improve the injection method so there is no delay. I know there's a built-in dark theme now, but all the black on orange is pretty terrible looking, plus themes like ZDM have put a lot of work into the finer details.
,
Aug 3 2017
Joel do you think you can hook up the shadow root style injection?
,
Aug 4 2017
+ 1 for the continued support of custom UI themes. I love the custom DevTools theme I'm using, and would hate to lose it.
,
Aug 7 2017
Issue 752728 has been merged into this issue.
,
Aug 9 2017
+ 1 for the continued support of custom UI themes. I love the custom DevTools theme I'm using, and would hate to lose it. This comment IS NOT Spam, just lazy and thought the comment #9 left by another user matched my feelings perfectly :)
,
Aug 9 2017
Is there an update on this? It looks like theme support has been killed in versions > 60 despite the initial promises in earlier comments here.
,
Aug 9 2017
+1 for the continued support of custom UI themes. The default chrome dark theme is "okay" but the custom themes are much, much better!
,
Aug 9 2017
+1 I use a devtools theme that makes the console and tools dark. It's far more legible for me than the standard white/light theme. I'd hate to lose this theme. :(
,
Aug 10 2017
Like #5 said: Please keep this working. The number one reason for me is that I can pick DevTools themes that are easy on the eyes for long sessions.
,
Aug 10 2017
I just saw that we can flip to a dark setting in the DevTools settings. While this is easier on the eyes than the default white, the color scheme is still not as comfortable and useful as the Zero Dark Matrix theme. I vote that we continue to have the flexibility to have custom DevTools themes.
,
Aug 10 2017
CL: https://chromium-review.googlesource.com/c/609581
,
Aug 10 2017
Thanks very much for that, to all at chromium.org and Mr Chrome DevTools.
,
Aug 10 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/be769dc175dd75910ba155af1c51043f9b277ee5 commit be769dc175dd75910ba155af1c51043f9b277ee5 Author: Paul Irish <paulirish@chromium.org> Date: Thu Aug 10 07:44:21 2017 DevTools: Custom UI themes apply inside shadow roots Bug: 709732 Change-Id: I101f9280d770ed75fc5e7dd047a2fbe6edc7976b Reviewed-on: https://chromium-review.googlesource.com/609581 Reviewed-by: Pavel Feldman <pfeldman@chromium.org> Reviewed-by: Joel Einbinder <einbinder@chromium.org> Commit-Queue: Pavel Feldman <pfeldman@chromium.org> Cr-Commit-Position: refs/heads/master@{#493321} [modify] https://crrev.com/be769dc175dd75910ba155af1c51043f9b277ee5/third_party/WebKit/Source/devtools/front_end/extensions/ExtensionServer.js [modify] https://crrev.com/be769dc175dd75910ba155af1c51043f9b277ee5/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
,
Aug 10 2017
I use the zero dark extension as I find the code highlighting much easier to read and helps with my development. Would really like to keep this if possible.
,
Aug 14 2017
,
Aug 14 2017
This bug requires manual review: M61 has already been promoted to the beta branch, so this requires manual review Please contact the milestone owner if you have questions. Owners: amineer@(Android), cmasso@(iOS), ketakid@(ChromeOS), govind@(Desktop) For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Aug 14 2017
This issue is P2 and has been exists since M57 (not an M61 regression). Also please note M61 is already in Beta and we're only taking only critical merges in. Hence, rejecting merge to M61. Please let me know if there is any concern here.
,
Aug 15 2017
Since this won't land in m61, can we mark this for inclusion in m62?
,
Aug 16 2017
Just caught up with the shadow combinator removal thread on https://bugs.chromium.org/p/chromium/issues/detail?id=489954. Looks like it's deferred to m63. So pushing it to m63 is fine as well.
,
Jan 3 2018
I'm noticing that custom stylesheets aren't getting into some widgets that are dynamically added. One in particular is the console sidebar. Could we incorporate this solution to dynamic widgets?
,
Feb 25 2018
Yeah, some elements are unstylable. Seems to be more lately, which really sucks. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by pfeldman@chromium.org
, Apr 10 2017Status: Assigned (was: Unconfirmed)