Chromium Code Reviews Chromium Code Reviews
Issue 2759703003:
DevTools: add support for polling for coverage data in CSS agent (Closed)
| Index: third_party/WebKit/LayoutTests/inspector-protocol/css/css-coverage-poll.html |
| diff --git a/third_party/WebKit/LayoutTests/inspector-protocol/css/css-coverage-poll.html b/third_party/WebKit/LayoutTests/inspector-protocol/css/css-coverage-poll.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..d51b9f5f425c6ec16b6c9e82b502e22ecf9d170d |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/inspector-protocol/css/css-coverage-poll.html |
| @@ -0,0 +1,99 @@ |
| +<html> |
| +<head> |
| +<script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script> |
| +<script type="text/javascript" src="../../http/tests/inspector-protocol/css-protocol-test.js"></script> |
| +<script type="text/javascript" src="../../http/tests/inspector-protocol/dom-protocol-test.js"></script> |
| +<script type="text/javascript"> |
| + |
| +function loadStylesheet(url) |
| +{ |
| + var link = document.createElement("link"); |
| + link.rel = "stylesheet"; |
| + link.href = url; |
| + var promise = new Promise(fulfill => { link.addEventListener("load", fulfill); }); |
| + document.head.appendChild(link); |
| + return promise; |
| +} |
| + |
| +function useMoreCSS(className) { |
| + var div = document.createElement("div"); |
| + div.classList.add(className); |
| + document.body.appendChild(div); |
| + div.offsetHeight; // Force layout & style recalc |
| + return Promise.resolve(); |
| +} |
| + |
| +async function test() |
| +{ |
| + var stylesheetIdToURL = new Map(); |
| + InspectorTest.eventHandler["CSS.styleSheetAdded"] = styleSheetAdded; |
| + |
| + InspectorTest.sendCommandPromise("DOM.enable", {}); |
| + await InspectorTest.sendCommandPromise("CSS.enable", {}); |
| + await InspectorTest.sendCommandPromise("CSS.startRuleUsageTracking", {}); |
| + |
| + await doActionAndDump(""); |
| + await doActionAndDump("loadStylesheet('resources/coverage2.css')"); |
| + await doActionAndDump("useMoreCSS('usedSomewhatLater')"); |
| + await InspectorTest.evaluateInPageAsync("useMoreCSS('usedAtTheVeryEnd')"); |
| + |
| + var response = await InspectorTest.sendCommandPromise("CSS.stopRuleUsageTracking", {}); |
| + |
| + if (!response.result) { |
|
alph
2017/03/20 20:48:31
nit: if (result) dump...
|
| + InspectorTest.completeTest(); |
| + return; |
| + } |
| + dumpCoverageData(response.result.ruleUsage); |
| + InspectorTest.completeTest(); |
| + |
| + function styleSheetAdded(event) |
| + { |
| + var header = event.params.header; |
| + var url = /(([^/]*\/){2}[^/]*$)/.exec(header.sourceURL)[1]; |
| + stylesheetIdToURL.set(header.styleSheetId, url); |
| + } |
| + |
| + function dumpCoverageData(rules) |
| + { |
| + InspectorTest.log(`Coverage delta (${rules.length} entries)`); |
| + rules.sort((a, b) => |
| + (stylesheetIdToURL.get(a.styleSheetId) || '').localeCompare(stylesheetIdToURL.get(b.styleSheetId)) || a.startOffset - b.startOffset |
| + ); |
| + var lastURL; |
| + var output = ''; |
| + for (var rule of rules) { |
| + var url = stylesheetIdToURL.get(rule.styleSheetId) || '<unknown>'; |
| + if (lastURL !== url) |
| + output += ` ${output ? '\n' : ''}${url}:`; |
| + lastURL = url; |
| + var used = rule.used ? '+' : '-'; |
| + output += ` ${used}${rule.startOffset}-${rule.endOffset}`; |
| + } |
| + InspectorTest.log(output); |
| + } |
| + |
| + async function doActionAndDump(expression) |
| + { |
| + InspectorTest.log(`${expression} =>`); |
| + if (expression) |
| + await InspectorTest.evaluateInPageAsync(expression); |
| + var response = await InspectorTest.sendCommandPromise("CSS.takeCoverageDelta", {}); |
| + if (!response.result) { |
| + InspectorTest.log(`ERROR: ${response.error}`); |
| + InspectorTest.completeTest(); |
| + return; |
| + } |
| + dumpCoverageData(response.result.coverage); |
| + } |
| +} |
| + |
| +</script> |
| +<link rel="stylesheet" href="resources/coverage.css"> |
| +</head> |
| +<body onload="runTest();"> |
| +<h1 class="class">Class Selector</h1> |
| +<p id="id" class="usedStraightAway">ID Selector</p> |
| +<div></div> |
| + |
| +</body> |
| +</html> |
