RESOLVED FIXED 143244
Web Inspector: Sometimes CSS resources don't update after editing via Styles panel 
https://bugs.webkit.org/show_bug.cgi?id=143244
Summary Web Inspector: Sometimes CSS resources don't update after editing via Styles ...
Nikita Vasilyev
Reported 2015-03-30 18:12:54 PDT
Created attachment 249789 [details] Animated GIF of the problem I wasn’t able to capture the exact steps to reproduce the problem, because it only happens sometimes.
Attachments
Animated GIF of the problem (895.96 KB, image/gif)
2015-03-30 18:12 PDT, Nikita Vasilyev 		no flags
Details
Animated GIF of the problem 2 (373.52 KB, image/gif)
2015-06-04 18:18 PDT, Nikita Vasilyev 		no flags
Details
[PATCH] Proposed Fix (4.24 KB, patch)
2015-08-12 18:22 PDT, Joseph Pecoraro 		timothy: review+
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2015-03-30 18:13:12 PDT
<rdar://problem/20356918>
Nikita Vasilyev
Comment 2 2015-06-04 18:18:09 PDT
Created attachment 254324 [details] Animated GIF of the problem 2 Assertion failed: markAsNeedsRefresh StyleDetailsPanel.js:82 visibilityDidChange CSSStyleDetailsSidebarPanel.js:128 removeSidebarPanel Sidebar.js:97 showDetailsSidebarPanels ContentBrowserTabContentView.js:166 dispatch Object.js:123 dispatchEventToListeners Object.js:130 _dispatchCurrentRepresentedObjectsDidChangeEvent ContentBrowser.js:462 _currentContentViewDidChange ContentBrowser.js:503 dispatch Object.js:123 dispatchEventToListeners Object.js:130 closeAllContentViewsContentView Container.js:389 _showDOMTreeContentView ElementsTabContentView.js:88 _mainResourceDidChange ElementsTabContentView.js:105 dispatch Object.js:123 dispatchEventToListeners Object.js:138 _dispatchMainResourceDidChangeEvent Frame.js:473 commitProvisionalLoad Frame.js:137 frameDidNavigate FrameResourceManager.js:104 frameNavigated PageObserver.js:41 dispatchEvent InspectorBackend.js:352 _dispatchEvent InspectorBackend.js:232 dispatch InspectorBackend.js:87 dispatchNextQueuedMessageFromBackend MessageDispatcher.js:41 Assertion failed: _stopTracking CodeMirrorTokenTrackingController.js:201 enabled CodeMirrorTokenTrackingController.js:80 editingControllerDidStartEditing SourceCodeTextEditor.js:1649 hoverMenuButtonWasPressed CodeMirrorEditingController.js:172 _handleClickEvent HoverMenu.js:98 handleEvent HoverMenu.js:84 index.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"/> </head> <body> blah </body> </html> style.css: body { background: #000; color: #CCC; }
Nikita Vasilyev
Comment 3 2015-06-04 18:20:31 PDT
Same stacktrace, fixed formatting: Assertion failed: markAsNeedsRefresh StyleDetailsPanel.js:82 visibilityDidChange CSSStyleDetailsSidebarPanel.js:128 removeSidebarPanel Sidebar.js:97 showDetailsSidebarPanels ContentBrowserTabContentView.js:166 dispatch Object.js:123 dispatchEventToListeners Object.js:130 _dispatchCurrentRepresentedObjectsDidChangeEvent ContentBrowser.js:462 _currentContentViewDidChange ContentBrowser.js:503 dispatch Object.js:123 dispatchEventToListeners Object.js:130 closeAllContentViewsContentView Container.js:389 _showDOMTreeContentView ElementsTabContentView.js:88 _mainResourceDidChange ElementsTabContentView.js:105 dispatch Object.js:123 dispatchEventToListeners Object.js:138 _dispatchMainResourceDidChangeEvent Frame.js:473 commitProvisionalLoad Frame.js:137 frameDidNavigate FrameResourceManager.js:104 frameNavigated PageObserver.js:41 dispatchEvent InspectorBackend.js:352 _dispatchEvent InspectorBackend.js:232 dispatch InspectorBackend.js:87 dispatchNextQueuedMessageFromBackend MessageDispatcher.js:41 Assertion failed: _stopTracking CodeMirrorTokenTrackingController.js:201 enabled CodeMirrorTokenTrackingController.js:80 editingControllerDidStartEditing SourceCodeTextEditor.js:1649 hoverMenuButtonWasPressed CodeMirrorEditingController.js:172 _handleClickEvent HoverMenu.js:98 handleEvent HoverMenu.js:84
Joseph Pecoraro
Comment 4 2015-06-04 20:04:40 PDT
This problem compounds as multiple tabs may have different editor contents for the same resource.
Nikita Vasilyev
Comment 5 2015-07-28 15:43:55 PDT
Still relevant! Reduction: HTML: <link rel="stylesheet" href="style.css"/> style.css: body { background: #fff; color: #CCC; }
Nikita Vasilyev
Comment 6 2015-07-28 15:47:25 PDT
Although, I don't see any errors in the console any longer.
Nikita Vasilyev
Comment 7 2015-07-28 15:57:16 PDT
Steps: 0. Open the reduction HTML page in the Inspector 1. Inspect body element 2. Add "font-size: 12px" rule 3. Click on "style.css" Expected: style.css resource includes "font-size: 12px". Actual: style.css is unchanged.
Joseph Pecoraro
Comment 8 2015-08-12 18:22:50 PDT
Created attachment 258865 [details] [PATCH] Proposed Fix
Timothy Hatcher
Comment 9 2015-08-12 18:52:54 PDT
Comment on attachment 258865 [details] [PATCH] Proposed Fix View in context: https://bugs.webkit.org/attachment.cgi?id=258865&action=review > Source/WebInspectorUI/UserInterface/Models/SourceCode.js:194 > + // FIXME: Returning the content in this promise is misleading. It may not be current content Yes, SourceCode or SourceCodeRevision should be the only ways to get the content.
Joseph Pecoraro
Comment 10 2015-08-12 22:51:04 PDT
Comment on attachment 258865 [details] [PATCH] Proposed Fix Rewording the FIXME and landing manually. There are a few places that would need to be updated that I don't fully understand yet (CSSStyleSheet fetching content) to remove the FIXME. This fixes this very common bug so I'll land it now.
Joseph Pecoraro
Comment 11 2015-08-12 22:52:18 PDT
http://trac.webkit.org/changeset/188378
Nikita Vasilyev
Comment 12 2015-08-13 06:18:35 PDT
It works! Good job, Joe! \o/
Note You need to log in before you can comment on or make changes to this bug.