Bug 1594885 - Basic scaffolding for whatsnew panel in DevTools r=jlast,nchevobbe
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 14 Nov 2019 08:11:07 +0000
changeset 501898 d87213b99f4685022650253877f90a6c6bcb3aa9
parent 501897 6a2d40014464a2bb1489921bd152d229e273d14d
child 501899 ab5f80e64f5811672a39001dce060d2d6854c236
push id114172
push userdluca@mozilla.com
push dateTue, 19 Nov 2019 11:31:10 +0000
treeherdermozilla-inbound@b5c5ba07d3db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast, nchevobbe
bugs1594885
milestone72.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1594885 - Basic scaffolding for whatsnew panel in DevTools r=jlast,nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D52733
browser/app/profile/firefox.js
devtools/client/definitions.js
devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js
devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_extension.js
devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_hidden_extension.js
devtools/client/framework/test/browser_toolbox_tools_per_toolbox_registration.js
devtools/client/jar.mn
devtools/client/moz.build
devtools/client/whats-new/index.html
devtools/client/whats-new/moz.build
devtools/client/whats-new/panel.js
devtools/client/whats-new/src/base.css
devtools/client/whats-new/src/main.js
devtools/client/whats-new/src/moz.build
devtools/client/whats-new/src/whats-new.css
toolkit/components/telemetry/Events.yaml
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -2333,10 +2333,17 @@ pref("devtools.popup.disable_autohide", 
 
 // Load the DevTools toolbox in a frame with type=content instead of type=chrome
 // See Bug 1539979 for more details.
 // We keep the option of running devtools in a chrome frame while we fix racy
 // tests that started failing when using type=content, but this ultimately
 // 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);
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -70,16 +70,21 @@ loader.lazyGetter(
 );
 loader.lazyGetter(
   this,
   "ApplicationPanel",
   () => require("devtools/client/application/panel").ApplicationPanel
 );
 loader.lazyGetter(
   this,
+  "WhatsNewPanel",
+  () => require("devtools/client/whats-new/panel").WhatsNewPanel
+);
+loader.lazyGetter(
+  this,
   "reloadAndRecordTab",
   () => require("devtools/client/webreplay/menu.js").reloadAndRecordTab
 );
 loader.lazyGetter(
   this,
   "reloadAndStopRecordingTab",
   () => require("devtools/client/webreplay/menu.js").reloadAndStopRecordingTab
 );
@@ -467,29 +472,68 @@ Tools.application = {
     return target.isLocalTab;
   },
 
   build: function(iframeWindow, toolbox) {
     return new ApplicationPanel(iframeWindow, toolbox);
   },
 };
 
+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,
   Tools.inspector,
   Tools.jsdebugger,
   Tools.styleEditor,
   Tools.performance,
   Tools.netMonitor,
   Tools.storage,
   Tools.memory,
   Tools.dom,
   Tools.accessibility,
   Tools.application,
+  Tools.whatsnew,
 ];
 
 exports.defaultTools = defaultTools;
 
 Tools.darkTheme = {
   id: "dark",
   label: l10n("options.darkTheme.label2"),
   ordinal: 1,
--- a/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_dnd.js
@@ -114,16 +114,20 @@ const TEST_DATA = [
       "storage",
       "accessibility",
       "webconsole",
     ],
   },
 ];
 
 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,
     "inspector",
     Toolbox.HostType.BOTTOM
   );
 
   const originalPreference = Services.prefs.getCharPref(
--- a/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_extension.js
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_extension.js
@@ -18,16 +18,20 @@ const TEST_STARTING_ORDER = [
   "memory",
   "netmonitor",
   "storage",
   "accessibility",
   EXTENSION,
 ];
 
 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_page: "extension.html",
       applications: {
         gecko: { id: EXTENSION },
       },
     },
