1262425 - Computed padding value doesn't appear in the computed-styles tab when the value comes from a css variable

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Patrick Brosset <:pbro>]

STR:

- Open a new tab with this URL:
  data:text/html,<style>:root{--size:20px;} div {padding: var(--size);}</style><div></div>
- Open the inspector, select the div, and switch to the computed tab

==> The padding value doesn't appear in the list of computed styles.
    It only appears if you switch the "browser styles" ON.

Comment 1

[Patrick Brosset <:pbro>]

See this thread: https://twitter.com/FremyCompany/status/717579679876526080

Comment 2

[Patrick Brosset <:pbro>]

Filter on CLIMBING SHOES.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

from (dupe) https://bugzilla.mozilla.org/show_bug.cgi?id=1400046#c1 :

I found out that this bug only appears for shorthand properties. Longhands are displayed as expected.

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1262425 - [devtools] Fix displaying shorthand computed properties whose value depends on longhand using CSS variable. r=#devtools

When setting a longhand property value using CSS variable, the property value
we get for the shorthand from the rule CSSStyleDeclaration is an empty string.
In such case, we don't want to filter out the property if the "Browser styles"
checkbox is not checked.
In order to fix this, we check for the presence of the property in the CSSStyleDeclaration
instead of checking its truthiness, as CSSStyleDeclaration.getPropertyValue will
return an empty string for non-set properties as well.
We also change a similar check to make sure we include the matched selector, even
if we can't display a meaningful value to the user (see Bug 2003264).

Because of these changes, browser_computed_custom_properties.js needed to be
updated. We change the border we were using to outline because it gives
us less longhand properties to check.

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1262425 - [devtools] Add chrome-only CSSStyleDeclaration#hasLonghandProperty(propertyName). r=emilio.

Comment 8

[Phabricator Automation]

Comment on attachment 9530630 [details]
Bug 1262425 - [devtools] Add chrome-only CSSStyleDeclaration#hasLonghandProperty(propertyName). r=emilio.

Revision D274933 was moved to bug 2006255. Setting attachment 9530630 [details] to obsolete.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/19db3bf02015
https://hg.mozilla.org/integration/autoland/rev/8ddcc220e631
[devtools] Fix displaying shorthand computed properties whose value depends on longhand using CSS variable. r=devtools-reviewers,bomsy

Comment 10

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/8ddcc220e631