color picker fails with web fonts like font awesome (because of pseudo-elements)
Categories
(DevTools :: Inspector, defect, P2)
Tracking
(firefox70 wontfix, firefox71 verified, firefox72 verified)
People
(Reporter: mark.bokil, Assigned: yzen)
Details
(Whiteboard: [dt-q])
Attachments
(2 files)
|
536.89 KB,
image/png
|
Details | |
|
47 bytes,
text/x-phabricator-request
|
pascalc
:
approval-mozilla-beta+
|
Details | Review |
color-picker-failure.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Steps to reproduce:
Went to the font awesome site and used the inspector to add a color to a web font. In the inspector I hovered over the color picker and it advised me to click to open the color picker. I clicked the color picker and nothing opens. https://fontawesome.com/icons?d=gallery
Actual results:
The color picker fails to appear when clicked and a web font element is selected in the inspector.
Expected results:
Color picker should have appeared.
|
||
Comment 1•6 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Comment 2•6 years ago
|
||
I can repro on Nightly.
|
||
Comment 3•6 years ago
|
||
Thank you for filing, I can reproduce this too in Nightly (Firefox 72) and when I do, the following errors appear in the browser console:
Error while calling actor 'domnode's method 'getBackgroundColor' getAdjustedQuads(...)[0] is undefined Actor.js:91:13
getBackgroundColor@resource://devtools/server/actors/inspector/utils.js:472:1
getBackgroundColor@resource://devtools/server/actors/inspector/node.js:718:32
handler@resource://devtools/shared/protocol/Actor.js:154:37
onPacket@resource://devtools/server/debugger-server-connection.js:378:58
receiveMessage@resource://devtools/shared/transport/child-transport.js:66:16
Actor.js:96:15
uncaught exception: Protocol error (unknownError): getAdjustedQuads(...)[0] is undefined
It looks like the way we try to calculate color contrast in the color-picker fails for that particular site.
|
|
||
Comment 4•6 years ago
|
||
The error comes from this line of code: https://searchfox.org/mozilla-central/rev/cac340f10816707e91c46db6d285f80259420f07/devtools/server/actors/inspector/utils.js#468
Which was added in bug 1568053, which landed in Firefox 70.
Here is a reduced test case:
- open this URL
data:text/html,<style>body{color:red}body::before{content:"test";}</style> - select
<body> - click on the red color swatch in the rule-view.
Yura: do you know what needs to be done to avoid this problem with pseudo-elements?
|
Assignee | |
Updated•6 years ago
|
|
|
Assignee | |
Comment 5•6 years ago
|
||
|
||
Comment 7•6 years ago
|
||
| bugherder | ||
|
|
Assignee | |
Comment 8•6 years ago
|
||
Comment on attachment 9109723 [details]
Bug 1596728 - fix an error when opening a color picker for an element with a pseudo child. r=rcaliman
Beta/Release Uplift Approval Request
- User impact if declined: In the use case described in STR, color picker is broken and would not open.
- Is this code covered by automated tests?: No
- Has the fix been verified in Nightly?: Yes
- Needs manual test from QE?: Yes
- If yes, steps to reproduce:
- List of other uplifts needed: None
- Risk to taking this patch: Low
- Why is the change risky/not risky? (and alternatives if risky): Added additional check to ensure that we do not throw a JS exception when opening a color picker in the inspector panel.
- String changes made/needed: none
|
||
Updated•6 years ago
|
|
|
||
Comment 9•6 years ago
|
||
Comment on attachment 9109723 [details]
Bug 1596728 - fix an error when opening a color picker for an element with a pseudo child. r=rcaliman
Fix for a recent devtools regression, that looks sage enough for our last beta, uplift approved for 71 beta 12, thanks.
|
||
Comment 10•6 years ago
|
||
| bugherder uplift | ||
|
||
Updated•6 years ago
|
|
||
Comment 11•6 years ago
|
||
Confirmed issue with 72.0a1 (2019-11-15) on Windows 10.
Fix verified with 71.0b12, 72.0a1(2019-11-21)on Windows 10, macOS 10.14, Ubuntu 18.04.
Description
•