Bug 859048 - Add Remote Address to the network tab headers panel. r=past

browser/devtools/netmonitor/netmonitor-controller.js

@@ -607,6 +607,8 @@ NetworkEventsHandler.prototype = {
       case "responseStart":
         NetMonitorView.RequestsMenu.updateRequest(aPacket.from, {
           httpVersion: aPacket.response.httpVersion,
+          remoteAddress: aPacket.response.remoteAddress,
+          remotePort: aPacket.response.remotePort,
           status: aPacket.response.status,
           statusText: aPacket.response.statusText,
           headersSize: aPacket.response.headersSize

browser/devtools/netmonitor/netmonitor-view.js

@@ -1178,6 +1178,12 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
           case "httpVersion":
             requestItem.attachment.httpVersion = value;
             break;
+          case "remoteAddress":
+            requestItem.attachment.remoteAddress = value;
+            break;
+          case "remotePort":
+            requestItem.attachment.remotePort = value;
+            break;
           case "status":
             requestItem.attachment.status = value;
             this.updateMenuView(requestItem, key, value);
@@ -2271,6 +2277,21 @@ NetworkDetailsView.prototype = {
       $("#headers-summary-method").setAttribute("hidden", "true");
     }
 
+    if (aData.remoteAddress) {
+      let address = aData.remoteAddress;
+      if (address.indexOf(":") != -1) {
+        address = `[${address}]`;
+      }
+      if(aData.remotePort) {
+        address += `:${aData.remotePort}`;
+      }
+      $("#headers-summary-address-value").setAttribute("value", address);
+      $("#headers-summary-address-value").setAttribute("tooltiptext", address);
+      $("#headers-summary-address").removeAttribute("hidden");
+    } else {
+      $("#headers-summary-address").setAttribute("hidden", "true");
+    }
+
     if (aData.status) {
       $("#headers-summary-status-circle").setAttribute("code", aData.status);
       $("#headers-summary-status-value").setAttribute("value", aData.status + " " + aData.statusText);

browser/devtools/netmonitor/netmonitor.xul

@@ -314,6 +314,16 @@
                            crop="end"
                            flex="1"/>
                   </hbox>
+                  <hbox id="headers-summary-address"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           value="&netmonitorUI.summary.address;"/>
+                    <textbox id="headers-summary-address-value"
+                             class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                             flex="1"
+                             readonly="true"/>
+                  </hbox>
                   <hbox id="headers-summary-status"
                         class="tabpanel-summary-container"
                         align="center">

browser/devtools/netmonitor/test/browser_net_simple-request-details.js

@@ -56,6 +56,8 @@ function test() {
         SIMPLE_SJS, "The url summary tooltiptext is incorrect.");
       is(tabpanel.querySelector("#headers-summary-method-value").getAttribute("value"),
         "GET", "The method summary value is incorrect.");
+      is(tabpanel.querySelector("#headers-summary-address-value").getAttribute("value"),
+        "127.0.0.1:8888", "The remote address summary value is incorrect.");
       is(tabpanel.querySelector("#headers-summary-status-circle").getAttribute("code"),
         "200", "The status summary code is incorrect.");
       is(tabpanel.querySelector("#headers-summary-status-value").getAttribute("value"),

browser/locales/en-US/chrome/browser/devtools/netmonitor.dtd

@@ -56,27 +56,27 @@
   -  in the network table toolbar, above the "waterfall" column. -->
 <!ENTITY netmonitorUI.toolbar.waterfall   "Timeline">
 
-<!-- LOCALIZATION NOTE (debuggerUI.tab.headers): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.tab.headers): This is the label displayed
   -  in the network details pane identifying the headers tab. -->
 <!ENTITY netmonitorUI.tab.headers         "Headers">
 
-<!-- LOCALIZATION NOTE (debuggerUI.tab.cookies): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.tab.cookies): This is the label displayed
   -  in the network details pane identifying the cookies tab. -->
 <!ENTITY netmonitorUI.tab.cookies         "Cookies">
 
-<!-- LOCALIZATION NOTE (debuggerUI.tab.params): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.tab.params): This is the label displayed
   -  in the network details pane identifying the params tab. -->
 <!ENTITY netmonitorUI.tab.params          "Params">
 
-<!-- LOCALIZATION NOTE (debuggerUI.tab.response): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.tab.response): This is the label displayed
   -  in the network details pane identifying the response tab. -->
 <!ENTITY netmonitorUI.tab.response        "Response">
 
-<!-- LOCALIZATION NOTE (debuggerUI.tab.timings): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.tab.timings): This is the label displayed
   -  in the network details pane identifying the timings tab. -->
 <!ENTITY netmonitorUI.tab.timings         "Timings">
 
