Bug 1362036 - Open in network panel; r=nchevobbe
MozReview-Commit-ID: 3Cg0PVITRVG
--- a/devtools/client/locales/en-US/webconsole.properties
+++ b/devtools/client/locales/en-US/webconsole.properties
@@ -210,16 +210,22 @@ webconsole.menu.copyURL.label=Copy Link
webconsole.menu.copyURL.accesskey=a
# LOCALIZATION NOTE (webconsole.menu.openURL.label)
# Label used for a context-menu item displayed for network message logs. Clicking on it
# opens the URL displayed in a new browser tab.
webconsole.menu.openURL.label=Open URL in New Tab
webconsole.menu.openURL.accesskey=T
+# LOCALIZATION NOTE (webconsole.menu.openInNetworkPanel.label)
+# Label used for a context-menu item displayed for network message logs. Clicking on it
+# opens the network message in the Network panel
+webconsole.menu.openInNetworkPanel.label=Open in Network Panel
+webconsole.menu.openInNetworkPanel.accesskey=N
+
# LOCALIZATION NOTE (webconsole.menu.openInVarView.label)
# Label used for a context-menu item displayed for object/variable logs. Clicking on it
# opens the webconsole variable view for the logged variable.
webconsole.menu.openInVarView.label=Open in Variables View
webconsole.menu.openInVarView.accesskey=V
# LOCALIZATION NOTE (webconsole.menu.storeAsGlobalVar.label)
# Label used for a context-menu item displayed for object/variable logs. Clicking on it
--- a/devtools/client/netmonitor/src/components/tabbox-panel.js
+++ b/devtools/client/netmonitor/src/components/tabbox-panel.js
@@ -32,17 +32,17 @@ const STACK_TRACE_TITLE = L10N.getStr("n
const TIMINGS_TITLE = L10N.getStr("netmonitor.tab.timings");
/*
* Tabbox panel component
* Display the network request details
*/
function TabboxPanel({
activeTabId,
- cloneSelectedRequest,
+ cloneSelectedRequest = ()=>{},
request,
selectTab,
sourceMapService,
}) {
if (!request) {
return null;
}
--- a/devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js
@@ -47,17 +47,16 @@ function NetworkEventMessage({
timestampsVisible,
networkMessageUpdate = {},
networkMessageActiveTabId,
dispatch,
open,
}) {
const {
id,
- actor,
indent,
source,
type,
level,
request,
isXHR,
timeStamp,
} = message;
@@ -75,42 +74,44 @@ function NetworkEventMessage({
const topLevelClasses = [ "cm-s-mozilla" ];
let statusInfo;
if (httpVersion && status && statusText !== undefined && totalTime !== undefined) {
statusInfo = `[${httpVersion} ${status} ${statusText} ${totalTime}ms]`;
}
- const openNetworkMonitor = serviceContainer.openNetworkPanel
- ? () => serviceContainer.openNetworkPanel(actor)
- : null;
+ const toggle = () => {
+ if (open) {
+ dispatch(actions.messageClose(id));
+ } else {
+ dispatch(actions.messageOpen(id));
+ }
+ };
+ // Message body components.
const method = dom.span({className: "method" }, request.method);
const xhr = isXHR
? dom.span({ className: "xhr" }, l10n.getStr("webConsoleXhrIndicator"))
: null;
- const url = dom.a({ className: "url", title: request.url, onClick: openNetworkMonitor },
+ const url = dom.a({ className: "url", title: request.url, onClick: toggle },
request.url.replace(/\?.+/, ""));
const statusBody = statusInfo
- ? dom.a({ className: "status", onClick: openNetworkMonitor }, statusInfo)
+ ? dom.a({ className: "status", onClick: toggle }, statusInfo)
: null;
const messageBody = [method, xhr, url, statusBody];
// Only render the attachment if the network-event is
// actually opened (performance optimization).
const attachment = open && dom.div({className: "network-info devtools-monospace"},
TabboxPanel({
activeTabId: networkMessageActiveTabId,
request: networkMessageUpdate,
sourceMapService: serviceContainer.sourceMapService,
- cloneSelectedRequest: () => {
- // Edit and resend feature isn't supported from the Console panel.
- },
selectTab: (tabId) => {
dispatch(actions.selectNetworkMessageTab(tabId));
},
})
);
return Message({
dispatch,
--- a/devtools/client/webconsole/new-console-output/components/message.js
+++ b/devtools/client/webconsole/new-console-output/components/message.js
@@ -84,20 +84,21 @@ const Message = createClass({
},
onLearnMoreClick: function () {
let {exceptionDocURL} = this.props;
this.props.serviceContainer.openLink(exceptionDocURL);
},
onContextMenu(e) {
- let { serviceContainer, source, request } = this.props;
+ let { serviceContainer, source, request, messageId } = this.props;
let messageInfo = {
source,
request,
+ messageId,
};
serviceContainer.openContextMenu(e, messageInfo);
e.stopPropagation();
e.preventDefault();
},
render() {
const {
--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -75,41 +75,45 @@ NewConsoleOutputWrapper.prototype = {
attachRefToHud,
emitNewMessage: (node, messageId) => {
this.jsterm.hud.emit("new-messages", new Set([{
node,
messageId,
}]));
},
hudProxyClient: this.jsterm.hud.proxy.client,
- openContextMenu: (e, message) => {
- let { screenX, screenY, target } = e;
-
- let messageEl = target.closest(".message");
- let clipboardText = messageEl ? messageEl.textContent : null;
-
- // Retrieve closes actor id from the DOM.
- let actorEl = target.closest("[data-link-actor-id]");
- let actor = actorEl ? actorEl.dataset.linkActorId : null;
-
- let menu = createContextMenu(this.jsterm, this.parentNode,
- { actor, clipboardText, message });
-
- // Emit the "menu-open" event for testing.
- menu.once("open", () => this.emit("menu-open"));
- menu.popup(screenX, screenY, this.toolbox);
-
- return menu;
- },
openLink: url => this.jsterm.hud.owner.openLink(url),
createElement: nodename => {
return this.document.createElementNS("http://www.w3.org/1999/xhtml", nodename);
},
};
+ // Set `openContextMenu` this way so, `serviceContainer` variable
+ // is available in the current scope and we can pass it into
+ // `createContextMenu` method.
+ serviceContainer.openContextMenu = (e, message) => {
+ let { screenX, screenY, target } = e;
+
+ let messageEl = target.closest(".message");
+ let clipboardText = messageEl ? messageEl.textContent : null;
+
+ // Retrieve closes actor id from the DOM.
+ let actorEl = target.closest("[data-link-actor-id]");
+ let actor = actorEl ? actorEl.dataset.linkActorId : null;
+
+ let menu = createContextMenu(this.jsterm, this.parentNode,
+ { actor, clipboardText, message, serviceContainer });
+
+ // Emit the "menu-open" event for testing.
+ menu.once("open", () => this.emit("menu-open"));
+ menu.popup(screenX, screenY, this.toolbox);
+
+ return menu;
+ };
+
if (this.toolbox) {
Object.assign(serviceContainer, {
onViewSourceInDebugger: frame => {
this.toolbox.viewSourceInDebugger(frame.url, frame.line).then(() =>
this.jsterm.hud.emit("source-in-debugger-opened")
);
},
onViewSourceInScratchpad: frame => this.toolbox.viewSourceInScratchpad(
--- a/devtools/client/webconsole/new-console-output/utils/context-menu.js
+++ b/devtools/client/webconsole/new-console-output/utils/context-menu.js
@@ -26,17 +26,22 @@ const { l10n } = require("devtools/clien
* The container of the new console frontend output wrapper.
* @param {Object} options
* - {String} actor (optional) actor id to use for context menu actions
* - {String} clipboardText (optional) text to "Copy" if no selection is available
* - {Object} message (optional) message object containing metadata such as:
* - {String} source
* - {String} request
*/
-function createContextMenu(jsterm, parentNode, { actor, clipboardText, message }) {
+function createContextMenu(jsterm, parentNode, {
+ actor,
+ clipboardText,
+ message,
+ serviceContainer
+}) {
let win = parentNode.ownerDocument.defaultView;
let selection = win.getSelection();
let { source, request } = message || {};
let menu = new Menu({
id: "webconsole-menu"
});
@@ -50,16 +55,29 @@ function createContextMenu(jsterm, paren
click: () => {
if (!request) {
return;
}
clipboardHelper.copyString(request.url);
},
}));
+ // Open Network message in the Network panel.
+ menu.append(new MenuItem({
+ id: "console-menu-open-in-network-panel",
+ label: l10n.getStr("webconsole.menu.openInNetworkPanel.label"),
+ accesskey: l10n.getStr("webconsole.menu.openInNetworkPanel.accesskey"),
+ visible: source === MESSAGE_SOURCE.NETWORK,
+ click: () => {
+ if (request && serviceContainer.openNetworkPanel) {
+ serviceContainer.openNetworkPanel(message.messageId);
+ }
+ },
+ }));
+
// Open URL in a new tab for a network request.
menu.append(new MenuItem({
id: "console-menu-open-url",
label: l10n.getStr("webconsole.menu.openURL.label"),
accesskey: l10n.getStr("webconsole.menu.openURL.accesskey"),
visible: source === MESSAGE_SOURCE.NETWORK,
click: () => {
if (!request) {