Closed Bug 1734427 Opened 3 months ago Closed 3 months ago

CSSStyleSheet objects are represented as "StyleSheet" by devtools, causing confusion

Categories

(DevTools :: Console, defect, P3)

Firefox 92
defect

Tracking

(firefox95 fixed)

RESOLVED FIXED
95 Branch
Tracking Status
firefox95 --- fixed

People

(Reporter: oldmansutton, Assigned: nchevobbe)

References

Details

Attachments

(1 file)

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:92.0) Gecko/20100101 Firefox/92.0

Steps to reproduce:

Within Firefox 92.0 64-bit on Ubuntu, I go into the development tools console. Within the console, I type "document.styleSheets". The StyleSheetList interface that is returned is a list of the wrong object types.

I've tested this on a local site I was developing, and verified the behavior by testing again on:

Actual results:

I received back a StyleSheetList interface that represented a list of StyleSheet objects, which is incorrect according to specs listed on MDN.

Expected results:

While using Firefox 92.0 64-bit on Ubuntu (canonical 1.0), I needed to access document.styleSheets within my code. I was expecting back a StyleSheetList interface that represents a list of CSSStyleSheet objects.

Component: Untriaged → DOM: CSS Object Model
Product: Firefox → Core

I'm confused. They're CSSStyleSheet objects:

document.styleSheets[0] instanceof CSSStyleSheet // true

What am I missing? Is it just that DevTools says they're StyleSheet objects? (They're that too)

Flags: needinfo?(oldmansutton)

If you can provide a snippet of JS that behaves differently in Chrome vs. Firefox I'm happy to take a look. We do have a minor mismatch with the spec in the StyleSheetList webidl interface which I'm happy to fix, but shouldn't have any behavior change since all our StyleSheet objects are also CSSStyleSheet objects.

Probably you got confused because devtools seems to represent these as StyleSheet: https://searchfox.org/mozilla-central/rev/1dab956095020c53aa66cbee8845eb1fa925b75c/devtools/client/shared/components/reps/reps/stylesheet.js#53-56

Depends on: 1734445

That is exactly why I'm confused. Since it tells me they are StyleSheet, and other browsers represent them as CSSStyleSheet, and since my initial case was missing the cssRules property.

That one update would save confusion I think, but you're right, it IS returning CSSStyleSheet objects.

Now if only constructible style sheets were implemented by default, I might be able to do something with them...

I'm ok to close this, otherwise. Thank you.

Flags: needinfo?(oldmansutton)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #2)

If you can provide a snippet of JS that behaves differently in Chrome vs. Firefox I'm happy to take a look. We do have a minor mismatch with the spec in the StyleSheetList webidl interface which I'm happy to fix, but shouldn't have any behavior change since all our StyleSheet objects are also CSSStyleSheet objects.

Probably you got confused because devtools seems to represent these as StyleSheet: https://searchfox.org/mozilla-central/rev/1dab956095020c53aa66cbee8845eb1fa925b75c/devtools/client/shared/components/reps/reps/stylesheet.js#53-56

Nicolas, is this easy to change? Perhaps we should consider doing that.

Component: DOM: CSS Object Model → Console
Flags: needinfo?(nchevobbe)
Product: Core → DevTools
Summary: Accessing document.styleSheets return a StyleSheetList interface of StyleSheet objects, rather than CSSStyleSheet objects → CSSStyleSheet objects are represented as "StyleSheet" by devtools, causing confusion

shouldn't be too hard, let me check what tests need to be updated

Flags: needinfo?(nchevobbe)
Assignee: nobody → nchevobbe
Severity: -- → S3
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Priority: -- → P3
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/14ab13052120
[devtools] Fix CSSStyleSheet Rep title. r=Honza.
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → 95 Branch
You need to log in before you can comment on or make changes to this bug.