Bug 1459720 - Move the performance panel out of the toolbox to the WebIDE's top level window r=jdescottes
authorJulien Wajsberg <felash@gmail.com>
Fri, 28 Sep 2018 12:48:05 +0000
changeset 487034 1ba2376aa7fcec04e0c240d4512700ea0bfd68b7
parent 487033 9eec82950e697b92227f63804879c055d8471cf2
child 487035 156f9442db847c065c50af78968226369f47c151
child 487127 67da8157c1d6068d570a4f7f85d6e283221cd3d2
push id246
push userfmarier@mozilla.com
push dateSat, 13 Oct 2018 00:15:40 +0000
reviewersjdescottes
bugs1459720
milestone64.0a1
Bug 1459720 - Move the performance panel out of the toolbox to the WebIDE's top level window r=jdescottes This effectively removes the devtools overhead while profiling... as long as the toolbox isn't opened as well of course. This also removes the performance panel from the Browser Toolbox and the Browser Content Toolbox where it shouldn't have been in the first place. Differential Revision: https://phabricator.services.mozilla.com/D6904
devtools/client/definitions.js
devtools/client/locales/en-US/webide.dtd
devtools/client/webide/content/runtime-listing.js
devtools/client/webide/content/runtime-listing.xhtml
devtools/client/webide/content/webide.js
devtools/client/webide/content/webide.xul
devtools/client/webide/modules/app-manager.js
devtools/client/webide/modules/runtime-list.js
devtools/client/webide/themes/panel-listing.css
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -259,20 +259,23 @@ Tools.performance = {
 
 function switchPerformancePanel() {
   if (Services.prefs.getBoolPref("devtools.performance.new-panel-enabled", false)) {
     Tools.performance.url = "chrome://devtools/content/performance-new/index.xhtml";
     Tools.performance.build = function(frame, target) {
       return new NewPerformancePanel(frame, target);
     };
     Tools.performance.isTargetSupported = function(target) {
-     // Root actors are lazily initialized, so we can't check if the target has
-     // the perf actor yet. Also this function is not async, so we can't initialize
-     // the actor yet.
-      return true;
+      // Root actors are lazily initialized, so we can't check if the target has
+      // the perf actor yet. Also this function is not async, so we can't initialize
+      // the actor yet.
+      // We don't display the new performance panel for remote context in the
+      // toolbox, because this has an overhead. Instead we should use WebIDE (or
+      // the coming about:debugging).
+      return target.isLocalTab;
     };
   } else {
     Tools.performance.url = "chrome://devtools/content/performance/index.xul";
     Tools.performance.build = function(frame, target) {
       return new PerformancePanel(frame, target);
     };
     Tools.performance.isTargetSupported = function(target) {
       return target.hasActor("performance");
--- a/devtools/client/locales/en-US/webide.dtd
+++ b/devtools/client/locales/en-US/webide.dtd
@@ -35,16 +35,18 @@
 <!ENTITY runtimeMenu_takeScreenshot_label "Screenshot">
 <!ENTITY runtimeMenu_takeScreenshot_accesskey "S">
 <!ENTITY runtimeMenu_showDetails_label "Runtime Info">
 <!ENTITY runtimeMenu_showDetails_accesskey "E">
 <!ENTITY runtimeMenu_showDevicePrefs_label "Device Preferences">
 <!ENTITY runtimeMenu_showDevicePrefs_accesskey "D">
 <!ENTITY runtimeMenu_showSettings_label "Device Settings">
 <!ENTITY runtimeMenu_showSettings_accesskey "s">
+<!ENTITY runtimeMenu_showPerformancePanel_label "Performance">
+<!ENTITY runtimeMenu_showPerformancePanel_accesskey "p">
 
 <!ENTITY viewMenu_label "View">
 <!ENTITY viewMenu_accesskey "V">
 <!ENTITY viewMenu_zoomin_label "Zoom In">
 <!ENTITY viewMenu_zoomin_accesskey "I">
 <!ENTITY viewMenu_zoomout_label "Zoom Out">
 <!ENTITY viewMenu_zoomout_accesskey "O">
 <!ENTITY viewMenu_resetzoom_label "Reset Zoom">
--- a/devtools/client/webide/content/runtime-listing.js
+++ b/devtools/client/webide/content/runtime-listing.js
@@ -8,16 +8,17 @@ const RuntimeList = require("devtools/cl
 var runtimeList = new RuntimeList(window, window.parent);
 
 window.addEventListener("load", function() {
   document.getElementById("runtime-screenshot").onclick = TakeScreenshot;
   document.getElementById("runtime-details").onclick = ShowRuntimeDetails;
   document.getElementById("runtime-disconnect").onclick = DisconnectRuntime;
   document.getElementById("runtime-preferences").onclick = ShowDevicePreferences;
   document.getElementById("runtime-settings").onclick = ShowSettings;
+  document.getElementById("runtime-performance").onclick = ShowPerformancePanel;
   document.getElementById("runtime-panel-noadbextension").onclick = ShowAddons;
   document.getElementById("runtime-panel-nousbdevice").onclick = ShowTroubleShooting;
   document.getElementById("refresh-devices").onclick = RefreshScanners;
   runtimeList.update();
   runtimeList.updateCommands();
 }, {capture: true, once: true});
 
 window.addEventListener("unload", function() {
@@ -35,16 +36,20 @@ function ShowRuntimeDetails() {
 function ShowDevicePreferences() {
   runtimeList.showDevicePreferences();
 }
 
 function ShowSettings() {
   runtimeList.showSettings();
 }
 
+function ShowPerformancePanel() {
+  runtimeList.showPerformancePanel();
+}
+
 function RefreshScanners() {
   runtimeList.refreshScanners();
 }
 
 function DisconnectRuntime() {
   window.parent.Cmds.disconnectRuntime();
 }
 
--- a/devtools/client/webide/content/runtime-listing.xhtml
+++ b/devtools/client/webide/content/runtime-listing.xhtml
@@ -27,15 +27,16 @@
         <label class="panel-header" id="runtime-header-wifi">&runtimePanel_wifi;</label>
         <div id="runtime-panel-wifi"></div>
         <label class="panel-header">&runtimePanel_other;</label>
         <div id="runtime-panel-other"></div>
         <div id="runtime-actions">
           <button class="panel-item" id="runtime-details">&runtimeMenu_showDetails_label;</button>
           <button class="panel-item" id="runtime-preferences">&runtimeMenu_showDevicePrefs_label;</button>
           <button class="panel-item" id="runtime-settings">&runtimeMenu_showSettings_label;</button>
+          <button class="panel-item" id="runtime-performance">&runtimeMenu_showPerformancePanel_label;</button>
           <button class="panel-item" id="runtime-screenshot">&runtimeMenu_takeScreenshot_label;</button>
           <button class="panel-item" id="runtime-disconnect">&runtimeMenu_disconnect_label;</button>
         </div>
       </div>
     </div>
   </body>
 </html>
--- a/devtools/client/webide/content/webide.js
+++ b/devtools/client/webide/content/webide.js
@@ -366,32 +366,41 @@ var UI = {
     }
 
     // Runtime commands
     const screenshotCmd = document.querySelector("#cmd_takeScreenshot");
     const detailsCmd = document.querySelector("#cmd_showRuntimeDetails");
     const disconnectCmd = document.querySelector("#cmd_disconnectRuntime");
     const devicePrefsCmd = document.querySelector("#cmd_showDevicePrefs");
     const settingsCmd = document.querySelector("#cmd_showSettings");
+    const performancePanelCmd = document.querySelector("#cmd_showPerformancePanel");
+
+    // Display the performance menu only if the pref is enabled
+    const performancePanelMenu = document.querySelector("menuitem[command=cmd_showPerformancePanel]");
+    performancePanelMenu.hidden = !Services.prefs.getBoolPref("devtools.performance.new-panel-enabled", false);
 
     if (AppManager.connected) {
       if (AppManager.deviceFront) {
         detailsCmd.removeAttribute("disabled");
         screenshotCmd.removeAttribute("disabled");
       }
       if (AppManager.preferenceFront) {
         devicePrefsCmd.removeAttribute("disabled");
       }
       disconnectCmd.removeAttribute("disabled");
+      if (AppManager.perfFront) {
+        performancePanelCmd.removeAttribute("disabled");
+      }
     } else {
       detailsCmd.setAttribute("disabled", "true");
       screenshotCmd.setAttribute("disabled", "true");
       disconnectCmd.setAttribute("disabled", "true");
       devicePrefsCmd.setAttribute("disabled", "true");
       settingsCmd.setAttribute("disabled", "true");
+      performancePanelCmd.setAttribute("disabled", "true");
     }
 
     const runtimePanelButton = document.querySelector("#runtime-panel-button");
 
     if (AppManager.connected) {
       runtimePanelButton.setAttribute("active", "true");
       runtimePanelButton.removeAttribute("hidden");
     } else {
@@ -860,16 +869,25 @@ var Cmds = {
   showRuntimeDetails: function() {
     UI.selectDeckPanel("runtimedetails");
   },
 
   showDevicePrefs: function() {
     UI.selectDeckPanel("devicepreferences");
   },
 
+  showPerformancePanel: function() {
+    UI.selectDeckPanel("performance");
+    const iframe = document.getElementById("deck-panel-performance");
+
+    iframe.addEventListener("DOMContentLoaded", () => {
+      iframe.contentWindow.gInit(AppManager.perfFront, AppManager.preferenceFront);
+    }, { once: true });
+  },
+
   async play() {
     let busy;
     switch (AppManager.selectedProject.type) {
       case "packaged":
         busy = UI.busyWithProgressUntil(AppManager.installAndRunProject(),
                                         "installing and running app");
         break;
       case "hosted":
--- a/devtools/client/webide/content/webide.xul
+++ b/devtools/client/webide/content/webide.xul
@@ -33,16 +33,17 @@
 
   <commandset id="mainCommandSet">
     <commandset id="webideCommands">
       <command id="cmd_quit" oncommand="Cmds.quit()"/>
       <command id="cmd_newApp" oncommand="Cmds.newApp()" label="&projectMenu_newApp_label;"/>
       <command id="cmd_importPackagedApp" oncommand="Cmds.importPackagedApp()" label="&projectMenu_importPackagedApp_label;"/>
       <command id="cmd_importHostedApp" oncommand="Cmds.importHostedApp()" label="&projectMenu_importHostedApp_label;"/>
       <command id="cmd_showDevicePrefs" label="&runtimeMenu_showDevicePrefs_label;" oncommand="Cmds.showDevicePrefs()"/>
+      <command id="cmd_showPerformancePanel" label="&runtimeMenu_showPerformancePanel_label;" oncommand="Cmds.showPerformancePanel()"/>
       <command id="cmd_showSettings" label="&runtimeMenu_showSettings_label;" oncommand="Cmds.showSettings()"/>
       <command id="cmd_removeProject" oncommand="Cmds.removeProject()" label="&projectMenu_remove_label;"/>
       <command id="cmd_showProjectPanel" oncommand="Cmds.showProjectPanel()"/>
       <command id="cmd_showRuntimePanel" oncommand="Cmds.showRuntimePanel()"/>
       <command id="cmd_disconnectRuntime" oncommand="Cmds.disconnectRuntime()" label="&runtimeMenu_disconnect_label;"/>
       <command id="cmd_showRuntimeDetails" oncommand="Cmds.showRuntimeDetails()" label="&runtimeMenu_showDetails_label;"/>
       <command id="cmd_takeScreenshot" oncommand="Cmds.takeScreenshot()" label="&runtimeMenu_takeScreenshot_label;"/>
       <command id="cmd_showAddons" oncommand="Cmds.showAddons()"/>
@@ -78,16 +79,17 @@
     </menu>
 
     <menu id="menu-runtime" label="&runtimeMenu_label;" accesskey="&runtimeMenu_accesskey;">
       <menupopup id="menu-runtime-popup">
         <menuitem command="cmd_takeScreenshot" accesskey="&runtimeMenu_takeScreenshot_accesskey;"/>
         <menuitem command="cmd_showRuntimeDetails" accesskey="&runtimeMenu_showDetails_accesskey;"/>
         <menuitem command="cmd_showDevicePrefs" accesskey="&runtimeMenu_showDevicePrefs_accesskey;"/>
         <menuitem command="cmd_showSettings" accesskey="&runtimeMenu_showSettings_accesskey;"/>
+        <menuitem command="cmd_showPerformancePanel" accesskey="&runtimeMenu_showPerformancePanel_accesskey;"/>
         <menuseparator/>
         <menuitem command="cmd_disconnectRuntime" accesskey="&runtimeMenu_disconnect_accesskey;"/>
       </menupopup>
     </menu>
 
     <menu id="menu-view" label="&viewMenu_label;" accesskey="&viewMenu_accesskey;">
       <menupopup id="menu-ViewPopup">
         <menuseparator/>
@@ -146,16 +148,17 @@
       </vbox>
       <splitter class="devtools-side-splitter" id="project-listing-splitter"/>
       <deck flex="1" id="deck" selectedIndex="-1">
         <iframe id="deck-panel-details" flex="1" src="details.xhtml"/>
         <iframe id="deck-panel-addons" flex="1" src="addons.xhtml"/>
         <iframe id="deck-panel-prefs" flex="1" src="prefs.xhtml"/>
         <iframe id="deck-panel-runtimedetails" flex="1" lazysrc="runtimedetails.xhtml"/>
         <iframe id="deck-panel-devicepreferences" flex="1" lazysrc="devicepreferences.xhtml"/>
+        <iframe id="deck-panel-performance" flex="1" lazysrc="chrome://devtools/content/performance-new/index.xhtml"/>
       </deck>
       <splitter class="devtools-side-splitter" id="runtime-listing-splitter"/>
       <vbox id="runtime-listing-panel" class="runtime-listing panel-list" flex="1">
         <div id="runtime-listing-wrapper" class="panel-list-wrapper">
           <iframe id="runtime-listing-panel-details" flex="1" src="runtime-listing.xhtml" tooltip="aHTMLTooltip"/>
         </div>
       </vbox>
     </div>
--- a/devtools/client/webide/modules/app-manager.js
+++ b/devtools/client/webide/modules/app-manager.js
@@ -145,22 +145,24 @@ var AppManager = exports.AppManager = {
     if (this.connection.status == Connection.Status.DISCONNECTED) {
       this.selectedRuntime = null;
     }
 
     if (!this.connected) {
       this._listTabsResponse = null;
       this.deviceFront = null;
       this.preferenceFront = null;
+      this.perfFront = null;
     } else {
       const response = await this.connection.client.listTabs();
       this._listTabsResponse = response;
       try {
         this.deviceFront = await this.connection.client.mainRoot.getFront("device");
         this.preferenceFront = await this.connection.client.mainRoot.getFront("preference");
+        this.perfFront = await this.connection.client.mainRoot.getFront("perf");
         this._recordRuntimeInfo();
       } catch (e) {
         // This may fail on <FF55 (because of lack of bug 1352157) but we will want to
         // emit runtime-global-actors in order to call checkRuntimeVersion and display
         // the compatibility popup.
         console.error(e);
       }
       this.update("runtime-global-actors");
--- a/devtools/client/webide/modules/runtime-list.js
+++ b/devtools/client/webide/modules/runtime-list.js
@@ -66,16 +66,20 @@ RuntimeList.prototype = {
   showDevicePreferences: function() {
     this._Cmds.showDevicePrefs();
   },
 
   showSettings: function() {
     this._Cmds.showSettings();
   },
 
+  showPerformancePanel: function() {
+    this._Cmds.showPerformancePanel();
+  },
+
   showTroubleShooting: function() {
     this._Cmds.showTroubleShooting();
   },
 
   showAddons: function() {
     this._Cmds.showAddons();
   },
 
@@ -87,32 +91,40 @@ RuntimeList.prototype = {
     const doc = this._doc;
 
     // Runtime commands
     const screenshotCmd = doc.querySelector("#runtime-screenshot");
     const detailsCmd = doc.querySelector("#runtime-details");
     const disconnectCmd = doc.querySelector("#runtime-disconnect");
     const devicePrefsCmd = doc.querySelector("#runtime-preferences");
     const settingsCmd = doc.querySelector("#runtime-settings");
+    const performanceCmd = doc.querySelector("#runtime-performance");
+
+    // Display the performance button only if the pref is enabled
+    performanceCmd.hidden = !Services.prefs.getBoolPref("devtools.performance.new-panel-enabled", false);
 
     if (AppManager.connected) {
       if (AppManager.deviceFront) {
         detailsCmd.removeAttribute("disabled");
         screenshotCmd.removeAttribute("disabled");
       }
       if (AppManager.preferenceFront) {
         devicePrefsCmd.removeAttribute("disabled");
       }
       disconnectCmd.removeAttribute("disabled");
+      if (AppManager.perfFront) {
+        performanceCmd.removeAttribute("disabled");
+      }
     } else {
       detailsCmd.setAttribute("disabled", "true");
       screenshotCmd.setAttribute("disabled", "true");
       disconnectCmd.setAttribute("disabled", "true");
       devicePrefsCmd.setAttribute("disabled", "true");
       settingsCmd.setAttribute("disabled", "true");
+      performanceCmd.setAttribute("disabled", "true");
     }
   },
 
   update: function() {
     const doc = this._doc;
     const wifiHeaderNode = doc.querySelector("#runtime-header-wifi");
 
     if (WiFiScanner.allowed) {
--- a/devtools/client/webide/themes/panel-listing.css
+++ b/devtools/client/webide/themes/panel-listing.css
@@ -127,16 +127,17 @@ button.panel-item:not(:disabled):hover {
 }
 
 .project-panel-item-openpackaged  { background-image: -moz-image-rect(url("icons.png"), 260, 438, 286, 412); }
 .runtime-panel-item-other         { background-image: -moz-image-rect(url("icons.png"), 26, 438, 52, 412); }
 #runtime-screenshot               { background-image: -moz-image-rect(url("icons.png"), 131, 438, 156, 412); }
 
 #runtime-preferences,
 #runtime-settings                 { background-image: -moz-image-rect(url("icons.png"), 105, 464, 131, 438); }
+#runtime-performance              { background-image: url(chrome://devtools/skin/images/tool-profiler.svg); }
 
 #runtime-panel-nousbdevice,
 #runtime-details                  { background-image: -moz-image-rect(url("icons.png"), 156, 438, 182, 412);  }
 
 .runtime-panel-item-usb,
 #runtime-disconnect               { background-image: -moz-image-rect(url("icons.png"), 52, 438, 78, 412); }
 
 .runtime-panel-item-wifi,