Bug 1114932 - Break after commas in CSS selectors r=tromey
authorPatrick Brosset <pbrosset@mozilla.com>
Mon, 22 Oct 2018 14:17:27 +0000
changeset 490807 288b33fef4104e1431d7ef2b4c2de8eed89f27dc
parent 490806 194a4baf87a5f1e0374edcf233c5299e878d9a37
child 490808 af5911ba3ef205b86a210bc101bbecfd4f12ebf9
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewerstromey
bugs1114932
milestone65.0a1
Bug 1114932 - Break after commas in CSS selectors r=tromey Differential Revision: https://phabricator.services.mozilla.com/D9232
devtools/shared/inspector/css-logic.js
devtools/shared/tests/unit/test_prettifyCSS.js
--- a/devtools/shared/inspector/css-logic.js
+++ b/devtools/shared/inspector/css-logic.js
@@ -226,16 +226,20 @@ function prettifyCSS(text, ruleCount) {
   let endIndex;
   // True if any non-whitespace token was seen.
   let anyNonWS;
   // True if the terminating token is "}".
   let isCloseBrace;
   // True if the token just before the terminating token was
   // whitespace.
   let lastWasWS;
+  // True if the current token is inside a CSS selector.
+  let isInSelector = true;
+  // True if the current token is inside an at-rule definition.
+  let isInAtRuleDefinition = false;
 
   // A helper function that reads tokens until there is a reason to
   // insert a newline.  This updates the state variables as needed.
   // If this encounters EOF, it returns null.  Otherwise it returns
   // the final token read.  Note that if the returned token is "{",
   // then it will not be included in the computed start/end token
   // range.  This is used to handle whitespace insertion before a "{".
   const readUntilNewlineNeeded = () => {
@@ -247,38 +251,53 @@ function prettifyCSS(text, ruleCount) {
       } else {
         token = tokens.nextToken();
       }
       if (!token) {
         endIndex = text.length;
         break;
       }
 
+      if (token.tokenType === "at") {
+        isInAtRuleDefinition = true;
+      }
+
       // A "}" symbol must be inserted later, to deal with indentation
       // and newline.
       if (token.tokenType === "symbol" && token.text === "}") {
+        isInSelector = true;
         isCloseBrace = true;
         break;
       } else if (token.tokenType === "symbol" && token.text === "{") {
+        if (isInAtRuleDefinition) {
+          isInAtRuleDefinition = false;
+        } else {
+          isInSelector = false;
+        }
         break;
       }
 
       if (token.tokenType !== "whitespace") {
         anyNonWS = true;
       }
 
       if (startIndex === undefined) {
         startIndex = token.startOffset;
       }
       endIndex = token.endOffset;
 
       if (token.tokenType === "symbol" && token.text === ";") {
         break;
       }
 
+      if (token.tokenType === "symbol" && token.text === "," &&
+          isInSelector && !isInAtRuleDefinition) {
+        break;
+      }
+
       lastWasWS = token.tokenType === "whitespace";
     }
     return token;
   };
 
   while (true) {
     // Set the initial state.
     startIndex = undefined;
--- a/devtools/shared/tests/unit/test_prettifyCSS.js
+++ b/devtools/shared/tests/unit/test_prettifyCSS.js
@@ -134,16 +134,37 @@ const TESTS_SPACE_INDENT = [
   { name: "HTML comments without whitespace padding",
     input: "<!--body {color:red}-->",
     expected: [
       "body {",
       " color:red",
       "}",
     ],
   },
+
+  { name: "Breaking after commas in selectors",
+    input: "@media screen, print {div, span, input {color: red;}}" +
+           "div, div, input, pre, table {color: blue;}",
+    expected: [
+      "@media screen, print {",
+      " div,",
+      " span,",
+      " input {",
+      "  color: red;",
+      " }",
+      "}",
+      "div,",
+      "div,",
+      "input,",
+      "pre,",
+      "table {",
+      " color: blue;",
+      "}",
+    ],
+  },
 ];
 
 function run_test() {
   // Note that prettifyCSS.LINE_SEPARATOR is computed lazily, so we
   // ensure it is set.
   prettifyCSS("");
 
   Services.prefs.setBoolPref(EXPAND_TAB, true);