Bug 1884230 - [devtools] Revert Bug 1882964 to fix regression. r=devtools-reviewers,bomsy.

Since we're at the end of the cycle, let's fix the regression
by reverting getRuleText to use the JS lexer again.
A test case is added to prevent future regression when we'll
try to move this to an InspectorUtils method again.

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

devtools/server/actors/utils/style-utils.js

@@ -4,6 +4,8 @@
 
 "use strict";
 
+const { getCSSLexer } = require("resource://devtools/shared/css/lexer.js");
+
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
 const FONT_PREVIEW_TEXT = "Abc";
 const FONT_PREVIEW_FONT_SIZE = 40;
@@ -123,16 +125,54 @@ function getRuleText(initialText, line, column) {
     line,
     column
   );
+  const lexer = getCSSLexer(text);
 
-  if (text.trim() === "") {
-    throw new Error("Couldn't find rule at the given location");
+  // Search forward for the opening brace.
+  while (true) {
+    const token = lexer.nextToken();
+    if (!token) {
+      throw new Error("couldn't find start of the rule");
+    }
+    if (token.tokenType === "symbol" && token.text === "{") {
+      break;
+    }
   }
 
-  const offsets = InspectorUtils.getRuleBodyTextOffsets(text);
-  if (offsets === null) {
-    throw new Error("Couldn't find rule");
+  // Now collect text until we see the matching close brace.
+  let braceDepth = 1;
+  let startOffset, endOffset;
+  while (true) {
+    const token = lexer.nextToken();
+    if (!token) {
+      break;
+    }
+    if (startOffset === undefined) {
+      startOffset = token.startOffset;
+    }
+    if (token.tokenType === "symbol") {
+      if (token.text === "{") {
+        ++braceDepth;
+      } else if (token.text === "}") {
+        --braceDepth;
+        if (braceDepth == 0) {
+          break;
+        }
+      }
+    }
+    endOffset = token.endOffset;
+  }
+
+  // If the rule was of the form "selector {" with no closing brace
+  // and no properties, just return an empty string.
+  if (startOffset === undefined) {
+    return { offset: 0, text: "" };
+  }
+  // If the input didn't have any tokens between the braces (e.g.,
+  // "div {}"), then the endOffset won't have been set yet; so account
+  // for that here.
+  if (endOffset === undefined) {
+    endOffset = startOffset;
   }
-  const { startOffset, endOffset } = offsets;
 
   // Note that this approach will preserve comments, despite the fact
   // that cssTokenizer skips them.

devtools/server/tests/xpcshell/test_getRuleText.js

@@ -161,6 +161,13 @@ const TEST_DATA = [
     column: 1,
     expected: { offset: 4, text: ".nested{color;}" },
   },
+  {
+    desc: "Rule contains unicode chars",
+    input: `#id /*🙃*/ {content: "☃️";}`,
+    line: 1,
+    column: 1,
+    expected: { offset: 12, text: `content: "☃️";` },
+  },
 ];
 
 function run_test() {