Bug 1476605 - Fix Error rep failure when stacktrace is a longString; r=sole.

The actual fix for this issue will come in a future
reps bundle when https://github.com/devtools-html/debugger.html/pull/6705
gets merged.
But, I do want this change to be uplifted to release, and it should be
easier to only apply this simple change than the whole next release
which would contain unrelated code changes.
Also, this patch introduces a test to make sure we don't ever regress
this.

MozReview-Commit-ID: 3QPrx3TLln0

--HG--
extra : rebase_source : 9a62da36af01506e9290d059a2aa3a4a7c8bc75f

devtools/client/shared/components/reps/reps.js

@@ -1978,7 +1978,7 @@ function getStacktraceElements(props, preview) {
     // Result:
     // ["scriptLocation:2:100", "scriptLocation", "2", "100"]
     const locationParts = location.match(/^(.*):(\d+):(\d+)$/);
-    if (props.onViewSourceInDebugger && location && !IGNORED_SOURCE_URLS.includes(locationParts[1]) && locationParts) {
+    if (props.onViewSourceInDebugger && location && locationParts && !IGNORED_SOURCE_URLS.includes(locationParts[1])) {
       const [, url, line, column] = locationParts;
       onLocationClick = e => {
         // Don't trigger ObjectInspector expand/collapse.

devtools/client/webconsole/test/mochitest/browser.ini

@@ -276,6 +276,7 @@ subsuite = clipboard
 [browser_webconsole_cspro.js]
 [browser_webconsole_document_focus.js]
 [browser_webconsole_duplicate_errors.js]
+[browser_webconsole_error_with_longstring_stack.js]
 [browser_webconsole_error_with_unicode.js]
 [browser_webconsole_errors_after_page_reload.js]
 [browser_webconsole_eval_in_debugger_stackframe.js]

devtools/client/webconsole/test/mochitest/browser_webconsole_error_with_longstring_stack.js

@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Check if an error with a longString stack is displayed as expected.
+
+"use strict";
+
+const MESSAGE = "Error with longString stack";
+const TEST_URI = `data:text/html;charset=utf8,<script>
+  const x = new Error("longString stack");
+  x.stack = "s@http://exampl.com:1:1\\n".repeat(1000);
+  console.log("${MESSAGE}", x);
+</script>`;
+
+add_task(async function() {
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  info("Wait for the error to be logged");
+  const msgNode = await waitFor(() => findMessage(hud, MESSAGE));
+  ok(msgNode, `Error logged`);
+
+  const errorNode = msgNode.querySelector(".objectBox-stackTrace");
+  ok(errorNode, "The error object is logged as expected");
+  ok(errorNode.textContent.includes("longString stack"));
+  ok(errorNode.querySelectorAll(".objectBox-stackTrace-fn").length > 0,
+    "Frames functions are displayed");
+  ok(errorNode.querySelectorAll(".objectBox-stackTrace-location").length > 0,
+    "Frames location are displayed");
+});