Skip to content
Permalink
Browse files
Web Inspector: Implement tracking of active stylesheets in the frontend
https://bugs.webkit.org/show_bug.cgi?id=105828

Reviewed by Pavel Feldman.

Source/WebCore:

- This change introduces the CSS.styleSheetAdded() and CSS.styleSheetRemoved() events
that update the frontend with all active stylesheet changes in the inspected page.
As such, fetching stylesheet headers from the backend manually is no longer needed,
and many asynchronous methods have been turned into normal accessors.
- One notable change to the stylesheet binding process is that when a via-inspector stylesheet
is created, it is instantly reported through the instrumentation, and the viaInspectorStyleSheet() method
is [indirectly] called recursively from bindStyleSheet(). Thus, the actual creation and registration
of the respective InspectorStyleSheet have been moved into bindStyleSheet(),
which relies upon the m_creatingViaInspectorStyleSheet flag.

Test: inspector/styles/stylesheet-tracking.html

* dom/DocumentStyleSheetCollection.cpp:
(WebCore::DocumentStyleSheetCollection::updateActiveStyleSheets): Instrumented.
* inspector/Inspector.json: Add events, update the CSS domain description.
* inspector/InspectorCSSAgent.cpp:
(WebCore::InspectorCSSAgent::InspectorCSSAgent):
(WebCore::InspectorCSSAgent::clearFrontend):
(WebCore::InspectorCSSAgent::enable): Push all existing stylesheet headers into the frontend.
(WebCore::InspectorCSSAgent::activeStyleSheetsUpdated): Push added/removed stylesheet into the frontend.
(WebCore::InspectorCSSAgent::getAllStyleSheets): Slightly refactored to make use of collectAllStyleSheets().
(WebCore::InspectorCSSAgent::collectAllStyleSheets): Added to collect InspectorStyleSheets rather than headers.
(WebCore::InspectorCSSAgent::collectStyleSheets):
(WebCore::InspectorCSSAgent::bindStyleSheet): Binds via-inspector stylesheets, too.
(WebCore::InspectorCSSAgent::unbindStyleSheet): Now we can unbind stylesheets upon their removal from the document.
(WebCore::InspectorCSSAgent::viaInspectorStyleSheet): Modifies m_creatingViaInspectorStyleSheet when necessary.
(WebCore::InspectorCSSAgent::detectOrigin): Modified to make use of m_creatingViaInspectorStyleSheet.
(WebCore::InspectorCSSAgent::buildObjectForRule): Removed extraneous bound InspectorStyleSheet 0-check.
* inspector/InspectorCSSAgent.h:
* inspector/InspectorInstrumentation.cpp: Instrumentation of active stylesheet set updates.
(WebCore::InspectorInstrumentation::activeStyleSheetsUpdatedImpl):
* inspector/InspectorInstrumentation.h: Ditto.
(WebCore::InspectorInstrumentation::activeStyleSheetsUpdated):
* inspector/front-end/CSSStyleModel.js:
(WebInspector.CSSStyleModel.prototype.styleSheetHeaders):
(WebInspector.CSSStyleModel.prototype._styleSheetAdded): Added.
(WebInspector.CSSStyleModel.prototype._styleSheetRemoved): Added.
(WebInspector.CSSStyleModel.prototype.viaInspectorResourceForRule):
(WebInspector.CSSStyleModelResourceBinding.prototype._setHeaderForStyleSheetId):
(WebInspector.CSSStyleModelResourceBinding.prototype.resourceURLForStyleSheetId):
(WebInspector.CSSStyleModelResourceBinding.prototype.styleSheetIdForResource):
(WebInspector.CSSStyleModelResourceBinding.prototype._headerKey): Calculate the (frameID + URL) key for CSSStyleSheetHeader.
(WebInspector.CSSStyleModelResourceBinding.prototype._createInspectorResource):
(WebInspector.CSSStyleModelResourceBinding.prototype._inspectorResource):
(WebInspector.CSSStyleModelResourceBinding.prototype._reset):
(WebInspector.CSSDispatcher.prototype.styleSheetAdded): Added.
(WebInspector.CSSDispatcher.prototype.styleSheetRemoved): Added.
* inspector/front-end/SASSSourceMapping.js: Get rid of async implementations.
(WebInspector.SASSSourceMapping.prototype._styleSheetChanged):
* inspector/front-end/StylesSidebarPane.js: Ditto.
(WebInspector.StylePropertiesSection.prototype._createRuleOriginNode):
* inspector/front-end/StylesSourceMapping.js: Ditto.
(WebInspector.StyleContentBinding.prototype._innerStyleSheetChanged):

