Bug 1932023 - [devtools] Fix pretty print issues with files containing windows line breaks r=devtools-reviewers,ochameau

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

devtools/client/debugger/src/actions/sources/prettyPrint.js

@@ -31,9 +31,22 @@ import { memoizeableAction } from "../../utils/memoizableAction";
 
 import DevToolsUtils from "devtools/shared/DevToolsUtils";
 
+/**
+ * Replace all line breaks with standard \n line breaks for easier parsing.
+ */
 const LINE_BREAK_REGEX = /\r\n?|\n|\u2028|\u2029/g;
+function sanitizeLineBreaks(str) {
+  return str.replace(LINE_BREAK_REGEX, "\n");
+}
+
+/**
+ * Retrieve all line breaks in the provided string.
+ * Note: this assumes the line breaks were previously sanitized with
+ * `sanitizeLineBreaks` defined above.
+ */
+const SIMPLE_LINE_BREAK_REGEX = /\n/g;
 function matchAllLineBreaks(str) {
-  return Array.from(str.matchAll(LINE_BREAK_REGEX));
+  return Array.from(str.matchAll(SIMPLE_LINE_BREAK_REGEX));
 }
 
 function getPrettyOriginalSourceURL(generatedSource) {
@@ -117,7 +130,11 @@ async function prettyPrintHtmlFile({
 }) {
   const url = getPrettyOriginalSourceURL(generatedSource);
   const contentValue = content.value;
-  const htmlFileText = contentValue.value;
+
+  // Original source may contain unix-style & windows-style breaks.
+  // SpiderMonkey works a sanitized version of the source using only \n (unix).
+  // Sanitize before parsing the source to align with SpiderMonkey.
+  const htmlFileText = sanitizeLineBreaks(contentValue.value);
   const prettyPrintWorkerResult = { code: htmlFileText };
 
   const allLineBreaks = matchAllLineBreaks(htmlFileText);

devtools/client/debugger/test/mochitest/browser_dbg-pretty-print-line-breaks.js

@@ -0,0 +1,42 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+// Tests pretty-printing of HTML file with windows line-breaks (\r\n).
+
+"use strict";
+
+requestLongerTimeout(2);
+
+const httpServer = createTestHTTPServer();
+httpServer.registerContentType("html", "text/html");
+
+httpServer.registerPathHandler("/doc_line_breaks.html", (request, response) => {
+  response.setStatusLine(request.httpVersion, 200, "OK");
+  response.write(
+    `TEST with line breaks\r\n<script>(function(){\r\n})('test')</script>`
+  );
+});
+
+const TEST_URL = `http://localhost:${httpServer.identity.primaryPort}/doc_line_breaks.html`;
+
+add_task(async function () {
+  const dbg = await initDebuggerWithAbsoluteURL(TEST_URL);
+
+  await selectSource(dbg, "doc_line_breaks.html");
+  clickElement(dbg, "prettyPrintButton");
+
+  await waitForSelectedSource(dbg, "doc_line_breaks.html:formatted");
+  const prettyPrintedSource = findSourceContent(
+    dbg,
+    "doc_line_breaks.html:formatted"
+  );
+  ok(prettyPrintedSource, "Pretty-printed source exists");
+
+  info("Check that the HTML file was pretty-printed as expected");
+  is(
+    prettyPrintedSource.value,
+    "TEST with line breaks\n<script>\n(function () {\n}) ('test')\n</script>",
+    "HTML file is pretty printed as expected"
+  );
+});

devtools/client/debugger/test/mochitest/browser_kz.toml

@@ -118,6 +118,8 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and
 ["browser_dbg-pretty-print-inline-scripts.js"]
 skip-if = ["a11y_checks"] # Bug 1858041 and 1849028 intermittent a11y_checks results (fails on Try, passes on Autoland)
 
+["browser_dbg-pretty-print-line-breaks.js"]
+
 ["browser_dbg-pretty-print-paused-anonymous.js"]
 
 ["browser_dbg-pretty-print-paused.js"]