Bug 1101569 - Use the new allTabs menu sidebar in the inspector and netmonitor; r=vporof
authorPatrick Brosset <pbrosset@mozilla.com>
Fri, 16 Jan 2015 11:58:02 +0100
changeset 224209 0d7bbd6633c3a709f0433395329c884d9c970302
parent 224208 3fa318009bce6123fbdbb0981095d83035b866a5
child 224210 4cd191478d41ac99778e1e991b0e93e3bf4e7d89
push id28121
push userkwierso@gmail.com
push dateSat, 17 Jan 2015 00:45:57 +0000
treeherdermozilla-central@be3ff0fea299 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs1101569
milestone38.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 1101569 - Use the new allTabs menu sidebar in the inspector and netmonitor; r=vporof
browser/devtools/framework/sidebar.js
browser/devtools/inspector/inspector-panel.js
browser/devtools/netmonitor/netmonitor-controller.js
browser/devtools/netmonitor/netmonitor-view.js
--- a/browser/devtools/framework/sidebar.js
+++ b/browser/devtools/framework/sidebar.js
@@ -322,27 +322,45 @@ ToolSidebar.prototype = {
       panel.remove();
     }
 
     this._tabs.delete(tabId);
     this.emit("tab-unregistered", tabId);
   }),
 
   /**
-   * Show or hide a specific tab
+   * Show or hide a specific tab and tabpanel.
+   * @param {Boolean} isVisible True to show the tab/tabpanel, False to hide it.
+   * @param {String} id The ID of the tab to be hidden.
+   * @param {String} tabPanelId Optionally pass the ID for the tabPanel if it
+   * can't be retrieved using the tab ID. This is useful when tabs and tabpanels
+   * existed before the widget was created.
    */
-  toggleTab: function(id, isVisible) {
+  toggleTab: function(isVisible, id, tabPanelId) {
+    // Toggle the tab.
     let tab = this.getTab(id);
     if (!tab) {
       return;
     }
     tab.hidden = !isVisible;
+
+    // Toggle the item in the allTabs menu.
     if (this._allTabsBtn) {
       this._allTabsBtn.querySelector("#sidebar-alltabs-item-" + id).hidden = !isVisible;
     }
+
+    // Toggle the corresponding tabPanel, if one can be found either with the id
+    // or the provided tabPanelId.
+    let tabPanel = this.getTabPanel(id);
+    if (!tabPanel && tabPanelId) {
+      tabPanel = this.getTabPanel(tabPanelId);
+    }
+    if (tabPanel) {
+      tabPanel.hidden = !isVisible;
+    }
   },
 
   /**
    * Select a specific tab.
    */
   select: function(id) {
     let tab = this.getTab(id);
     if (tab) {
--- a/browser/devtools/inspector/inspector-panel.js
+++ b/browser/devtools/inspector/inspector-panel.js
@@ -308,17 +308,19 @@ InspectorPanel.prototype = {
     this.searchSuggestions = new SelectorSearch(this, this.searchBox);
   },
 
   /**
    * Build the sidebar.
    */
   setupSidebar: function InspectorPanel_setupSidebar() {
     let tabbox = this.panelDoc.querySelector("#inspector-sidebar");
-    this.sidebar = new ToolSidebar(tabbox, this, "inspector");
+    this.sidebar = new ToolSidebar(tabbox, this, "inspector", {
+      showAllTabsMenu: true
+    });
 
     let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
 
     this._setDefaultSidebar = (event, toolId) => {
       Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
     };
 
     this.sidebar.on("select", this._setDefaultSidebar);
--- a/browser/devtools/netmonitor/netmonitor-controller.js
+++ b/browser/devtools/netmonitor/netmonitor-controller.js
@@ -114,16 +114,17 @@ Cu.import("resource:///modules/devtools/
 Cu.import("resource:///modules/devtools/VariablesViewController.jsm");
 Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
 
 const require = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools.require;
 const promise = Cu.import("resource://gre/modules/Promise.jsm", {}).Promise;
 const EventEmitter = require("devtools/toolkit/event-emitter");
 const Editor = require("devtools/sourceeditor/editor");
 const {Tooltip} = require("devtools/shared/widgets/Tooltip");
+const {ToolSidebar} = require("devtools/framework/sidebar");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Chart",
   "resource:///modules/devtools/Chart.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "Curl",
   "resource:///modules/devtools/Curl.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "CurlUtils",
--- a/browser/devtools/netmonitor/netmonitor-view.js
+++ b/browser/devtools/netmonitor/netmonitor-view.js
@@ -1996,16 +1996,19 @@ CustomRequestView.prototype = {
 }
 
 /**
  * Functions handling the requests details view.
  */
 function NetworkDetailsView() {
   dumpn("NetworkDetailsView was instantiated");
 
+  // The ToolSidebar requires the panel object to be able to emit events.
+  EventEmitter.decorate(this);
+
   this._onTabSelect = this._onTabSelect.bind(this);
 };
 
 NetworkDetailsView.prototype = {
   /**
    * An object containing the state of tabs.
    */
   _viewState: {
@@ -2020,16 +2023,20 @@ NetworkDetailsView.prototype = {
 
   /**
    * Initialization function, called when the network monitor is started.
    */
   initialize: function() {
     dumpn("Initializing the NetworkDetailsView");
 
     this.widget = $("#event-details-pane");
+    this.sidebar = new ToolSidebar(this.widget, this, "netmonitor", {
+      disableTelemetry: true,
+      showAllTabsMenu: true
+    });
 
     this._headers = new VariablesView($("#all-headers"),
       Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {
         emptyText: L10N.getStr("headersEmptyText"),
         searchPlaceholder: L10N.getStr("headersFilterText")
       }));
     this._cookies = new VariablesView($("#all-cookies"),
       Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {
@@ -2060,17 +2067,17 @@ NetworkDetailsView.prototype = {
     $("tabpanels", this.widget).addEventListener("select", this._onTabSelect);
   },
 
   /**
    * Destruction function, called when the network monitor is closed.
    */
   destroy: function() {
     dumpn("Destroying the NetworkDetailsView");
-
+    this.sidebar.destroy();
     $("tabpanels", this.widget).removeEventListener("select", this._onTabSelect);
   },
 
   /**
    * Populates this view with the specified data.
    *
    * @param object aData
    *        The data source (this should be the attachment of a request item).
@@ -2085,18 +2092,17 @@ NetworkDetailsView.prototype = {
     $("#response-content-json-box").hidden = true;
     $("#response-content-textarea-box").hidden = true;
     $("#raw-headers").hidden = true;
     $("#response-content-image-box").hidden = true;
 
     let isHtml = RequestsMenuView.prototype.isHtml({ attachment: aData });
 
     // Show the "Preview" tabpanel only for plain HTML responses.
-    $("#preview-tab").hidden = !isHtml;
-    $("#preview-tabpanel").hidden = !isHtml;
+    this.sidebar.toggleTab(isHtml, "preview-tab", "preview-tabpanel");
 
     // Show the "Security" tab only for requests that
     //   1) are https (state != insecure)
     //   2) come from a target that provides security information.
     let hasSecurityInfo = aData.securityState &&
                           aData.securityState !== "insecure";
 
     $("#security-tab").hidden = !hasSecurityInfo;