Bug 1448553 - Part 3: Decodeds Punycode-encoded international domain names in the Network Monitor so that they are displayed as human-readable Unicode text. r=Honza

The Punycode-encoded international domain names are human-unreadable, so they
should be displayed as human-readable Unicode text. This commit decodes this
kind of names in the Network Monitor.

MozReview-Commit-ID: HlGOVZi1lIm

--HG--
extra : rebase_source : a2107c5b08c9cbda1e80db2a9542af05987c0f74

devtools/client/netmonitor/src/utils/firefox/open-request-in-tab.js

@@ -3,6 +3,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* eslint-disable mozilla/reject-some-requires */
 
+// This file is a chrome-API-dependent version of the module
+// devtools/client/netmonitor/src/utils/open-request-in-tab.js, so that it can
+// take advantage of utilizing chrome APIs. But because of this, it isn't
+// intended to be used in Chrome-API-free applications, such as the Launchpad.
+//
+// Please keep in mind that if the feature in this file has changed, don't
+// forget to also change that accordingly in
+// devtools/client/netmonitor/src/utils/open-request-in-tab.js.
+
 "use strict";
 
 let { Cc, Ci } = require("chrome");

devtools/client/netmonitor/src/utils/open-request-in-tab.js

@@ -2,6 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+// This file is a chrome-API-free version of the module
+// devtools/client/netmonitor/src/utils/firefox/open-request-in-tab.js, so that
+// it can be used in Chrome-API-free applications, such as the Launchpad. But
+// because of this, it cannot take advantage of utilizing chrome APIs and should
+// implement the similar functionalities on its own.
+//
+// Please keep in mind that if the feature in this file has changed, don't
+// forget to also change that accordingly in
+// devtools/client/netmonitor/src/utils/firefox/open-request-in-tab.js.
+
 "use strict";
 
 const Services = require("Services");

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

@@ -6,6 +6,9 @@
 
 "use strict";
 
+const { getUnicodeUrl, getUnicodeUrlPath, getUnicodeHostname } =
+  require("devtools/client/shared/unicode-url");
+
 const {
   UPDATE_PROPS,
 } = require("devtools/client/netmonitor/src/constants");
@@ -120,22 +123,6 @@ function writeHeaderText(headers) {
   return headers.map(({name, value}) => name + ": " + value).join("\n");
 }
 
