Bug 143244 - Web Inspector: Sometimes CSS resources don't update after editing via Styles panel
Summary: Web Inspector: Sometimes CSS resources don't update after editing via Styles ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P1 Blocker
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-03-30 18:12 PDT by Nikita Vasilyev
Modified: 2015-08-13 06:18 PDT (History)
8 users (show)

See Also:


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+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 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.
Comment 1 Radar WebKit Bug Importer 2015-03-30 18:13:12 PDT
<rdar://problem/20356918>
Comment 2 Nikita Vasilyev 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;
}
Comment 3 Nikita Vasilyev 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
Comment 4 Joseph Pecoraro 2015-06-04 20:04:40 PDT
This problem compounds as multiple tabs may have different editor contents for the same resource.
Comment 5 Nikita Vasilyev 2015-07-28 15:43:55 PDT
Still relevant!


Reduction:

HTML:
<link rel="stylesheet" href="style.css"/>

style.css:
body {
    background: #fff;
    color: #CCC;
}
Comment 6 Nikita Vasilyev 2015-07-28 15:47:25 PDT
Although, I don't see any errors in the console any longer.
Comment 7 Nikita Vasilyev 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.
Comment 8 Joseph Pecoraro 2015-08-12 18:22:50 PDT
Created attachment 258865 [details]
[PATCH] Proposed Fix
Comment 9 Timothy Hatcher 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.
Comment 10 Joseph Pecoraro 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.
Comment 11 Joseph Pecoraro 2015-08-12 22:52:18 PDT
http://trac.webkit.org/changeset/188378
Comment 12 Nikita Vasilyev 2015-08-13 06:18:35 PDT
It works! Good job, Joe! \o/