Externally loaded styles become un-editable in dev tools after hot-module-reload (HMR)
Reported by
alexande...@gmail.com,
Aug 24 2017
|
||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8
Steps to reproduce the problem:
1. Set up hot code reloading with embedded styles. Using Webpack with the style loader and a HMR setup seems to work well.
2. Open dev tools, focus on an element with styles from the loaded stylesheet. The styles defined externally on the element can be edited just fine.
3. Edit the external stylesheet and allow HMR to refresh the style tags on the webpage, updating the styles to reflect the external stylesheet.
4. Attempt to change the styles again. The style panel for that element is grayed out and you cannot change the styles
** Edit: After a bit of exploration, this has to do with any kind of editing of styles in place. **
1. Go to "about:blank"
2. Open dev tools
3. Run the following in the console: `document.write('<head><style>h1 { color: red;}</style></head><body><h1>This is my h1 element</h1></body>')`
4. Edit the style applied in the h1 selector in the <style> tag
5. Run the following in the console: `document.head.querySelector('style').innerHTML = "h1 { color: green;}"`
6. Attempt to edit the style again. No can do. It's grayed out.
What is the expected behavior?
After HMR, I expect to be able to edit the element styles with the dev tools style panel.
What went wrong?
I assume that when styles for an element are overridden by HMR, the dev tools lock out the styles for that element. It's not apparent what the reason is.
Did this work before? No
Chrome version: Google Inc. Copyright 2017 Google Inc. All rights reserved. Google Chrome 60.0.3112.101 (Official Build) (64-bit) Revision 1f3c0cf4b3083dfbe4da434af1726820cf384ce3-refs/branch-heads/3112@{#723} OS Mac OS X JavaScript V8 6.0.286.54 Flash 26.0.0.151 /Users/alexanderson1993/Library/Application Support/Google/Chrome/PepperFlash/26.0.0.151/PepperFlashPlayer.plugin User Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36 Command Line /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --flag-switches-begin --flag-switches-end Executable Path /Applications/Google Chrome.app/Contents/MacOS/Google Chrome Profile Path /Users/alexanderson1993/Library/Application Support/Google/Chrome/Default Variations 98ee9f3e-98ee9f3e 41c01ccb-ca7d8d80 241fff6c-4eda1c57 3095aa95-3f4a17df 6c43306f-ca7d8d80 7c1bc906-f55a7974 47e5d3db-3d47f4f4 d43bf3e5-bd7cd813 ba3f87da-45bda656 5ca89f9-3f4a17df f3499283-7711d854 9e201a2b-1359b0af 5b3ed0a1-3f4a17df 68812885-ca7d8d80 332a4d9b-ca7d8d80 9bd94ed7-b1c9f6b0 b791c1b8-ca7d8d80 9773d3bd-ca7d8d80 2e109477-f3b42e62 99144bc3-3cc2175e 165e16d1-3f4a17df 9e5c75f1-40093a1 f79cb77b-3d47f4f4 b7786474-d93a0620 be3b5415-bed9585 27219e67-b2047178 23a898eb-e0e2610f e856c60b-ca7d8d80 4ea303a6-ecbb250e 64224f74-5087fa4a 56302f8c-2f882e70 de03e059-e65e20f2 f56e0452-ca7d8d80 b2f0086-93053e47 494d8760-803f8fc4 f47ae82a-86f22ee5 3ac60855-486e2a9c f296190c-4235cfc1 4442aae2-e1cc0f14 ed1d377-e1cc0f14 75f0f0a0-a5822863 e2b18481-4ad60575 e7e71889-e1cc0f14 828a5926-ca7d8d80 a88c475d-3d47f4f4 Channel: stable
OS Version: OS X 10.12.6
Flash Version:
,
Aug 24 2017
lushnikov@, can you please look into this? Seems like you're aware of the old issue: https://bugs.chromium.org/p/chromium/issues/detail?id=387952 Thank you!
,
Aug 25 2017
FYI, it's not the same issue. That one has to do with srtyles inserted via insertRule, which directly go to the CSSOM, so will never be editable via devtools.
,
Sep 14 2017
lushnikov@, Friendly ping to get an update on this issue. Thanks in advance..!
,
Sep 14 2017
,
Dec 6 2017
,
Dec 14 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/b2a070f602aba46995046064931a9070604ef459 commit b2a070f602aba46995046064931a9070604ef459 Author: Andrey Lushnikov <lushnikov@chromium.org> Date: Thu Dec 14 00:57:52 2017 DevTools: fix editing of style tag contents This patch starts resetting the InspectorResourceContainer storage for the externally changed style tags so that old content doesn't stuck. BUG= 758600 R=dgozman Change-Id: I655be7269a2d2b502bbbe6967a3849696d619b28 Reviewed-on: https://chromium-review.googlesource.com/826023 Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Commit-Queue: Andrey Lushnikov <lushnikov@chromium.org> Cr-Commit-Position: refs/heads/master@{#523963} [add] https://crrev.com/b2a070f602aba46995046064931a9070604ef459/third_party/WebKit/LayoutTests/inspector-protocol/css/css-style-tag-ranges-after-text-modification-expected.txt [add] https://crrev.com/b2a070f602aba46995046064931a9070604ef459/third_party/WebKit/LayoutTests/inspector-protocol/css/css-style-tag-ranges-after-text-modification.js [modify] https://crrev.com/b2a070f602aba46995046064931a9070604ef459/third_party/WebKit/Source/core/css/StyleElement.cpp [modify] https://crrev.com/b2a070f602aba46995046064931a9070604ef459/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp [modify] https://crrev.com/b2a070f602aba46995046064931a9070604ef459/third_party/WebKit/Source/core/inspector/InspectorCSSAgent.h [modify] https://crrev.com/b2a070f602aba46995046064931a9070604ef459/third_party/WebKit/Source/core/inspector/InspectorResourceContainer.cpp [modify] https://crrev.com/b2a070f602aba46995046064931a9070604ef459/third_party/WebKit/Source/core/inspector/InspectorResourceContainer.h [modify] https://crrev.com/b2a070f602aba46995046064931a9070604ef459/third_party/WebKit/Source/core/probe/CoreProbes.json5 [modify] https://crrev.com/b2a070f602aba46995046064931a9070604ef459/third_party/WebKit/Source/core/probe/CoreProbes.pidl
,
Dec 14 2017
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by alexande...@gmail.com
, Aug 24 2017