Bug 1737790 - [devtools] Color picker should fallback on getClosestBackgroundColor for elements without quads r=nchevobbe

The getBackgroundColor already has fallback paths for several situations.
We now use the fallback in case getAdjustedQuads returned an empty array.

A browser mochitest is added to cover this issue as well.

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

devtools/client/inspector/rules/test/browser_part1.ini

@@ -62,6 +62,7 @@ skip-if = win10_2004 # Bug 1723573
 [browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js]
 [browser_rules_colorpicker-commit-on-ENTER.js]
 [browser_rules_colorpicker-edit-gradient.js]
+[browser_rules_colorpicker-element-without-quads.js]
 [browser_rules_colorpicker-hides-element-picker.js]
 [browser_rules_colorpicker-hides-on-tooltip.js]
 [browser_rules_colorpicker-multiple-changes.js]

devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js

@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+  <style type="text/css">
+    button {
+      color: tomato;
+      background-color: green;
+    }
+  </style>
+  <!-- The space as text context for the button is mandatory here, so that the
+       firstChild of the button is an whitespace text node -->
+  <button id="button-with-no-quads"> </button>
+`;
+
+/**
+ * Check that we can still open the color picker on elements for which getQuads
+ * returns an empty array, which is used to compute the background-color
+ * contrast.
+ */
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const hasEmptyQuads = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const button = content.document.querySelector("button");
+      const quads = button.firstChild.getBoxQuads({
+        box: "content",
+        relativeTo: content.document,
+        createFramesForSuppressedWhitespace: false,
+      });
+      return quads.length === 0;
+    }
+  );
+  ok(hasEmptyQuads, "The test element has empty quads");
+
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("button", inspector);
+
+  const ruleEl = getRuleViewProperty(view, "button", "color");
+  ok(ruleEl, "The color declaration was found");
+
+  const swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch");
+  const colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
+  is(colorEl.textContent, "tomato", "The right color value was found");
+
+  info("Open the color picker");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = cPicker.once("ready");
+  swatchEl.click();
+  await onColorPickerReady;
+
+  info("Check that the background color of the button was correctly detected");
+  const contrastEl = cPicker.tooltip.container.querySelector(
+    ".contrast-value-and-swatch.contrast-ratio-single"
+  );
+  ok(
+    contrastEl.style.cssText.includes(
+      "--accessibility-contrast-bg: rgba(0,128,0,1)"
+    ),
+    "The background color contains the expected value"
+  );
+
+  info("Check that the color picker can be used");
+  await simulateColorPickerChange(view, cPicker, [255, 0, 0, 1], {
+    selector: "button",
+    name: "color",
+    value: "rgb(255, 0, 0)",
+  });
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+});

devtools/server/actors/inspector/utils.js

@@ -468,15 +468,11 @@ async function getBackgroundColor({ rawNode: node, walker }) {
     };
   }
 
-  const bounds = getAdjustedQuads(
-    node.ownerGlobal,
-    node.firstChild,
-    "content"
-  )[0].bounds;
+  const quads = getAdjustedQuads(node.ownerGlobal, node.firstChild, "content");
 
   // Fall back to calculating contrast against closest bg if there are no bounds for text node.
   // Avoid creating doc walker by returning early.
-  if (!bounds) {
+  if (quads.length === 0 || !quads[0].bounds) {
     return {
       value: colorUtils.colorToRGBA(
         getClosestBackgroundColor(node),
@@ -486,6 +482,8 @@ async function getBackgroundColor({ rawNode: node, walker }) {
     };
   }
 
+  const bounds = quads[0].bounds;
+
   const docWalker = walker.getDocumentWalker(node);
   const firstChild = docWalker.firstChild();