LayoutTests:

* inspector/styles/resources/stylesheet-tracking.css: Added.
* inspector/styles/stylesheet-tracking-expected.txt: Added.
* inspector/styles/stylesheet-tracking.html: Added.

Canonical link: https://commits.webkit.org/128190@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@142975 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
Alexander Pavlov committed Feb 15, 2013
1 parent 930478b commit 2b3a33c5facb6d6ca76fe7e71b46014dec24bf49
Showing 15 changed files with 461 additions and 187 deletions.
@@ -1,3 +1,14 @@
2013-02-14 Alexander Pavlov <apavlov@chromium.org>

Web Inspector: Implement tracking of active stylesheets in the frontend
https://bugs.webkit.org/show_bug.cgi?id=105828

Reviewed by Pavel Feldman.

* inspector/styles/resources/stylesheet-tracking.css: Added.
* inspector/styles/stylesheet-tracking-expected.txt: Added.
* inspector/styles/stylesheet-tracking.html: Added.

2013-02-15 Andrei Bucur <abucur@adobe.com>

Implement the -webkit-margin-collapse properties correct rendering
@@ -0,0 +1,3 @@
body {
border: 1px solid green;
}
@@ -0,0 +1,24 @@
Tests that the styleSheetAdded and styleSheetRemoved events are reported into the frontend. Bug 105828.

Text
2 headers known:
0:
URL=.../inspector/styles/resources/stylesheet-tracking.css
origin=regular
1:
URL=.../inspector/styles/stylesheet-tracking.html
origin=regular
Adding stylesheet...
Stylesheet added:
URL=.../inspector/styles/stylesheet-tracking.html
origin=regular
Removing stylesheet...
Stylesheet removed:
URL=.../inspector/styles/stylesheet-tracking.html
origin=regular
Adding rule...
Stylesheet added:
URL=.../inspector/styles/stylesheet-tracking.html
origin=inspector
Rule added

@@ -0,0 +1,114 @@
<html>
<head>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script src="../../http/tests/inspector/debugger-test.js"></script>
<link rel="stylesheet" href="resources/stylesheet-tracking.css" />

<style>
body {
font-size: 12px;
}
</style>

<script>

function addStyleSheet()
{
var styleElement = document.createElement("style");
styleElement.id = "style";
document.head.appendChild(styleElement);
}

function removeStyleSheet()
{
document.head.removeChild(document.getElementById("style"));
}

function test()
{
var inspectorResource;

WebInspector.showPanel("elements");
WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, styleSheetAdded, null);
WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, styleSheetRemoved, null);
var headers = WebInspector.cssModel.styleSheetHeaders();
InspectorTest.addResult(headers.length + " headers known:");
for (var i = 0; i < headers.length; ++i)
InspectorTest.addResult(i + ":\n" + headerData(headers[i]));

step1();

function step1()
{
InspectorTest.addResult("Adding stylesheet...");
InspectorTest.evaluateInPage("addStyleSheet()", step2);
}

function step2()
{
InspectorTest.addResult("Removing stylesheet...");
InspectorTest.evaluateInPage("removeStyleSheet()", step3);
}

function step3()
{
InspectorTest.selectNodeAndWaitForStyles("inspected", step4);
}

