diff --git a/devtools/client/netmonitor/src/components/response-panel.js b/devtools/client/netmonitor/src/components/response-panel.js index b6930174af1a..c496d5196d85 100644 --- a/devtools/client/netmonitor/src/components/response-panel.js +++ b/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 = {}; diff --git a/devtools/client/netmonitor/src/connector/firefox-data-provider.js b/devtools/client/netmonitor/src/connector/firefox-data-provider.js index a188a3485044..bede681c9fe8 100644 --- a/devtools/client/netmonitor/src/connector/firefox-data-provider.js +++ b/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; diff --git a/devtools/client/netmonitor/src/utils/request-utils.js b/devtools/client/netmonitor/src/utils/request-utils.js index de2e4d1fb81c..15b36da67ff4 100644 --- a/devtools/client/netmonitor/src/utils/request-utils.js +++ b/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,