Bug 1421225 - Clicking on a console.group Message should toggle the group. r=nchevobbe

MozReview-Commit-ID: IuK0R1Ebv8o

--HG--
extra : rebase_source : 224bcfa41da64bf7c745da807ef6a396c152e51e

devtools/client/shared/components/Frame.js

@@ -219,6 +219,7 @@ class Frame extends Component {
       sourceEl = dom.a({
         onClick: e => {
           e.preventDefault();
+          e.stopPropagation();
           onClick(this.getSourceForClick(frame));
         },
         href: source,

devtools/client/themes/webconsole.css

@@ -1263,4 +1263,8 @@ body #output-container {
 
 .sidebar-contents .object-inspector {
   min-width: 100%;
+}
+
+.theme-twisty {
+  cursor: default;
 }

devtools/client/webconsole/new-console-output/components/Message.js

@@ -76,6 +76,7 @@ class Message extends Component {
   constructor(props) {
     super(props);
     this.onLearnMoreClick = this.onLearnMoreClick.bind(this);
+    this.toggleMessage = this.toggleMessage.bind(this);
     this.onContextMenu = this.onContextMenu.bind(this);
   }
 
@@ -98,6 +99,15 @@ class Message extends Component {
     this.props.serviceContainer.openLink(exceptionDocURL, e);
   }
 
+  toggleMessage(e) {
+    let { open, dispatch, messageId } = this.props;
+    if (open) {
+      dispatch(actions.messageClose(messageId));
+    } else {
+      dispatch(actions.messageOpen(messageId));
+    }
+  }
+
   onContextMenu(e) {
     let { serviceContainer, source, request, messageId } = this.props;
     let messageInfo = {
@@ -112,7 +122,6 @@ class Message extends Component {
 
   render() {
     const {
-      messageId,
       open,
       collapsible,
       collapseTitle,
@@ -125,7 +134,6 @@ class Message extends Component {
       frame,
       stacktrace,
       serviceContainer,
-      dispatch,
       exceptionDocURL,
       timeStamp = Date.now(),
       timestampsVisible,
@@ -170,13 +178,7 @@ class Message extends Component {
       collapse = CollapseButton({
         open,
         title: collapseTitle,
-        onClick: function () {
-          if (open) {
-            dispatch(actions.messageClose(messageId));
-          } else {
-            dispatch(actions.messageOpen(messageId));
-          }
-        },
+        onClick: this.toggleMessage
       });
     }
 
@@ -253,7 +255,10 @@ class Message extends Component {
       icon,
       collapse,
       dom.span({ className: "message-body-wrapper" },
-        dom.span({ className: "message-flex-body" },
+        dom.span({
+          className: "message-flex-body",
+          onClick: collapsible && this.toggleMessage,
+        },
           // Add whitespaces for formatting when copying to the clipboard.
           timestampEl ? " " : null,
           dom.span({ className: "message-body devtools-monospace" },

devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js

@@ -304,6 +304,60 @@ describe("ConsoleAPICall component:", () => {
         type: MESSAGE_OPEN
       });
     });
+
+    it("toggle the group when the group name is clicked", () => {
+      const store = setupStore();
+      store.dispatch = sinon.spy();
+      const message = stubPreparedMessages.get("console.group('bar')");
+
+      let wrapper = mount(Provider({store},
+        ConsoleApiCall({
+          message,
+          open: true,
+          dispatch: store.dispatch,
+          serviceContainer,
+        })
+      ));
+      wrapper.find(".message-flex-body").simulate("click");
+      let call = store.dispatch.getCall(0);
+      expect(call.args[0]).toEqual({
+        id: message.id,
+        type: MESSAGE_CLOSE
+      });
+
+      wrapper = mount(Provider({store},
+        ConsoleApiCall({
+          message,
+          open: false,
+          dispatch: store.dispatch,
+          serviceContainer,
+        })
+      ));
+      wrapper.find(".message-flex-body").simulate("click");
+      call = store.dispatch.getCall(1);
+      expect(call.args[0]).toEqual({
+        id: message.id,
+        type: MESSAGE_OPEN
+      });
+    });
+
+    it("doesn't toggle the group when the location link is clicked", () => {
+      const store = setupStore();
+      store.dispatch = sinon.spy();
+      const message = stubPreparedMessages.get("console.group('bar')");
+
+      let wrapper = mount(Provider({store},
+        ConsoleApiCall({
+          message,
+          open: true,
+          dispatch: store.dispatch,
+          serviceContainer,
+        })
+      ));
+      wrapper.find(".frame-link-source").simulate("click");
+      let call = store.dispatch.getCall(0);
+      expect(call).toNotExist();
+    });
   });
 
   describe("console.groupEnd", () => {

devtools/client/webconsole/new-console-output/test/components/page-error.test.js

@@ -76,7 +76,11 @@ describe("PageError component:", () => {
 
     serviceContainer.openLink = sinon.spy();
     const wrapper = mount(Provider({store},
-      PageError({message, serviceContainer})
+      PageError({
+        message,
+        serviceContainer,
+        dispatch: () => {},
+      })
     ));
 
     // There should be a [Learn more] link.