From 9b1b95b7450fdf22d6918d6f36eb2e48b114751e Mon Sep 17 00:00:00 2001
From: Yura Zenevich <yura.zenevich@gmail.com>
Date: Tue, 19 Nov 2019 11:36:47 +0000
Subject: [PATCH] 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     |  6 ++++-
 devtools/server/tests/browser/browser.ini     |  1 +
 .../tests/browser/browser_inspector-utils.js  | 26 +++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 devtools/server/tests/browser/browser_inspector-utils.js

diff --git a/devtools/server/actors/inspector/utils.js b/devtools/server/actors/inspector/utils.js
index b03e13f35bb6..a6848cca0a97 100644
--- a/devtools/server/actors/inspector/utils.js
+++ b/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),
diff --git a/devtools/server/tests/browser/browser.ini b/devtools/server/tests/browser/browser.ini
index 2bd0ec6c5e84..446c892f3f2a 100644
--- a/devtools/server/tests/browser/browser.ini
+++ b/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]
diff --git a/devtools/server/tests/browser/browser_inspector-utils.js b/devtools/server/tests/browser/browser_inspector-utils.js
new file mode 100644
index 000000000000..ca4c78ffc556
--- /dev/null
+++ b/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."
+  );
+});