1737790 - Color editor popup does not open for button with space content

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Open a tab with data:text/html,<meta charset=utf8><style>button {color: tomato;}</style><button> </button>
2. Open devtools
3. In the inspector, select the <button> element
4. In the rule view, click on the color swatch to open the color editor

Expected results

The popup is opened

Actual results

The popup does not open

---

There's the following message in the browser console

TypeError: can't access property "bounds", getAdjustedQuads(...)[0] is undefined
    getBackgroundColor resource://devtools/server/actors/inspector/utils.js:475
    getBackgroundColor resource://devtools/server/actors/inspector/node.js:652
    handler resource://devtools/shared/protocol/Actor.js:175
    onPacket resource://devtools/server/devtools-server-connection.js:379
    _onPacketReceived resource://devtools/shared/transport/js-window-actor-transport.js:48
    emit resource://gre/modules/EventEmitter.jsm:160
    receiveMessage resource://devtools/server/connectors/js-window-actor/DevToolsFrameChild.jsm:513
Actor.js:99:15

it's pointing at: https://searchfox.org/mozilla-central/rev/3b86063e6d46b2f130513c499343cd47773062b1/devtools/server/actors/inspector/utils.js#471-475

The issue is visible in Firefox 78+

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jdescottes, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 2

[Julian Descottes [:jdescottes]]

Sounds like an easy P2 S3.

This is somewhat related to Bug 1567310. If we update https://searchfox.org/mozilla-central/rev/7241c1f9e94377b70b49cf702264269779c5c322/devtools/shared/layout/utils.js#168 to set createFramesForSuppressedWhitespace to true, the color picker works. However, given the explanations in the initial bug, I don't think we should simply do that.

So I guess we should update https://searchfox.org/mozilla-central/rev/7241c1f9e94377b70b49cf702264269779c5c322/devtools/server/actors/inspector/utils.js#471-475 to use the fallback also if getBoxQuads returned an empty array.

Should be checked with a mochitest.

Comment 3

[Julian Descottes [:jdescottes]]

Attachment: Bug 1737790 - [devtools] Color picker should fallback on getClosestBackgroundColor for elements without quads

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.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a3e50b873fc0
[devtools] Color picker should fallback on getClosestBackgroundColor for elements without quads r=nchevobbe

Comment 5

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/a3e50b873fc0