Bug 1114932 - Break after commas in CSS selectors r=tromey
authorPatrick Brosset <pbrosset@mozilla.com>
Mon, 22 Oct 2018 14:17:27 +0000
changeset 442428 288b33fef4104e1431d7ef2b4c2de8eed89f27dc
parent 442427 194a4baf87a5f1e0374edcf233c5299e878d9a37
child 442429 af5911ba3ef205b86a210bc101bbecfd4f12ebf9
push id71487
push userpbrosset@mozilla.com
push dateMon, 22 Oct 2018 20:16:35 +0000
treeherderautoland@288b33fef410 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstromey
bugs1114932
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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);