-<!-- LOCALIZATION NOTE (debuggerUI.tab.preview): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.tab.preview): This is the label displayed
   -  in the network details pane identifying the preview tab. -->
 <!ENTITY netmonitorUI.tab.preview         "Preview">
 
@@ -84,120 +84,124 @@
   -  in the network details pane identifying the security tab. -->
 <!ENTITY netmonitorUI.tab.security        "Security">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterAll): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterAll): This is the label displayed
   -  in the network details footer for the "All" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterAll    "All">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterHTML): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterHTML): This is the label displayed
   -  in the network details footer for the "HTML" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterHTML   "HTML">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterCSS): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterCSS): This is the label displayed
   -  in the network details footer for the "CSS" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterCSS    "CSS">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterJS): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterJS): This is the label displayed
   -  in the network details footer for the "JS" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterJS     "JS">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterXHR): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterXHR): This is the label displayed
   -  in the network details footer for the "XHR" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterXHR    "XHR">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterFonts): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterFonts): This is the label displayed
   -  in the network details footer for the "Fonts" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterFonts  "Fonts">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterImages): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterImages): This is the label displayed
   -  in the network details footer for the "Images" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterImages "Images">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterMedia): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterMedia): This is the label displayed
   -  in the network details footer for the "Media" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterMedia  "Media">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterFlash): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterFlash): This is the label displayed
   -  in the network details footer for the "Flash" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterFlash  "Flash">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.filterOther): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.filterOther): This is the label displayed
   -  in the network details footer for the "Other" filtering button. -->
 <!ENTITY netmonitorUI.footer.filterOther  "Other">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.clear): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.clear): This is the label displayed
   -  in the network details footer for the "Clear" button. -->
 <!ENTITY netmonitorUI.footer.clear  "Clear">
 
-<!-- LOCALIZATION NOTE (debuggerUI.footer.clear): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.footer.clear): This is the label displayed
   -  in the network details footer for the performance analysis button. -->
 <!ENTITY netmonitorUI.footer.perf   "Toggle performance analysis…">
 
-<!-- LOCALIZATION NOTE (debuggerUI.panesButton.tooltip): This is the tooltip for
+<!-- LOCALIZATION NOTE (netmonitorUI.panesButton.tooltip): This is the tooltip for
   -  the button that toggles the panes visible or hidden in the netmonitor UI. -->
 <!ENTITY netmonitorUI.panesButton.tooltip "Toggle network info">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.url): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.url): This is the label displayed
   -  in the network details headers tab identifying the URL. -->
 <!ENTITY netmonitorUI.summary.url         "Request URL:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.method): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.method): This is the label displayed
   -  in the network details headers tab identifying the method. -->
 <!ENTITY netmonitorUI.summary.method      "Request method:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.status): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.address): This is the label displayed
+  -  in the network details headers tab identifying the remote address. -->
+<!ENTITY netmonitorUI.summary.address     "Remote address:">
+
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.status): This is the label displayed
   -  in the network details headers tab identifying the status code. -->
 <!ENTITY netmonitorUI.summary.status      "Status code:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.version): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.version): This is the label displayed
   -  in the network details headers tab identifying the http version. -->
 <!ENTITY netmonitorUI.summary.version     "Version:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.size): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.size): This is the label displayed
   -  in the network details headers tab identifying the headers size. -->
 <!ENTITY netmonitorUI.summary.size        "Headers size:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.response.name): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.response.name): This is the label displayed
   -  in the network details response tab identifying an image's file name. -->
 <!ENTITY netmonitorUI.response.name       "Name:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.response.dimensions): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.response.dimensions): This is the label displayed
   -  in the network details response tab identifying an image's dimensions. -->
 <!ENTITY netmonitorUI.response.dimensions "Dimensions:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.response.mime): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.response.mime): This is the label displayed
   -  in the network details response tab identifying an image's mime. -->
 <!ENTITY netmonitorUI.response.mime       "MIME Type:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.response.encoding): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.response.encoding): This is the label displayed
   -  in the network details response tab identifying an image's encoding. -->
 <!ENTITY netmonitorUI.response.encoding   "Encoding:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.timings.blocked): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.timings.blocked): This is the label displayed
   -  in the network details timings tab identifying the amount of time spent
   -  in a "blocked" state. -->
 <!ENTITY netmonitorUI.timings.blocked     "Blocked:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.timings.dns): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.timings.dns): This is the label displayed
   -  in the network details timings tab identifying the amount of time spent
   -  in a "dns" state. -->
 <!ENTITY netmonitorUI.timings.dns         "DNS resolution:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.timings.connect): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.timings.connect): This is the label displayed
   -  in the network details timings tab identifying the amount of time spent
   -  in a "connect" state. -->
 <!ENTITY netmonitorUI.timings.connect     "Connecting:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.timings.send): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.timings.send): This is the label displayed
   -  in the network details timings tab identifying the amount of time spent
   -  in a "send" state. -->
 <!ENTITY netmonitorUI.timings.send        "Sending:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.timings.wait): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.timings.wait): This is the label displayed
   -  in the network details timings tab identifying the amount of time spent
   -  in a "wait" state. -->
 <!ENTITY netmonitorUI.timings.wait        "Waiting:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.timings.receive): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.timings.receive): This is the label displayed
   -  in the network details timings tab identifying the amount of time spent
   -  in a "receive" state. -->
 <!ENTITY netmonitorUI.timings.receive     "Receiving:">
