Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 176 insertions, 0 deletions

diff --git a/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
new file mode 100644
index 0000000000..0aa1c85ff2
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
@@ -0,0 +1,176 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests various output of the computed-view's getNodeInfo method.
+// This method is used by the HighlightersOverlay and TooltipsOverlay on mouseover to
+// decide which highlighter or tooltip to show when hovering over a value/name/selector
+// if any.
+//
+// For instance, browser_ruleview_selector-highlighter_01.js and
+// browser_ruleview_selector-highlighter_02.js test that the selector
+// highlighter appear when hovering over a selector in the rule-view.
+// Since the code to make this work for the computed-view is 90% the same,
+// there is no need for testing it again here.
+// This test however serves as a unit test for getNodeInfo.
+
+const {
+  VIEW_NODE_SELECTOR_TYPE,
+  VIEW_NODE_PROPERTY_TYPE,
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_IMAGE_URL_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red;
+      color: white;
+    }
+    div {
+      background: green;
+    }
+    div div {
+      background-color: yellow;
+      background-image: url(chrome://branding/content/icon64.png);
+      color: red;
+    }
+  </style>
+  <div><div id="testElement">Test element</div></div>
+`;
+
+// Each item in this array must have the following properties:
+// - desc {String} will be logged for information
+// - getHoveredNode {Generator Function} received the computed-view instance as
+//   argument and must return the node to be tested
+// - assertNodeInfo {Function} should check the validity of the nodeInfo
+//   argument it receives
+const TEST_DATA = [
+  {
+    desc: "Testing a null node",
+    getHoveredNode() {
+      return null;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo, null);
+    },
+  },
+  {
+    desc: "Testing a useless node",
+    getHoveredNode(view) {
+      return view.element;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo, null);
+    },
+  },
+  {
+    desc: "Testing a property name",
+    getHoveredNode(view) {
+      return getComputedViewProperty(view, "color").nameSpan;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE);
+      ok("property" in nodeInfo.value);
+      ok("value" in nodeInfo.value);
+      is(nodeInfo.value.property, "color");
+      is(nodeInfo.value.value, "rgb(255, 0, 0)");
+    },
+  },
+  {
+    desc: "Testing a property value",
+    getHoveredNode(view) {
+      return getComputedViewProperty(view, "color").valueSpan;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
+      ok("property" in nodeInfo.value);
+      ok("value" in nodeInfo.value);
+      is(nodeInfo.value.property, "color");
+      is(nodeInfo.value.value, "rgb(255, 0, 0)");
+    },
+  },
+  {
+    desc: "Testing an image url",
+    getHoveredNode(view) {
+      const { valueSpan } = getComputedViewProperty(view, "background-image");
+      return valueSpan.querySelector(".theme-link");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE);
+      ok("property" in nodeInfo.value);
+      ok("value" in nodeInfo.value);
+      is(nodeInfo.value.property, "background-image");
+      is(nodeInfo.value.value, 'url("chrome://branding/content/icon64.png")');
+      is(nodeInfo.value.url, "chrome://branding/content/icon64.png");
+    },
+  },
+  {
+    desc: "Testing a matched rule selector (bestmatch)",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "background-color");
+      return el.querySelector(".bestmatch");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
+      is(nodeInfo.value, "div div");
+    },
+  },
+  {
+    desc: "Testing a matched rule selector (matched)",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "background-color");
+      return el.querySelector(".matched");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
+      is(nodeInfo.value, "div");
+    },
+  },
+  {
+    desc: "Testing a matched rule selector (parentmatch)",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".parentmatch");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
+      is(nodeInfo.value, "body");
+    },
+  },
+  {
+    desc: "Testing a matched rule value",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".computed-other-property-value");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
+      is(nodeInfo.value.property, "color");
+      is(nodeInfo.value.value, "red");
+    },
+  },
+  {
+    desc: "Testing a matched rule stylesheet link",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".rule-link .theme-link");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo, null);
+    },
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#testElement", inspector);
+
+  for (const { desc, getHoveredNode, assertNodeInfo } of TEST_DATA) {
+    info(desc);
+    const nodeInfo = view.getNodeInfo(await getHoveredNode(view));
+    assertNodeInfo(nodeInfo);
+  }
+});