Bug 105828 - Web Inspector: Implement tracking of active stylesheets in the frontend
Summary: Web Inspector: Implement tracking of active stylesheets in the frontend
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Joseph Pecoraro
URL:
Keywords:
Depends on: 110225
Blocks: 105258
  Show dependency treegraph
 
Reported: 2012-12-28 05:59 PST by Alexander Pavlov (apavlov)
Modified: 2015-08-26 16:50 PDT (History)
21 users (show)

See Also:


Attachments
Patch (35.79 KB, patch)
2012-12-28 09:10 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Patch for EWS (35.82 KB, patch)
2012-12-28 21:18 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Fix JsDoc/remove unused param (35.83 KB, patch)
2012-12-29 01:46 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Get rid of _loadStyleSheetHeaders(), as it's not needed (35.47 KB, patch)
2013-01-09 07:04 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Patch (37.06 KB, patch)
2013-01-10 06:30 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Patch (36.36 KB, patch)
2013-01-11 06:31 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Rebased patch (40.34 KB, patch)
2013-01-25 06:13 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Rebased patch (37.49 KB, patch)
2013-02-02 04:43 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Patch (39.19 KB, patch)
2013-02-07 05:40 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Test added (45.73 KB, patch)
2013-02-14 07:05 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Patch (53.21 KB, patch)
2013-02-22 09:40 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
Patch (53.55 KB, patch)
2013-02-24 23:35 PST, Alexander Pavlov (apavlov)
no flags Details | Formatted Diff | Diff
[PATCH] Proposed Fix (53.70 KB, patch)
2015-08-24 18:48 PDT, Joseph Pecoraro
joepeck: review-
buildbot: commit-queue-
Details | Formatted Diff | Diff
Archive of layout-test-results from ews102 for mac-mavericks (555.14 KB, application/zip)
2015-08-24 19:24 PDT, Build Bot
no flags Details
Archive of layout-test-results from ews104 for mac-mavericks-wk2 (603.60 KB, application/zip)
2015-08-24 19:28 PDT, Build Bot
no flags Details
[PATCH] Proposed Fix (60.21 KB, patch)
2015-08-24 21:37 PDT, Joseph Pecoraro
timothy: review+
bburg: commit-queue-
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Alexander Pavlov (apavlov) 2012-12-28 05:59:30 PST
This is necessary to implement the stylesheet disablement feature.
Comment 1 Alexander Pavlov (apavlov) 2012-12-28 09:10:00 PST
Created attachment 180883 [details]
Patch
Comment 2 Peter Beverloo (cr-android ews) 2012-12-28 09:53:11 PST
Comment on attachment 180883 [details]
Patch

Attachment 180883 [details] did not pass cr-android-ews (chromium-android):
Output: http://queues.webkit.org/results/15576009
Comment 3 Build Bot 2012-12-28 09:56:24 PST
Comment on attachment 180883 [details]
Patch

Attachment 180883 [details] did not pass mac-ews (mac):
Output: http://queues.webkit.org/results/15551835

