Bug 1544170 Part 5 - Add test for viewing styles while replaying.
authorBrian Hackett <bhackett1024@gmail.com>
Fri, 19 Apr 2019 11:27:14 -1000
changeset 470291 3425e11a7a2d6c603912c7d747850e827edda748
parent 470290 13cfdfc790a066c147ca19da4eb355d774834db7
child 470292 6ffe4f5a3c4744adce3f62255cf91351c39a33a0
push id35892
push userrgurzau@mozilla.com
push dateSat, 20 Apr 2019 09:55:32 +0000
treeherdermozilla-central@a092972b53f0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1544170
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1544170 Part 5 - Add test for viewing styles while replaying.
devtools/client/webreplay/mochitest/browser.ini
devtools/client/webreplay/mochitest/browser_rr_inspector-03.js
devtools/client/webreplay/mochitest/examples/doc_inspector_styles.html
devtools/client/webreplay/mochitest/examples/styles.css
--- a/devtools/client/webreplay/mochitest/browser.ini
+++ b/devtools/client/webreplay/mochitest/browser.ini
@@ -14,16 +14,18 @@ support-files =
   !/devtools/client/debugger/test/mochitest/helpers/context.js
   !/devtools/client/inspector/test/shared-head.js
   examples/doc_rr_basic.html
   examples/doc_rr_continuous.html
   examples/doc_rr_logs.html
   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]
 [browser_dbg_rr_breakpoints-03.js]
 [browser_dbg_rr_breakpoints-04.js]
 [browser_dbg_rr_breakpoints-05.js]
 [browser_dbg_rr_record.js]
 [browser_dbg_rr_stepping-01.js]
@@ -36,8 +38,9 @@ skip-if = true # See bug 1481009
 [browser_dbg_rr_replay-02.js]
 [browser_dbg_rr_replay-03.js]
 [browser_dbg_rr_console_warp-01.js]
 [browser_dbg_rr_console_warp-02.js]
 [browser_dbg_rr_logpoint-01.js]
 [browser_dbg_rr_logpoint-02.js]
 [browser_rr_inspector-01.js]
 [browser_rr_inspector-02.js]
+[browser_rr_inspector-03.js]
new file mode 100644
--- /dev/null
+++ 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);
+  }
+});
new file mode 100644
--- /dev/null
+++ 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>
new file mode 100644
--- /dev/null
+++ b/devtools/client/webreplay/mochitest/examples/styles.css
@@ -0,0 +1,7 @@
+body {
+    background-color: green;
+}
+
+div {
+    background-color: red;
+}