Bug 859133 - Add a plain request/response headers view. r=vporof

browser/devtools/netmonitor/netmonitor-view.js

@@ -370,12 +370,14 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     this._onContextCopyUrlCommand = this.copyUrl.bind(this);
     this._onContextCopyImageAsDataUriCommand = this.copyImageAsDataUri.bind(this);
     this._onContextResendCommand = this.cloneSelectedRequest.bind(this);
+    this._onContextToggleRawHeadersCommand = this.toggleRawHeaders.bind(this);
     this._onContextPerfCommand = () => NetMonitorView.toggleFrontendMode();
     this._onReloadCommand = () => NetMonitorView.reloadPage();
 
     this.sendCustomRequestEvent = this.sendCustomRequest.bind(this);
     this.closeCustomRequestEvent = this.closeCustomRequest.bind(this);
     this.cloneSelectedRequestEvent = this.cloneSelectedRequest.bind(this);
+    this.toggleRawHeadersEvent = this.toggleRawHeaders.bind(this);
 
     $("#toolbar-labels").addEventListener("click", this.requestsMenuSortEvent, false);
     $("#requests-menu-footer").addEventListener("click", this.requestsMenuFilterEvent, false);
@@ -384,6 +386,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     $("#request-menu-context-newtab").addEventListener("command", this._onContextNewTabCommand, false);
     $("#request-menu-context-copy-url").addEventListener("command", this._onContextCopyUrlCommand, false);
     $("#request-menu-context-copy-image-as-data-uri").addEventListener("command", this._onContextCopyImageAsDataUriCommand, false);
+    $("#toggle-raw-headers").addEventListener("click", this.toggleRawHeadersEvent, false);
 
     window.once("connected", this._onConnect.bind(this));
   },
@@ -447,6 +450,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     $("#custom-request-send-button").removeEventListener("click", this.sendCustomRequestEvent, false);
     $("#custom-request-close-button").removeEventListener("click", this.closeCustomRequestEvent, false);
     $("#headers-summary-resend").removeEventListener("click", this.cloneSelectedRequestEvent, false);