New failing tests:
http/tests/inspector/resource-har-pages.html
fast/sub-pixel/sub-pixel-accumulates-to-layers.html
fast/sub-pixel/sub-pixel-iframe-copy-on-scroll.html
fast/sub-pixel/transformed-iframe-copy-on-scroll.html
Comment 4 Alexander Pavlov (apavlov) 2012-12-28 21:15:52 PST
(In reply to comment #2)
> (From update of attachment 180883 [details])
> Attachment 180883 [details] did not pass cr-android-ews (chromium-android):
> Output: http://queues.webkit.org/results/15576009

Sounds like a buildsystem flaw or something (a stale generated file out/Release/gen/webkit/InspectorFrontend.h has got stuck in the way).
Comment 5 Alexander Pavlov (apavlov) 2012-12-28 21:18:30 PST
Created attachment 180915 [details]
Patch for EWS
Comment 6 Peter Beverloo (cr-android ews) 2012-12-28 21:49:44 PST
Comment on attachment 180915 [details]
Patch for EWS

Attachment 180915 [details] did not pass cr-android-ews (chromium-android):
Output: http://queues.webkit.org/results/15558973
Comment 7 Build Bot 2012-12-28 22:13:36 PST
Comment on attachment 180915 [details]
Patch for EWS

Attachment 180915 [details] did not pass mac-ews (mac):
Output: http://queues.webkit.org/results/15592023

New failing tests:
http/tests/inspector/resource-har-pages.html
Comment 8 Alexander Pavlov (apavlov) 2012-12-29 01:46:07 PST
Created attachment 180923 [details]
Fix JsDoc/remove unused param
Comment 9 Build Bot 2012-12-29 02:55:35 PST
Comment on attachment 180923 [details]
Fix JsDoc/remove unused param

Attachment 180923 [details] did not pass mac-ews (mac):
Output: http://queues.webkit.org/results/15584190

New failing tests:
http/tests/inspector/resource-har-pages.html
fast/sub-pixel/sub-pixel-accumulates-to-layers.html
fast/sub-pixel/sub-pixel-iframe-copy-on-scroll.html
fast/sub-pixel/transformed-iframe-copy-on-scroll.html
Comment 10 Vsevolod Vlasov 2013-01-09 04:54:43 PST
Comment on attachment 180923 [details]
Fix JsDoc/remove unused param

View in context: https://bugs.webkit.org/attachment.cgi?id=180923&action=review

> Source/WebCore/inspector/front-end/CSSStyleModel.js:1250
> +        this._loadStyleSheetHeaders();

I thought we want to push headers, so this should not be needed anymore (and hence _loadStyleSheetHeaders can be removed.)?
Comment 11 Alexander Pavlov (apavlov) 2013-01-09 07:04:31 PST
Created attachment 181920 [details]
Get rid of _loadStyleSheetHeaders(), as it's not needed
Comment 12 WebKit Review Bot 2013-01-09 07:46:59 PST
Comment on attachment 181920 [details]
Get rid of _loadStyleSheetHeaders(), as it's not needed

Attachment 181920 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/15755609
Comment 13 Vsevolod Vlasov 2013-01-10 04:09:52 PST
Comment on attachment 181920 [details]
Get rid of _loadStyleSheetHeaders(), as it's not needed

View in context: https://bugs.webkit.org/attachment.cgi?id=181920&action=review

> Source/WebCore/inspector/front-end/CSSStyleModel.js:387
> +        if (header.origin === "inspector")

I would keep this in resource binding so that this check is not spread all over the code.

> Source/WebCore/inspector/front-end/CSSStyleModel.js:480
> +        return this._resourceBinding._getOrCreateInspectorResource(rule.id.styleSheetId);

I think inspector resource should be already created by this moment, so it's better to use a simple getter here. Then we can simplify the method that creates inspector resource.

> Source/WebCore/inspector/front-end/CSSStyleModel.js:1195
> +    headerForStyleSheetId: function(styleSheetId)

Looks like this one is unused

> Source/WebCore/inspector/front-end/CSSStyleModel.js:1247
>       */

Could you please annotate this._frameAndURLToStyleSheetId and this._styleSheetIdToHeader below?

> Source/WebCore/inspector/front-end/CSSStyleModel.js:1259
> +    _getOrCreateInspectorResource: function(styleSheetId)

This should be called from _setHeaderForStyleSheetId only now so you can pass header in it.
Comment 14 Alexander Pavlov (apavlov) 2013-01-10 06:30:54 PST
Created attachment 182125 [details]
Patch
Comment 15 WebKit Review Bot 2013-01-10 06:56:15 PST
Comment on attachment 182125 [details]
Patch

Attachment 182125 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/15771972
Comment 16 Peter Beverloo (cr-android ews) 2013-01-10 07:05:27 PST
Comment on attachment 182125 [details]
Patch

Attachment 182125 [details] did not pass cr-android-ews (chromium-android):
Output: http://queues.webkit.org/results/15760901
Comment 17 Vsevolod Vlasov 2013-01-11 04:16:56 PST
Comment on attachment 182125 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=182125&action=review

Front end changes look good to me.

> Source/WebCore/inspector/front-end/CSSStyleModel.js:474
> +    getViaInspectorResourceForRule: function(rule)

Nit: please remove get prefix, we only use get for asynchronous getters.

> Source/WebCore/inspector/front-end/CSSStyleModel.js:1267
>          var inspectorResource = frame.resourceForURL(viaInspectorURL);

I would replace this with console.assert(!frame.resourceForURL(viaInspectorURL));

> Source/WebCore/inspector/front-end/CSSStyleModel.js:1276
>          inspectorResource = new WebInspector.Resource(null, viaInspectorURL, resource.documentURL, resource.frameId, resource.loaderId, WebInspector.resourceTypes.Stylesheet, "text/css", true);

var ..
Comment 18 Alexander Pavlov (apavlov) 2013-01-11 06:31:34 PST
Created attachment 182332 [details]
Patch
Comment 19 Alexander Pavlov (apavlov) 2013-01-25 06:13:41 PST
Created attachment 184736 [details]
Rebased patch
Comment 20 Alexander Pavlov (apavlov) 2013-02-02 04:43:25 PST
Created attachment 186222 [details]
Rebased patch
Comment 21 Build Bot 2013-02-02 05:45:50 PST
Comment on attachment 186222 [details]
Rebased patch

Attachment 186222 [details] did not pass win-ews (win):
Output: http://queues.webkit.org/results/16343718
Comment 22 Pavel Feldman 2013-02-04 01:55:51 PST
Comment on attachment 186222 [details]
Rebased patch

Given the scope of the change and lack of tests, I am afraid it will regress something. Could we move in a more incremental manner? I.e. splitting the change into several ones and covering each with the tests?
Comment 23 Pavel Feldman 2013-02-07 05:17:31 PST
Comment on attachment 186222 [details]
Rebased patch

View in context: https://bugs.webkit.org/attachment.cgi?id=186222&action=review

Backend looks good.

> Source/WebCore/inspector/InspectorCSSAgent.cpp:685
> +            continue;

When does this happen?

> Source/WebCore/inspector/InspectorCSSAgent.cpp:800
>  void InspectorCSSAgent::getAllStyleSheets(ErrorString*, RefPtr<TypeBuilder::Array<TypeBuilder::CSS::CSSStyleSheetHeader> >& styleInfos)

We should not need this method any longer.

> Source/WebCore/inspector/InspectorCSSAgent.h:144
> +        CreatingViaInspectorStyleSheetScope(InspectorCSSAgent* agent)

Just skip this.
Comment 24 Alexander Pavlov (apavlov) 2013-02-07 05:40:54 PST
Created attachment 187074 [details]
Patch
Comment 25 Build Bot 2013-02-07 13:03:52 PST
Comment on attachment 187074 [details]
Patch

Attachment 187074 [details] did not pass win-ews (win):
Output: http://queues.webkit.org/results/16454004
Comment 26 Alexander Pavlov (apavlov) 2013-02-14 07:05:10 PST
Created attachment 188342 [details]
Test added
Comment 27 Alexander Pavlov (apavlov) 2013-02-15 02:30:57 PST
Committed r142975: <http://trac.webkit.org/changeset/142975>
Comment 28 WebKit Review Bot 2013-02-19 07:50:32 PST
Re-opened since this is blocked by bug 110225
Comment 29 Alexander Pavlov (apavlov) 2013-02-22 09:40:33 PST
Created attachment 189783 [details]
Patch
Comment 30 Build Bot 2013-02-22 13:30:30 PST
Comment on attachment 189783 [details]
Patch

Attachment 189783 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://queues.webkit.org/results/16723036
Comment 31 Build Bot 2013-02-23 10:33:05 PST
Comment on attachment 189783 [details]
Patch

Attachment 189783 [details] did not pass mac-ews (mac):
Output: http://queues.webkit.org/results/16713820
Comment 32 Alexander Pavlov (apavlov) 2013-02-24 23:35:26 PST
Created attachment 190002 [details]
Patch
Comment 33 Csaba Osztrogonác 2014-06-04 00:34:47 PDT
Comment on attachment 190002 [details]
Patch

Cleared review? from attachment 190002 [details] so that this bug does not appear in http://webkit.org/pending-review.  If you would like this patch reviewed, please attach it to a new bug (or re-open this bug before marking it for review again).
Comment 34 Joseph Pecoraro 2015-08-24 16:22:53 PDT
I'm looking into this.
Comment 35 Joseph Pecoraro 2015-08-24 16:24:46 PDT
Reopening, as this is still useful for some cases like refreshing the sidebar when a StyleSheet is disabled/enabled, added/removed.

That said, it will also be useful for the frontend to have stylesheet header information (such as offset line/column) to accurately generate source code location links for things like a CSSRule inside a <style> in the main document.
Comment 36 Joseph Pecoraro 2015-08-24 16:25:11 PDT
Adjusting status.
Comment 37 Joseph Pecoraro 2015-08-24 16:25:39 PDT
<rdar://problem/13213680>
Comment 38 Joseph Pecoraro 2015-08-24 18:48:51 PDT
Created attachment 259803 [details]
[PATCH] Proposed Fix

I think I need to write one more test for handling of removing a sub-frame/document, but this is a good start building off of the previous patches.
Comment 39 Build Bot 2015-08-24 19:24:27 PDT
Comment on attachment 259803 [details]
[PATCH] Proposed Fix

Attachment 259803 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/101864

New failing tests:
inspector/css/stylesheet-events-imports.html
inspector/css/stylesheet-events-inspector-stylesheet.html
inspector/css/stylesheet-events-basic.html
Comment 40 Build Bot 2015-08-24 19:24:34 PDT
Created attachment 259808 [details]
Archive of layout-test-results from ews102 for mac-mavericks

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews102  Port: mac-mavericks  Platform: Mac OS X 10.9.5
Comment 41 Build Bot 2015-08-24 19:28:26 PDT
Comment on attachment 259803 [details]
[PATCH] Proposed Fix

Attachment 259803 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/101867

New failing tests:
inspector/css/stylesheet-events-imports.html
inspector/css/stylesheet-events-inspector-stylesheet.html
inspector/css/stylesheet-events-basic.html
Comment 42 Build Bot 2015-08-24 19:28:31 PDT
Created attachment 259809 [details]
Archive of layout-test-results from ews104 for mac-mavericks-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews104  Port: mac-mavericks-wk2  Platform: Mac OS X 10.9.5
Comment 43 Joseph Pecoraro 2015-08-24 20:15:03 PDT
Comment on attachment 259803 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=259803&action=review

That said I don't understand the other test failures at the moment.

> LayoutTests/inspector/css/stylesheet-events-basic.html:168
> +        extraEnableDisableTests: [
> +            {title: "DisableExternalStyleSheetViaMediaAttribute", expression: "disableExternalStyleSheetViaMediaAttribute()"},
> +            {title: "EnableExternalStyleSheetViaMediaAttribute", expression: "enableExternalStyleSheetViaMediaAttribute()"},
> +        ],

These depend on a bug not yet fixed (patch is out for review):
<https://webkit.org/b/148392> Page does not update when <link> media attribute changes to no longer apply to page

> LayoutTests/inspector/css/stylesheet-events-inspector-stylesheet-expected.txt:9
> +LOG: CSS.styleSheetAdded {"styleSheetId":"1","origin":"inspector","disabled":false,"sourceURL":"file:///Users/pecoraro/Code/safari/OpenSource/LayoutTests/inspector/css/stylesheet-events-inspector-stylesheet.html","title":"","frameId":"0.1","isInline":false,"startLine":0,"startColumn":0}

Oops, this should not be here.
Comment 44 Joseph Pecoraro 2015-08-24 20:19:33 PDT
(In reply to comment #43)
> Comment on attachment 259803 [details]
> [PATCH] Proposed Fix
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=259803&action=review
> 
> That said I don't understand the other test failures at the moment.

Ahh, this appears to be a late change I made.
Comment 45 Joseph Pecoraro 2015-08-24 21:37:07 PDT
Created attachment 259819 [details]
[PATCH] Proposed Fix

Now with tests for subframes.
Comment 46 Timothy Hatcher 2015-08-25 10:16:47 PDT
Comment on attachment 259819 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=259819&action=review

> Source/WebInspectorUI/UserInterface/Controllers/CSSStyleManager.js:301
> +                let origin = "origin" in styleSheetInfo ? styleSheetInfo.origin : "regular";

Should this be an enum? Is it exposing a protocol enum as origin on WebInspector.CSSStyleSheet?
Comment 47 Joseph Pecoraro 2015-08-25 11:36:01 PDT
Comment on attachment 259819 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=259819&action=review

>> Source/WebInspectorUI/UserInterface/Controllers/CSSStyleManager.js:301
>> +                let origin = "origin" in styleSheetInfo ? styleSheetInfo.origin : "regular";
> 
> Should this be an enum? Is it exposing a protocol enum as origin on WebInspector.CSSStyleSheet?

Yeah, I can make a CSSStyleSheet.Type enum (probably replacing WebInspector.CSSRule.Type, since they are the same).
Comment 48 BJ Burg 2015-08-26 16:17:03 PDT
Comment on attachment 259819 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=259819&action=review

r=me on tests, just some readability suggestions.

> LayoutTests/inspector/css/stylesheet-events-basic.html:26
> +function addInlineStyle() {

I would have expected this to be style="...", do you test that case somewhere?

> LayoutTests/inspector/css/stylesheet-events-basic.html:51
> +    InspectorTest.dumpActivityToSystemConsole = true;

Oops

> LayoutTests/inspector/css/stylesheet-events-basic.html:65
> +        let {title, addExpression, removeExpression, checkStyleSheetAddedCallback, checkStyleSheetRemovedCallback, extraEnableDisableTests} = args;

I wish keyword args were a thing.. :)

> LayoutTests/inspector/css/stylesheet-events-basic.html:76
> +                    if (checkStyleSheetRemovedCallback) checkStyleSheetAddedCallback(addedStyleSheet);

Newline

> LayoutTests/inspector/css/stylesheet-events-basic.html:88
> +                    InspectorTest.assert(event.data.styleSheet instanceof WebInspector.CSSStyleSheet);

(Multiple places) Needs a message, else it will log ASSERT: (nothing)

> LayoutTests/inspector/css/stylesheet-events-basic.html:145
> +                    if (checkStyleSheetRemovedCallback) checkStyleSheetRemovedCallback(event.data.styleSheet);

Newline.

> LayoutTests/inspector/css/stylesheet-events-basic.html:163
> +        checkStyleSheetAddedCallback: (styleSheet) => { InspectorTest.log(sanitizeURL(styleSheet.url)); },

I recommend describing what it is that's being dumped and used as reference output, so it's obvious whether rebaselining is okay or not.

> LayoutTests/inspector/css/stylesheet-events-imports.html:61
> +        description: "Disable the top stylesheet containing imports will remove all.",

Disabling ... remove all stylesheets

> LayoutTests/inspector/css/stylesheet-events-imports.html:64
> +                events.map((e) => sanitizeURL(e.data.styleSheet.url)).sort().forEach((url) => { InspectorTest.log("StyleSheetRemoved: " + url); });

(Multiple places)

Wow, this is cool. However, I would wrap at the chained .sort() to avoid super long lines, as is common practice in d3 code:

events.map((e) => sanitizeURL(e.data.styleSheet.url))
    .sort()
    .forEach((url) => { InspectorTest.log("StyleSheetRemoved: " + url); });

> LayoutTests/inspector/css/stylesheet-events-imports.html:74
> +        description: "Enable the top stylesheet containing imports will add all.",

Enabling ... add all stylesheets

> LayoutTests/inspector/css/stylesheet-events-inspector-stylesheet.html:10
> +    let suite = InspectorTest.createAsyncSuite("CSS.styleSheetAdded for Inspector stylesheets");

I try to make the suite names camel case too (often based on filename), so it's easy to grep for them.

> LayoutTests/inspector/css/stylesheet-events-inspector-stylesheet.html:15
> +        name: "CheckStyleSheets",

"EnsureNoStylesheets" or "CheckNoStylesheets"

> LayoutTests/inspector/css/stylesheet-events-inspector-stylesheet.html:30
> +                InspectorTest.expectThat(event.data.styleSheet.origin === CSSAgent.StyleSheetOrigin.Inspector, "StyleSheet origin is inspector.");

is -> should be, I tend to put values like 'inspector' in quotes
Comment 49 Joseph Pecoraro 2015-08-26 16:26:28 PDT
Comment on attachment 259819 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=259819&action=review

>> LayoutTests/inspector/css/stylesheet-events-basic.html:26
>> +function addInlineStyle() {
> 
> I would have expected this to be style="...", do you test that case somewhere?

Inline style="..." doesn't actually create a StyleSheet in this sense. The backend and frontend masquerade that as a InlineInspectorStyleSheet / CSSStyleSheet, but there is no frontend<->backend communication in this regard.

I'll rename this to be clearer, "addStyleTag".

>> LayoutTests/inspector/css/stylesheet-events-basic.html:51
>> +    InspectorTest.dumpActivityToSystemConsole = true;
> 
> Oops

Yes, sorry =), I had removed these from all the tests locally.

>> LayoutTests/inspector/css/stylesheet-events-imports.html:64
>> +                events.map((e) => sanitizeURL(e.data.styleSheet.url)).sort().forEach((url) => { InspectorTest.log("StyleSheetRemoved: " + url); });
> 
> (Multiple places)
> 
> Wow, this is cool. However, I would wrap at the chained .sort() to avoid super long lines, as is common practice in d3 code:
> 
> events.map((e) => sanitizeURL(e.data.styleSheet.url))
>     .sort()
>     .forEach((url) => { InspectorTest.log("StyleSheetRemoved: " + url); });

Yeah, i dislike that style. Perhaps I should start using it more often though, so I'll start.
Comment 50 Joseph Pecoraro 2015-08-26 16:50:23 PDT
http://trac.webkit.org/changeset/189002