Bug 1164281 - Make a new pref devtools.performance.ui.experimental enabled on nightly to show experimental options. r=vp, a=sledru
authorJordan Santell <jsantell@mozilla.com>
Tue, 12 May 2015 18:18:23 -0700
changeset 274839 874dfde6ee0b0132c1dba0bc5df3f276e2387cc1
parent 274838 903c90590b5da28414551b5ee57ae67c8376511d
child 274840 7f933abba006cafd1a5af8e991959b98facc257b
push id863
push userraliiev@mozilla.com
push dateMon, 03 Aug 2015 13:22:43 +0000
treeherdermozilla-release@f6321b14228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvp, sledru
bugs1164281
milestone40.0a2
Bug 1164281 - Make a new pref devtools.performance.ui.experimental enabled on nightly to show experimental options. r=vp, a=sledru
browser/app/profile/firefox.js
browser/devtools/performance/performance.xul
browser/devtools/performance/test/browser.ini
browser/devtools/performance/test/browser_perf-options-03.js
browser/devtools/performance/test/head.js
browser/devtools/performance/views/toolbar.js
browser/themes/shared/devtools/performance.inc.css
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1445,16 +1445,23 @@ pref("devtools.performance.ui.invert-cal
 pref("devtools.performance.ui.invert-flame-graph", false);
 pref("devtools.performance.ui.flatten-tree-recursion", true);
 pref("devtools.performance.ui.show-platform-data", false);
 pref("devtools.performance.ui.show-idle-blocks", true);
 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);
 
 // The default service workers UI setting
 pref("devtools.serviceWorkers.testing.enabled", false);
 
 // Enable the Network Monitor
 pref("devtools.netmonitor.enabled", true);
--- a/browser/devtools/performance/performance.xul
+++ b/browser/devtools/performance/performance.xul
@@ -32,22 +32,22 @@
   <popupset id="performance-options-popupset">
     <menupopup id="performance-filter-menupopup"/>
     <menupopup id="performance-options-menupopup">
       <menuitem id="option-show-platform-data"
                 type="checkbox"
                 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"
                 label="&profilerUI.enableFramerate;"
                 tooltiptext="&profilerUI.enableFramerate.tooltiptext;"/>
       <menuitem id="option-invert-call-tree"
                 type="checkbox"
                 data-pref="invert-call-tree"
@@ -58,22 +58,22 @@
                 data-pref="invert-flame-graph"
                 label="&profilerUI.invertFlameGraph;"
                 tooltiptext="&profilerUI.invertFlameGraph.tooltiptext;"/>
       <menuitem id="option-flatten-tree-recursion"
                 type="checkbox"
                 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>
 
   <hbox class="theme-body" flex="1">
     <vbox id="recordings-pane">
       <toolbar id="recordings-toolbar"
                class="devtools-toolbar">
         <hbox id="recordings-controls"
@@ -91,18 +91,18 @@
       </toolbar>
       <vbox id="recordings-list" flex="1"/>
     </vbox>
 
     <vbox id="performance-pane" flex="1">
       <toolbar id="performance-toolbar" class="devtools-toolbar">
         <hbox id="performance-toolbar-control-other" class="devtools-toolbarbutton-group">
           <toolbarbutton id="filter-button"
+                         class="devtools-toolbarbutton"
                          popup="performance-filter-menupopup"
-                         class="devtools-toolbarbutton"
                          tooltiptext="&profilerUI.options.filter.tooltiptext;"/>
         </hbox>
         <hbox id="performance-toolbar-controls-detail-views" class="devtools-toolbarbutton-group">
           <toolbarbutton id="select-waterfall-view"
                          class="devtools-toolbarbutton devtools-button"
                          label="&profilerUI.toolbar.waterfall;"
                          hidden="true"
                          data-view="waterfall" />
--- a/browser/devtools/performance/test/browser.ini
+++ b/browser/devtools/performance/test/browser.ini
@@ -65,16 +65,17 @@ support-files =
 [browser_perf-jit-view-01.js]
 [browser_perf-jit-view-02.js]
 [browser_perf-jit-model-01.js]
 [browser_perf-jit-model-02.js]
 [browser_perf-loading-01.js]
 [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_perf-options-invert-flame-graph-02.js]
 [browser_perf-options-flatten-tree-recursion-01.js]
 [browser_perf-options-flatten-tree-recursion-02.js]
 [browser_perf-options-show-platform-data-01.js]
 [browser_perf-options-show-platform-data-02.js]
new file mode 100644
--- /dev/null
+++ b/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();
+}
--- a/browser/devtools/performance/test/head.js
+++ b/browser/devtools/performance/test/head.js
@@ -32,16 +32,17 @@ const FRAMERATE_PREF = "devtools.perform
 const MEMORY_PREF = "devtools.performance.ui.enable-memory";
 
 const PLATFORM_DATA_PREF = "devtools.performance.ui.show-platform-data";
 const IDLE_PREF = "devtools.performance.ui.show-idle-blocks";
 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();
 
 gDevTools.testing = true;
 
 let DEFAULT_PREFS = [
   "devtools.debugger.log",
@@ -51,16 +52,17 @@ let DEFAULT_PREFS = [
   "devtools.performance.ui.show-idle-blocks",
   "devtools.performance.ui.enable-memory",
   "devtools.performance.ui.enable-framerate",
   "devtools.performance.ui.show-jit-optimizations",
   "devtools.performance.memory.sample-probability",
   "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;
 }, {});
 
 // Enable the new performance panel for all tests.
 Services.prefs.setBoolPref("devtools.performance.enabled", true);
 // Enable logging for all the tests. Both the debugger server and frontend will
--- a/browser/devtools/performance/views/toolbar.js
+++ b/browser/devtools/performance/views/toolbar.js
@@ -10,37 +10,44 @@ let ToolbarView = {
   /**
    * Sets up the view with event binding.
    */
   initialize: Task.async(function *() {
     this._onFilterPopupShowing = this._onFilterPopupShowing.bind(this);
     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);
 
     this._buildMarkersFilterPopup();
     this._updateHiddenMarkersPopup();
     $("#performance-filter-menupopup").addEventListener("popupshowing", this._onFilterPopupShowing);
     $("#performance-filter-menupopup").addEventListener("popuphiding",  this._onFilterPopupHiding);
   }),
 
   /**
    * Unbinds events and cleans up view.
    */
   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();
   },
 
   /**
    * Creates the timeline markers filter popup.
    */
@@ -73,16 +80,39 @@ let ToolbarView = {
         menuitem.removeAttribute("checked");
       } else {
         menuitem.setAttribute("checked", "true");
       }
     }
   },
 
   /**
+   * 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.
    */
   _onFilterPopupShowing: function() {
     $("#filter-button").setAttribute("open", "true");
   },
 
   /**
    * Fired when the markers filter popup starts to hide.
@@ -100,16 +130,21 @@ let ToolbarView = {
     PerformanceController.setPref("hidden-markers", hiddenMarkers);
   },
 
   /**
    * Fired when a preference changes in the underlying OptionsView.
    * 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);
   },
 
   toString: () => "[object ToolbarView]"
 };
 
 EventEmitter.decorate(ToolbarView);
--- a/browser/themes/shared/devtools/performance.inc.css
+++ b/browser/themes/shared/devtools/performance.inc.css
@@ -667,8 +667,40 @@
   background-position: -16px -16px;
 }
 
 @media (min-resolution: 1.25dppx) {
   #jit-optimizations-view .opt-icon::before {
     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;
+}