Closed Bug 1503896 Opened 5 years ago Closed 5 years ago

Track Changes - Track renaming of CSS selectors


(DevTools :: Inspector, enhancement, P2)



(firefox65 fixed)

Firefox 65
Tracking Status
firefox65 --- fixed


(Reporter: rcaliman, Assigned: rcaliman)




(6 files)

This adds code to Track Changes support tracking renaming of CSS rule selectors.
Blocks: 1503920
No longer blocks: track-changes
This isn't strictly necessary for this patch series, but it adds an
optimization to improve performance for React rendering and solves
warnings thrown while using React in dev mode.

MozReview-Commit-ID: ujqOa9qUsd
Depends on D10582
Improves the reducer for tracking CSS changes to handle more than one
CSS declaration changed in one operation. This is a requirement for
tracking whole rule removal or whole rule addition, like it happens
when renaming a CSS selector in the Rules view.

MozReview-Commit-ID: 25pf2GRiH4D
Depends on D10584
Other methods for tracking changes need to make use of the CSS rule
metadata (selector, rule index, ancestors, etc). This extracts that
logic into an accessor on the StyleRuleActor to facilitate reuse.

The CSS rule metadata will be augmented with information about a CSS
change (declarations added or removed) before being tracked.

MozReview-Commit-ID: xXec1XgUhk
Depends on D10585
Renames the logChange() to logDeclarationChange() to distinguish it from the newly introduced logSelectorChange() method which tracks selector rename by logging two changes: a whole rule remove using the old selector and a whole rule insertion add using the new selector.

MozReview-Commit-ID: 9VoVMHYXumE
Depends on D10586

Adds a new `type` param to the `change` object passed from server to the client to describe the change type so we can take custom actions along the way.

For changes to rules, the client marks the whole rule as either added or removed and styles it accordingly in the Changes panel.

Change types for declarations are not used at this time, but are put in for consistency and future-proofing.
Pushed by
(Part 1) Add keys to React components in Changes panel; r=pbro;
(Part 2) Support tracking multiple CSS declarations in one change; r=pbro
(Part 3) Extract CSS rule metadata to be reused with other logging methods; r=pbro
(Part 4) Track changes to CSS selectors; r=pbro
(Part 5) Add change type to change metadata and mark whole rules as added/removed; r=pbro
(Part 6) Add test for tracking changes to rule selectors; r=pbro
You need to log in before you can comment on or make changes to this bug.