@@ -269,25 +273,25 @@
   -  for the Copy Image As Data URI menu item displayed in the context menu for a request -->
 <!ENTITY netmonitorUI.context.copyImageAsDataUri.accesskey  "I">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.editAndResend): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.editAndResend): This is the label displayed
   -  on the button in the headers tab that opens a form to edit and resend the currently
      displayed request -->
 <!ENTITY netmonitorUI.summary.editAndResend "Edit and Resend">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.editAndResend.accesskey): This is the access key
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.editAndResend.accesskey): This is the access key
   -  for the "Edit and Resend" menu item displayed in the context menu for a request -->
 <!ENTITY netmonitorUI.summary.editAndResend.accesskey "R">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.rawHeaders): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.rawHeaders): This is the label displayed
   -  on the button in the headers tab that toggle view for raw request/response headers
      from the currently displayed request -->
 <!ENTITY netmonitorUI.summary.rawHeaders "Raw headers">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.rawHeaders.requestHeaders): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.rawHeaders.requestHeaders): This is the label displayed
   -  in the network details headers tab identifying the raw request headers textarea -->
 <!ENTITY netmonitorUI.summary.rawHeaders.requestHeaders "Request headers:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.summary.rawHeaders.responseHeaders): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.summary.rawHeaders.responseHeaders): This is the label displayed
   -  in the network details headers tab identifying the raw response headers textarea -->
 <!ENTITY netmonitorUI.summary.rawHeaders.responseHeaders "Response headers:">
 
@@ -301,30 +305,30 @@
   -  network container -->
 <!ENTITY netmonitorUI.context.newTab.accesskey "O">
 
-<!-- LOCALIZATION NOTE (debuggerUI.custom.newRequest): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.custom.newRequest): This is the label displayed
   -  as the title of the new custom request form -->
 <!ENTITY netmonitorUI.custom.newRequest   "New Request">
 
-<!-- LOCALIZATION NOTE (debuggerUI.custom.query): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.custom.query): This is the label displayed
   -  above the query string entry in the custom request form -->
 <!ENTITY netmonitorUI.custom.query        "Query String:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.custom.headers): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.custom.headers): This is the label displayed
   -  above the request headers entry in the custom request form -->
 <!ENTITY netmonitorUI.custom.headers      "Request Headers:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.custom.postData): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.custom.postData): This is the label displayed
   -  above the request body entry in the custom request form -->
 <!ENTITY netmonitorUI.custom.postData     "Request Body:">
 
-<!-- LOCALIZATION NOTE (debuggerUI.custom.send): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.custom.send): This is the label displayed
   -  on the button which sends the custom request -->
 <!ENTITY netmonitorUI.custom.send         "Send">
 
-<!-- LOCALIZATION NOTE (debuggerUI.custom.cancel): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.custom.cancel): This is the label displayed
   -  on the button which cancels and closes the custom request form -->
 <!ENTITY netmonitorUI.custom.cancel       "Cancel">
 
-<!-- LOCALIZATION NOTE (debuggerUI.backButton): This is the label displayed
+<!-- LOCALIZATION NOTE (netmonitorUI.backButton): This is the label displayed
   -  on the button which exists the performance statistics view -->
 <!ENTITY netmonitorUI.backButton          "Back">

toolkit/devtools/webconsole/network-monitor.js

@@ -937,6 +937,8 @@ NetworkMonitor.prototype = {
 
     let response = {};
     response.httpVersion = statusLineArray.shift();
+    response.remoteAddress = aHttpActivity.channel.remoteAddress;
+    response.remotePort = aHttpActivity.channel.remotePort;
     response.status = statusLineArray.shift();
     response.statusText = statusLineArray.join(" ");
     response.headersSize = aExtraStringData.length;