1503896 - Track Changes - Track renaming of CSS selectors

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P2)

Description

[Razvan Caliman [:rcaliman]]

This adds code to Track Changes support tracking renaming of CSS rule selectors.

Comment 1

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1503896 - (Part 1) Add keys to React components in Changes panel; r=pbro;

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

Comment 2

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1503896 - (Part 2) Support tracking multiple CSS declarations in one change; r=pbro

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

Comment 3

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1503896 - (Part 3) Extract CSS rule metadata to be reused with other logging methods; r=pbro

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

Comment 4

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1503896 - (Part 4) Track changes to CSS selectors; r=pbro

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

Comment 5

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1503896 - (Part 5) Add change type to change metadata and mark whole rules as added/removed; r=pbro

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.

Comment 6

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1503896 - (Part 6) Add test for tracking changes to rule selectors; r=pbro

Depends on D11116

Comment 7

[Razvan Caliman [:rcaliman]]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=00ee976fcbc2f93c1a745da1d4022588017c4d5d

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1601672ee6af
(Part 1) Add keys to React components in Changes panel; r=pbro;
https://hg.mozilla.org/integration/autoland/rev/33c358d0d2c2
(Part 2) Support tracking multiple CSS declarations in one change; r=pbro
https://hg.mozilla.org/integration/autoland/rev/95ac332b63ed
(Part 3) Extract CSS rule metadata to be reused with other logging methods; r=pbro
https://hg.mozilla.org/integration/autoland/rev/0a015306cf2b
(Part 4) Track changes to CSS selectors; r=pbro
https://hg.mozilla.org/integration/autoland/rev/ecc6903c579b
(Part 5) Add change type to change metadata and mark whole rules as added/removed; r=pbro
https://hg.mozilla.org/integration/autoland/rev/10a65f18e697
(Part 6) Add test for tracking changes to rule selectors; r=pbro

Comment 9

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/1601672ee6af
https://hg.mozilla.org/mozilla-central/rev/33c358d0d2c2
https://hg.mozilla.org/mozilla-central/rev/95ac332b63ed
https://hg.mozilla.org/mozilla-central/rev/0a015306cf2b
https://hg.mozilla.org/mozilla-central/rev/ecc6903c579b
https://hg.mozilla.org/mozilla-central/rev/10a65f18e697