Open
Bug 1313768
Opened 8 years ago
Updated 2 years ago
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"
Categories
(DevTools :: Console, defect, P3)
DevTools
Console
Tracking
(Not tracked)
NEW
People
(Reporter: dholbert, Unassigned)
References
Details
Attachments
(1 file)
|
(deleted),
application/gzip
|
Details |
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•8 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•8 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•8 years ago
|
||
(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•8 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•8 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.
|
||
Comment 7•8 years ago
|
||
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
|
||
Comment 8•8 years ago
|
||
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 years ago
|
Product: Firefox → DevTools
|
|
Reporter | |
Comment 10•6 years ago
|
||
Sure! BTW, with current Firefox Nightly, this step from comment 0...
- Click the dropdown arrow next to "CSS" and click "Warnings" (so that CSS Warnings are enabled).
...should now read:
- Click the funnel icon to the left of "filter output", and click "CSS" to make sure that's active.
And I can't proceed past that step, I think, because it looks like that option is just broken -- it triggers some JS errors when I activate it, which I filed as bug 1523020, and which gives me a low level of confidence that CSS errors are actually going to be logged successfully.
Flags: needinfo?(dholbert)
|
||
Updated•6 years ago
|
Component: Debugger → Console
Priority: P2 → P3
|
|
||
Comment 11•6 years ago
|
||
I see, thanks for the update.
|
|
Reporter | |
Comment 12•6 years ago
|
||
(If I ignore the fact that those JS errors are logged -- i.e. if I ignore bug 1523020 -- then this seems superficially WORKSFORME in that I never see any CSS parsing errors appear in the Browser Console. Instead, I only see JS errors, for css-related devtools stuff. At first I thought that meant this was fixed, but now I'm suspicious that there could easily still be CSS parsing errors lurking and we just don't get far enough to be able to report them anymore, due to bug 1523020.)
|
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•