Bug 588540 - NetworkPanel: Display submitted form data formated, r=sdwilsh, a=sdwilsh

toolkit/components/console/hudservice/HUDService.jsm

@@ -586,6 +586,8 @@ NetworkPanel.prototype =
   _DISPLAYED_RESPONSE_HEADER: 3,
   _TRANSITION_CLOSED: 4,
 
+  _fromDataRegExp: /Content-Type\:\s*application\/x-www-form-urlencoded/,
+
   /**
    * Small helper function that is nearly equal to  HUDService.getFormatStr
    * except that it prefixes aName with "NetworkPanel.".
@@ -635,6 +637,17 @@ NetworkPanel.prototype =
     return this.httpActivity.response.status.indexOf("304") != -1;
   },
 
+  /**
+   *
+   * @returns boolean
+   *          Returns true if the posted body contains form data.
+   */
+  get _isRequestBodyFormData()
+  {
+    let requestBody = this.httpActivity.request.body;
+    return this._fromDataRegExp.test(requestBody);
+  },
+
   /**
    * Appends the node with id=aId by the text aValue.
    *
@@ -758,6 +771,40 @@ NetworkPanel.prototype =
     this._appendTextNode("requestBodyContent", this.httpActivity.request.body);
   },
 
+  /*
+   * Displays the `sent form data` section. Parses the request header for the
+   * submitted form data displays it inside of the `sent form data` section.
+   *
+   * @returns void
+   */
+  _displayRequestForm: function NP_processRequestForm() {
+    let requestBodyLines = this.httpActivity.request.body.split("\n");
+    let formData = requestBodyLines[requestBodyLines.length - 1].
+                      replace(/\+/g, " ").split("&");
+
+    function unescapeText(aText)
+    {
+      try {
+        return decodeURIComponent(aText);
+      }
+      catch (ex) {
+        return decodeURIComponent(unescape(aText));
+      }
+    }
+
+    let formDataObj = {};
+    for (let i = 0; i < formData.length; i++) {
+      let data = formData[i];
+      let idx = data.indexOf("=");
+      let key = data.substring(0, idx);
+      let value = data.substring(idx + 1);
+      formDataObj[unescapeText(key)] = unescapeText(value);
+    }
+
+    this._appendList("requestFormDataContent", formDataObj);
+    this._displayNode("requestFormData");
+  },
+
   /**
    * Displays the response section of the NetworkPanel, sets the response status,
    * the duration between the start of the request and the receiving of the
@@ -896,7 +943,13 @@ NetworkPanel.prototype =
       case this._DISPLAYED_REQUEST_HEADER:
         // Process the request body if there is one.
         if (request.body) {
-          this._displayRequestBody();
+          // Check if we send some form data. If so, display the form data special.
+          if (this._isRequestBodyFormData) {
+            this._displayRequestForm();
+          }
+          else {
+            this._displayRequestBody();
+          }
           this._state = this._DISPLAYED_REQUEST_BODY;
         }
         // FALL THROUGH

toolkit/components/console/hudservice/NetworkPanel.xhtml

@@ -76,6 +76,10 @@
     <h1>&networkPanel.requestBody;</h1>
       <div class="property-header" id="requestBodyContent"></div>
   </div>
+  <div id="requestFormData" style="display:none">
+    <h1>&networkPanel.requestFormData;</h1>
+      <div class="property-header" id="requestFormDataContent"></div>
+  </div>
 </div>
 
 <div class="group" id="responseContainer" style="display:none">

toolkit/components/console/hudservice/tests/browser/browser_HUDServiceTestsAll.js

@@ -631,6 +631,7 @@ function testNetworkPanel()
 
     checkIsVisible(networkPanel, {
       requestCookie: false,
+      requestFormData: false,
       requestBody: false,
       responseContainer: false,
       responseBody: false,
@@ -648,6 +649,7 @@ function testNetworkPanel()
     networkPanel.update();
     checkIsVisible(networkPanel, {
       requestBody: true,
+      requestFormData: false,
       requestCookie: false,
       responseContainer: false,
       responseBody: false,
@@ -666,6 +668,7 @@ function testNetworkPanel()
     networkPanel.update();
     checkIsVisible(networkPanel, {
       requestBody: true,
+      requestFormData: false,
       requestCookie: false,
       responseContainer: true,
       responseBody: false,
@@ -686,6 +689,7 @@ function testNetworkPanel()
     checkIsVisible(networkPanel, {
       requestBody: true,
       requestCookie: false,
+      requestFormData: false,
       responseContainer: true,
       responseBody: false,
       responseNoBody: false,
@@ -724,6 +728,7 @@ function testNetworkPanel()
 
     checkIsVisible(networkPanel, {
       requestBody: true,
+      requestFormData: false,
       requestCookie: true,
       responseContainer: true,
       responseBody: true,
@@ -752,6 +757,7 @@ function testNetworkPanel()
 
     checkIsVisible(networkPanel, {
       requestBody: true,
+      requestFormData: false,
       requestCookie: true,
       responseContainer: true,
       responseBody: false,
@@ -796,6 +802,7 @@ function testNetworkPanel()
 
     checkIsVisible(networkPanel, {
       requestBody: true,
+      requestFormData: false,
       requestCookie: true,
       responseContainer: true,
       responseBody: false,
@@ -809,6 +816,58 @@ function testNetworkPanel()
 
     networkPanel.panel.hidePopup();
 
+    // Test sent form data.
+    httpActivity.request.body = [
+      "Content-Type:      application/x-www-form-urlencoded\n" +
+      "Content-Length: 59\n" +
+      "name=rob&age=20"
+    ].join("");
+
+    networkPanel = HUDService.openNetworkPanel(filterBox, httpActivity);
+    networkPanel.panel.addEventListener("load", function onLoad() {
+      networkPanel.panel.removeEventListener("load", onLoad, true);
+      testDriver.next();
+    }, true);
+    yield;
+
+    checkIsVisible(networkPanel, {
+      requestBody: false,
+      requestFormData: true,
+      requestCookie: true,
+      responseContainer: true,
+      responseBody: false,
+      responseNoBody: false,
+      responseImage: false,
+      responseImageCached: true
+    });
+
+    checkNodeKeyValue(networkPanel, "requestFormDataContent", "name", "rob");
+    checkNodeKeyValue(networkPanel, "requestFormDataContent", "age", "20");
+    networkPanel.panel.hidePopup();
+
+    // Test no space after Content-Type:
+    httpActivity.request.body = "Content-Type:application/x-www-form-urlencoded\n";
+
+    networkPanel = HUDService.openNetworkPanel(filterBox, httpActivity);
+    networkPanel.panel.addEventListener("load", function onLoad() {
+      networkPanel.panel.removeEventListener("load", onLoad, true);
+      testDriver.next();
+    }, true);
+    yield;
+
+    checkIsVisible(networkPanel, {
+      requestBody: false,
+      requestFormData: true,
+      requestCookie: true,
+      responseContainer: true,
+      responseBody: false,
+      responseNoBody: false,
+      responseImage: false,
+      responseImageCached: true
+    });
+
+    networkPanel.panel.hidePopup();
+
     // Run the next test.
     testErrorOnPageReload();
 

toolkit/locales/en-US/chrome/global/webConsole.dtd

@@ -5,6 +5,8 @@
 <!ENTITY networkPanel.requestHeaders              "Request Headers">
 <!ENTITY networkPanel.requestCookie               "Sent Cookie">
 <!ENTITY networkPanel.requestBody                 "Request Body">
+<!ENTITY networkPanel.requestFormData             "Sent Form Data">
+
 <!ENTITY networkPanel.responseHeaders             "Response Headers">
 <!ENTITY networkPanel.responseBody                "Response Body">
 <!ENTITY networkPanel.responseNoBody              "No Response Body">