--- a/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_hidden_extension.js
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_reorder_with_hidden_extension.js
@@ -126,16 +126,20 @@ const TEST_DATA = [
       "accessibility",
       EXTENSION,
       "webconsole",
     ],
   },
 ];
 
 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");
   });
 
   const extension = ExtensionTestUtils.loadExtension({
     useAddonManager: "temporary",
     manifest: {
       devtools_page: "extension.html",
--- a/devtools/client/framework/test/browser_toolbox_tools_per_toolbox_registration.js
+++ b/devtools/client/framework/test/browser_toolbox_tools_per_toolbox_registration.js
@@ -42,17 +42,19 @@ function toolboxRegister(aToolbox) {
   waitForToolInstanceBuild = new Promise(resolve => {
     resolveToolInstanceBuild = resolve;
   });
 
   info("add per-toolbox tool in the opened toolbox.");
 
   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() {
       info("per-toolbox tool has been built.");
       resolveToolInstanceBuild();
 
       return {
         destroy: () => {
@@ -73,16 +75,20 @@ function testToolRegistered() {
   ok(
     toolbox.hasAdditionalTool(TOOL_ID),
     "per-toolbox tool registered to the specific toolbox"
   );
 
   // 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);
   ok(panel, "new tool's panel exists in toolbox UI");
 
   for (const win of getAllBrowserWindows()) {
     const key = win.document.getElementById("key_" + TOOL_ID);
     if (win.document == doc) {
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -237,8 +237,11 @@ devtools.jar:
     content/netmonitor/src/assets/icons/blocked.svg (netmonitor/src/assets/icons/blocked.svg)
     content/netmonitor/index.html (netmonitor/index.html)
     content/netmonitor/src/assets/styles/StatusCode.css (netmonitor/src/assets/styles/StatusCode.css)
     content/netmonitor/src/assets/styles/websockets.css (netmonitor/src/assets/styles/websockets.css)
     content/netmonitor/src/assets/styles/search.css (netmonitor/src/assets/styles/search.css)
 
     # Application panel
     content/application/index.html (application/index.html)
+
+    # WhatsNew panel
+    content/whats-new/index.html (whats-new/index.html)
--- a/devtools/client/moz.build
+++ b/devtools/client/moz.build
@@ -23,16 +23,17 @@ DIRS += [
     'preferences',
     'responsive',
     'shared',
     'storage',
     'styleeditor',
     'themes',
     'webconsole',
     'webreplay',
+    'whats-new',
 ]
 
 JAR_MANIFESTS += ['jar.mn']
 
 DevToolsModules(
     'definitions.js',
     'menus.js',
 )
new file mode 100644
--- /dev/null
+++ b/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>
new file mode 100644
--- /dev/null
+++ b/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'
+]
new file mode 100644
--- /dev/null
+++ b/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;
new file mode 100644
--- /dev/null
+++ b/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 */
new file mode 100644
--- /dev/null
+++ b/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: () => {},
+};
new file mode 100644
--- /dev/null
+++ b/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'
+)
new file mode 100644
--- /dev/null
+++ b/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 */
--- a/toolkit/components/telemetry/Events.yaml
+++ b/toolkit/components/telemetry/Events.yaml
@@ -1071,17 +1071,17 @@ devtools.main:
       - "geckoview"
     record_in_processes: ["main"]
     description: User is editing a CSS rule by clicking on or next to a CSS property, enabling / disabling a rule or creating a new property.
     release_channel_collection: opt-out
     expiry_version: never
     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:
       - "firefox"
       - "fennec"
       - "geckoview"
     record_in_processes: ["main"]
     description: User opens a tool in the devtools toolbox.
@@ -1107,17 +1107,17 @@ devtools.main:
     description: User has executed some JS in the Web Console.
     release_channel_collection: opt-out
     expiry_version: never
     extra_keys:
       input: Indicates from which input the command was evaluated ("inline" for regular input, "multiline" for editor mode).
       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:
       - "firefox"
       - "fennec"
       - "geckoview"
     record_in_processes: ["main"]
     description: User closes a tool in the devtools toolbox.