function step4(node)
{
InspectorTest.addResult("Adding rule...");
WebInspector.cssModel.addRule(node.id, "#inspected", successCallback, failureCallback);

function successCallback()
{
InspectorTest.addResult("Rule added");
InspectorTest.completeTest();
}
function failureCallback()
{
InspectorTest.addResult("Failed to add rule.");
InspectorTest.completeTest();
}
}

function styleSheetAdded(event)
{
var header = event.data;
InspectorTest.addResult("Stylesheet added:\n" + headerData(header));
}

function styleSheetRemoved(event)
{
var header = event.data;
InspectorTest.addResult("Stylesheet removed:\n" + headerData(header));
}

function headerData(header)
{
return " URL=" + trimURL(header.sourceURL) + "\n origin=" + header.origin;
}

function trimURL(url)
{
if (!url)
return url;
var lastIndex = url.lastIndexOf("inspector/");
if (lastIndex < 0)
return url;
return ".../" + url.substr(lastIndex);
}
}
</script>
</head>

<body onload="runTest()">
<p>
Tests that the styleSheetAdded and styleSheetRemoved events are reported into the frontend. <a href="https://bugs.webkit.org/show_bug.cgi?id=105828">Bug 105828</a>.
</p>

<div id="inspected">Text</div>

</body>
</html>
@@ -1,3 +1,64 @@
2013-02-14 Alexander Pavlov <apavlov@chromium.org>

Web Inspector: Implement tracking of active stylesheets in the frontend
https://bugs.webkit.org/show_bug.cgi?id=105828

Reviewed by Pavel Feldman.

- This change introduces the CSS.styleSheetAdded() and CSS.styleSheetRemoved() events
that update the frontend with all active stylesheet changes in the inspected page.
As such, fetching stylesheet headers from the backend manually is no longer needed,
and many asynchronous methods have been turned into normal accessors.
- One notable change to the stylesheet binding process is that when a via-inspector stylesheet
is created, it is instantly reported through the instrumentation, and the viaInspectorStyleSheet() method
is [indirectly] called recursively from bindStyleSheet(). Thus, the actual creation and registration
of the respective InspectorStyleSheet have been moved into bindStyleSheet(),
which relies upon the m_creatingViaInspectorStyleSheet flag.

Test: inspector/styles/stylesheet-tracking.html

