1461860 - Empty "inline style" editor on reddit with the new theme

Status: NEW

(DevTools :: Style Editor, defect, P2)

Description

[Markus Stange [:mstange]]

Steps to reproduce:

 1. Go to https://www.reddit.com/r/firefox/
 2. Make sure you're seeing the new reddit theme. I think you need to have a reddit account for this, be logged in, and have these two options checked in the "beta options" section of https://www.reddit.com/prefs/ : "I would like to beta test features for reddit" and "Use the redesign as my default experience".
 3. On https://www.reddit.com/r/firefox/ , right click -> Inspect Element on a random element of the page.
 4. The selected element will have an unreadable class like "dIOXbF" set on it. Look at the style rule for that class in the pane on the right.
 5. Click the "inline" link next to the selector to go to the original CSS source.
 6. You are now in the "Style Editor" pane. Realize that you're looking at the wrong "<inline style sheet>" source: You're looking at "<inline style sheet #1> (11 rules)" whereas you want to be looking at "<inline style sheet #3> (400 rules)".
 7. Go to "<inline style sheet #3> (400 rules)".

Expected results:
The CSS rules for all the unreadable CSS classes should be displayed in the editor.

Actual results:
The editor is empty.

Comment 1

[Markus Stange [:mstange]]

I was able to get at the CSS by executing Array.from(document.styleSheets[2].cssRules).map(r => r.cssText).join("\n") in the console.