Bug 1594885 - Basic scaffolding for whatsnew panel in DevTools r=jlast,nchevobbe

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

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

browser/app/profile/firefox.js

@@ -2338,5 +2338,12 @@ pref("devtools.popup.disable_autohide", false);
 // should be removed.
 pref("devtools.toolbox.content-frame", true);
 
+// Visibility switch preference for the WhatsNew panel.
+pref("devtools.whatsnew.enabled", true);
+
+// Temporary preference to fully disable the WhatsNew panel on any target.
+// Should be removed in https://bugzilla.mozilla.org/show_bug.cgi?id=1596037
+pref("devtools.whatsnew.feature-enabled", true);
+
 // FirstStartup service time-out in ms
 pref("first-startup.timeout", 30000);

devtools/client/definitions.js

@@ -73,6 +73,11 @@ loader.lazyGetter(
   "ApplicationPanel",
   () => require("devtools/client/application/panel").ApplicationPanel
 );
+loader.lazyGetter(
+  this,
+  "WhatsNewPanel",
+  () => require("devtools/client/whats-new/panel").WhatsNewPanel
+);
 loader.lazyGetter(
   this,
   "reloadAndRecordTab",
@@ -472,6 +477,44 @@ Tools.application = {
   },
 };
 
+Tools.whatsnew = {
+  id: "whatsnew",
+  ordinal: 12,
+  visibilityswitch: "devtools.whatsnew.enabled",
+  icon: "chrome://browser/skin/whatsnew.svg",
+  url: "chrome://devtools/content/whats-new/index.html",
+  // TODO: This panel is currently for english users only.
+  // This should be properly localized in Bug 1596038
+  label: "What’s New",
+  panelLabel: "What’s New",
+  tooltip: "What’s New",
+  inMenu: false,
+
+  isTargetSupported: function(target) {
+    // The panel is currently not localized and should only be displayed to
+    // english users. See Bug 1596038 for cleanup.
+    const isEnglishUser = Services.locale.negotiateLanguages(
+      ["en"],
+      [Services.locale.appLocaleAsBCP47]
+    ).length;
+
+    // In addition to the basic visibility switch preference, we also have a
+    // higher level preference to disable the whole panel regardless of other
+    // settings. Should be removed in Bug 1596037.
+    const isFeatureEnabled = Services.prefs.getBoolPref(
+      "devtools.whatsnew.feature-enabled",
+      false
+    );
+
+    // This panel should only be enabled for regular web toolboxes.
+    return target.isLocalTab && isEnglishUser && isFeatureEnabled;
+  },
+
+  build: function(iframeWindow, toolbox) {
+    return new WhatsNewPanel(iframeWindow, toolbox);
+  },
+};
+
 var defaultTools = [
   Tools.options,
   Tools.webConsole,
@@ -485,6 +528,7 @@ var defaultTools = [
   Tools.dom,
   Tools.accessibility,
   Tools.application,
+  Tools.whatsnew,
 ];
 
 exports.defaultTools = defaultTools;

devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js

@@ -119,6 +119,10 @@ const TEST_DATA = [
 ];
 
 add_task(async function() {
+  // Temporarily disable the panel added in Bug 1594885.
+  // Should be cleaned up when the panel is properly implemented.
+  await pushPref("devtools.whatsnew.enabled", false);
+
   const tab = await addTab("about:blank");
   const toolbox = await openToolboxForTab(
     tab,

devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_extension.js

@@ -23,6 +23,10 @@ const TEST_STARTING_ORDER = [
 ];
 
 add_task(async function() {
+  // Temporarily disable the panel added in Bug 1594885.
+  // Should be cleaned up when the panel is properly implemented.
+  await pushPref("devtools.whatsnew.enabled", false);
+
   const extension = ExtensionTestUtils.loadExtension({
     useAddonManager: "temporary",
     manifest: {

devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_hidden_extension.js

@@ -131,6 +131,10 @@ const TEST_DATA = [
 ];
 
 add_task(async function() {
+  // Temporarily disable the panel added in Bug 1594885.
+  // Should be cleaned up when the panel is properly implemented.
+  await pushPref("devtools.whatsnew.enabled", false);
+
   registerCleanupFunction(() => {
     Services.prefs.clearUserPref("devtools.toolbox.tabsOrder");
   });

devtools/client/framework/test/browser_toolbox_tools_per_toolbox_registration.js

@@ -47,7 +47,9 @@ function toolboxRegister(aToolbox) {
 
   toolbox.addAdditionalTool({
     id: TOOL_ID,
-    label: "per-toolbox Test Tool",
+    // The size of the label can make the test fail if it's too long.
+    // See ok(tab, ...) assert below and Bug 1596345.
+    label: "Test Tool",
     inMenu: true,
     isTargetSupported: () => true,
     build: function() {
@@ -78,6 +80,10 @@ function testToolRegistered() {
   // Test that the tool appeared in the UI.
   const doc = toolbox.doc;
   const tab = doc.getElementById("toolbox-tab-" + TOOL_ID);
+
+  // Note that this assert can fail if the tab is pushed to the overflow menu
+  // because of a lack of available space in the toolbar. The test should be
+  // rewritten to avoid that. See Bug 1596345 for a follow-up fix.
   ok(tab, "new tool's tab exists in toolbox UI");
 
   const panel = doc.getElementById("toolbox-panel-" + TOOL_ID);

devtools/client/jar.mn

@@ -242,3 +242,6 @@ devtools.jar:
 
     # Application panel
     content/application/index.html (application/index.html)
+
+    # WhatsNew panel
+    content/whats-new/index.html (whats-new/index.html)

devtools/client/moz.build

@@ -28,6 +28,7 @@ DIRS += [
     'themes',
     'webconsole',
     'webreplay',
+    'whats-new',
 ]
 
 JAR_MANIFESTS += ['jar.mn']

devtools/client/whats-new/index.html

@@ -0,0 +1,31 @@
+<!-- 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/. -->
+<!DOCTYPE html>
+<html dir="">
+<head>
+  <link rel="stylesheet" href="resource://devtools/client/whats-new/src/whats-new.css"/>
+  <script src="chrome://devtools/content/shared/theme-switching.js"></script>
+</head>
+
+<body>
+  <script>
+    "use strict";
+    try {
+      const { BrowserLoader } = ChromeUtils.import(
+        "resource://devtools/client/shared/browser-loader.js"
+      );
+      const { require } = BrowserLoader({
+        baseURI: "resource://devtools/client/whats-new",
+        window
+      });
+      window.WhatsNew = require("devtools/client/whats-new/src/main");
+    } catch (e) {
+      dump("Exception happened while loading the whats new panel:\n");
+      dump(e + "\n");
+      dump(e.stack + "\n");
+    }
+  </script>
+  <div id="root"></div>
+</body>
+</html>

devtools/client/whats-new/moz.build

@@ -0,0 +1,11 @@
+# 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/.
+
+DevToolsModules(
+    'panel.js'
+)
+
+DIRS += [
+    'src'
+]

devtools/client/whats-new/panel.js

@@ -0,0 +1,26 @@
+/* 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/>. */
+
+"use strict";
+
+function WhatsNewPanel(iframeWindow, toolbox) {
+  this.panelWin = iframeWindow;
+  this.toolbox = toolbox;
+}
+
+WhatsNewPanel.prototype = {
+  open: async function() {
+    this.panelWin.WhatsNew.bootstrap();
+    this.emit("ready");
+    this.isReady = true;
+    return this;
+  },
+
+  destroy: function() {
+    this.panelWin.WhatsNew.destroy();
+    this.emit("destroyed");
+  },
+};
+
+exports.WhatsNewPanel = WhatsNewPanel;

devtools/client/whats-new/src/base.css

@@ -0,0 +1,5 @@
+/* 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/. */
+
+/* base.css */

devtools/client/whats-new/src/main.js

@@ -0,0 +1,10 @@
+/* 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/>. */
+
+"use strict";
+
+module.exports = {
+  bootstrap: () => {},
+  destroy: () => {},
+};

devtools/client/whats-new/src/moz.build

@@ -0,0 +1,9 @@
+# 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/.
+
+DevToolsModules(
+    'base.css',
+    'main.js',
+    'whats-new.css'
+)

devtools/client/whats-new/src/whats-new.css

@@ -0,0 +1,5 @@
+/* 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/. */
+
+/* whats-new.css */

toolkit/components/telemetry/Events.yaml

@@ -1076,7 +1076,7 @@ devtools.main:
     extra_keys:
       session_id: The start time of the session in milliseconds since epoch (Unix Timestamp) e.g. 1396381378123.
   enter:
-    objects: ["accessibility", "application", "dom", "inspector", "jsdebugger", "memory", "netmonitor", "options", "performance", "storage", "styleeditor", "webconsole", "other", "fakeTool4242", "testBlankPanel", "testTool", "testtool1", "testTool1072208", "testtool2"]
+    objects: ["accessibility", "application", "dom", "inspector", "jsdebugger", "memory", "netmonitor", "options", "performance", "storage", "styleeditor", "webconsole", "whatsnew","other", "fakeTool4242", "testBlankPanel", "testTool", "testtool1", "testTool1072208", "testtool2"]
     bug_numbers: [1441070]
     notification_emails: ["dev-developer-tools@lists.mozilla.org", "hkirschner@mozilla.com"]
     products:
@@ -1112,7 +1112,7 @@ devtools.main:
       lines: The number of lines contained in the command.
       session_id: The start time of the session in milliseconds since epoch (Unix Timestamp) e.g. 1396381378123.
   exit:
-    objects: ["accessibility", "application", "dom", "inspector", "jsdebugger", "memory", "netmonitor", "options", "performance", "storage", "styleeditor", "webconsole", "other", "fakeTool4242", "testBlankPanel", "testTool", "testtool1", "testTool1072208", "testtool2"]
+    objects: ["accessibility", "application", "dom", "inspector", "jsdebugger", "memory", "netmonitor", "options", "performance", "storage", "styleeditor", "webconsole", "whatsnew", "other", "fakeTool4242", "testBlankPanel", "testTool", "testtool1", "testTool1072208", "testtool2"]
     bug_numbers: [1455270]
     notification_emails: ["dev-developer-tools@lists.mozilla.org", "hkirschner@mozilla.com"]
     products: