--- a/devtools/client/application/src/components/Worker.js
+++ b/devtools/client/application/src/components/Worker.js
@@ -3,16 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { Component } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { a, button, div, li, span } = require("devtools/client/shared/vendor/react-dom-factories");
 const Services = require("Services");
+const { getUnicodeUrl, getUnicodeUrlPath } = require("devtools/client/shared/unicode-url");
 
 loader.lazyRequireGetter(this, "DebuggerClient",
   "devtools/shared/client/debugger-client", true);
 loader.lazyRequireGetter(this, "gDevToolsBrowser",
   "devtools/client/framework/devtools-browser", true);
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
@@ -95,23 +96,23 @@ class Worker extends Component {
     }
     // We cannot get service worker registrations unless the registration is in
     // ACTIVE state. Unable to know the actual state ("installing", "waiting"), we
     // display a custom state "registering" for now. See Bug 1153292.
     return "registering";
   }
 
   formatScope(scope) {
-    let [, remainder] = scope.split("://");
+    let [, remainder] = getUnicodeUrl(scope).split("://");
     return remainder || scope;
   }
 
   formatSource(source) {
     let parts = source.split("/");
-    return parts[parts.length - 1];
+    return getUnicodeUrlPath(parts[parts.length - 1]);
   }
 
   render() {
     let { worker } = this.props;
     let status = this.getServiceWorkerStatus();
 
     const unregisterButton = this.isActive() ?
       button({
@@ -138,17 +139,18 @@ class Worker extends Component {
     return li({ className: "service-worker-container" },
       div(
         { className: "service-worker-scope" },
         span({ title: worker.scope }, this.formatScope(worker.scope)),
         unregisterButton),
       div(
         { className: "service-worker-source" },
         span({ className: "service-worker-meta-name" }, "Source"),
-        span({ title: worker.scope }, this.formatSource(worker.url)),
+        span({ className: "js-source-url", title: worker.scope },
+          this.formatSource(worker.url)),
         debugLink),
       div(
         { className: `service-worker-status service-worker-status-${status}` },
         span({ className: "service-worker-meta-name" }, "Status"),
         Strings.GetStringFromName(status).toLowerCase(),
         startLink)
     );
   }

--- a/devtools/client/application/test/browser.ini
+++ b/devtools/client/application/test/browser.ini
@@ -2,14 +2,16 @@
 tags = devtools
 subsuite = devtools
 support-files =
   head.js
   service-workers/dynamic-registration.html
   service-workers/empty-sw.js
   service-workers/scope-page.html
   service-workers/simple.html
+  service-workers/simple-unicode.html
   !/devtools/client/shared/test/frame-script-utils.js
   !/devtools/client/shared/test/shared-head.js
 
 [browser_application_panel_list-domain-workers.js]
 [browser_application_panel_list-several-workers.js]
 [browser_application_panel_list-single-worker.js]
+[browser_application_panel_list-unicode.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/application/test/browser_application_panel_list-unicode.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TAB_URL = (URL_ROOT + "service-workers/simple-unicode.html")
+  .replace("example.com", "xn--hxajbheg2az3al.xn--jxalpdlp");
+
+/**
+ * Check that the application panel displays filenames and URL's in human-readable,
+ * Unicode characters, and not encoded URI's or punycode.
+ */
+
+add_task(async function() {
+  await enableApplicationPanel();
+
+  let { panel, target } = await openNewTabAndApplicationPanel(TAB_URL);
+  let doc = panel.panelWin.document;
+
+  info("Wait until the service worker appears in the application panel");
+  await waitUntil(() => getWorkerContainers(doc).length === 1);
+
+  let workerContainer = getWorkerContainers(doc)[0];
+
+  let scopeEl = workerContainer.querySelector(".service-worker-scope");
+  ok(
+    scopeEl.textContent.startsWith(
+      "\u03C0\u03B1\u03C1\u03AC\u03B4\u03B5\u03B9\u03B3\u03BC\u03B1." +
+      "\u03B4\u03BF\u03BA\u03B9\u03BC\u03AE"),
+    "Service worker has the expected Unicode scope"
+  );
+  let urlEl = workerContainer.querySelector(".js-source-url");
+  ok(
+    urlEl.textContent.endsWith("\u65E5\u672C"),
+    "Service worker has the expected Unicode url"
+  );
+
+  await unregisterAllWorkers(target.client);
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/application/test/service-workers/simple-unicode.html
@@ -0,0 +1,15 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Service worker test</title>
+</head>
+<body>
+<script type="text/javascript">
+"use strict";
+window.sw = navigator.serviceWorker.register("empty-sw.js?q=日本");
+</script>
+</body>
+</html>