Iulia Cristescu, QA [:JuliaC] (away, please needinfo? cornel.ionce@softvision.ro) Reporter
	Description • 5 years ago

[Affected versions]:
- 65.0b8 build1 (20190103150357)
- 66.0a1 (2019-01-03)

[Affected platforms]:
- Windows 10 x64
- macOs 10.12.6
- Ubuntu 16.04 x64

[Steps to reproduce]:
Preconditions:
- go to about:config and make sure that devtools.inspector.changes.enabled is set to true
1. Launch Firefox
2. Go to https://www.youtube.com/
3. Right click on any element and select the Inspect Element context menu option
4. Make one first change in the Rules panel for one of the html:not(.style-scope) selectors 
- inspect the Changes tab 
5. Continue to make changes for other html:not(.style-scope) selectors 
- inspect the Changes tab 

[Expected result]:
- The Changes tab properly reflects the rule changes

[Actual result]:
- Inconsistencies between the changed rules and the displayed entries are triggered in the Changes tab (only the change made in step 4 is properly reflected, the next ones are either not displayed or are replaced with "Inline #(random number)" (e.g. Inline #110) entries
- for more details, see the attached screencast https://drive.google.com/file/d/1NFh9vGHzAFJIH6JeiniwdZhcpOrgpm3z/view?usp=sharing

[Regression range]:
- The issue is reproducible all the way back to 65.0a1 (2018-10-26), so this is not e regression

	Razvan Caliman [:rcaliman]
	Comment 1 • 5 years ago

Thanks for filing, Iulia!

This seems to be the same symptom as the one in Bug 1510790. Fixing that will likely fix this too. I'm marking the dependency but not closing as duplicate so I remember to test this assumption.

The selector is the same, but the changed rules live in different stylesheets. That's why only the rule with the selector changed first shows up in the Changes panel and the following ones are accidentally hidden.

> "Inline #(random number)"
It's not a random number. It's the index of the inline stylesheet where the changed css rule lives. It looks like they're automatically generated on YouTube (perhaps a fallback for Shadow DOM where each component also loads its fallback styles).