Bug 1182083 - Don't hide tabpanels in the DevTools sidebar. r=vporof

If a tabpanel is hidden, the tabs and their panels get mixed up. Here's
what MDN has stated about this matter:

  "Panels should never be hidden; hiding the tab suffices to make the
   panel inaccessible."

The changes also modify tests that assume the tabpanels are hidden to
assert that the tabpanels are NOT hidden.

--HG--
extra : commitid : K08Xaml1w8v

browser/devtools/framework/sidebar.js

@@ -329,14 +329,11 @@ ToolSidebar.prototype = {
   }),
 
   /**
-   * Show or hide a specific tab and tabpanel.
+   * Show or hide a specific tab.
    * @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(isVisible, id, tabPanelId) {
+  toggleTab: function(isVisible, id) {
     // Toggle the tab.
     let tab = this.getTab(id);
     if (!tab) {
@@ -348,16 +345,6 @@ ToolSidebar.prototype = {
     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;
-    }
   },
 
   /**

browser/devtools/netmonitor/netmonitor-view.js

@@ -2475,14 +2475,14 @@ NetworkDetailsView.prototype = {
     let isHtml = RequestsMenuView.prototype.isHtml({ attachment: aData });
 
     // Show the "Preview" tabpanel only for plain HTML responses.
-    this.sidebar.toggleTab(isHtml, "preview-tab", "preview-tabpanel");
+    this.sidebar.toggleTab(isHtml, "preview-tab");
 
     // 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";
-    this.sidebar.toggleTab(hasSecurityInfo, "security-tab", "security-tabpanel");
+    this.sidebar.toggleTab(hasSecurityInfo, "security-tab");
 
     // Switch to the "Headers" tabpanel if the "Preview" previously selected
     // and this is not an HTML response or "Security" was selected but this

browser/devtools/netmonitor/test/browser_net_html-preview.js

@@ -22,8 +22,8 @@ function test() {
         "The first tab in the details pane should be selected.");
       is($("#preview-tab").hidden, true,
         "The preview tab should be hidden for non html responses.");
-      is($("#preview-tabpanel").hidden, true,
-        "The preview tabpanel should be hidden for non html responses.");
+      is($("#preview-tabpanel").hidden, false,
+        "The preview tabpanel is not hidden for non html responses.");
 
       RequestsMenu.selectedIndex = 4;
       NetMonitorView.toggleDetailsPane({ visible: true, animated: false }, 6);
@@ -32,8 +32,6 @@ function test() {
         "The sixth tab in the details pane should be selected.");
       is($("#preview-tab").hidden, false,
         "The preview tab should be visible now.");
-      is($("#preview-tabpanel").hidden, false,
-        "The preview tabpanel should be visible now.");
 
       waitFor(aMonitor.panelWin, EVENTS.RESPONSE_HTML_PREVIEW_DISPLAYED).then(() => {
         let iframe = $("#response-preview");
@@ -50,8 +48,8 @@ function test() {
           "The first tab in the details pane should be selected again.");
         is($("#preview-tab").hidden, true,
           "The preview tab should be hidden again for non html responses.");
-        is($("#preview-tabpanel").hidden, true,
-          "The preview tabpanel should be hidden again for non html responses.");
+        is($("#preview-tabpanel").hidden, false,
+          "The preview tabpanel is not hidden again for non html responses.");
 
         teardown(aMonitor).then(finish);
       });

browser/devtools/netmonitor/test/browser_net_security-tab-visibility.js

@@ -45,6 +45,7 @@ add_task(function* () {
                        waitForNetworkEvents(monitor, 1);
 
     let tab = $("#security-tab");
+    let tabpanel = $("#security-tabpanel");
 
     info("Performing a request to " + testcase.uri);
     debuggee.performRequests(1, testcase.uri);
@@ -61,6 +62,8 @@ add_task(function* () {
        "Security tab is " +
         (testcase.visibleOnNewEvent ? "visible" : "hidden") +
        " after new request was added to the menu.");
+    is(tabpanel.hidden, false,
+      "#security-tabpanel is visible after new request was added to the menu.");
 
     info("Waiting for security information to arrive.");
     yield onSecurityInfo;
@@ -71,6 +74,8 @@ add_task(function* () {
        "Security tab is " +
         (testcase.visibleOnSecurityInfo ? "visible" : "hidden") +
        " after security information arrived.");
+    is(tabpanel.hidden, false,
+      "#security-tabpanel is visible after security information arrived.");
 
     info("Waiting for request to complete.");
     yield onComplete;
@@ -78,6 +83,8 @@ add_task(function* () {
        "Security tab is " +
         (testcase.visibleOnceComplete ? "visible" : "hidden") +
        " after request has been completed.");
+    is(tabpanel.hidden, false,
+      "#security-tabpanel is visible after request is complete.");
 
     info("Clearing requests.");
     RequestsMenu.clear();