DevTools: make StyleSourceMapping in charge of managing UISourceCodes

third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags.html

Index: third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags.html
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags.html b/third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags.html
index 884db481d2cf9cdb225bcbe463e4e90e663041d2..bbf3f20ba437b0570a6d9741b9cae8d97ce81e57 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags.html
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags.html
@@ -4,38 +4,54 @@
 <script src="../../../http/tests/inspector/elements-test.js"></script>
 <script src="../../../http/tests/inspector/debugger-test.js"></script>
 <script src="../../../http/tests/inspector/live-edit-test.js"></script>
+<script src="../../../http/tests/inspector/bindings/bindings-test.js"></script>
 <script>
 
 function prepareTest()
 {
-    var text = document.querySelector(".stylesheet-text").textContent;
-    for (var i = 0; i < 3; ++i) {
-        var style = document.createElement("style");
-        style.textContent = text;
-        document.head.appendChild(style);
-    }
     runTest();
 }
 
-function test()
+async function test()
 {
-    InspectorTest.showScriptSource("stylesheet.css", onEditorOpened);
+    await InspectorTest.attachShadowDOM('shadow1', '#template'),
+    await InspectorTest.attachFrame('frame', './resources/frame.html');
+    var uiSourceCode = await InspectorTest.waitForUISourceCode('stylesheet.css');
+    var headers = InspectorTest.cssModel.styleSheetHeaders().filter(header => header.resourceURL().endsWith('stylesheet.css'));
+    InspectorTest.addResult('Headers count: ' + headers.length);
 
-    function onEditorOpened(sourceFrame)
-    {
-        InspectorTest.addSniffer(SDK.CSSModel.prototype, "_fireStyleSheetChanged", didEditStyleSheet);
-        InspectorTest.replaceInSource(sourceFrame, "100px", "2em");
-    }
+    InspectorTest.markStep('Make edits with Sources Panel');
+    var sourceFrame = await new Promise(x => InspectorTest.showScriptSource("stylesheet.css", x));
+    InspectorTest.replaceInSource(sourceFrame, 'red', 'EDITED');
+    await waitForStyleFile();
+    await checkHeadersContent();
+
+
+    InspectorTest.markStep('Make edits via css model');
+    InspectorTest.cssModel.setStyleSheetText(headers[0].id, '* { --foo: "bar" }');
+    await waitForStyleFile();
+    await checkHeadersContent();
+    InspectorTest.completeTest();
 
-    function didEditStyleSheet()
-    {
-        InspectorTest.selectNodeAndWaitForStyles("inspected", didSelectNode);
+
+    async function checkHeadersContent(expected) {
+        var contents = await Promise.all(headers.map(header => header.requestContent()));
+        contents.push(uiSourceCode.workingCopy());
+        var dedup = new Set(contents);
+        if (dedup.size !== 1) {
+            InspectorTest.addResult('ERROR: contents are out of sync!');
+            InspectorTest.completeTest();
+            return;
+        }
+        InspectorTest.addResult('Both headers and uiSourceCode content:');
+        InspectorTest.addResult(dedup.firstValue());
     }
 
-    function didSelectNode()
-    {
-        InspectorTest.dumpSelectedElementStyles(true, false);
-        InspectorTest.completeTest();
+    function waitForStyleFile() {

[dgozman, 2017/06/13 19:09:38]

nit: you can use addSnifferPromise

[lushnikov, 2017/06/13 19:25:21]

Done.

+        var fulfill;
+        var promise = new Promise(x => fulfill = x);
+        InspectorTest.addSniffer(Bindings.StyleFile.prototype, '_styleFileSyncedForTest', fulfill);
+        return promise;
     }
 }
 </script>
@@ -47,12 +63,16 @@ Tests that editing sourcecode which is referred by multiple stylesheets (via sou
 
 <div id="inspected">Inspected node</div>
 
-<div class="stylesheet-text" hidden>
-#inspected {
-    font-size: 100px;
-}
+<style>div{color:red;}
+/*# sourceURL=stylesheet.css */
+</style>
+
+<template id='template'>
+<style>div{color:red;}
 /*# sourceURL=stylesheet.css */
-</div>
+</style>
+<p>Hi! I'm ShadowDOM v1!</p>
+</template>
 
 </body>
 </html>