Bug 1512046 - Stop propagation of callstack group click; r=Honza.

This also adds a console test to make sure we don't regress
this in the future.

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

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/new/src/components/SecondaryPanes/Frames/Group.js

@@ -79,7 +79,8 @@ export default class Group extends Component<Props, State> {
     );
   }
 
-  toggleFrames = () => {
+  toggleFrames = (event) => {
+    event.stopPropagation();
     this.setState(prevState => ({ expanded: !prevState.expanded }));
   };
 

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

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

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

@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Check if an error with a stack containing grouped frames works as expected.
+
+"use strict";
+
+const MESSAGE = "React Error";
+const TEST_URI = `data:text/html;charset=utf8,<script>
+  const x = new Error("${MESSAGE}");
+  x.stack = "a@http://exampl.com:1:1\\n" +
+    "grouped@http://react.js:1:1\\n" +
+    "grouped2@http://react.js:1:1";
+  console.error(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.classList.contains("open"), `Error logged not expanded`);
+
+  const groupNode = await waitFor(() => msgNode.querySelector(".group"));
+  ok(groupNode, "The error object is logged as expected");
+
+  const onGroupExpanded = waitFor(() => msgNode.querySelector(".frames-group.expanded"));
+  groupNode.click();
+  await onGroupExpanded;
+
+  ok(true, "The stacktrace group was expanded");
+  is(msgNode.querySelectorAll(".frame").length, 3, "Expected frames are displayed");
+  ok(!msgNode.classList.contains("open"), `Error message is still not expanded`);
+});