1511627 - Track Changes - Removing then adding back the same declarations does not cancel out

Status: NEW

(DevTools :: Inspector: Changes, defect, P3)

Description

[Razvan Caliman [:rcaliman]]

Note this happens only for multiple declarations. Removing then adding back a single declaration is handled correctly - it is not shown in the Changes panel because the operations cancel each other out.

Steps to Reproduce:
- Run this in a new tab:
data:text/html,<style>div{width:0; height:0;}</style><div>

- Open the DevTools Inspector, select the <div>
- Switch to the Rule view
- Remove both declarations (focus the name, press Backspace/Delete, then Enter)
- Add back both declarations

Expected Result:

Nothing shows up in the Changes panel because the operations cancel each other out.

Actual Result:
Both declarations show as first removed, then added in the Changes panel.

Problem:
The issue comes from the index the declarations have when they are tracked as removed. As the first one gets removed, it is tracked with index zero. Then the second one gets removed, but it also gets tracked with index zero since it has shifted in position when the first one got removed.

The Changes panel reconciles operations on declarations by checking the stored name, value and index. Since the two declarations are tracked with the same index, the reconciliation logic fails to identify the correct declaration per operation.