Bug 1544170 Part 5 - Add test for viewing styles while replaying.

--HG-- extra : rebase_source : 85e999c513a6cf43555412303e339a75a78d82a5
2019-04-19 11:27:14 -10:00 · 2019-04-19 11:27:14 -10:00 · 9291c6b9cd
--- a/devtools/client/webreplay/mochitest/browser.ini
+++ b/devtools/client/webreplay/mochitest/browser.ini
@ -19,6 +19,8 @@ support-files =
  examples/doc_rr_recovery.html
  examples/doc_rr_error.html
  examples/doc_inspector_basic.html
+  examples/doc_inspector_styles.html
+  examples/styles.css

 [browser_dbg_rr_breakpoints-01.js]
 [browser_dbg_rr_breakpoints-02.js]
@ -41,3 +43,4 @@ skip-if = true # See bug 1481009
 [browser_dbg_rr_logpoint-02.js]
 [browser_rr_inspector-01.js]
 [browser_rr_inspector-02.js]
+[browser_rr_inspector-03.js]
--- a/devtools/client/webreplay/mochitest/browser_rr_inspector-03.js
+++ b/devtools/client/webreplay/mochitest/browser_rr_inspector-03.js
@ -0,0 +1,61 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint-disable no-undef */
+
+"use strict";
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/shared-head.js",
+  this
+);
+
+function getComputedViewProperty(view, name) {
+  let prop;
+  for (const property of view.styleDocument.querySelectorAll(
+      "#computed-container .computed-property-view")) {
+    const nameSpan = property.querySelector(".computed-property-name");
+    const valueSpan = property.querySelector(".computed-property-value");
+
+    if (nameSpan.firstChild.textContent === name) {
+      prop = {nameSpan: nameSpan, valueSpan: valueSpan};
+      break;
+    }
+  }
+  return prop;
+}
+
+// Test that styles for elements can be viewed when using web replay.
+add_task(async function() {
+  const dbg = await attachRecordingDebugger(
+    "doc_inspector_styles.html",
+    { waitForRecording: true }
+  );
+  const {threadClient, tab, toolbox} = dbg;
+  await threadClient.resume();
+
+  await threadClient.interrupt();
+
+  const {inspector, view} = await openComputedView();
+  await checkBackgroundColor("body", "rgb(0, 128, 0)");
+  await checkBackgroundColor("#maindiv", "rgb(0, 0, 255)");
+
+  const bp = await setBreakpoint(threadClient, "doc_inspector_styles.html", 11);
+
+  await rewindToLine(threadClient, 11);
+  await checkBackgroundColor("#maindiv", "rgb(255, 0, 0)");
+
+  await threadClient.removeBreakpoint(bp);
+  await toolbox.closeToolbox();
+  await gBrowser.removeTab(tab);
+
+  async function checkBackgroundColor(node, color) {
+    await selectNode(node, inspector);
+
+    const value = getComputedViewProperty(view, "background-color").valueSpan;
+    const nodeInfo = view.getNodeInfo(value);
+    is(nodeInfo.value.property, "background-color");
+    is(nodeInfo.value.value, color);
+  }
+});
--- a/devtools/client/webreplay/mochitest/examples/doc_inspector_styles.html
+++ b/devtools/client/webreplay/mochitest/examples/doc_inspector_styles.html
@ -0,0 +1,16 @@
+<body>
+<link rel="stylesheet" href="styles.css">
+<div id="maindiv">HELLO</div>
+<script>
+const cpmm = SpecialPowers.Services.cpmm;
+function recordingFinished() {
+  cpmm.sendAsyncMessage("RecordingFinished");
+}
+function foo() {
+  document.getElementById("maindiv").innerHTML = "GOODBYE";
+  document.getElementById("maindiv").style.backgroundColor = "blue";
+  window.setTimeout(recordingFinished);
+}
+window.setTimeout(foo);
+</script>
+</body>
--- a/devtools/client/webreplay/mochitest/examples/styles.css
+++ b/devtools/client/webreplay/mochitest/examples/styles.css
@ -0,0 +1,7 @@
+body {
+    background-color: green;
+}
+
+div {
+    background-color: red;
+}