+    $("#toggle-raw-headers").removeEventListener("click", this.toggleRawHeadersEvent, false);
   },
 
   /**
@@ -638,6 +642,28 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     NetMonitorView.Sidebar.toggle(false);
   },
 
+  /**
+   * Shows raw request/response headers in textboxes.
+   */
+  toggleRawHeaders: function() {
+    let requestTextarea = $("#raw-request-headers-textarea");
+    let responseTextare = $("#raw-response-headers-textarea");
+    let rawHeadersHidden = $("#raw-headers").getAttribute("hidden");
+
+    if (rawHeadersHidden) {
+      let selected = this.selectedItem.attachment;
+      let selectedRequestHeaders = selected.requestHeaders.headers;
+      let selectedResponseHeaders = selected.responseHeaders.headers;
+      requestTextarea.value = writeHeaderText(selectedRequestHeaders);
+      responseTextare.value = writeHeaderText(selectedResponseHeaders);
+      $("#raw-headers").hidden = false;
+    } else {
+      requestTextarea.value = null;
+      responseTextare.value = null;
+      $("#raw-headers").hidden = true;
+    }
+  },
+
   /**
    * Filters all network requests in this container by a specified type.
    *
@@ -2013,6 +2039,7 @@ NetworkDetailsView.prototype = {
     $("#response-content-info-header").hidden = true;
     $("#response-content-json-box").hidden = true;
     $("#response-content-textarea-box").hidden = true;
+    $("#raw-headers").hidden = true;
     $("#response-content-image-box").hidden = true;
 
     let isHtml = RequestsMenuView.prototype.isHtml({ attachment: aData });

browser/devtools/netmonitor/netmonitor.xul

@@ -307,6 +307,9 @@
                     <button id="headers-summary-resend"
                             class="devtools-toolbarbutton"
                             label="&netmonitorUI.summary.editAndResend;"/>
+                    <button id="toggle-raw-headers"
+                            class="devtools-toolbarbutton"
+                            label="&netmonitorUI.summary.rawHeaders;"/>
                   </hbox>
                   <hbox id="headers-summary-version"
                         class="tabpanel-summary-container"
@@ -318,6 +321,25 @@
                            crop="end"
                            flex="1"/>
                   </hbox>
+                  <hbox id="raw-headers"
+                        class="tabpanel-summary-container"
+                        align="center"
+                        hidden="true">
+                    <vbox id="raw-request-headers-textarea-box" flex="1" hidden="false">
+                      <label class="plain tabpanel-summary-label"
+                        value="&netmonitorUI.summary.rawHeaders.requestHeaders;"/>
+                      <textbox id="raw-request-headers-textarea"
+                        class="raw-response-textarea"
+                        flex="1" multiline="true" readonly="true"/>
+                    </vbox>
+                    <vbox id="raw-response-headers-textarea-box" flex="1" hidden="false">
+                      <label class="plain tabpanel-summary-label"
+                        value="&netmonitorUI.summary.rawHeaders.responseHeaders;"/>
+                      <textbox id="raw-response-headers-textarea"
+                        class="raw-response-textarea"
+                        flex="1" multiline="true" readonly="true"/>
+                    </vbox>
+                  </hbox>
                   <vbox id="all-headers" flex="1"/>
                 </vbox>
               </tabpanel>

browser/devtools/netmonitor/test/browser.ini

@@ -77,6 +77,7 @@ skip-if= buildapp == 'mulet'
 [browser_net_post-data-03.js]
 [browser_net_prefs-and-l10n.js]
 [browser_net_prefs-reload.js]
+[browser_net_raw_headers.js]
 [browser_net_reload-button.js]
 [browser_net_req-resp-bodies.js]
 [browser_net_resend.js]

browser/devtools/netmonitor/test/browser_net_raw_headers.js

@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let gPanelWin;
+let gPanelDoc;
+
+/**
+ * Tests if showing raw headers works.
+ */
+
+function test() {
+  initNetMonitor(POST_DATA_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    gPanelWin = aMonitor.panelWin;
+    gPanelDoc = gPanelWin.document;
+
+    let { document, Editor, NetMonitorView } = gPanelWin;
+    let { RequestsMenu } = NetMonitorView;
+    let TAB_UPDATED = gPanelWin.EVENTS.TAB_UPDATED;
+
+    RequestsMenu.lazyUpdate = false;
+
+    waitForNetworkEvents(aMonitor, 0, 2).then(() => {
+      let origItem = RequestsMenu.getItemAtIndex(0);
+      RequestsMenu.selectedItem = origItem;
+
+      waitFor(aMonitor.panelWin, TAB_UPDATED).then(() => {
+        EventUtils.sendMouseEvent({ type: "click" }, document.getElementById("toggle-raw-headers"));
+        testShowRawHeaders(origItem.attachment);
+        EventUtils.sendMouseEvent({ type: "click" }, document.getElementById("toggle-raw-headers"));
+        testHideRawHeaders(document);
+        finishUp(aMonitor);
+      });
+    });
+
+    aDebuggee.performRequests();
+  });
+}
+
+/*
+ * Tests that raw headers were displayed correctly
+ */
+function testShowRawHeaders(aData) {
+  let requestHeaders = gPanelDoc.getElementById("raw-request-headers-textarea").value;
+  for (let header of aData.requestHeaders.headers) {
+    ok(requestHeaders.indexOf(header.name + ": " + header.value) >= 0, "textarea contains request headers");
+  }
+  let responseHeaders = gPanelDoc.getElementById("raw-response-headers-textarea").value;
+  for (let header of aData.responseHeaders.headers) {
+    ok(responseHeaders.indexOf(header.name + ": " + header.value) >= 0, "textarea contains response headers");
+  }
+}
+
+/*
+ * Tests that raw headers textareas are hidden and empty
+ */
+function testHideRawHeaders(document) {
+  let rawHeadersHidden = document.getElementById("raw-headers").getAttribute("hidden");
+  let requestTextarea = document.getElementById("raw-request-headers-textarea");
+  let responseTextare = document.getElementById("raw-response-headers-textarea");
+  ok(rawHeadersHidden, "raw headers textareas are hidden");
+  ok(requestTextarea.value == '', "raw request headers textarea is empty");
+  ok(responseTextare.value == '', "raw response headers textarea is empty");
+}
+
+function finishUp(aMonitor) {
+  gPanelWin = null;
+  gPanelDoc = null;
+
+  teardown(aMonitor).then(finish);
+}

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

@@ -231,6 +231,19 @@
   -  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
+  -  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
+  -  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
+  -  in the network details headers tab identifying the raw response headers textarea -->
+<!ENTITY netmonitorUI.summary.rawHeaders.responseHeaders "Response headers:">
+
 <!-- LOCALIZATION NOTE (netmonitorUI.context.newTab):  This is the label
   -  for the Open in New Tab menu item displayed in the context menu of the
   -  network container  -->

browser/themes/linux/devtools/netmonitor.css

@@ -8,6 +8,10 @@
   padding: 4px;
 }
 
+#toggle-raw-headers {
+  padding: 4px;
+}
+
 .requests-menu-status-and-method {
   width: 9em;
 }

browser/themes/shared/devtools/netmonitor.inc.css

@@ -485,6 +485,15 @@ label.requests-menu-status-code {
   -moz-margin-end: 6px;
 }
 
+#toggle-raw-headers {
+  margin-top: -10px;
+  -moz-margin-end: 6px;
+}
+
+.raw-response-textarea {
+  height: 50vh;
+}
+
 /* Response tabpanel */
 
 #response-content-info-header {