Bug 1596728 - fix an error when opening a color picker for an element with a pseudo child. r=rcaliman

Differential Revision: https://phabricator.services.mozilla.com/D53673

--HG--
extra : moz-landing-system : lando

devtools/server/actors/inspector/utils.js

@@ -455,7 +455,11 @@ async function getBackgroundColor({ rawNode: node, walker }) {
   // - not element node
   // - more than one child
   // Avoid calculating bounds and creating doc walker by returning early.
-  if (node.nodeType != Node.ELEMENT_NODE || node.children.length > 0) {
+  if (
+    node.nodeType != Node.ELEMENT_NODE ||
+    node.childNodes.length > 1 ||
+    !node.firstChild
+  ) {
     return {
       value: colorUtils.colorToRGBA(
         getClosestBackgroundColor(node),

devtools/server/tests/browser/browser.ini

@@ -118,6 +118,7 @@ skip-if = true # Bug 1593562
 [browser_inspector-search.js]
 [browser_inspector-shadow.js]
 [browser_inspector-traversal.js]
+[browser_inspector-utils.js]
 [browser_layout_getGrids.js]
 [browser_layout_simple.js]
 [browser_markers-cycle-collection.js]

devtools/server/tests/browser/browser_inspector-utils.js

@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from inspector-helpers.js */
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/server/tests/browser/inspector-helpers.js",
+  this
+);
+
+const COLOR_WHITE = [255, 255, 255, 1];
+
+add_task(async function loadNewChild() {
+  const { walker } = await initInspectorFront(
+    `data:text/html,<style>body{color:red;background-color:white;}body::before{content:"test";}</style>`
+  );
+
+  const body = await walker.querySelector(walker.rootNode, "body");
+  const color = await body.getBackgroundColor();
+  Assert.deepEqual(
+    color.value,
+    COLOR_WHITE,
+    "Background color is calculated correctly for an element with a pseudo child."
+  );
+});