Devtools' own CSS triggers Browser Console errors for invalid variables, like "Property contained reference to invalid variable. Error in parsing value for ‘color’. Falling back to ‘inherit’. styles.css:368:6723"

NEW
Unassigned

Status

P2
normal
2 years ago
6 months ago

People

(Reporter: dholbert, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
STR:
 1. Ctrl+Shift+J to open Browser Console.
 2. Click the dropdown arrow next to "CSS" and click "Warnings" (so that CSS Warnings are enabled).
 3. Open devtools inspector (e.g. right-click some element in a web page and choose "Inspect").
  --> Look at the Browser Console.

 4. Open devtools debugger (click the "debugger" tab-heading), and hover over the headings in its right pane ("Breakpoints", "Call Stack", "Scopes")
  --> Look at the Browser Console.

ACTUAL RESULTS:
After step 3 (opening inspector), I see an entry with this text:
> Property contained reference to invalid variable.
>   Error in parsing value for ‘color’.  Falling back to ‘inherit’.
>   styles.css:368:6723

This points to this chunk of resource://devtools/client/debugger/new/styles.css :
> .sources-header-info {
>  font-size: 12px;
>  color: var(--theme-comment-alt);

After step 4 (opening debugger), I see entries with this text:
> Property contained reference to invalid variable.
>   Error in parsing value for ‘fill’.  Falling back to ‘inherit’.
>   styles.css:1107:20315

This points to this chunk of resource://devtools/client/debugger/new/styles.css :
> .accordion ._header:hover svg {
>   fill: var(--theme-comment-alt);


EXPECTED RESULTS:
No such invalid CSS (and hence no such errors). When web developers are *using* devtools to find issues in their own page, we should do our best to avoid cluttering the warning area with errors in our own devtools code.
(Reporter)

Comment 1

2 years ago
Note: this shows up as logging in tests, too -- e.g. this Linux debug dt-5 mochitest run from today:
 https://treeherder.mozilla.org/logviewer.html#?job_id=38383249&repo=mozilla-inbound#L1430

If you open that link, and click the "open raw log" button at the top, and then do find-in-page for "invalid variable", there are 3900 hits. 1 of them is the one I'm reporting here, and the other 3899 are for chrome://devtools/skin/light-theme.css
(Reporter)

Comment 2

2 years ago
Perhaps bgrins or jryans might know what's going on here? (or be the people to investigate, or know the right people to investigate)
Summary: Devtools' own CSS triggers Browser Console error: "Property contained reference to invalid variable. Error in parsing value for ‘color’. Falling back to ‘inherit’. styles.css:368:6723" → Devtools' own CSS triggers Browser Console errors for invalid variables, like "Property contained reference to invalid variable. Error in parsing value for ‘color’. Falling back to ‘inherit’. styles.css:368:6723"
(Reporter)

Comment 3

2 years ago
Created attachment 8805677 [details]
gzipped devtools test log, with 3900 "invalid variable" CSS warnings

(here's the gzipped plaintext version of the dt-5 mochitest run that I mentioned above, with 3900 instances of this sort of warning.)
Hmm...  Do we know if this has been around for a while, or did it only appear recently?

I did make some CSS packaging changes in bug 1311178 to reduce duplicate files...  It would be good to check builds before that landed.
(Reporter)

Comment 5

2 years ago
I just tested a random nightly from 2016-09-01, and I don't see color/fill warnings (for styles.css) there, but I do see a ton for light-theme.css when I've got the debugger up & viewing actual JS. Starting with:
> Property contained reference to invalid variable.  Error in parsing value for ‘background-attachment’.
> Falling back to ‘initial’. light-theme.css:16:385
(That's for the ".theme-body {" rule in light-theme.css.)
(Reporter)

Comment 6

2 years ago
And in a nightly from 10-26 (just before bug 1311178 landed), I see both of the warnings that I reported in comment 0 (though the "color" one only appears when I hit the Debugger tab -- so the timing is perhaps a little unreliable).

Also: I can reliably trigger a bunch of "light-theme.css" warnings if I click the "memory" devtools tab (though they only show up the first time I visit that tab, presumably because we only parse that CSS file once. I can make them show up again if I close the devtools area entirely and then reopen it, though.)

So: anyway, I don't think Bug 1311178 impacted this.

Updated

2 years ago
See Also: → bug 1315493
It's not immediately obvious to me why this is caused by the debugger. Since the error is happening on the frontend, James is probably the best person to look into this.
Priority: -- → P2
Depends on: 1311541
This might be caused by the same thing we saw with the patch applied in Bug 1311541.  The variables are loaded in light-theme.css which is injected by a script on the page (theme-switching.js).  But if a link tag on the page is referencing one of those variables there's a chance it doesn't exist yet.

Don't know why this seems to be affecting only resource URIs and not chrome, but hopefully the fix in that bug will take care of this as well.

Updated

6 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.