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. 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.

Differential Revision: https://phabricator.services.mozilla.com/D11116

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/changes/components/ChangesApp.js

@@ -65,6 +65,13 @@ class ChangesApp extends PureComponent {
     // Mark this rule as rendered so we don't render it again.
     this.renderedRules.push(ruleId);
 
+    let diffClass = "";
+    if (rule.changeType === "rule-add") {
+      diffClass = "diff-add";
+    } else if (rule.changeType === "rule-remove") {
+      diffClass = "diff-remove";
+    }
+
     return dom.div(
       {
         key: ruleId,
@@ -72,7 +79,7 @@ class ChangesApp extends PureComponent {
       },
       dom.div(
         {
-          className: "level selector",
+          className: `level selector ${diffClass}`,
           title: selector,
         },
         selector,
@@ -84,7 +91,7 @@ class ChangesApp extends PureComponent {
       }),
       // Render any changed CSS declarations.
       this.renderDeclarations(rule.remove, rule.add),
-      dom.span({ className: "level bracket-close" }, "}")
+      dom.div({ className: `level bracket-close ${diffClass}` }, "}")
     );
   }
 

devtools/client/inspector/changes/reducers/changes.js

@@ -133,6 +133,7 @@ function removeRule(ruleId, rules) {
  *      rules: {
  *        <ruleId>: {
  *          selector: "" // String CSS selector or CSS at-rule text
+ *          changeType:  // Optional string: "rule-add" or "rule-remove"
  *          children: [] // Array of <ruleId> for child rules of this rule.
  *          parent:      // <ruleId> of the parent rule
  *          add: {
@@ -166,7 +167,7 @@ const reducers = {
     state = cloneState(state);
 
     const { type, href, index } = change.source;
-    const { selector, ancestors, ruleIndex } = change;
+    const { selector, ancestors, ruleIndex, type: changeType } = change;
     const sourceId = getSourceHash(change.source);
     const ruleId = getRuleHash({ selector, ancestors, ruleIndex });
     // Type coerce to boolean: `false` if value is undefined or `null`, `true` otherwise.
@@ -181,6 +182,9 @@ const reducers = {
     let rule = rules[ruleId];
     if (!rule) {
       rule = createRule({ selector, ancestors, ruleIndex }, rules);
+      if (changeType.startsWith("rule-")) {
+        rule.changeType = changeType;
+      }
     }
     // Copy or create collection of all CSS declarations ever added to this rule.
     const add = Object.assign({}, rule.add);

devtools/client/themes/changes.css

@@ -54,8 +54,8 @@
   padding-left: calc(var(--diff-level-offset) * 4);
 }
 
-#sidebar-panel-changes .rule .selector,
-#sidebar-panel-changes .rule .bracket-close {
+#sidebar-panel-changes .rule .selector:not(.diff-remove):not(.diff-add),
+#sidebar-panel-changes .rule .bracket-close:not(.diff-remove):not(.diff-add) {
   margin-left: calc(-1 * var(--diff-level-offset) + 5px);
 }
 

devtools/server/actors/styles.js

@@ -1573,6 +1573,7 @@ var StyleRuleActor = protocol.ActorClassWithSpec(styleRuleSpec, {
 
     switch (change.type) {
       case "set":
+        data.type = prevValue ? "declaration-add" : "declaration-update";
         // If `change.newName` is defined, use it because the property is being renamed.
         // Otherwise, a new declaration is being created or the value of an existing
         // declaration is being updated. In that case, use the provided `change.name`.
@@ -1600,6 +1601,7 @@ var StyleRuleActor = protocol.ActorClassWithSpec(styleRuleSpec, {
         break;
 
       case "remove":
+        data.type = "declaration-remove";
         data.add = null;
         data.remove = { [change.name]: prevValue };
         break;
@@ -1630,6 +1632,7 @@ var StyleRuleActor = protocol.ActorClassWithSpec(styleRuleSpec, {
     // grouped together when implementing undo/redo.
     TrackChangeEmitter.trackChange({
       ...this.metadata,
+      type: "rule-remove",
       add: null,
       remove: declarations,
       selector: oldSelector,
@@ -1637,6 +1640,7 @@ var StyleRuleActor = protocol.ActorClassWithSpec(styleRuleSpec, {
 
     TrackChangeEmitter.trackChange({
       ...this.metadata,
+      type: "rule-add",
       add: declarations,
       remove: null,
       selector: newSelector,