Bug 1266415 - display a warning on about:debugging if service workers are disabled; r=jdescottes

MozReview-Commit-ID: 5OipoBx7LH2

--HG--
extra : rebase_source : bb1f884d29a907162baba7d19deb634132c17a90

devtools/client/aboutdebugging/aboutdebugging.css

@@ -112,6 +112,7 @@ button {
   margin: 5px 4px 5px 0px;
 }
 
+.service-worker-disabled .warning,
 .addons-install-error .warning {
   background-image: url(chrome://devtools/skin/images/alerticon-warning.png);
   background-size: 13px 12px;
@@ -122,6 +123,7 @@ button {
 }
 
 @media (min-resolution: 1.1dppx) {
+  .service-worker-disabled .warning,
   .addons-install-error .warning {
     background-image: url(chrome://devtools/skin/images/alerticon-warning@2x.png);
   }

devtools/client/aboutdebugging/components/addons/controls.js

@@ -80,7 +80,7 @@ module.exports = createClass({
           }, Strings.GetStringFromName("addonDebugging.label")),
           "(",
           dom.a({ href: MORE_INFO_URL, target: "_blank" },
-            Strings.GetStringFromName("addonDebugging.moreInfo")),
+            Strings.GetStringFromName("moreInfo")),
           ")"
         ),
         dom.button({

devtools/client/aboutdebugging/components/target-list.js

@@ -19,7 +19,7 @@ module.exports = createClass({
   displayName: "TargetList",
 
   render() {
-    let { client, debugDisabled, targetClass, targets, sort } = this.props;
+    let { client, debugDisabled, error, targetClass, targets, sort } = this.props;
     if (sort) {
       targets = targets.sort(LocaleCompare);
     }
@@ -27,11 +27,16 @@ module.exports = createClass({
       return targetClass({ client, target, debugDisabled });
     });
 
+    let content = "";
+    if (error) {
+      content = error;
+    } else if (targets.length > 0) {
+      content = dom.ul({ className: "target-list" }, targets);
+    } else {
+      content = dom.p(null, Strings.GetStringFromName("nothing"));
+    }
+
     return dom.div({ id: this.props.id, className: "targets" },
-      dom.h2(null, this.props.name),
-      targets.length > 0 ?
-        dom.ul({ className: "target-list" }, targets) :
-        dom.p(null, Strings.GetStringFromName("nothing"))
-    );
+      dom.h2(null, this.props.name), content);
   },
 });

devtools/client/aboutdebugging/components/workers/panel.js

@@ -1,9 +1,12 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
-
+/* globals window */
 "use strict";
 
+loader.lazyImporter(this, "PrivateBrowsingUtils",
+  "resource://gre/modules/PrivateBrowsingUtils.jsm");
+
 const { Ci } = require("chrome");
 const { createClass, createFactory, DOM: dom } =
   require("devtools/client/shared/vendor/react");
@@ -19,6 +22,7 @@ const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 const WorkerIcon = "chrome://devtools/skin/images/debugging-workers.svg";
+const MORE_INFO_URL = "https://developer.mozilla.org/en-US/docs/Tools/about%3Adebugging";
 
 module.exports = createClass({
   displayName: "WorkersPanel",
@@ -103,6 +107,21 @@ module.exports = createClass({
     let { client, id } = this.props;
     let { workers } = this.state;
 
+    let isWindowPrivate = PrivateBrowsingUtils.isContentWindowPrivate(window);
+    let isPrivateBrowsingMode = PrivateBrowsingUtils.permanentPrivateBrowsing;
+    let isServiceWorkerDisabled = !Services.prefs
+                                    .getBoolPref("dom.serviceWorkers.enabled");
+    let errorMsg = isWindowPrivate || isPrivateBrowsingMode ||
+           isServiceWorkerDisabled ?
+      dom.p({ className: "service-worker-disabled" },
+        dom.div({ className: "warning" }),
+        Strings.GetStringFromName("configurationIsNotCompatible"),
+        " (",
+        dom.a({ href: MORE_INFO_URL, target: "_blank" },
+          Strings.GetStringFromName("moreInfo")),
+        ")"
+      ) : "";
+
     return dom.div({
       id: id + "-panel",
       className: "panel",
@@ -116,6 +135,7 @@ module.exports = createClass({
     dom.div({ id: "workers", className: "inverted-icons" },
       TargetList({
         client,
+        error: errorMsg,
         id: "service-workers",
         name: Strings.GetStringFromName("serviceWorkers"),
         sort: true,

devtools/client/aboutdebugging/test/browser.ini

@@ -19,6 +19,7 @@ support-files =
 [browser_addons_toggle_debug.js]
 [browser_page_not_found.js]
 [browser_service_workers.js]
+[browser_service_workers_not_compatible.js]
 [browser_service_workers_push.js]
 [browser_service_workers_start.js]
 [browser_service_workers_timeout.js]

devtools/client/aboutdebugging/test/browser_service_workers_not_compatible.js

@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that Service Worker section should show warning message in
+// about:debugging if any of following conditions is met:
+// 1. service worker is disabled
+// 2. the about:debugging pannel is openned in private browsing mode
+// 3. the about:debugging pannel is openned in private content window
+
+var imgClass = ".service-worker-disabled .warning";
+
+add_task(function* () {
+  yield new Promise(done => {
+    info("disable service workers");
+    let options = {"set": [
+      ["dom.serviceWorkers.enabled", false],
+    ]};
+    SpecialPowers.pushPrefEnv(options, done);
+  });
+
+  let { tab, document } = yield openAboutDebugging("workers");
+  // Check that the warning img appears in the UI
+  let img = document.querySelector(imgClass);
+  ok(img, "warning message is rendered");
+
+  yield closeAboutDebugging(tab);
+});
+
+add_task(function* () {
+  yield new Promise(done => {
+    info("set private browsing mode as default");
+    let options = {"set": [
+      ["browser.privatebrowsing.autostart", true],
+    ]};
+    SpecialPowers.pushPrefEnv(options, done);
+  });
+
+  let { tab, document } = yield openAboutDebugging("workers");
+  // Check that the warning img appears in the UI
+  let img = document.querySelector(imgClass);
+  ok(img, "warning message is rendered");
+
+  yield closeAboutDebugging(tab);
+});
+
+add_task(function* () {
+  info("Opening a new private window");
+  let win = OpenBrowserWindow({private: true});
+  yield waitForDelayedStartupFinished(win);
+
+  let { tab, document } = yield openAboutDebugging("workers", win);
+  // Check that the warning img appears in the UI
+  let img = document.querySelector(imgClass);
+  ok(img, "warning message is rendered");
+
+  yield closeAboutDebugging(tab, win);
+  win.close();
+});

devtools/client/aboutdebugging/test/head.js

@@ -6,7 +6,8 @@
 /* exported openAboutDebugging, changeAboutDebuggingHash, closeAboutDebugging,
    installAddon, uninstallAddon, waitForMutation, assertHasTarget,
    getServiceWorkerList, getTabList, openPanel, waitForInitialAddonList,
-   waitForServiceWorkerRegistered, unregisterServiceWorker */
+   waitForServiceWorkerRegistered, unregisterServiceWorker,
+   waitForDelayedStartupFinished */
 
 "use strict";
 
@@ -24,14 +25,14 @@ registerCleanupFunction(() => {
   DevToolsUtils.testing = false;
 });
 
-function* openAboutDebugging(page) {
+function* openAboutDebugging(page, win) {
   info("opening about:debugging");
   let url = "about:debugging";
   if (page) {
     url += "#" + page;
   }
 
-  let tab = yield addTab(url);
+  let tab = yield addTab(url, win);
   let browser = tab.linkedBrowser;
   let document = browser.contentDocument;
 
@@ -63,9 +64,9 @@ function openPanel(document, panelId) {
     document.querySelector(".main-content"), {childList: true});
 }
 
-function closeAboutDebugging(tab) {
+function closeAboutDebugging(tab, win) {
   info("Closing about:debugging");
-  return removeTab(tab);
+  return removeTab(tab, win);
 }
 
 function addTab(url, win, backgroundTab = false) {
@@ -296,3 +297,20 @@ function unregisterServiceWorker(tab) {
     yield registration.unregister();
   });
 }
+
+/**
+ * Waits for the creation of a new window, usually used with create private
+ * browsing window.
+ * Returns a promise that will resolve when the window is successfully created.
+ * @param {window} win
+ */
+function waitForDelayedStartupFinished(win) {
+  return new Promise(function (resolve) {
+    Services.obs.addObserver(function observer(subject, topic) {
+      if (win == subject) {
+        Services.obs.removeObserver(observer, topic);
+        resolve();
+      }
+    }, "browser-delayed-startup-finished", false);
+  });
+}

devtools/client/locales/en-US/aboutdebugging.properties

@@ -12,7 +12,7 @@ unregister = unregister
 addons = Add-ons
 addonDebugging.label = Enable add-on debugging
 addonDebugging.tooltip = Turning this on will allow you to debug add-ons and various other parts of the browser chrome
-addonDebugging.moreInfo = more info
+moreInfo = more info
 loadTemporaryAddon = Load Temporary Add-on
 extensions = Extensions
 selectAddonFromFile2 = Select Manifest File or Package (.xpi)
@@ -30,3 +30,4 @@ pageNotFound = Page not found
 doesNotExist = #%S does not exist!
 
 nothing = Nothing yet.
+configurationIsNotCompatible = Your browser configuration is not compatible with Service Workers