Bug 1362036 - Open in network panel; r=nchevobbe

MozReview-Commit-ID: 3Cg0PVITRVG

--HG--
extra : rebase_source : 97db52fd57eb9e51af415368dbb3f6c2de13b579

devtools/client/locales/en-US/webconsole.properties

@@ -215,6 +215,12 @@ webconsole.menu.copyURL.accesskey=a
 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.

devtools/client/netmonitor/src/components/tabbox-panel.js

@@ -37,7 +37,7 @@ const TIMINGS_TITLE = L10N.getStr("netmonitor.tab.timings");
  */
 function TabboxPanel({
   activeTabId,
-  cloneSelectedRequest,
+  cloneSelectedRequest = ()=>{},
   request,
   selectTab,
   sourceMapService,

devtools/client/webconsole/new-console-output/components/message-types/network-event-message.js

@@ -52,7 +52,6 @@ function NetworkEventMessage({
 }) {
   const {
     id,
-    actor,
     indent,
     source,
     type,
@@ -80,18 +79,23 @@ function NetworkEventMessage({
     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];
@@ -103,9 +107,6 @@ function NetworkEventMessage({
       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));
       },

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

@@ -89,10 +89,11 @@ const Message = createClass({
   },
 
   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();

devtools/client/webconsole/new-console-output/new-console-output-wrapper.js

@@ -80,31 +80,35 @@ NewConsoleOutputWrapper.prototype = {
         }]));
       },
       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 => {

devtools/client/webconsole/new-console-output/utils/context-menu.js

@@ -31,7 +31,12 @@ const { l10n } = require("devtools/client/webconsole/new-console-output/utils/me
  *          - {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();
 
@@ -55,6 +60,19 @@ function createContextMenu(jsterm, parentNode, { actor, clipboardText, message }
     },
   }));
 
+  // 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",