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

Status: RESOLVED FIXED

(DevTools :: Console, defect, P3)

Description

[oldmansutton]

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:

• www.google.com
• www.facebook.com
• www.stackexchange.com
• developer.mozilla.org
• www.bugzilla.org
  (I have yet to find a site where it works correctly). If I use Chrome, those same sites give me the correct results.

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.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

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)

Comment 2

[Emilio Cobos Álvarez (:emilio)]

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

Comment 3

[oldmansutton]

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.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

(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.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

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

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1734427 - [devtools] Fix CSSStyleSheet Rep title. r=Honza.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/14ab13052120
[devtools] Fix CSSStyleSheet Rep title. r=Honza.

Comment 8

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/14ab13052120