Bug 1538632 - Show a deprecation message inside of WebIDE;r=daisuke

Differential Revision: https://phabricator.services.mozilla.com/D26085

--HG--
extra : moz-landing-system : lando

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

@@ -60,6 +60,14 @@ error_runtimeVersionTooOld=The connected runtime has an old version (%1$S). The
 # Variable: runtime app version (looks like this 52.a3)
 error_runtimeVersionTooOld67Debugger=The Debugger panel may not work with the connected runtime. Please use Firefox %S if you need to use the Debugger with this runtime.
 
+# LOCALIZATION NOTE (error_webIDEDeprecated): Text for the deprecation message displayed when starting WebIDE.
+error_webIDEDeprecated=WebIDE will be disabled in release 69. Remote debugging is now available in about:debugging.
+
+# LOCALIZATION NOTE (notification_openAboutDebugging): Text for a button displayed in the deprecation message for WebIDE.
+# Clicking on the button will open a tab on about:debugging.
+notification_openAboutDebugging.label=Open about:debugging
+notification_openAboutDebugging.accesskey=O
+
 addons_stable=stable
 addons_unstable=unstable
 addons_install_button=install

devtools/client/webide/content/webide.js

@@ -67,10 +67,17 @@ var UI = {
     // toolbox session id.
     this._telemetry.toolOpened("webide", -1, this);
 
-    this.notificationBox = new window.MozElements.NotificationBox(element => {
-      document.getElementById("containerbox")
-              .insertAdjacentElement("afterbegin", element);
-    });
+    function createNotificationBox() {
+      return new window.MozElements.NotificationBox(element => {
+        document.getElementById("containerbox")
+                .insertAdjacentElement("afterbegin", element);
+      });
+    }
+    // Create two distinct NotificationBox to be able to show the deprecation message and
+    // the error messages simultaneously.
+    this.notificationBox = createNotificationBox();
+    this.deprecationBox = createNotificationBox();
+
     AppManager.init();
 
     this.appManagerUpdate = this.appManagerUpdate.bind(this);
@@ -108,6 +115,11 @@ var UI = {
     this.contentViewer = window.docShell.contentViewer;
     this.contentViewer.fullZoom = Services.prefs.getCharPref("devtools.webide.zoom");
 
+    // Show a deprecation message to encourage users to open the new Remote Debugging
+    if (Services.prefs.getBoolPref("devtools.webide.showDeprecationMessage", false)) {
+      this.showDeprecationMessage();
+    }
+
     gDevToolsBrowser.isWebIDEInitialized.resolve();
   },
 
@@ -302,7 +314,24 @@ var UI = {
     const nbox = this.notificationBox;
     nbox.removeAllNotifications(true);
     nbox.appendNotification(text, "webide:errornotification", null,
-                            nbox.PRIORITY_WARNING_LOW, buttons);
+      nbox.PRIORITY_WARNING_LOW, buttons);
+  },
+
+  showDeprecationMessage: function() {
+    const text = Strings.GetStringFromName("error_webIDEDeprecated");
+    const buttons = [{
+      label: Strings.GetStringFromName("notification_openAboutDebugging.label"),
+      accessKey: Strings.GetStringFromName("notification_openAboutDebugging.accesskey"),
+      callback: function() {
+        const { openTrustedLink } = require("devtools/client/shared/link");
+        openTrustedLink("about:debugging");
+      },
+    }];
+
+    const nbox = this.deprecationBox;
+    nbox.removeAllNotifications(true);
+    nbox.appendNotification(text, "webide:deprecationnotification", null,
+      nbox.PRIORITY_WARNING_LOW, buttons);
   },
 
   dismissErrorNotification: function() {

devtools/client/webide/preferences/webide.js

@@ -11,3 +11,6 @@ pref("devtools.webide.lastConnectedRuntime", "");
 pref("devtools.webide.lastSelectedProject", "");
 pref("devtools.webide.zoom", "1");
 pref("devtools.webide.busyTimeout", 10000);
+
+// Show a deprecation message when starting WebIDE.
+pref("devtools.webide.showDeprecationMessage", true);