Closed Bug 1499049 Opened 3 years ago Closed 3 years ago

Track Changes - log and display changes to nested CSS rules


(DevTools :: Inspector, enhancement, P3)



(firefox65 fixed)

Firefox 65
Tracking Status
firefox65 --- fixed


(Reporter: rcaliman, Assigned: rcaliman)


(Blocks 1 open bug)



(9 files)

46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
The patches for this bug:
- log changes to CSS declarations which include their full ancestor rule tree to differentiate between changes to rules with identical selectors;
- introduce methods to uniquely identify stylesheets and CSS rules within their stylesheets (to be used as IDs in Redux store);
- replace old Redux store structure with a flat collection of tracked rules which have assigned parent-child relationships;
- update React component to render diff of nested rules.
- Introduce ancestorRules getter to StyleRuleActor to get a flattened
rule tree with the ancestors of the current rule;
- Introduce CSSRuleTypeName to css-logic helpers to map between CSS rule
type and human-readable name;
- Log rule index position with each CSS declaration change to help
differentiate between changes to rules with identical selectors at the
same level of nesting.

MozReview-Commit-ID: 5PWUUG64XJE
Depends on D8718

Opting to first completely remove, then add the new logic, otherwise
the diff gets very confusing since most of the code changed

MozReview-Commit-ID: BbncSBhD5py
Depends on D8719

- Add methods to generate unique identifiers for stylesheets and CSS
rules changed within those stylesheets. These are used as IDs in the
- Add logic to generate rules for each of the rule's ancestors and
assign parent/child dependencies. This helps with quickly identifying a
rule on subsequent changes independent of its rule tree *and* with
rendering of the nested rule structure in the Changes panel;
- Deep clone Redux store state before aggregating tracked changes (no
more mutations of previous state)

MozReview-Commit-ID: JIEDqTMnWBM
Depends on D8720

If all of the changes to a CSS rule cancel each other out,
remove the information about the rule from the Redux store.

If none of the rules in a source end up changed, remove the
information about the source form the Redux store.

This ensures the Changes panel only shows actual diffs and not
empty signatures of rules which were changed but the sum of their
changes means nothing really changed.

MozReview-Commit-ID: 4n9yRkFdmN4
Depends on D8721

- Externalize reusable CSSDeclaration React component;
- Introduce the ability to render rules with unlimited levels of
nesting, but cap indentation in the UI at a reasonable level;
- Remove accordion behavior from rules, but keep for sources;
- Cleanup CSS styles for Changes panel.

MozReview-Commit-ID: 4w7RogYpIpJ
Priority: -- → P3
Depends on D8722

Include the "!importat" priority flag when tracking changes to CSS declarations.
Depends on D8967

This patch fixes an issue where toggling a new CSS declaration OFF then
back ON would make the Changes panel lose track of its existence. This
happened because tracked changes don't have context about "disabled"
state, only "add" or "remove", like diffs.

Additionally, this patch fixes the case where renaming a property would
erroneously track two distinct operations (rename + add). To fix this,
we prevent the inline editor for the property name from the CSS Rules
view to advance and focus the property value, which then immediately
blurred triggering a fake second operation to be tracked.

Auto-advancing to the property value inline editor still works if
adding a new declaration or if the property name ends with a colon, ":",
therefore old behaviour is not lost.

MozReview-Commit-ID: Faw2DeCJJYk
Depends on D9257
We need to clear the store of previous changes but we should not remove
references and event listeners to the ChangesActor since the DevTools
session is still active.

MozReview-Commit-ID: Okp2CcSlfw
Depends on D9659
Adds infrastructure and tests for validating that changes to CSS
declarations in the Inspector Rule view are tracked and show up in the
Changes panel.

Makes use of the `client/inspector/rules/test/head.js` file with helpers
to instrument changes in the Rule view then observe results on the
Changes panel.

This is a first pass on tests. More will follow to validate:
- declarations in at-rules;
- nested at-rules;
- declarations in various sources: inline styles, external stylesheets.
Pushed by
(Part 1) Log ancestor rule tree for changes to CSS declarations; r=pbro
(Part 2) Remove old reducer logic for tracking CSS changes; r=pbro
(Part 3) Add new reducer logic for tracking CSS changes to nested rules; r=pbro
(Part 4) Remove tracked rules and sources that end up unchanged; r=pbro
(Part 5) Refactor Changes panel to render diff of nested CSS rule structures; r=pbro
(Part 6) Support !important in changed CSS property values; r=pbro
(Part 7) Fix issues with toggled and renamed CSS declarations r=pbro;
(Part 8) Clear the changes store when about to navigate to a new page; r=pbro
(Part 9) Add tests for tracking changes to CSS declarations from the Rule view; r=pbro
You need to log in before you can comment on or make changes to this bug.