Bug 1164281 - Make a new pref devtools.performance.ui.experimental enabled on nightly to show experimental options. r=vp

browser/app/profile/firefox.js

@@ -1455,6 +1455,13 @@ pref("devtools.performance.ui.enable-memory", false);
 pref("devtools.performance.ui.enable-framerate", true);
 pref("devtools.performance.ui.show-jit-optimizations", false);
 
+// Enable experimental options in the UI only in Nightly
+#if defined(NIGHTLY_BUILD)
+pref("devtools.performance.ui.experimental", true);
+#else
+pref("devtools.performance.ui.experimental", false);
+#endif
+
 // The default cache UI setting
 pref("devtools.cache.disabled", false);
 

browser/devtools/performance/performance.xul

@@ -37,12 +37,12 @@
                 data-pref="show-platform-data"
                 label="&profilerUI.showPlatformData;"
                 tooltiptext="&profilerUI.showPlatformData.tooltiptext;"/>
-      <!-- TODO Re-enable in bug 1163350 -->
-      <!-- <menuitem id="option-enable-memory"
+      <menuitem id="option-enable-memory"
+                class="experimental-option"
                 type="checkbox"
                 data-pref="enable-memory"
                 label="&profilerUI.enableMemory;"
-                tooltiptext="&profilerUI.enableMemory.tooltiptext;"/> -->
+                tooltiptext="&profilerUI.enableMemory.tooltiptext;"/>
       <menuitem id="option-enable-framerate"
                 type="checkbox"
                 data-pref="enable-framerate"
@@ -63,12 +63,12 @@
                 data-pref="flatten-tree-recursion"
                 label="&profilerUI.flattenTreeRecursion;"
                 tooltiptext="&profilerUI.flattenTreeRecursion.tooltiptext;"/>
-      <!-- TODO Re-enable in bug 1163351 -->
-      <!-- <menuitem id="option-show-jit-optimizations"
+      <menuitem id="option-show-jit-optimizations"
+                class="experimental-option"
                 type="checkbox"
                 data-pref="show-jit-optimizations"
                 label="&profilerUI.showJITOptimizations;"
-                tooltiptext="&profilerUI.showJITOptimizations.tooltiptext;"/> -->
+                tooltiptext="&profilerUI.showJITOptimizations.tooltiptext;"/>
     </menupopup>
   </popupset>
 
@@ -96,8 +96,8 @@
       <toolbar id="performance-toolbar" class="devtools-toolbar">
         <hbox id="performance-toolbar-control-other" class="devtools-toolbarbutton-group">
           <toolbarbutton id="filter-button"
-                         popup="performance-filter-menupopup"
                          class="devtools-toolbarbutton"
+                         popup="performance-filter-menupopup"
                          tooltiptext="&profilerUI.options.filter.tooltiptext;"/>
         </hbox>
         <hbox id="performance-toolbar-controls-detail-views" class="devtools-toolbarbutton-group">

browser/devtools/performance/test/browser.ini

@@ -70,6 +70,7 @@ support-files =
 [browser_perf-loading-02.js]
 [browser_perf-options-01.js]
 [browser_perf-options-02.js]
+[browser_perf-options-03.js]
 [browser_perf-options-invert-call-tree-01.js]
 [browser_perf-options-invert-call-tree-02.js]
 [browser_perf-options-invert-flame-graph-01.js]

browser/devtools/performance/test/browser_perf-options-03.js

@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that toggling meta option prefs change visibility of other options.
+ */
+
+Services.prefs.setBoolPref(EXPERIMENTAL_PREF, false);
+
+function spawnTest () {
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { $, EVENTS, PerformanceController } = panel.panelWin;
+
+  let $body = $(".theme-body");
+  let $menu = $("#performance-options-menupopup");
+
+  ok(!$body.classList.contains("experimental-enabled"), "body does not have `experimental-enabled` on start");
+  ok(!$menu.classList.contains("experimental-enabled"), "menu does not have `experimental-enabled` on start");
+
+  Services.prefs.setBoolPref(EXPERIMENTAL_PREF, true);
+
+  ok($body.classList.contains("experimental-enabled"), "body has `experimental-enabled` after toggle");
+  ok($menu.classList.contains("experimental-enabled"), "menu has `experimental-enabled` after toggle");
+
+  yield teardown(panel);
+  finish();
+}

browser/devtools/performance/test/head.js