-/**
- * Convert a string into unicode if string is valid.
- * If there is a malformed URI sequence, it returns input string.
- *
- * @param {string} url - a string
- * @return {string} unicode string
- */
-function decodeUnicodeUrl(string) {
-  try {
-    return decodeURIComponent(string);
-  } catch (err) {
-    // Ignore error and return input string directly.
-  }
-  return string;
-}
-
 /**
  * Decode base64 string.
  *
@@ -175,7 +162,7 @@ function getAbbreviatedMimeType(mimeType) {
  */
 function getUrlBaseName(url) {
   const pathname = (new URL(url)).pathname;
-  return decodeUnicodeUrl(
+  return getUnicodeUrlPath(
     pathname.replace(/\S*\//, "") || pathname || "/");
 }
 
@@ -196,27 +183,27 @@ function getUrlQuery(url) {
  * @return {string} unicode basename and query portions of a url
  */
 function getUrlBaseNameWithQuery(url) {
-  return getUrlBaseName(url) + decodeUnicodeUrl((new URL(url)).search);
+  return getUrlBaseName(url) + getUnicodeUrlPath((new URL(url)).search);
 }
 
 /**
- * Helpers for getting unicode hostname portion of an URL.
+ * Helpers for getting hostname portion of an URL.
  *
  * @param {string} url - url string
  * @return {string} unicode hostname of a url
  */
 function getUrlHostName(url) {
-  return decodeUnicodeUrl((new URL(url)).hostname);
+  return new URL(url).hostname;
 }
 
 /**
- * Helpers for getting unicode host portion of an URL.
+ * Helpers for getting host portion of an URL.
  *
  * @param {string} url - url string
  * @return {string} unicode host of a url
  */
 function getUrlHost(url) {
-  return decodeUnicodeUrl((new URL(url)).host);
+  return new URL(url).host;
 }
 
 /**
@@ -237,9 +224,22 @@ function getUrlDetails(url) {
   let baseNameWithQuery = getUrlBaseNameWithQuery(url);
   let host = getUrlHost(url);
   let hostname = getUrlHostName(url);
-  let unicodeUrl = decodeUnicodeUrl(url);
+  let unicodeUrl = getUnicodeUrl(url);
   let scheme = getUrlScheme(url);
 
+  // If the hostname contains unreadable ASCII characters, we need to do the
+  // following two steps:
+  // 1. Converting the unreadable hostname to a readable Unicode domain name.
+  //    For example, converting xn--g6w.xn--8pv into a Unicode domain name.
+  // 2. Replacing the unreadable hostname portion in the `host` with the
+  //    readable hostname.
+  //    For example, replacing xn--g6w.xn--8pv:8000 with [Unicode domain]:8000
+  // After finishing the two steps, we get a readable `host`.
+  const unicodeHostname = getUnicodeHostname(hostname);
+  if (unicodeHostname !== hostname) {
+    host = host.replace(hostname, unicodeHostname);
+  }
+
   // Mark local hosts specially, where "local" is  as defined in the W3C
   // spec for secure contexts.
   // http://www.w3.org/TR/powerful-features/
@@ -277,8 +277,8 @@ function parseQueryString(query) {
   return query.replace(/^[?&]/, "").split("&").map(e => {
     let param = e.split("=");
     return {
-      name: param[0] ? decodeUnicodeUrl(param[0]) : "",
-      value: param[1] ? decodeUnicodeUrl(param[1]) : "",
+      name: param[0] ? getUnicodeUrlPath(param[0]) : "",
+      value: param[1] ? getUnicodeUrlPath(param[1]) : "",
     };
   });
 }
@@ -297,8 +297,8 @@ function parseFormData(sections) {
   return sections.replace(/^&/, "").split("&").map(e => {
     let param = e.split("=");
     return {
-      name: param[0] ? decodeUnicodeUrl(param[0]) : "",
-      value: param[1] ? decodeUnicodeUrl(param[1]) : "",
+      name: param[0] ? getUnicodeUrlPath(param[0]) : "",
+      value: param[1] ? getUnicodeUrlPath(param[1]) : "",
     };
   });
 }
@@ -491,7 +491,6 @@ module.exports = {
   fetchNetworkUpdatePacket,
   formDataURI,
   writeHeaderText,
-  decodeUnicodeUrl,
   getAbbreviatedMimeType,
   getEndTime,
   getFormattedProtocol,

devtools/client/netmonitor/test/head.js

@@ -18,8 +18,8 @@ const {
   getFormattedIPAndPort,
   getFormattedTime,
 } = require("devtools/client/netmonitor/src/utils/format-utils");
+const { getUnicodeUrl } = require("devtools/client/shared/unicode-url");
 const {
-  decodeUnicodeUrl,
   getFormattedProtocol,
   getUrlBaseName,
   getUrlHost,
@@ -410,7 +410,7 @@ function verifyRequestItemTarget(document, requestList, requestItem, method,
 
   let target = document.querySelectorAll(".request-list-item")[visibleIndex];
   // Bug 1414981 - Request URL should not show #hash
-  let unicodeUrl = decodeUnicodeUrl(url).split("#")[0];
+  let unicodeUrl = getUnicodeUrl(url.split("#")[0]);
   let name = getUrlBaseName(url);
   let query = getUrlQuery(url);
   let host = getUrlHost(url);

devtools/client/netmonitor/webpack.config.js

@@ -88,6 +88,7 @@ let webpackConfig = {
       "devtools/shared/fronts/timeline": path.join(__dirname, "../../client/shared/webpack/shims/fronts-timeline-shim"),
       "devtools/shared/platform/clipboard": path.join(__dirname, "../../client/shared/webpack/shims/platform-clipboard-stub"),
       "devtools/client/netmonitor/src/utils/firefox/open-request-in-tab": path.join(__dirname, "src/utils/open-request-in-tab"),
+      "devtools/client/shared/unicode-url": path.join(__dirname, "../../client/shared/webpack/shims/unicode-url-stub"),
 
       // Locales need to be explicitly mapped to the en-US subfolder
       "devtools/client/locales": path.join(__dirname, "../../client/locales/en-US"),