Bug 1510790 - Introduce Redux selector for tracked changes to return the nested tree structure. r=pbro, a=RyanVM
This patch introduces a Redux selector for the Changes slice. A selector here is a fancy word for a method that returns a subset from the state without having to expose the state's structure to the consumer. It is also useful for returning a derived version of the state which we're using here.
The tracked changed CSS rules in the Redux state are not stored in a nested structure. A shallow structure is easier to query and to work with in our use case. But the Changes panel needs to display CSS rules in a hierarchical structure (ex: a style rule which is a child of a @media rule). To do this, the React component used to build up the nested structure as it consumed the changes from the Redux state. To prevent rendering duplicates of rules (once as part of an ancestor's children and once as a standalone rule), the React component kept a reference of rules it had previously rendered. This had a flaw because it didn't account for the rule's stylesheet. The problem was that rules with identical selectors from different stylesheets would not all be rendered because they would be accidentally marked as previously rendered.
This is too much knowledge of the business logic for the React component anyway.
The Redux state should present itself in a way that's simple for the React component to consume. Hence the introduction of the `getChangesTree()` selector in this patch. This method allows us to present a comfortable structure to React while keeping the Redux structure comfortable for us to work with. This separation enables increased flexibility to restructure the Redux state without impacting the React components.
More about Redux selectors here: https://redux.js.org/recipes/computing-derived-data
Differential Revision: https://phabricator.services.mozilla.com/D16068