Bug 1250255 - Properly decode response body; r=gasolin

MozReview-Commit-ID: DQu5KGqHqEv

--HG--
extra : rebase_source : f3f524b10085d912130c3ea07d27d4b6b1abb023

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

@@ -11,7 +11,11 @@ const {
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { L10N } = require("../utils/l10n");
-const { formDataURI, getUrlBaseName } = require("../utils/request-utils");
+const {
+  decodeUnicodeBase64,
+  formDataURI,
+  getUrlBaseName,
+} = require("../utils/request-utils");
 
 // Components
 const PropertiesView = createFactory(require("./properties-view"));
@@ -24,6 +28,8 @@ const RESPONSE_IMG_DIMENSIONS = L10N.getStr("netmonitor.response.dimensions");
 const RESPONSE_IMG_MIMETYPE = L10N.getStr("netmonitor.response.mime");
 const RESPONSE_PAYLOAD = L10N.getStr("responsePayload");
 
+const JSON_VIEW_MIME_TYPE = "application/vnd.mozilla.json.view";
+
 /*
  * Response panel component
  * Displays the GET parameters and POST data of a request
@@ -146,6 +152,11 @@ const ResponsePanel = createClass({
       );
     }
 
+    // Decode response if it's coming from JSONView.
+    if (mimeType.includes(JSON_VIEW_MIME_TYPE) && encoding === "base64") {
+      text = decodeUnicodeBase64(text);
+    }
+
     // Display Properties View
     let { json, jsonpCallback, error } = this.isJSON(mimeType, text) || {};
     let object = {};

devtools/client/netmonitor/src/connector/firefox-data-provider.js

@@ -7,7 +7,10 @@
 
 const { EVENTS } = require("../constants");
 const { CurlUtils } = require("devtools/client/shared/curl");
-const { fetchHeaders, formDataURI } = require("../utils/request-utils");
+const {
+  fetchHeaders,
+  formDataURI,
+} = require("../utils/request-utils");
 
 /**
  * This object is responsible for fetching additional HTTP
@@ -27,7 +30,7 @@ class FirefoxDataProvider {
     this.updateRequest = this.updateRequest.bind(this);
 
     // Internals
-    this.fetchImage = this.fetchImage.bind(this);
+    this.fetchResponseBody = this.fetchResponseBody.bind(this);
     this.fetchRequestHeaders = this.fetchRequestHeaders.bind(this);
     this.fetchResponseHeaders = this.fetchResponseHeaders.bind(this);
     this.fetchPostData = this.fetchPostData.bind(this);
@@ -112,7 +115,7 @@ class FirefoxDataProvider {
       requestCookiesObj,
       responseCookiesObj,
     ] = await Promise.all([
-      this.fetchImage(mimeType, responseContent),
+      this.fetchResponseBody(mimeType, responseContent),
       this.fetchRequestHeaders(requestHeaders),
       this.fetchResponseHeaders(responseHeaders),
       this.fetchPostData(requestPostData),
@@ -137,7 +140,7 @@ class FirefoxDataProvider {
     }
   }
 
-  async fetchImage(mimeType, responseContent) {
+  async fetchResponseBody(mimeType, responseContent) {
     let payload = {};
     if (mimeType && responseContent && responseContent.content) {
       let { encoding, text } = responseContent.content;

devtools/client/netmonitor/src/utils/request-utils.js

@@ -108,6 +108,21 @@ function decodeUnicodeUrl(string) {
   return string;
 }
 
+/**
+ * Decode base64 string.
+ *
+ * @param {string} url - a string
+ * @return {string} decoded string
+ */
+function decodeUnicodeBase64(string) {
+  try {
+    return decodeURIComponent(atob(string));
+  } catch (err) {
+    // Ignore error and return input string directly.
+  }
+  return string;
+}
+
 /**
  * Helper for getting an abbreviated string for a mime type.
  *
@@ -375,6 +390,7 @@ function getResponseHeader(item, header) {
 }
 
 module.exports = {
+  decodeUnicodeBase64,
   getFormDataSections,
   fetchHeaders,
   formDataURI,