diff --git a/devtools/client/shared/components/Frame.js b/devtools/client/shared/components/Frame.js index ac30bb22a3ab..027aa56e4f9f 100644 --- a/devtools/client/shared/components/Frame.js +++ b/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, diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css index 36e0b0590814..58873ee7652a 100644 --- a/devtools/client/themes/webconsole.css +++ b/devtools/client/themes/webconsole.css @@ -1263,4 +1263,8 @@ body #output-container { .sidebar-contents .object-inspector { min-width: 100%; +} + +.theme-twisty { + cursor: default; } \ No newline at end of file diff --git a/devtools/client/webconsole/new-console-output/components/Message.js b/devtools/client/webconsole/new-console-output/components/Message.js index 5519d75e03cc..4de635662639 100644 --- a/devtools/client/webconsole/new-console-output/components/Message.js +++ b/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" }, diff --git a/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js b/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js index d8ce2d96fa9f..8933f5ae78bd 100644 --- a/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js +++ b/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", () => { diff --git a/devtools/client/webconsole/new-console-output/test/components/page-error.test.js b/devtools/client/webconsole/new-console-output/test/components/page-error.test.js index a4f001e6351d..a6b795e5a539 100644 --- a/devtools/client/webconsole/new-console-output/test/components/page-error.test.js +++ b/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.