Affected versions

• 65.0b10;
• 66.0a1 (2018-12-27), 66.0a1 (2019-01-11);

Affected platforms

• Ubuntu 18.04;
• macOS 10.13.6;
• Windows 10;

Steps to reproduce

1. Access https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
2. Scroll down and right click->inspect on the yellow [inline element] in the page;
3. Add 2properties in the rules section;
4. In the page, scroll down to [block-level element;] right click ->inspect;
5. Add 2properties in the rules section;

Expected result

• The changes are listed in the Changes section;

Actual result

• Second element is marked as iframe and the changes are not listed in the section;

Regression range

• The issue is reproducible all the way back to 65.0a1 (2018-10-26), so this is not a regression.

Additional notes

• for both step 3 and 5, I added: color: red; font-size: 30px;
• preff: devtools.inspector.changes.enabled
• attached screenshot with the issue(taken on the build from 2018-12-27)

Good catch. Thanks for filing!

With the latest Nightly 66.0a1 (2019-01-14), the bug behaves subtly different, likely because of the fix to Bug 1510790, but still incorrectly. Both items belong to separate iframes, however in the Changes panel they're grouped as if they belong to the same iframe.

The correct result is to have two .highlight selectors tracked separately with the changes from their respective iframes.