@@ -37,6 +37,7 @@ const INVERT_PREF = "devtools.performance.ui.invert-call-tree";
 const INVERT_FLAME_PREF = "devtools.performance.ui.invert-flame-graph";
 const FLATTEN_PREF = "devtools.performance.ui.flatten-tree-recursion";
 const JIT_PREF = "devtools.performance.ui.show-jit-optimizations";
+const EXPERIMENTAL_PREF = "devtools.performance.ui.experimental";
 
 // All tests are asynchronous.
 waitForExplicitFinish();
@@ -56,6 +57,7 @@ let DEFAULT_PREFS = [
   "devtools.performance.memory.max-log-length",
   "devtools.performance.profiler.buffer-size",
   "devtools.performance.profiler.sample-frequency-khz",
+  "devtools.performance.ui.experimental",
 ].reduce((prefs, pref) => {
   prefs[pref] = Preferences.get(pref);
   return prefs;

browser/devtools/performance/views/toolbar.js

@@ -15,12 +15,18 @@ let ToolbarView = {
     this._onFilterPopupHiding = this._onFilterPopupHiding.bind(this);
     this._onHiddenMarkersChanged = this._onHiddenMarkersChanged.bind(this);
     this._onPrefChanged = this._onPrefChanged.bind(this);
+    this._popup = $("#performance-options-menupopup");
 
     this.optionsView = new OptionsView({
       branchName: BRANCH_NAME,
-      menupopup: $("#performance-options-menupopup")
+      menupopup: this._popup
     });
 
+    // Set the visibility of experimental UI options on load
+    // based off of `devtools.performance.ui.experimental` preference
+    let experimentalEnabled = PerformanceController.getOption("experimental");
+    this._toggleExperimentalUI(experimentalEnabled);
+
     yield this.optionsView.initialize();
     this.optionsView.on("pref-changed", this._onPrefChanged);
 
@@ -36,6 +42,7 @@ let ToolbarView = {
   destroy: function () {
     $("#performance-filter-menupopup").removeEventListener("popupshowing", this._onFilterPopupShowing);
     $("#performance-filter-menupopup").removeEventListener("popuphiding",  this._onFilterPopupHiding);
+    this._popup = null
 
     this.optionsView.off("pref-changed", this._onPrefChanged);
     this.optionsView.destroy();
@@ -77,6 +84,29 @@ let ToolbarView = {
     }
   },
 
+  /**
+   * Fired when `devtools.performance.ui.experimental` is changed, or
+   * during init. Toggles the visibility of experimental performance tool options
+   * in the UI options.
+   *
+   * Sets or removes "experimental-enabled" on the menu and main elements,
+   * hiding or showing all elements with class "experimental-option".
+   *
+   * TODO re-enable "#option-enable-memory" permanently once stable in bug 1163350
+   * TODO re-enable "#option-show-jit-optimizations" permanently once stable in bug 1163351
+   *
+   * @param {boolean} isEnabled
+   */
+  _toggleExperimentalUI: function (isEnabled) {
+    if (isEnabled) {
+      $(".theme-body").classList.add("experimental-enabled");
+      this._popup.classList.add("experimental-enabled");
+    } else {
+      $(".theme-body").classList.remove("experimental-enabled");
+      this._popup.classList.remove("experimental-enabled");
+    }
+  },
+
   /**
    * Fired when the markers filter popup starts to show.
    */
@@ -105,7 +135,12 @@ let ToolbarView = {
    * Propogated by the PerformanceController.
    */
   _onPrefChanged: function (_, prefName) {
-    let value = Services.prefs.getBoolPref(BRANCH_NAME + prefName);
+    let value = PerformanceController.getOption(prefName);
+
+    if (prefName === "experimental") {
+      this._toggleExperimentalUI(value);
+    }
+
     this.emit(EVENTS.PREF_CHANGED, prefName, value);
   },
 

browser/themes/shared/devtools/performance.inc.css

@@ -672,3 +672,35 @@
     background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
   }
 }
+
+/**
+ * Configurable Options
+ *
+ * Elements can be tagged with a class and visibility is controlled via a preference being
+ * applied or removed.
+ */
+
+/**
+ * devtools.performance.ui.experimental
+ */
+menuitem.experimental-option::before {
+  content: "";
+  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-repeat: no-repeat;
+  background-size: 48px 40px;
+  margin: 2px 5px 0 0;
+  width: 8px;
+  height: 8px;
+  max-height: 8px;
+  display: inline-block;
+  background-position: -16px -16px;
+}
+@media (min-resolution: 1.25dppx) {
+  menuitem.experimental-option::before {
+    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
+  }
+}
+#performance-options-menupopup:not(.experimental-enabled) .experimental-option,
+#performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
+  display: none;
+}