Bug 1527924 - (Part 3) Account for new selectors structure when generating stylesheets with changes r=pbro.

Updates the Redux selector that generates styleesheets with changes to account for the new array structure for the history of the CSS Rule selector. Also fixes the xpcshell mock to account for the same thing.

With this change, selector renames also get captured in the output stylesheet (they weren't in the previous implementation)

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

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

devtools/client/inspector/changes/selectors/changes.js

@@ -155,6 +155,36 @@ function getChangesStylesheet(state, filter) {
   const { indentUnit, indentWithTabs } = getTabPrefs();
   const indentChar = indentWithTabs ? "\t".repeat(indentUnit) : " ".repeat(indentUnit);
 
+  /**
+   * If the rule has just one item in its array of selector versions, return it as-is.
+   * If it has more than one, build a string using the first selector commented-out
+   * and the last selector as-is. This indicates that a rule's selector has changed.
+   *
+   * @param  {Array} selectors
+   *         History of selector versions if changed over time.
+   *         Array with a single item (the original selector) if never changed.
+   * @param  {Number} level
+   *         Level of nesting within a CSS rule tree.
+   * @return {String}
+   */
+  function writeSelector(selectors = [], level) {
+    const indent = indentChar.repeat(level);
+    let selectorText;
+    switch (selectors.length) {
+      case 0:
+        selectorText = "";
+        break;
+      case 1:
+        selectorText = `${indent}${selectors[0]}`;
+        break;
+      default:
+        selectorText = `${indent}/* ${selectors[0]} { */\n` +
+                       `${indent}${selectors[selectors.length - 1]}`;
+    }
+
+    return selectorText;
+  }
+
   function writeRule(ruleId, rule, level) {
     // Write nested rules, if any.
     let ruleBody = rule.children.reduce((str, childRule) => {
@@ -166,7 +196,8 @@ function getChangesStylesheet(state, filter) {
     ruleBody += writeDeclarations(rule.remove, rule.add, level + 1);
 
     const indent = indentChar.repeat(level);
-    return `\n${indent}${rule.selector} {${ruleBody}\n${indent}}`;
+    const selectorText = writeSelector(rule.selectors, level);
+    return `\n${selectorText} {${ruleBody}\n${indent}}`;
   }
 
   function writeDeclarations(remove = [], add = [], level) {

devtools/client/inspector/changes/test/unit/mocks.js

@@ -28,7 +28,7 @@ module.exports.CHANGES_STATE = {
     "isFramed": false,
     "rules": {
       "rule1": {
-        "selector": "@media (min-width: 50em)",
+        "selectors": ["@media (min-width: 50em)"],
         "ruleId": "rule1",
         "add": [],
         "remove": [],
@@ -37,7 +37,7 @@ module.exports.CHANGES_STATE = {
         ]
       },
       "rule2": {
-        "selector": "@supports (display: grid)",
+        "selectors": ["@supports (display: grid)"],
         "ruleId": "rule2",
         "add": [],
         "remove": [],
@@ -47,7 +47,7 @@ module.exports.CHANGES_STATE = {
         "parent": "rule1"
       },
       "rule3": {
-        "selector": "body",
+        "selectors": ["body"],
         "ruleId": "rule3",
         "add": [
           {