* dom/DocumentStyleSheetCollection.cpp:
(WebCore::DocumentStyleSheetCollection::updateActiveStyleSheets): Instrumented.
* inspector/Inspector.json: Add events, update the CSS domain description.
* inspector/InspectorCSSAgent.cpp:
(WebCore::InspectorCSSAgent::InspectorCSSAgent):
(WebCore::InspectorCSSAgent::clearFrontend):
(WebCore::InspectorCSSAgent::enable): Push all existing stylesheet headers into the frontend.
(WebCore::InspectorCSSAgent::activeStyleSheetsUpdated): Push added/removed stylesheet into the frontend.
(WebCore::InspectorCSSAgent::getAllStyleSheets): Slightly refactored to make use of collectAllStyleSheets().
(WebCore::InspectorCSSAgent::collectAllStyleSheets): Added to collect InspectorStyleSheets rather than headers.
(WebCore::InspectorCSSAgent::collectStyleSheets):
(WebCore::InspectorCSSAgent::bindStyleSheet): Binds via-inspector stylesheets, too.
(WebCore::InspectorCSSAgent::unbindStyleSheet): Now we can unbind stylesheets upon their removal from the document.
(WebCore::InspectorCSSAgent::viaInspectorStyleSheet): Modifies m_creatingViaInspectorStyleSheet when necessary.
(WebCore::InspectorCSSAgent::detectOrigin): Modified to make use of m_creatingViaInspectorStyleSheet.
(WebCore::InspectorCSSAgent::buildObjectForRule): Removed extraneous bound InspectorStyleSheet 0-check.
* inspector/InspectorCSSAgent.h:
* inspector/InspectorInstrumentation.cpp: Instrumentation of active stylesheet set updates.
(WebCore::InspectorInstrumentation::activeStyleSheetsUpdatedImpl):
* inspector/InspectorInstrumentation.h: Ditto.
(WebCore::InspectorInstrumentation::activeStyleSheetsUpdated):
* inspector/front-end/CSSStyleModel.js:
(WebInspector.CSSStyleModel.prototype.styleSheetHeaders):
(WebInspector.CSSStyleModel.prototype._styleSheetAdded): Added.
(WebInspector.CSSStyleModel.prototype._styleSheetRemoved): Added.
(WebInspector.CSSStyleModel.prototype.viaInspectorResourceForRule):
(WebInspector.CSSStyleModelResourceBinding.prototype._setHeaderForStyleSheetId):
(WebInspector.CSSStyleModelResourceBinding.prototype.resourceURLForStyleSheetId):
(WebInspector.CSSStyleModelResourceBinding.prototype.styleSheetIdForResource):
(WebInspector.CSSStyleModelResourceBinding.prototype._headerKey): Calculate the (frameID + URL) key for CSSStyleSheetHeader.
(WebInspector.CSSStyleModelResourceBinding.prototype._createInspectorResource):
(WebInspector.CSSStyleModelResourceBinding.prototype._inspectorResource):
(WebInspector.CSSStyleModelResourceBinding.prototype._reset):
(WebInspector.CSSDispatcher.prototype.styleSheetAdded): Added.
(WebInspector.CSSDispatcher.prototype.styleSheetRemoved): Added.
* inspector/front-end/SASSSourceMapping.js: Get rid of async implementations.
(WebInspector.SASSSourceMapping.prototype._styleSheetChanged):
* inspector/front-end/StylesSidebarPane.js: Ditto.
(WebInspector.StylePropertiesSection.prototype._createRuleOriginNode):
* inspector/front-end/StylesSourceMapping.js: Ditto.
(WebInspector.StyleContentBinding.prototype._innerStyleSheetChanged):

2013-02-15 Andrei Bucur <abucur@adobe.com>

Implement the -webkit-margin-collapse properties correct rendering
@@ -487,6 +487,7 @@ bool DocumentStyleSheetCollection::updateActiveStyleSheets(UpdateFlag updateFlag
resetCSSFeatureFlags();
}
m_activeAuthorStyleSheets.swap(activeCSSStyleSheets);
InspectorInstrumentation::activeStyleSheetsUpdated(m_document, m_styleSheetsForStyleSheetList, activeStyleSheets);
m_styleSheetsForStyleSheetList.swap(activeStyleSheets);

m_usesRemUnits = styleSheetsUseRemUnits(m_activeAuthorStyleSheets);
@@ -2161,7 +2161,7 @@
{
"domain": "CSS",
"hidden": true,
"description": "This domain exposes CSS read/write operations. All CSS objects, like stylesheets, rules, and styles, have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). Alternatively, a client can discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
"description": "This domain exposes CSS read/write operations. All CSS objects (stylesheets, rules, and styles) have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). A client can also discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method (or keeping track of the <code>styleSheetAdded</code>/<code>styleSheetRemoved</code> events) and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
"types": [
{
"id": "StyleSheetId",
@@ -2566,6 +2566,20 @@
],
"description": "Fired whenever a stylesheet is changed as a result of the client operation."
},
{
"name": "styleSheetAdded",
"parameters": [
{ "name": "header", "$ref": "CSSStyleSheetHeader", "description": "Added stylesheet metainfo." }
],
"description": "Fired whenever an active document stylesheet is added."
},
{
"name": "styleSheetRemoved",
"parameters": [
{ "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the removed stylesheet." }
],
"description": "Fired whenever an active document stylesheet is removed."
},
{
"name": "namedFlowCreated",
"parameters": [

0 comments on commit 2b3a33c

Please sign in to comment.