import changes from `dev' branch of rmottola/Arctic-Fox:

- Bug 1163861 - Pass window IDs in nsILoadInfo (r=ckerschb) (4cd150a88) - fix of extra of Bug 1137287 - Part 2: (69fbdfbe0) - Bug 1159280 - TSan: data race netwerk/protocol/websocket/WebSocketChannel.cpp:3156 WebSocketChannel::Close, r=mcmanus (306796e71) - resources in browser, not global (f55b0a903) - Bug 1163268 - Remove UI options for recording with memory and jit optimizations. r=vp (56e82c90a) - Bug 1163384 - Add 'devtools-toolbarbutton' class to performance tool buttons to make them correct themed on Linux. r=jsantell (c3ce44795) - Bug 1141313 - Reenable several disabled performance tool tests that are now resolved. r=vp (3585f6bc1) - Bug 1146239 - Show the recording as loading in the performance sidebar after it has stopped; r=jsantell (4ee8200ea) - Bug 1146239 - Show the recording as loading in the performance details pane after it has stopped; r=jsantell (137a5f810) - Bug 1160313 - Remove temporary retro-mode for performance tools. r=vp (0131c940d) - Bug 1164281 - Make a new pref devtools.performance.ui.experimental enabled on nightly to show experimental options. r=vp (1a3f90404) - Bug 1162583 - Disable realtime rendering in performance tools when e10s is not on. r=vp (8f138f0dc)
2026-05-29 18:18:27 +00:00 · 2021-05-19 13:08:44 +08:00
parent 8aa25c2dfc
commit 8ed22681df
36 changed files with 736 additions and 190 deletions
@@ -95,6 +95,7 @@ toolkit.jar:
    content/global/devtools/webaudioeditor/views/properties.js        (webaudioeditor/views/properties.js)
    content/global/devtools/webaudioeditor/views/automation.js        (webaudioeditor/views/automation.js)
    content/global/devtools/performance.xul                           (performance/performance.xul)
+*   content/global/devtools/performance/system.js                     (performance/system.js)
    content/global/devtools/performance/performance-controller.js     (performance/performance-controller.js)
    content/global/devtools/performance/performance-view.js           (performance/performance-view.js)
    content/global/devtools/performance/views/overview.js             (performance/views/overview.js)
@@ -26,9 +26,6 @@ loader.lazyRequireGetter(this, "MarkersOverview",
 loader.lazyRequireGetter(this, "EventEmitter",
  "devtools/toolkit/event-emitter");

-// TODO get rid of retro mode in bug 1160313
-loader.lazyRequireGetter(this, "Services");
-
 /**
 * For line graphs
 */
@@ -168,24 +165,6 @@ const GRAPH_DEFINITIONS = {
  }
 };

-// TODO get rid of retro mode in bug 1160313
-const GRAPH_DEFINITIONS_RETRO = {
-  memory: {
-    constructor: MemoryGraph,
-    selector: "#memory-overview",
-  },
-  framerate: {
-    constructor: FramerateGraph,
-    selector: "#time-framerate",
-    needsBlueprints: true,
-    primaryLink: true
-  },
-  timeline: {
-    constructor: TimelineGraph,
-    selector: "#markers-overview",
-  }
-};
-
 /**
 * A controller for orchestrating the performance's tool overview graphs. Constructs,
 * syncs, toggles displays and defines the memory, framerate and timeline view.
@@ -198,9 +177,7 @@ const GRAPH_DEFINITIONS_RETRO = {
 function GraphsController ({ definition, root, getBlueprint, getTheme }) {
  this._graphs = {};
  this._enabled = new Set();
-  // TODO get rid of retro mode in bug 1160313
-  let RETRO_MODE = Services.prefs.getBoolPref("devtools.performance.ui.retro-mode");
-  this._definition = definition || (RETRO_MODE ? GRAPH_DEFINITIONS_RETRO : GRAPH_DEFINITIONS);
+  this._definition = definition || GRAPH_DEFINITIONS;
  this._root = root;
  this._getBlueprint = getBlueprint;
  this._getTheme = getTheme;
@@ -193,6 +193,11 @@ let PerformanceController = {
    this._onRecordingStateChange = this._onRecordingStateChange.bind(this);
    this._onProfilerStatusUpdated = this._onProfilerStatusUpdated.bind(this);

+    // Store data regarding if e10s is enabled.
+    this._e10s = Services.appinfo.browserTabsRemoteAutostart;
+
+    this._setMultiprocessAttributes();
+
    // All boolean prefs should be handled via the OptionsView in the
    // ToolbarView, so that they may be accessible via the "gear" menu.
    // Every other pref should be registered here.
@@ -287,16 +292,11 @@ let PerformanceController = {
   * when the front has started to record.
   */
  startRecording: Task.async(function *() {
-    // Store retro-mode here so we can easily list true/false
-    // values for reverting.
-    // TODO bug 1160313
-    let superMode = !this.getOption("retro-mode");
-
    let options = {
-      withMarkers: superMode ? true : false,
-      withMemory: superMode ? this.getOption("enable-memory") : false,
+      withMarkers: true,
+      withMemory: this.getOption("enable-memory"),
      withTicks: this.getOption("enable-framerate"),
-      withAllocations: superMode ? this.getOption("enable-memory") : false,
+      withAllocations: this.getOption("enable-memory"),
      allocationsSampleProbability: this.getPref("memory-sample-probability"),
      allocationsMaxLogLength: this.getPref("memory-max-log-length"),
      bufferSize: this.getPref("profiler-buffer-size"),
@@ -520,6 +520,44 @@ let PerformanceController = {
    return true;
  },

+  /**
+   * Returns an object with `supported` and `enabled` properties indicating
+   * whether or not the platform is capable of turning on e10s and whether or not
+   * it's already enabled, respectively.
+   *
+   * @return {object}
+   */
+  getMultiprocessStatus: function () {
+    // If testing, set both supported and enabled to true so we
+    // have realtime rendering tests in non-e10s. This function is
+    // overridden wholesale in tests when we want to test multiprocess support
+    // specifically.
+    if (gDevTools.testing) {
+      return { supported: true, enabled: true };
+    }
+    let supported = SYSTEM.MULTIPROCESS_SUPPORTED;
+    // This is only checked on tool startup -- requires a restart if
+    // e10s subsequently enabled.
+    let enabled = this._e10s;
+    return { supported, enabled };
+  },
+
+  /**
+   * Called on init, sets an `e10s` attribute on the main view container with
+   * "disabled" if e10s is possible on the platform and just not on, or "unsupported"
+   * if e10s is not possible on the platform. If e10s is on, no attribute is set.
+   */
+  _setMultiprocessAttributes: function () {
+    let { enabled, supported } = this.getMultiprocessStatus();
+    if (!enabled && supported) {
+      $("#performance-view").setAttribute("e10s", "disabled");
+    }
+    // Could be a chance where the directive goes away yet e10s is still on
+    else if (!enabled && !supported) {
+      $("#performance-view").setAttribute("e10s", "unsupported");
+    }
+  },
+
  toString: () => "[object PerformanceController]"
 };

@@ -30,6 +30,10 @@ let PerformanceView = {
    recorded: [
      { deck: "#performance-view", pane: "#performance-view-content" },
      { deck: "#details-pane-container", pane: "#details-pane" }
+    ],
+    loading: [
+      { deck: "#performance-view", pane: "#performance-view-content" },
+      { deck: "#details-pane-container", pane: "#loading-notice" }
    ]
  },

@@ -50,6 +54,7 @@ let PerformanceView = {
    this._onRecordingStopped = this._onRecordingStopped.bind(this);
    this._onRecordingStarted = this._onRecordingStarted.bind(this);
    this._onProfilerStatusUpdated = this._onProfilerStatusUpdated.bind(this);
+    this._onRecordingWillStop = this._onRecordingWillStop.bind(this);

    for (let button of $$(".record-button")) {
      button.addEventListener("click", this._onRecordButtonClick);
@@ -62,6 +67,7 @@ let PerformanceView = {
    PerformanceController.on(EVENTS.RECORDING_STOPPED, this._onRecordingStopped);
    PerformanceController.on(EVENTS.RECORDING_SELECTED, this._onRecordingSelected);
    PerformanceController.on(EVENTS.PROFILER_STATUS_UPDATED, this._onProfilerStatusUpdated);
+    PerformanceController.on(EVENTS.RECORDING_WILL_STOP, this._onRecordingWillStop);

    this.setState("empty");

@@ -87,6 +93,7 @@ let PerformanceView = {
    PerformanceController.off(EVENTS.RECORDING_STOPPED, this._onRecordingStopped);
    PerformanceController.off(EVENTS.RECORDING_SELECTED, this._onRecordingSelected);
    PerformanceController.off(EVENTS.PROFILER_STATUS_UPDATED, this._onProfilerStatusUpdated);
+    PerformanceController.off(EVENTS.RECORDING_WILL_STOP, this._onRecordingWillStop);

    yield ToolbarView.destroy();
    yield RecordingsView.destroy();
@@ -218,6 +225,17 @@ let PerformanceView = {
    }
  },

+  /**
+   * Fired when a recording is stopping, but not yet completed
+   */
+  _onRecordingWillStop: function (_, recording) {
+    // Lock the details view while the recording is being loaded in the UI.
+    // Only do this if this is the current recording.
+    if (recording === PerformanceController.getCurrentRecording()) {
+      this.setState("loading");
+    }
+  },
+
  /**
   * Handler for clicking the clear button.
   */
@@ -3,17 +3,18 @@
   - 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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://global/content/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://global/skin/devtools/performance.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/content/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/performance.css" type="text/css"?>
 <!DOCTYPE window [
  <!ENTITY % profilerDTD SYSTEM "chrome://global/locale/devtools/profiler.dtd">
  %profilerDTD;
 ]>

 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <script src="chrome://global/content/devtools/theme-switching.js"/>
+  <script src="chrome://browser/content/devtools/theme-switching.js"/>
+  <script type="application/javascript" src="performance/system.js"/>
  <script type="application/javascript" src="performance/performance-controller.js"/>
  <script type="application/javascript" src="performance/performance-view.js"/>
  <script type="application/javascript" src="performance/recording-model.js"/>
@@ -38,6 +39,7 @@
                label="&profilerUI.showPlatformData;"
                tooltiptext="&profilerUI.showPlatformData.tooltiptext;"/>
      <menuitem id="option-enable-memory"
+                class="experimental-option"
                type="checkbox"
                data-pref="enable-memory"
                label="&profilerUI.enableMemory;"
@@ -63,6 +65,7 @@
                label="&profilerUI.flattenTreeRecursion;"
                tooltiptext="&profilerUI.flattenTreeRecursion.tooltiptext;"/>
      <menuitem id="option-show-jit-optimizations"
+                class="experimental-option"
                type="checkbox"
                data-pref="show-jit-optimizations"
                label="&profilerUI.showJITOptimizations;"
@@ -94,8 +97,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">
@@ -142,7 +145,7 @@
              flex="1">
          <hbox class="devtools-toolbarbutton-group"
                pack="center">
-            <toolbarbutton class="record-button"
+            <toolbarbutton class="devtools-toolbarbutton record-button"
                           label="&profilerUI.startRecording;" />
          </hbox>
        </hbox>
@@ -153,6 +156,13 @@
            <hbox id="time-framerate"/>
          </vbox>
          <deck id="details-pane-container" flex="1">
+            <hbox id="loading-notice"
+                  class="notice-container devtools-throbber"
+                  align="center"
+                  pack="center"
+                  flex="1">
+              <label value="&profilerUI.loadingNotice;"/>
+            </hbox>
            <hbox id="recording-notice"
                  class="notice-container"
                  align="center"
@@ -161,9 +171,13 @@
              <vbox>
                <hbox class="devtools-toolbarbutton-group"
                      pack="center">
-                  <toolbarbutton class="record-button"
+                  <toolbarbutton class="devtools-toolbarbutton record-button"
                                 label="&profilerUI.stopRecording;" />
                </hbox>
+                <label class="realtime-disabled-message"
+                       value="Realtime recording data disabled on non-multiprocess Firefox."/>
+                <label class="realtime-disabled-on-e10s-message"
+                       value="Enable multiprocess Firefox in preferences for rendering recording data in realtime."/>
                <label class="buffer-status-message"
                       tooltiptext="&profilerUI.bufferStatusTooltip;"/>
                <label class="buffer-status-message-full"
@@ -186,6 +200,10 @@
                      <label class="console-profile-command" />
                      <label value="&profilerUI.console.stopCommandEnd;" />
                    </hbox>
+                    <label class="realtime-disabled-message"
+                           value="Realtime recording data disabled on non-multiprocess Firefox."/>
+                    <label class="realtime-disabled-on-e10s-message"
+                           value="Enable multiprocess Firefox in preferences for rendering recording data in realtime."/>
                    <label class="buffer-status-message"
                           tooltiptext="&profilerUI.bufferStatusTooltip;"/>
                    <label class="buffer-status-message-full"
@@ -0,0 +1,16 @@
+/* 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";
+
+/**
+ * A dump file to attach preprocessing directives consumable to the controller
+ * without littering our code with directives.
+ */
+
+const SYSTEM = {};
+
+// If e10s is possible on the platform.
+#ifdef E10S_TESTING_ONLY
+SYSTEM.MULTIPROCESS_SUPPORTED = true;
+#endif
@@ -43,7 +43,7 @@ support-files =
 [browser_perf-details-waterfall-render.js]
 [browser_perf-details-01.js]
 [browser_perf-details-02.js]
-# [browser_perf-details-03.js] bug 1132206
+[browser_perf-details-03.js]
 [browser_perf-details-04.js]
 [browser_perf-details-05.js]
 [browser_perf-details-06.js]
@@ -63,8 +63,11 @@ support-files =
 [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] bug 1133230
+[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]
@@ -83,6 +86,7 @@ support-files =
 [browser_perf-overview-render-01.js]
 [browser_perf-overview-render-02.js]
 [browser_perf-overview-render-03.js]
+[browser_perf-overview-render-04.js]
 [browser_perf-overview-selection-01.js]
 [browser_perf-overview-selection-02.js]
 [browser_perf-overview-selection-03.js]
@@ -98,11 +102,12 @@ support-files =
 [browser_perf-recording-notices-02.js]
 [browser_perf-recording-notices-03.js]
 [browser_perf-recording-notices-04.js]
+[browser_perf-recording-notices-05.js]
 [browser_perf_recordings-io-01.js]
 [browser_perf_recordings-io-02.js]
 [browser_perf_recordings-io-03.js]
 [browser_perf_recordings-io-04.js]
-# [browser_perf-range-changed-render.js] bug 1130669 crash
+[browser_perf-range-changed-render.js]
 [browser_perf-recording-selected-01.js]
 [browser_perf-recording-selected-02.js]
 [browser_perf-recording-selected-03.js]
@@ -136,5 +141,3 @@ support-files =
 [browser_timeline-waterfall-background.js]
 [browser_timeline-waterfall-generic.js]
 [browser_timeline-waterfall-sidebar.js]
-# remove in bug 1160313
-[browser_retro-test.js]
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the recordings view shows the right label while recording, after
+ * recording, and once the record has loaded.
+ */
+
+let test = Task.async(function*() {
+  let { target, panel, toolbox } = yield initPerformance(SIMPLE_URL);
+  let { RecordingsView, PerformanceController, PerformanceView,
+        EVENTS, $, L10N, ViewHelpers } = panel.panelWin;
+
+  // This should be removed with bug 1163763.
+  let DBG_STRINGS_URI = "chrome://browser/locale/devtools/debugger.properties";
+  let DBG_L10N = new ViewHelpers.L10N(DBG_STRINGS_URI);
+
+  info("Start to record");
+  yield startRecording(panel);
+  let durationNode = $(".recording-item-duration",
+    RecordingsView.selectedItem.target);
+
+  is(durationNode.getAttribute("value"),
+    L10N.getStr("recordingsList.recordingLabel"),
+    "The duration node should show the 'recording' message while recording");
+
+  info("Stop the recording and wait for the WILL_STOP and STOPPED events");
+  let clicked = PerformanceView.once(EVENTS.UI_STOP_RECORDING);
+  let willStop = PerformanceController.once(EVENTS.RECORDING_WILL_STOP);
+  let hasStopped = PerformanceController.once(EVENTS.RECORDING_STOPPED);
+
+  click(panel.panelWin, $("#main-record-button"));
+  yield clicked;
+  yield willStop;
+
+  is(durationNode.getAttribute("value"),
+    DBG_L10N.getStr("loadingText"),
+    "The duration node should show the 'loading' message while stopping");
+
+  let stateChanged = once(PerformanceView, EVENTS.UI_STATE_CHANGED);
+  yield hasStopped;
+  yield stateChanged;
+
+  let duration = RecordingsView.selectedItem.attachment.getDuration().toFixed(0);
+  is(durationNode.getAttribute("value"),
+    L10N.getFormatStr("recordingsList.durationLabel", duration),
+    "The duration node should show the duration after the record has stopped");
+
+  yield PerformanceController.clearRecordings();
+  yield teardown(panel);
+  finish();
+});
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the details view is locked after recording has stopped and before
+ * the recording has finished loading.
+ * Also test that the details view isn't locked if the recording that is being
+ * stopped isn't the active one.
+ */
+
+let test = Task.async(function*() {
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { PerformanceController, PerformanceView, RecordingsView,
+        EVENTS, $ } = panel.panelWin;
+
+  let detailsContainer = $("#details-pane-container");
+  let recordingNotice = $("#recording-notice");
+  let loadingNotice = $("#loading-notice");
+  let detailsPane = $("#details-pane");
+
+  info("Start to record");
+  yield startRecording(panel);
+
+  is(detailsContainer.selectedPanel, recordingNotice,
+    "The recording-notice is shown while recording");
+
+  info("Stop the recording and wait for the WILL_STOP and STOPPED events");
+  let clicked = PerformanceView.once(EVENTS.UI_STOP_RECORDING);
+  let willStop = PerformanceController.once(EVENTS.RECORDING_WILL_STOP);
+  let hasStopped = PerformanceController.once(EVENTS.RECORDING_STOPPED);
+
+  click(panel.panelWin, $("#main-record-button"));
+  yield clicked;
+  yield willStop;
+
+  is(detailsContainer.selectedPanel, loadingNotice,
+    "The loading-notice is shown while the record is stopping");
+
+  let stateChanged = once(PerformanceView, EVENTS.UI_STATE_CHANGED);
+  yield hasStopped;
+  yield stateChanged;
+
+  is(detailsContainer.selectedPanel, detailsPane,
+    "The details panel is shown after the record has stopped");
+
+  info("Start to record again");
+  yield startRecording(panel);
+
+  info("While the 2nd record is still going, switch to the first one");
+  let select = once(PerformanceController, EVENTS.RECORDING_SELECTED);
+  RecordingsView.selectedIndex = 0;
+  yield select;
+
+  info("Stop the 2nd recording and wait for the WILL_STOP and STOPPED events");
+  clicked = PerformanceView.once(EVENTS.UI_STOP_RECORDING);
+  willStop = PerformanceController.once(EVENTS.RECORDING_WILL_STOP);
+  hasStopped = PerformanceController.once(EVENTS.RECORDING_STOPPED);
+
+  click(panel.panelWin, $("#main-record-button"));
+  yield clicked;
+  yield willStop;
+
+  is(detailsContainer.selectedPanel, detailsPane,
+    "The details panel is still shown while the 2nd record is being stopped");
+  is(RecordingsView.selectedIndex, 0, "The first record is still selected");
+
+  stateChanged = once(PerformanceView, EVENTS.UI_STATE_CHANGED);
+  yield hasStopped;
+  yield stateChanged;
+
+  is(detailsContainer.selectedPanel, detailsPane,
+    "The details panel is still shown after the 2nd record has stopped");
+  is(RecordingsView.selectedIndex, 1, "The second record is now selected");
+
+  yield PerformanceController.clearRecordings();
+  yield teardown(panel);
+  finish();
+});
@@ -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();
+}
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the overview graphs do not render when realtime rendering is off
+ * due to lack of e10s.
+ */
+function spawnTest () {
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { $, EVENTS, PerformanceController, OverviewView, RecordingsView } = panel.panelWin;
+
+  let updated = 0;
+  OverviewView.on(EVENTS.OVERVIEW_RENDERED, () => updated++);
+  OverviewView.OVERVIEW_UPDATE_INTERVAL = 1;
+
+  // Set realtime rendering off.
+  OverviewView.isRealtimeRenderingEnabled = () => false;
+
+  yield startRecording(panel, { waitForOverview: false, waitForStateChange: true });
+  is($("#overview-pane").hidden, true, "overview graphs hidden");
+  is(updated, 0, "Overview graphs have still not been updated");
+  yield waitUntil(() => PerformanceController.getCurrentRecording().getMarkers().length);
+  yield waitUntil(() => PerformanceController.getCurrentRecording().getTicks().length);
+  is(updated, 0, "Overview graphs have still not been updated");
+
+  yield stopRecording(panel);
+
+  let markers = OverviewView.graphs.get("timeline");
+  let framerate = OverviewView.graphs.get("framerate");
+
+  ok(markers.width > 0,
+    "The overview's markers graph has a width.");
+  ok(framerate.width > 0,
+    "The overview's framerate graph has a width.");
+
+  is(updated, 1, "Overview graphs rendered upon completion.");
+  is($("#overview-pane").hidden, false, "overview graphs no longer hidden");
+
+  yield startRecording(panel, { waitForOverview: false, waitForStateChange: true });
+  is($("#overview-pane").hidden, true, "overview graphs hidden again when starting new recording");
+
+  RecordingsView.selectedIndex = 0;
+  is($("#overview-pane").hidden, false, "overview graphs no longer hidden when switching back to complete recording.");
+  RecordingsView.selectedIndex = 1;
+  is($("#overview-pane").hidden, true, "overview graphs hidden again when going back to inprogress recording.");
+
+  yield stopRecording(panel);
+  is($("#overview-pane").hidden, false, "overview graphs no longer hidden when recording finishes");
+
+  yield teardown(panel);
+  finish();
+}
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that when a recording overlaps the circular buffer, that
+ * a class is assigned to the recording notices.
+ */
+function spawnTest () {
+  let { panel } = yield initPerformance(SIMPLE_URL, void 0, { TEST_MOCK_PROFILER_CHECK_TIMER: 10 });
+  let { EVENTS, $, PerformanceController, PerformanceView } = panel.panelWin;
+
+  let supported = false;
+  let enabled = false;
+
+  PerformanceController.getMultiprocessStatus = () => {
+    return { supported, enabled };
+  };
+
+  PerformanceController._setMultiprocessAttributes();
+  ok($("#performance-view").getAttribute("e10s"), "unsupported",
+    "when e10s is disabled and no option to turn on, container has [e10s=unsupported]");
+
+  supported = true;
+  enabled = false;
+  PerformanceController._setMultiprocessAttributes();
+  ok($("#performance-view").getAttribute("e10s"), "disabled",
+    "when e10s is disabled and but is supported, container has [e10s=disabled]");
+
+  supported = false;
+  enabled = true;
+  PerformanceController._setMultiprocessAttributes();
+  ok($("#performance-view").getAttribute("e10s"), "",
+    "when e10s is enabled, but not supported, this probably means we no longer have E10S_TESTING_ONLY, and we have no e10s attribute.");
+
+  supported = true;
+  enabled = true;
+  PerformanceController._setMultiprocessAttributes();
+  ok($("#performance-view").getAttribute("e10s"), "",
+    "when e10s is enabled and supported, there should be no e10s attribute.");
+
+  yield teardown(panel);
+  finish();
+}
@@ -1,49 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-/**
- * Tests that only js-calltree view is on, default, and many things are hidden
- * when in retro mode.
- */
-const HIDDEN_OPTIONS = ["option-enable-memory", "option-invert-flame-graph", "option-show-jit-optimizations", "option-flatten-tree-recursion"];
-
-Services.prefs.setBoolPref("devtools.performance.ui.retro-mode", true);
-
-function spawnTest () {
-  let { panel } = yield initPerformance(SIMPLE_URL);
-  let { EVENTS, DetailsView, PerformanceController, $, $$, JsCallTreeView } = panel.panelWin;
-
-  yield startRecording(panel);
-  yield stopRecording(panel);
-
-  let model = PerformanceController.getCurrentRecording();
-
-  ok(model.getMemory().length === 0, "model did not record memory.");
-  ok(model.getTicks().length !== 0, "model did get ticks.");
-  ok(model.getAllocations().sites.length === 0, "model did get allocation data.");
-  ok(model.getAllocations().timestamps.length === 0, "model did get allocation data.");
-  ok(model.getAllocations().frames.length === 0, "model did get allocation data.");
-  ok(model.getAllocations().counts.length === 0, "model did get allocation data.");
-
-  ok(DetailsView.isViewSelected(JsCallTreeView),
-    "The jscalltree view is selected by default");
-
-  for (let option of $$("#performance-options-menupopup > menuitem")) {
-    if (HIDDEN_OPTIONS.indexOf(option.id) !== -1) {
-      ok(option.hidden === true, `${option.id} should be hidden.`);
-    } else {
-      ok(option.hidden === false, `${option.id} should be visible.`);
-    }
-  }
-
-  for (let viewbutton of $$("#performance-toolbar-controls-detail-views > toolbarbutton")) {
-    ok (viewbutton.hidden === true, `${viewbutton.id} should be hidden.`);
-  }
-
-  ok($("#markers-overview").hidden, "markers overview should be hidden.");
-  ok($("#memory-overview").hidden, "memory overview should be hidden.");
-  ok(!$("#time-framerate").hidden, "framerate should be shown.");
-
-  yield teardown(panel);
-  finish();
-}
@@ -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,7 +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.retro-mode",
+  "devtools.performance.ui.experimental",
 ].reduce((prefs, pref) => {
  prefs[pref] = Preferences.get(pref);
  return prefs;
@@ -68,10 +69,6 @@ Services.prefs.setBoolPref("devtools.performance.enabled", true);
 // be affected by this pref.
 Services.prefs.setBoolPref("devtools.debugger.log", false);

-// Disable retro mode.
-// TODO bug 1160313
-Services.prefs.setBoolPref("devtools.performance.ui.retro-mode", false);
-
 /**
 * Call manually in tests that use frame script utils after initializing
 * the tool. Must be called after initializing so we can detect
@@ -92,12 +92,9 @@ let DetailsView = {
    let invalidCurrentView = false;

    for (let [name, { view }] of Iterator(this.components)) {
-      // TODO bug 1160313 get rid of retro mode checks.
-      let isRetro = PerformanceController.getOption("retro-mode");
-      let isSupported = isRetro ? name === "js-calltree" : this._isViewSupported(name, true);
+      let isSupported = this._isViewSupported(name, true);

-      // TODO bug 1160313 hide all view buttons, but let js-calltree still be "supported"
-      $(`toolbarbutton[data-view=${name}]`).hidden = isRetro ? true : !isSupported;
+      $(`toolbarbutton[data-view=${name}]`).hidden = !isSupported;

      // If the view is currently selected and not supported, go back to the
      // default view.
@@ -30,6 +30,12 @@ const GRAPH_REQUIREMENTS = {
 */
 let OverviewView = {

+  /**
+   * How frequently we attempt to render the graphs. Overridden
+   * in tests.
+   */
+  OVERVIEW_UPDATE_INTERVAL: OVERVIEW_UPDATE_INTERVAL,
+
  /**
   * Sets up the view with event binding.
   */
@@ -46,6 +52,9 @@ let OverviewView = {
      return;
    }

+    // Store info on multiprocess support.
+    this._multiprocessData = PerformanceController.getMultiprocessStatus();
+
    this._onRecordingWillStart = this._onRecordingWillStart.bind(this);
    this._onRecordingStarted = this._onRecordingStarted.bind(this);
    this._onRecordingWillStop = this._onRecordingWillStop.bind(this);
@@ -176,6 +185,7 @@ let OverviewView = {
    if (this.isDisabled()) {
      return;
    }
+
    let recording = PerformanceController.getCurrentRecording();
    yield this.graphs.render(recording.getAllData(), resolution);

@@ -200,7 +210,7 @@ let OverviewView = {
    // Check here to see if there's still a _timeoutId, incase
    // `stop` was called before the _prepareNextTick call was executed.
    if (this.isRendering()) {
-      this._timeoutId = setTimeout(this._onRecordingTick, OVERVIEW_UPDATE_INTERVAL);
+      this._timeoutId = setTimeout(this._onRecordingTick, this.OVERVIEW_UPDATE_INTERVAL);
    }
  },

@@ -258,7 +268,7 @@ let OverviewView = {
   * Start the polling for rendering the overview graph.
   */
  _startPolling: function () {
-    this._timeoutId = setTimeout(this._onRecordingTick, OVERVIEW_UPDATE_INTERVAL);
+    this._timeoutId = setTimeout(this._onRecordingTick, this.OVERVIEW_UPDATE_INTERVAL);
  },

  /**
@@ -343,6 +353,35 @@ let OverviewView = {
    }
  },

+  /**
+   * Fetch the multiprocess status and if e10s is not currently on, disable
+   * realtime rendering.
+   *
+   * @return {boolean}
+   */
+  isRealtimeRenderingEnabled: function () {
+    return this._multiprocessData.enabled;
+  },
+
+  /**
+   * Show the graphs overview panel when a recording is finished
+   * when non-realtime graphs are enabled. Also set the graph visibility
+   * so the performance graphs know which graphs to render.
+   *
+   * @param {RecordingModel} recording
+   */
+  _showGraphsPanel: function (recording) {
+    this._setGraphVisibilityFromRecordingFeatures(recording);
+    $("#overview-pane").hidden = false;
+  },
+
+  /**
+   * Hide the graphs container completely.
+   */
+  _hideGraphsPanel: function () {
+    $("#overview-pane").hidden = true;
+  },
+
  /**
   * Called when `devtools.theme` changes.
   */
@@ -364,14 +403,28 @@ let OverviewView = {
 * @return {function}
 */
 function OverviewViewOnStateChange (fn) {
-  return function _onRecordingStateChange () {
+  return function _onRecordingStateChange (eventName, recording) {
    let currentRecording = PerformanceController.getCurrentRecording();

-    // All these methods require a recording to exist.
-    if (!currentRecording) {
+    // All these methods require a recording to exist selected and
+    // from the event name, since there is a delay between starting
+    // a recording and changing the selection.
+    if (!currentRecording || !recording) {
      return;
    }

+    // If realtime rendering is not enabed (e10s not on), then
+    // show the disabled message, or the full graphs if the recording is completed
+    if (!this.isRealtimeRenderingEnabled()) {
+      if (recording.isRecording()) {
+        this._hideGraphsPanel();
+        // Abort, as we do not want to change polling status.
+        return;
+      } else {
+        this._showGraphsPanel(recording);
+      }
+    }
+
    if (this.isRendering() && !currentRecording.isRecording()) {
      this._stopPolling();
    } else if (currentRecording.isRecording() && !this.isRendering()) {
@@ -3,6 +3,10 @@
 * You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";

+// This should be removed with bug 1163763.
+const DBG_STRINGS_URI = "chrome://browser/locale/devtools/debugger.properties";
+const DBG_L10N = new ViewHelpers.L10N(DBG_STRINGS_URI);
+
 /**
 * Functions handling the recordings UI.
 */
@@ -16,6 +20,7 @@ let RecordingsView = Heritage.extend(WidgetMethods, {
    this._onSelect = this._onSelect.bind(this);
    this._onRecordingStarted = this._onRecordingStarted.bind(this);
    this._onRecordingStopped = this._onRecordingStopped.bind(this);
+    this._onRecordingWillStop = this._onRecordingWillStop.bind(this);
    this._onRecordingImported = this._onRecordingImported.bind(this);
    this._onSaveButtonClick = this._onSaveButtonClick.bind(this);
    this._onRecordingsCleared = this._onRecordingsCleared.bind(this);
@@ -24,6 +29,7 @@ let RecordingsView = Heritage.extend(WidgetMethods, {

    PerformanceController.on(EVENTS.RECORDING_STARTED, this._onRecordingStarted);
    PerformanceController.on(EVENTS.RECORDING_STOPPED, this._onRecordingStopped);
+    PerformanceController.on(EVENTS.RECORDING_WILL_STOP, this._onRecordingWillStop);
    PerformanceController.on(EVENTS.RECORDING_IMPORTED, this._onRecordingImported);
    PerformanceController.on(EVENTS.RECORDINGS_CLEARED, this._onRecordingsCleared);
    this.widget.addEventListener("select", this._onSelect, false);
@@ -35,6 +41,7 @@ let RecordingsView = Heritage.extend(WidgetMethods, {
  destroy: function() {
    PerformanceController.off(EVENTS.RECORDING_STARTED, this._onRecordingStarted);
    PerformanceController.off(EVENTS.RECORDING_STOPPED, this._onRecordingStopped);
+    PerformanceController.off(EVENTS.RECORDING_WILL_STOP, this._onRecordingWillStop);
    PerformanceController.off(EVENTS.RECORDING_IMPORTED, this._onRecordingImported);
    PerformanceController.off(EVENTS.RECORDINGS_CLEARED, this._onRecordingsCleared);
    this.widget.removeEventListener("select", this._onSelect, false);
@@ -132,6 +139,21 @@ let RecordingsView = Heritage.extend(WidgetMethods, {
    }
  },

+  /**
+   * Signals that a recording session is ending, and hasn't finished being
+   * processed yet.
+   *
+   * @param RecordingModel recording
+   *        The model of the recording that is being stopped.
+   */
+  _onRecordingWillStop: function(_, recording) {
+    let recordingItem = this.getItemForPredicate(e => e.attachment === recording);
+
+    // Mark the corresponding item as loading.
+    let durationNode = $(".recording-item-duration", recordingItem.target);
+    durationNode.setAttribute("value", DBG_L10N.getStr("loadingText"));
+  },
+
  /**
   * Signals that a recording has been imported.
   *
@@ -15,24 +15,17 @@ 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
    });

-    // TODO bug 1160313 get rid of retro mode checks
-    // hide option buttons here, and any other buttons in the toolbar
-    // (details.js takes care of view buttons)
-    if (PerformanceController.getOption("retro-mode")) {
-      let RETRO_ELEMENTS = [
-        "#option-flatten-tree-recursion", "#option-enable-memory", "#option-invert-flame-graph",
-        "#option-show-jit-optimizations", "#filter-button"
-      ];
-      for (let selector of RETRO_ELEMENTS) {
-        $(selector).hidden = true;
-      }
-    }
+    // 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);
@@ -49,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();
@@ -90,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.
   */
@@ -118,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);
  },