Bug 1333364 - Introduce id props to tab r=Honza

MozReview-Commit-ID: 1nbK6mlRSIr

--HG--
extra : rebase_source : 9091d17997c1f0e3e855b50aaaa307434d74f930

devtools/client/netmonitor/actions/ui.js

@@ -48,12 +48,12 @@ function resizeWaterfall(width) {
 /**
  * Change the selected tab for details panel.
  *
- * @param {number} index - tab index to be selected
+ * @param {string} id - tab id to be selected
  */
-function selectDetailsPanelTab(index) {
+function selectDetailsPanelTab(id) {
   return {
     type: SELECT_DETAILS_PANEL_TAB,
-    index,
+    id,
   };
 }
 

devtools/client/netmonitor/components/request-list-content.js

@@ -264,7 +264,7 @@ module.exports = connect(
       const { securityState } = item;
       // Choose the security tab.
       if (securityState && securityState !== "insecure") {
-        dispatch(Actions.selectDetailsPanelTab(5));
+        dispatch(Actions.selectDetailsPanelTab("security"));
       }
     },
   })

devtools/client/netmonitor/events.js

@@ -59,15 +59,9 @@ const EVENTS = {
   RESPONSE_IMAGE_THUMBNAIL_DISPLAYED:
     "NetMonitor:ResponseImageThumbnailAvailable",
 
-  // When a tab is selected in the NetworkDetailsView and subsequently rendered.
-  TAB_UPDATED: "NetMonitor:TabUpdated",
-
   // Fired when Sidebar has finished being populated.
   SIDEBAR_POPULATED: "NetMonitor:SidebarPopulated",
 
-  // Fired when NetworkDetailsView has finished being populated.
-  NETWORKDETAILSVIEW_POPULATED: "NetMonitor:NetworkDetailsViewPopulated",
-
   // Fired when CustomRequestView has finished being populated.
   CUSTOMREQUESTVIEW_POPULATED: "NetMonitor:CustomRequestViewPopulated",
 

devtools/client/netmonitor/reducers/ui.js

@@ -13,7 +13,7 @@ const {
 } = require("../constants");
 
 const UI = I.Record({
-  detailsPanelSelectedTab: 0,
+  detailsPanelSelectedTab: "headers",
   sidebarOpen: false,
   statisticsOpen: false,
   waterfallWidth: null,
@@ -35,7 +35,7 @@ function openStatistics(state, action) {
 }
 
 function setDetailsPanelTab(state, action) {
-  return state.set("detailsPanelSelectedTab", action.index);
+  return state.set("detailsPanelSelectedTab", action.id);
 }
 
 function ui(state = new UI(), action) {

devtools/client/netmonitor/shared/components/details-panel.js

@@ -38,10 +38,10 @@ const PREVIEW_TITLE = L10N.getStr("netmonitor.tab.preview");
  * Display the network request details
  */
 function DetailsPanel({
+  activeTabId,
   cloneSelectedRequest,
   request,
-  setTabIndex,
-  tabIndex,
+  selectTab,
   toolbox,
 }) {
   if (!request) {
@@ -50,9 +50,9 @@ function DetailsPanel({
 
   return (
     Tabbar({
-      onSelect: setTabIndex,
+      activeTabId,
+      onSelect: selectTab,
       showAllTabsMenu: true,
-      tabActive: tabIndex,
       toolbox,
     },
       TabPanel({
@@ -109,17 +109,17 @@ DetailsPanel.propTypes = {
   cloneSelectedRequest: PropTypes.func.isRequired,
   request: PropTypes.object,
   setTabIndex: PropTypes.func.isRequired,
-  tabIndex: PropTypes.number.isRequired,
+  selectedTab: PropTypes.number.isRequired,
   toolbox: PropTypes.object.isRequired,
 };
 
 module.exports = connect(
   (state) => ({
+    activeTabId: state.ui.detailsPanelSelectedTab,
     request: getSelectedRequest(state),
-    tabIndex: state.ui.detailsPanelSelectedTab,
   }),
   (dispatch) => ({
     cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
-    setTabIndex: (index) => dispatch(Actions.selectDetailsPanelTab(index)),
+    selectTab: (tabId) => dispatch(Actions.selectDetailsPanelTab(tabId)),
   }),
 )(DetailsPanel);

devtools/client/netmonitor/test/browser.ini

@@ -94,8 +94,6 @@ skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32
 [browser_net_cors_requests.js]
 [browser_net_cyrillic-01.js]
 [browser_net_cyrillic-02.js]
-[browser_net_details-no-duplicated-content.js]
-skip-if = true # Test broken in React version, is too low-level
 [browser_net_frame.js]
 skip-if = (os == 'linux' && debug && bits == 32) # Bug 1321434
 [browser_net_filter-01.js]

devtools/client/netmonitor/test/browser_net_brotli.js

@@ -38,10 +38,10 @@ add_task(function* () {
       time: true
     });
 
-  wait = waitForDOM(document, "#panel-3 .editor-mount iframe");
+  wait = waitForDOM(document, "#response-panel .editor-mount iframe");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   let [editorFrame] = yield wait;
 
   yield once(editorFrame, "DOMContentLoaded");

devtools/client/netmonitor/test/browser_net_complex-params.js

@@ -25,43 +25,43 @@ add_task(function* () {
   });
   yield wait;
 
-  wait = waitForDOM(document, "#panel-2 .tree-section", 2);
+  wait = waitForDOM(document, "#params-panel .tree-section", 2);
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-2 a").click();
+  document.querySelector("#params-tab").click();
   yield wait;
   testParamsTab1("a", '""', '{ "foo": "bar" }', '""');
 
-  wait = waitForDOM(document, "#panel-2 .tree-section", 2);
+  wait = waitForDOM(document, "#params-panel .tree-section", 2);
   RequestsMenu.selectedIndex = 1;
   yield wait;
   testParamsTab1("a", '"b"', '{ "foo": "bar" }', '""');
 
-  wait = waitForDOM(document, "#panel-2 .tree-section", 2);
+  wait = waitForDOM(document, "#params-panel .tree-section", 2);
   RequestsMenu.selectedIndex = 2;
   yield wait;
   testParamsTab1("a", '"b"', "foo", '"bar"');
 
-  wait = waitForDOM(document, "#panel-2 tr:not(.tree-section).treeRow", 2);
+  wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2);
   RequestsMenu.selectedIndex = 3;
   yield wait;
   testParamsTab2("a", '""', '{ "foo": "bar" }', "js");
 
-  wait = waitForDOM(document, "#panel-2 tr:not(.tree-section).treeRow", 2);
+  wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2);
   RequestsMenu.selectedIndex = 4;
   yield wait;
   testParamsTab2("a", '"b"', '{ "foo": "bar" }', "js");
 
   // Wait for all tree sections and editor updated by react
-  let waitSections = waitForDOM(document, "#panel-2 .tree-section", 2);
-  let waitEditor = waitForDOM(document, "#panel-2 .editor-mount iframe");
+  let waitSections = waitForDOM(document, "#params-panel .tree-section", 2);
+  let waitEditor = waitForDOM(document, "#params-panel .editor-mount iframe");
   RequestsMenu.selectedIndex = 5;
   let [, editorFrames] = yield Promise.all([waitSections, waitEditor]);
   yield once(editorFrames[0], "DOMContentLoaded");
   yield waitForDOM(editorFrames[0].contentDocument, ".CodeMirror-code");
   testParamsTab2("a", '"b"', "?foo=bar", "text");
 
-  wait = waitForDOM(document, "#panel-2 .empty-notice");
+  wait = waitForDOM(document, "#params-panel .empty-notice");
   RequestsMenu.selectedIndex = 6;
   yield wait;
   testParamsTab3();
@@ -70,7 +70,7 @@ add_task(function* () {
 
   function testParamsTab1(queryStringParamName, queryStringParamValue,
                           formDataParamName, formDataParamValue) {
-    let tabpanel = document.querySelector("#panel-2");
+    let tabpanel = document.querySelector("#params-panel");
 
     is(tabpanel.querySelectorAll(".tree-section").length, 2,
       "The number of param tree sections displayed in this tabpanel is incorrect.");
@@ -111,7 +111,7 @@ add_task(function* () {
   function testParamsTab2(queryStringParamName, queryStringParamValue,
                           requestPayload, editorMode) {
     let isJSON = editorMode === "js";
-    let tabpanel = document.querySelector("#panel-2");
+    let tabpanel = document.querySelector("#params-panel");
 
     is(tabpanel.querySelectorAll(".tree-section").length, 2,
       "The number of param tree sections displayed in this tabpanel is incorrect.");
@@ -164,7 +164,7 @@ add_task(function* () {
   }
 
   function testParamsTab3() {
-    let tabpanel = document.querySelector("#panel-2");
+    let tabpanel = document.querySelector("#params-panel");
 
     is(tabpanel.querySelectorAll(".tree-section").length, 0,
       "The number of param tree sections displayed in this tabpanel is incorrect.");

devtools/client/netmonitor/test/browser_net_content-type.js

@@ -90,14 +90,6 @@ add_task(function* () {
       time: true
     });
 
-  wait = waitForDOM(document, "#panel-3");
-  EventUtils.sendMouseEvent({ type: "mousedown" },
-    document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
-  yield wait;
-
-  RequestsMenu.selectedIndex = -1;
-
   yield selectIndexAndWaitForEditor(0);
   yield testResponseTab("xml");
 
@@ -122,7 +114,7 @@ add_task(function* () {
   yield teardown(monitor);
 
   function* testResponseTab(type) {
-    let tabpanel = document.querySelector("#panel-3");
+    let tabpanel = document.querySelector("#response-panel");
 
     function checkVisibility(box) {
       is(tabpanel.querySelector(".response-error-header") === null,
@@ -232,10 +224,11 @@ add_task(function* () {
   }
 
   function* selectIndexAndWaitForEditor(index) {
-    let editor = document.querySelector("#panel-3 .editor-mount iframe");
+    let editor = document.querySelector("#response-panel .editor-mount iframe");
     if (!editor) {
-      let waitDOM = waitForDOM(document, ".editor-mount iframe");
+      let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe");
       RequestsMenu.selectedIndex = index;
+      document.querySelector("#response-tab").click();
       [editor] = yield waitDOM;
       yield once(editor, "DOMContentLoaded");
     } else {
@@ -246,14 +239,14 @@ add_task(function* () {
   }
 
   function* selectIndexAndWaitForJSONView(index) {
-    let tabpanel = document.querySelector("#panel-3");
+    let tabpanel = document.querySelector("#response-panel");
     let waitDOM = waitForDOM(tabpanel, ".treeTable");
     RequestsMenu.selectedIndex = index;
     yield waitDOM;
   }
 
   function* selectIndexAndWaitForImageView(index) {
-    let tabpanel = document.querySelector("#panel-3");
+    let tabpanel = document.querySelector("#response-panel");
     let waitDOM = waitForDOM(tabpanel, ".response-image");
     RequestsMenu.selectedIndex = index;
     let [imageNode] = yield waitDOM;

devtools/client/netmonitor/test/browser_net_cyrillic-01.js

@@ -28,10 +28,10 @@ add_task(function* () {
       statusText: "DA DA DA"
     });
 
-  wait = waitForDOM(document, "#panel-3 .editor-mount iframe");
+  wait = waitForDOM(document, "#response-panel .editor-mount iframe");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   let [editor] = yield wait;
   yield once(editor, "DOMContentLoaded");
   yield waitForDOM(editor.contentDocument, ".CodeMirror-code");

devtools/client/netmonitor/test/browser_net_cyrillic-02.js

@@ -27,10 +27,10 @@ add_task(function* () {
       statusText: "OK"
     });
 
-  wait = waitForDOM(document, "#panel-3 .editor-mount iframe");
+  wait = waitForDOM(document, "#response-panel .editor-mount iframe");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   let [editor] = yield wait;
   yield once(editor, "DOMContentLoaded");
   yield waitForDOM(editor.contentDocument, ".CodeMirror-code");

devtools/client/netmonitor/test/browser_net_details-no-duplicated-content.js

@@ -1,171 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// A test to ensure that the content in details pane is not duplicated.
-
-add_task(function* () {
-  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
-  let panel = monitor.panelWin;
-  let { NetMonitorView, EVENTS } = panel;
-  let { RequestsMenu, NetworkDetails } = NetMonitorView;
-
-  const COOKIE_UNIQUE_PATH = "/do-not-use-in-other-tests-using-cookies";
-
-  let TEST_CASES = [
-    {
-      desc: "Test headers tab",
-      pageURI: CUSTOM_GET_URL,
-      requestURI: null,
-      isPost: false,
-      tabIndex: 0,
-      variablesView: NetworkDetails._headers,
-      expectedScopeLength: 2,
-    },
-    {
-      desc: "Test cookies tab",
-      pageURI: CUSTOM_GET_URL,
-      requestURI: COOKIE_UNIQUE_PATH,
-      isPost: false,
-      tabIndex: 1,
-      variablesView: NetworkDetails._cookies,
-      expectedScopeLength: 1,
-    },
-    {
-      desc: "Test params tab",
-      pageURI: POST_RAW_URL,
-      requestURI: null,
-      isPost: true,
-      tabIndex: 2,
-      variablesView: NetworkDetails._params,
-      expectedScopeLength: 1,
-    },
-  ];
-
-  info("Adding a cookie for the \"Cookie\" tab test");
-  yield setDocCookie("a=b; path=" + COOKIE_UNIQUE_PATH);
-
-  info("Running tests");
-  for (let spec of TEST_CASES) {
-    yield runTestCase(spec);
-  }
-
-  // Remove the cookie. If an error occurs the path of the cookie ensures it
-  // doesn't mess with the other tests.
-  info("Removing the added cookie.");
-  yield setDocCookie(
-    "a=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=" + COOKIE_UNIQUE_PATH);
-
-  yield teardown(monitor);
-
-  /**
-   * Set a content document cookie
-   */
-  function setDocCookie(cookie) {
-    return ContentTask.spawn(tab.linkedBrowser, cookie, function* (cookieArg) {
-      content.document.cookie = cookieArg;
-    });
-  }
-
-  /**
-   * A helper that handles the execution of each case.
-   */
-  function* runTestCase(spec) {
-    info("Running case: " + spec.desc);
-    let wait = waitForNetworkEvents(monitor, 1);
-    tab.linkedBrowser.loadURI(spec.pageURI);
-    yield wait;
-
-    RequestsMenu.clear();
-    yield waitForFinalDetailTabUpdate(spec.tabIndex, spec.isPost, spec.requestURI);
-
-    is(spec.variablesView._store.length, spec.expectedScopeLength,
-       "View contains " + spec.expectedScopeLength + " scope headers");
-  }
-
-  /**
-   * A helper that prepares the variables view for the actual testing. It
-   * - selects the correct tab
-   * - performs the specified request to specified URI
-   * - opens the details view
-   * - waits for the final update to happen
-   */
-  function* waitForFinalDetailTabUpdate(tabIndex, isPost, uri) {
-    let onNetworkEvent = panel.once(EVENTS.NETWORK_EVENT);
-    let onDetailsPopulated = panel.once(EVENTS.NETWORKDETAILSVIEW_POPULATED);
-    let onRequestFinished = isPost ?
-      waitForNetworkEvents(monitor, 0, 1) :
-      waitForNetworkEvents(monitor, 1);
-
-    info("Performing a request");
-    yield ContentTask.spawn(tab.linkedBrowser, uri, function* (url) {
-      content.wrappedJSObject.performRequests(1, url);
-    });
-
-    info("Waiting for NETWORK_EVENT");
-    yield onNetworkEvent;
-
-    if (!RequestsMenu.getItemAtIndex(0)) {
-      info("Waiting for the request to be added to the view");
-      yield monitor.panelWin.once(EVENTS.REQUEST_ADDED);
-    }
-
-    ok(true, "Received NETWORK_EVENT. Selecting the item.");
-    let item = RequestsMenu.getItemAtIndex(0);
-    RequestsMenu.selectedItem = item;
-
-    info("Item selected. Waiting for NETWORKDETAILSVIEW_POPULATED");
-    yield onDetailsPopulated;
-
-    info("Received populated event. Selecting tab at index " + tabIndex);
-    NetworkDetails.widget.selectedIndex = tabIndex;
-
-    info("Waiting for request to finish.");
-    yield onRequestFinished;
-
-    ok(true, "Request finished.");
-
-    /**
-     * Because this test uses lazy updates there's four scenarios to consider:
-     * #1: Everything is updated and test is ready to continue.
-     * #2: There's updates that are waiting to be flushed.
-     * #3: Updates are flushed but the tab update is still running.
-     * #4: There's pending updates and a tab update is still running.
-     *
-     * For case #1 there's not going to be a TAB_UPDATED event so don't wait for
-     * it (bug 1106181).
-     *
-     * For cases #2 and #3 it's enough to wait for one TAB_UPDATED event as for
-     * - case #2 the next flush will perform the final update and single
-     *   TAB_UPDATED event is emitted.
-     * - case #3 the running update is the final update that'll emit one
-     *   TAB_UPDATED event.
-     *
-     * For case #4 we must wait for the updates to be flushed before we can
-     * start waiting for TAB_UPDATED event or we'll continue the test right
-     * after the pending update finishes.
-     */
-    let hasQueuedUpdates = RequestsMenu._updateQueue.length !== 0;
-    let hasRunningTabUpdate = NetworkDetails._viewState.updating[tabIndex];
-
-    if (hasQueuedUpdates || hasRunningTabUpdate) {
-      info("There's pending updates - waiting for them to finish.");
-      info("  hasQueuedUpdates: " + hasQueuedUpdates);
-      info("  hasRunningTabUpdate: " + hasRunningTabUpdate);
-
-      if (hasQueuedUpdates && hasRunningTabUpdate) {
-        info("Waiting for updates to be flushed.");
-        // _flushRequests calls .populate which emits the following event
-        yield panel.once(EVENTS.NETWORKDETAILSVIEW_POPULATED);
-
-        info("Requests flushed.");
-      }
-
-      info("Waiting for final tab update.");
-      yield waitFor(panel, EVENTS.TAB_UPDATED);
-    }
-
-    info("All updates completed.");
-  }
-});

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

@@ -25,26 +25,26 @@ add_task(function* () {
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
 
-  ok(document.querySelector("#tab-0.is-active"),
+  ok(document.querySelector("#headers-tab[aria-selected=true]"),
     "The headers tab in the details panel should be selected.");
-  ok(!document.querySelector("#tab-5"),
+  ok(!document.querySelector("#preview-tab"),
     "The preview tab should be hidden for non html responses.");
-  ok(!document.querySelector("#panel-5"),
+  ok(!document.querySelector("#preview-panel"),
     "The preview panel is hidden for non html responses.");
 
-  wait = waitForDOM(document, "#tab-5");
+  wait = waitForDOM(document, ".tabs");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[4]);
   yield wait;
 
-  document.querySelector("#tab-5 a").click();
+  document.querySelector("#preview-tab").click();
 
-  ok(document.querySelector("#tab-5.is-active"),
+  ok(document.querySelector("#preview-tab[aria-selected=true]"),
     "The preview tab in the details panel should be selected.");
-  ok(document.querySelector("#panel-5"),
+  ok(document.querySelector("#preview-panel"),
     "The preview panel should be visible now.");
 
-  let iframe = document.querySelector("#panel-5 iframe");
+  let iframe = document.querySelector("#preview-panel iframe");
   yield once(iframe, "DOMContentLoaded");
 
   ok(iframe,
@@ -57,11 +57,11 @@ add_task(function* () {
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[5]);
 
-  ok(document.querySelector("#tab-0.is-active"),
+  ok(document.querySelector("#headers-tab[aria-selected=true]"),
     "The headers tab in the details panel should be selected again.");
-  ok(!document.querySelector("#tab-5"),
+  ok(!document.querySelector("#preview-tab"),
     "The preview tab should be hidden again for non html responses.");
-  ok(!document.querySelector("#panel-5"),
+  ok(!document.querySelector("#preview-panel"),
     "The preview panel is hidden again for non html responses.");
 
   yield teardown(monitor);

devtools/client/netmonitor/test/browser_net_json-long.js

@@ -39,10 +39,10 @@ add_task(function* () {
       time: true
     });
 
-  wait = waitForDOM(document, "#panel-3");
+  wait = waitForDOM(document, "#response-panel");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   yield wait;
 
   testResponseTab();
@@ -50,7 +50,7 @@ add_task(function* () {
   yield teardown(monitor);
 
   function testResponseTab() {
-    let tabpanel = document.querySelector("#panel-3");
+    let tabpanel = document.querySelector("#response-panel");
 
     is(tabpanel.querySelector(".response-error-header") === null, true,
       "The response error header doesn't have the intended visibility.");

devtools/client/netmonitor/test/browser_net_json-malformed.js

@@ -31,15 +31,15 @@ add_task(function* () {
       fullMimeType: "text/json; charset=utf-8"
     });
 
-  wait = waitForDOM(document, "#panel-3 .editor-mount iframe");
+  wait = waitForDOM(document, "#response-panel .editor-mount iframe");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   let [editor] = yield wait;
   yield once(editor, "DOMContentLoaded");
   yield waitForDOM(editor.contentDocument, ".CodeMirror-code");
 
-  let tabpanel = document.querySelector("#panel-3");
+  let tabpanel = document.querySelector("#response-panel");
   is(tabpanel.querySelector(".response-error-header") === null, false,
     "The response error header doesn't have the intended visibility.");
   is(tabpanel.querySelector(".response-error-header").textContent,

devtools/client/netmonitor/test/browser_net_json_custom_mime.js

@@ -34,10 +34,10 @@ add_task(function* () {
       time: true
     });
 
-  wait = waitForDOM(document, "#panel-3");
+  wait = waitForDOM(document, "#response-panel");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   yield wait;
 
   testResponseTab();
@@ -45,7 +45,7 @@ add_task(function* () {
   yield teardown(monitor);
 
   function testResponseTab() {
-    let tabpanel = document.querySelector("#panel-3");
+    let tabpanel = document.querySelector("#response-panel");
 
     is(tabpanel.querySelector(".response-error-header") === null, true,
       "The response error header doesn't have the intended visibility.");

devtools/client/netmonitor/test/browser_net_json_text_mime.js

@@ -34,10 +34,10 @@ add_task(function* () {
       time: true
     });
 
-  wait = waitForDOM(document, "#panel-3");
+  wait = waitForDOM(document, "#response-panel");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   yield wait;
 
   testResponseTab();
@@ -45,7 +45,7 @@ add_task(function* () {
   yield teardown(monitor);
 
   function testResponseTab() {
-    let tabpanel = document.querySelector("#panel-3");
+    let tabpanel = document.querySelector("#response-panel");
 
     is(tabpanel.querySelector(".response-error-header") === null, true,
       "The response error header doesn't have the intended visibility.");

devtools/client/netmonitor/test/browser_net_jsonp.js

@@ -43,15 +43,15 @@ add_task(function* () {
       time: true
     });
 
-  wait = waitForDOM(document, "#panel-3");
+  wait = waitForDOM(document, "#response-panel");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   yield wait;
 
   testResponseTab("$_0123Fun", "\"Hello JSONP!\"");
 
-  wait = waitForDOM(document, "#panel-3 .tree-section");
+  wait = waitForDOM(document, "#response-panel .tree-section");
   RequestsMenu.selectedIndex = 1;
   yield wait;
 
@@ -60,7 +60,7 @@ add_task(function* () {
   yield teardown(monitor);
 
   function testResponseTab(func, greeting) {
-    let tabpanel = document.querySelector("#panel-3");
+    let tabpanel = document.querySelector("#response-panel");
 
     is(tabpanel.querySelector(".response-error-header") === null, true,
       "The response error header doesn't have the intended visibility.");

devtools/client/netmonitor/test/browser_net_large-response.js

@@ -34,10 +34,10 @@ add_task(function* () {
       statusText: "OK"
     });
 
-  let waitDOM = waitForDOM(document, "#panel-3 .editor-mount iframe");
+  let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   let [editor] = yield waitDOM;
   yield once(editor, "DOMContentLoaded");
   yield waitForDOM(editor.contentDocument, ".CodeMirror-code");

devtools/client/netmonitor/test/browser_net_post-data-01.js

@@ -47,16 +47,16 @@ add_task(function* () {
     });
 
   // Wait for all tree sections updated by react
-  wait = waitForDOM(document, "#panel-2 .tree-section", 2);
+  wait = waitForDOM(document, "#params-panel .tree-section", 2);
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-2 a").click();
+  document.querySelector("#params-tab").click();
   yield wait;
   yield testParamsTab("urlencoded");
 
   // Wait for all tree sections and editor updated by react
-  let waitForSections = waitForDOM(document, "#panel-2 .tree-section", 2);
-  let waitForEditor = waitForDOM(document, "#panel-2 .editor-mount iframe");
+  let waitForSections = waitForDOM(document, "#params-panel .tree-section", 2);
+  let waitForEditor = waitForDOM(document, "#params-panel .editor-mount iframe");
   RequestsMenu.selectedIndex = 1;
   let [, editorFrames] = yield Promise.all([waitForSections, waitForEditor]);
   yield once(editorFrames[0], "DOMContentLoaded");
@@ -66,7 +66,7 @@ add_task(function* () {
   return teardown(monitor);
 
   function* testParamsTab(type) {
-    let tabpanel = document.querySelector("#panel-2");
+    let tabpanel = document.querySelector("#params-panel");
 
     function checkVisibility(box) {
       is(!tabpanel.querySelector(".treeTable"), !box.includes("params"),

devtools/client/netmonitor/test/browser_net_post-data-02.js

@@ -26,13 +26,13 @@ add_task(function* () {
   yield wait;
 
   // Wait for all tree view updated by react
-  wait = waitForDOM(document, "#panel-2 .tree-section");
+  wait = waitForDOM(document, "#params-panel .tree-section");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-2 a").click();
+  document.querySelector("#params-tab").click();
   yield wait;
 
-  let tabpanel = document.querySelector("#panel-2");
+  let tabpanel = document.querySelector("#params-panel");
 
   ok(tabpanel.querySelector(".treeTable"),
     "The request params doesn't have the indended visibility.");

devtools/client/netmonitor/test/browser_net_post-data-03.js

@@ -26,13 +26,13 @@ add_task(function* () {
   yield wait;
 
   // Wait for all tree view updated by react
-  wait = waitForDOM(document, "#panel-0");
+  wait = waitForDOM(document, "#headers-panel");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-0 a").click();
+  document.querySelector("#headers-tab").click();
   yield wait;
 
-  let tabpanel = document.querySelector("#panel-0");
+  let tabpanel = document.querySelector("#headers-panel");
 
   is(tabpanel.querySelectorAll(".tree-section .treeLabel").length, 3,
     "There should be 3 header sections displayed in this tabpanel.");
@@ -57,11 +57,11 @@ add_task(function* () {
     "The second request header value was incorrect.");
 
   // Wait for all tree sections updated by react
-  wait = waitForDOM(document, "#panel-2 .tree-section");
-  document.querySelector("#tab-2 a").click();
+  wait = waitForDOM(document, "#params-panel .tree-section");
+  document.querySelector("#params-tab").click();
   yield wait;
 
-  tabpanel = document.querySelector("#panel-2");
+  tabpanel = document.querySelector("#params-panel");
 
   ok(tabpanel.querySelector(".treeTable"),
     "The params tree view should be displayed.");

devtools/client/netmonitor/test/browser_net_post-data-04.js

@@ -26,13 +26,13 @@ add_task(function* () {
   yield wait;
 
   // Wait for all tree view updated by react
-  wait = waitForDOM(document, "#panel-2 .tree-section");
+  wait = waitForDOM(document, "#params-panel .tree-section");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-2 a").click();
+  document.querySelector("#params-tab").click();
   yield wait;
 
-  let tabpanel = document.querySelector("#panel-2");
+  let tabpanel = document.querySelector("#params-panel");
 
   ok(tabpanel.querySelector(".treeTable"),
     "The request params doesn't have the indended visibility.");

devtools/client/netmonitor/test/browser_net_security-details.js

@@ -22,13 +22,13 @@ add_task(function* () {
   });
   yield wait;
 
-  wait = waitForDOM(document, "#panel-5");
+  wait = waitForDOM(document, "#security-panel");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelector("#details-pane-toggle"));
-  document.querySelector("#tab-5 a").click();
+  document.querySelector("#security-tab").click();
   yield wait;
 
-  let tabpanel = document.querySelector("#panel-5");
+  let tabpanel = document.querySelector("#security-panel");
   let textboxes = tabpanel.querySelectorAll(".textbox-input");
 
   // Connection

devtools/client/netmonitor/test/browser_net_security-error.js

@@ -21,10 +21,10 @@ add_task(function* () {
   });
   yield wait;
 
-  wait = waitForDOM(document, "#panel-5");
+  wait = waitForDOM(document, "#security-panel");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelector("#details-pane-toggle"));
-  document.querySelector("#tab-5 a").click();
+  document.querySelector("#security-tab").click();
   yield wait;
 
   let errormsg = document.querySelector(".security-info-value");

devtools/client/netmonitor/test/browser_net_security-icon-click.js

@@ -24,7 +24,7 @@ add_task(function* () {
 
   info("Selecting headers panel again.");
   EventUtils.sendMouseEvent({ type: "mousedown" },
-    document.querySelector("#tab-0 a"));
+    document.querySelector("#headers-tab"));
 
   info("Sorting the items by filename.");
   EventUtils.sendMouseEvent({ type: "click" },
@@ -47,10 +47,11 @@ add_task(function* () {
     let item = RequestsMenu.getItemAtIndex(0);
     let icon = document.querySelector(".requests-security-state-icon");
 
-    let wait = waitForDOM(document, "#panel-5");
+    let wait = waitForDOM(document, "#security-panel");
     info("Clicking security icon of the first request and waiting for panel update.");
     EventUtils.synthesizeMouseAtCenter(icon, {}, monitor.panelWin);
     yield wait;
-    ok(document.querySelector("#tab-5.is-active"), "Security tab is selected.");
+
+    ok(document.querySelector("#security-tab[aria-selected=true]"), "Security tab is selected.");
   }
 });

devtools/client/netmonitor/test/browser_net_security-tab-deselect.js

@@ -36,13 +36,13 @@ add_task(function* () {
 
   info("Selecting security tab.");
   EventUtils.sendMouseEvent({ type: "mousedown" },
-    document.querySelector("#tab-5 a"));
+    document.querySelector("#security-tab"));
 
   info("Selecting insecure request.");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[1]);
 
-  ok(document.querySelector("#tab-0.is-active"),
+  ok(document.querySelector("#headers-tab[aria-selected=true]"),
     "Selected tab was reset when selected security tab was hidden.");
 
   return teardown(monitor);

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

@@ -58,10 +58,10 @@ add_task(function* () {
 
     is(RequestsMenu.selectedItem.securityState, undefined,
        "Security state has not yet arrived.");
-    is(!!document.querySelector("#tab-5"), testcase.visibleOnNewEvent,
+    is(!!document.querySelector("#security-tab"), testcase.visibleOnNewEvent,
       "Security tab is " + (testcase.visibleOnNewEvent ? "visible" : "hidden") +
       " after new request was added to the menu.");
-    is(!!document.querySelector("#panel-5"), testcase.visibleOnNewEvent,
+    is(!!document.querySelector("#security-panel"), testcase.visibleOnNewEvent,
       "Security panel is " + (testcase.visibleOnNewEvent ? "visible" : "hidden") +
       " after new request was added to the menu.");
 
@@ -70,20 +70,20 @@ add_task(function* () {
 
     ok(RequestsMenu.selectedItem.securityState,
        "Security state arrived.");
-    is(!!document.querySelector("#tab-5"), testcase.visibleOnSecurityInfo,
+    is(!!document.querySelector("#security-tab"), testcase.visibleOnSecurityInfo,
        "Security tab is " + (testcase.visibleOnSecurityInfo ? "visible" : "hidden") +
        " after security information arrived.");
-    is(!!document.querySelector("#panel-5"), testcase.visibleOnSecurityInfo,
+    is(!!document.querySelector("#security-panel"), testcase.visibleOnSecurityInfo,
       "Security panel is " + (testcase.visibleOnSecurityInfo? "visible" : "hidden") +
       " after security information arrived.");
 
     info("Waiting for request to complete.");
     yield onComplete;
 
-    is(!!document.querySelector("#tab-5"), testcase.visibleOnceComplete,
+    is(!!document.querySelector("#security-tab"), testcase.visibleOnceComplete,
        "Security tab is " + (testcase.visibleOnceComplete ? "visible" : "hidden") +
        " after request has been completed.");
-    is(!!document.querySelector("#panel-5"), testcase.visibleOnceComplete,
+    is(!!document.querySelector("#security-panel"), testcase.visibleOnceComplete,
       "Security panel is " + (testcase.visibleOnceComplete? "visible" : "hidden") +
       " after request has been completed.");
 

devtools/client/netmonitor/test/browser_net_security-warnings.js

@@ -38,10 +38,10 @@ add_task(function* () {
       document.querySelectorAll(".request-list-item")[0]);
     yield wait;
 
-    if (!document.querySelector("#tab-5.is-active")) {
+    if (!document.querySelector("#security-tab[aria-selected=true]")) {
       info("Selecting security tab.");
-      wait = waitForDOM(document, "#panel-5 .properties-view");
-      document.querySelector("#tab-5 a").click();
+      wait = waitForDOM(document, "#security-panel .properties-view");
+      document.querySelector("#security-tab").click();
       yield wait;
     }
 

devtools/client/netmonitor/test/browser_net_status-codes.js

@@ -145,12 +145,12 @@ add_task(function* () {
    * A function that tests "Headers" panel contains correct information.
    */
   function* testHeaders(data, index) {
-    let wait = waitForDOM(document, "#panel-0");
+    let wait = waitForDOM(document, "#headers-panel");
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
     yield wait;
 
-    let panel = document.querySelector("#panel-0");
+    let panel = document.querySelector("#headers-panel");
     let summaryValues = panel.querySelectorAll(".tabpanel-summary-value.textbox-input");
     let { method, uri, details: { status, statusText } } = data;
 
@@ -166,13 +166,13 @@ add_task(function* () {
    * A function that tests "Params" panel contains correct information.
    */
   function* testParams(data, index) {
-    let wait = waitForDOM(document, "#panel-2 .properties-view");
+    let wait = waitForDOM(document, "#params-panel .properties-view");
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
-    document.querySelector("#tab-2 a").click();
+    document.querySelector("#params-tab").click();
     yield wait;
 
-    let panel = document.querySelector("#panel-2");
+    let panel = document.querySelector("#params-panel");
     let statusParamValue = data.uri.split("=").pop();
     let statusParamShownValue = "\"" + statusParamValue + "\"";
     let treeSections = panel.querySelectorAll(".tree-section");

devtools/client/netmonitor/test/browser_net_streaming-response.js

@@ -40,10 +40,10 @@ add_task(function* () {
       });
   });
 
-  wait = waitForDOM(document, "#panel-3");
+  wait = waitForDOM(document, "#response-panel");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.getElementById("details-pane-toggle"));
-  document.querySelector("#tab-3 a").click();
+  document.querySelector("#response-tab").click();
   yield wait;
 
   RequestsMenu.selectedIndex = -1;
@@ -59,10 +59,11 @@ add_task(function* () {
   return teardown(monitor);
 
   function* selectIndexAndWaitForEditor(index) {
-    let editor = document.querySelector("#panel-3 .editor-mount iframe");
+    let editor = document.querySelector("#response-panel .editor-mount iframe");
     if (!editor) {
-      let waitDOM = waitForDOM(document, "#panel-3 .editor-mount iframe");
+      let waitDOM = waitForDOM(document, "#response-panel .editor-mount iframe");
       RequestsMenu.selectedIndex = index;
+      document.querySelector("#response-tab").click();
       [editor] = yield waitDOM;
       yield once(editor, "DOMContentLoaded");
     } else {
@@ -73,7 +74,7 @@ add_task(function* () {
   }
 
   function testEditorContent([ fmt, textRe ]) {
-    let editor = document.querySelector("#panel-3 .editor-mount iframe");
+    let editor = document.querySelector("#response-panel .editor-mount iframe");
     let text = editor.contentDocument
           .querySelector(".CodeMirror-line").textContent;
 

devtools/client/shared/components/tabs/tabbar.js

@@ -25,30 +25,38 @@ let Tabbar = createClass({
     children: PropTypes.object,
     onSelect: PropTypes.func,
     showAllTabsMenu: PropTypes.bool,
-    tabActive: PropTypes.number,
+    activeTabId: PropTypes.string,
     toolbox: PropTypes.object,
   },
 
   getDefaultProps: function () {
     return {
       showAllTabsMenu: false,
-      tabActive: 0,
     };
   },
 
   getInitialState: function () {
-    let { children } = this.props;
+    let { activeTabId, children = [] } = this.props;
+    let tabs = this.createTabs(children);
+    let activeTab = tabs.findIndex((tab, index) => tab.id === activeTabId);
+
     return {
-      tabs: children ? this.createTabs(children) : [],
-      activeTab: 0
+      activeTab: activeTab === -1 ? 0 : activeTab,
+      tabs,
     };
   },
 
   componentWillReceiveProps: function (nextProps) {
-    let { children } = nextProps;
+    let { activeTabId, children = [] } = nextProps;
+    let tabs = this.createTabs(children);
+    let activeTab = tabs.findIndex((tab, index) => tab.id === activeTabId);
 
-    if (children && children !== this.props.children) {
-      this.setState({ tabs: this.createTabs(children) });
+    if (activeTab !== this.state.activeTab ||
+        (children !== this.props.children)) {
+      this.setState({
+        activeTab: activeTab === -1 ? 0 : activeTab,
+        tabs,
+      });
     }
   },
 
@@ -57,7 +65,7 @@ let Tabbar = createClass({
       .filter((panel) => panel)
       .map((panel, index) =>
         Object.assign({}, children[index], {
-          id: index,
+          id: panel.props.id || index,
           panel,
           title: panel.props.title,
         })
@@ -137,7 +145,7 @@ let Tabbar = createClass({
   getTabIndex: function (tabId) {
     let tabIndex = -1;
     this.state.tabs.forEach((tab, index) => {
-      if (tab.id == tabId) {
+      if (tab.id === tabId) {
         tabIndex = index;
       }
     });
@@ -214,7 +222,7 @@ let Tabbar = createClass({
         Tabs({
           onAllTabsMenuClick: this.onAllTabsMenuClick,
           showAllTabsMenu: this.props.showAllTabsMenu,
-          tabActive: this.props.tabActive || this.state.activeTab,
+          tabActive: this.state.activeTab,
           onAfterChange: this.onTabChanged,
         },
           tabs

devtools/client/shared/components/tabs/tabs.js

@@ -105,8 +105,9 @@ define(function (require, exports, module) {
       if (typeof tabActive === "number") {
         let panels = children.filter((panel) => panel);
 
-        // Reset to index 0 if index larger than number of panels
-        tabActive = tabActive < panels.length ? tabActive : 0;
+        // Reset to index 0 if index overflows the range of panel array
+        tabActive = (tabActive < panels.length && tabActive >= 0) ?
+          tabActive : 0;
 
         let created = [...this.state.created];
         created[tabActive] = true;
@@ -224,17 +225,16 @@ define(function (require, exports, module) {
       }
 
       let tabs = this.props.children
-        .map(tab => {
-          return typeof tab === "function" ? tab() : tab;
-        }).filter(tab => {
-          return tab;
-        }).map((tab, index) => {
-          let ref = ("tab-menu-" + index);
+        .map((tab) => typeof tab === "function" ? tab() : tab)
+        .filter((tab) => tab)
+        .map((tab, index) => {
+          let id = tab.props.id;
+          let ref = "tab-menu-" + index;
           let title = tab.props.title;
           let tabClassName = tab.props.className;
           let isTabSelected = this.state.tabActive === index;
 
-          let classes = [
+          let className = [
             "tabs-menu-item",
             tabClassName,
             isTabSelected ? "is-active" : ""
@@ -247,15 +247,15 @@ define(function (require, exports, module) {
           // See also `onKeyDown()` event handler.
           return (
             DOM.li({
-              ref: ref,
+              className,
               key: index,
-              id: "tab-" + index,
-              className: classes,
+              ref,
               role: "presentation",
             },
               DOM.a({
-                tabIndex: this.state.tabActive === index ? 0 : -1,
-                "aria-controls": "panel-" + index,
+                id: id ? id + "-tab" : "tab-" + index,
+                tabIndex: isTabSelected ? 0 : -1,
+                "aria-controls": id ? id + "-panel" : "panel-" + index,
                 "aria-selected": isTabSelected,
                 role: "tab",
                 onClick: this.onClickTab.bind(this, index),
@@ -297,12 +297,11 @@ define(function (require, exports, module) {
       let selectedIndex = this.state.tabActive;
 
       let panels = this.props.children
-        .map(tab => {
-          return typeof tab === "function" ? tab() : tab;
-        }).filter(tab => {
-          return tab;
-        }).map((tab, index) => {
-          let selected = selectedIndex == index;
+        .map((tab) => typeof tab === "function" ? tab() : tab)
+        .filter((tab) => tab)
+        .map((tab, index) => {
+          let selected = selectedIndex === index;
+          let id = tab.props.id;
 
           // Use 'visibility:hidden' + 'width/height:0' for hiding
           // content of non-selected tab. It's faster (not sure why)
@@ -315,12 +314,12 @@ define(function (require, exports, module) {
 
           return (
             DOM.div({
+              id: id ? id + "-panel" : "panel-" + index,
               key: index,
-              id: "panel-" + index,
               style: style,
               className: "tab-panel-box",
               role: "tabpanel",
-              "aria-labelledby": "tab-" + index,
+              "aria-labelledby": id ? id + "-tab" : "tab-" + index,
             },
               (selected || this.state.created[index]) ? tab : null
             )
@@ -335,12 +334,10 @@ define(function (require, exports, module) {
     },
 
     render: function () {
-      let classNames = ["tabs", this.props.className].join(" ");
-
       return (
-        DOM.div({className: classNames},
+        DOM.div({ className: ["tabs", this.props.className].join(" ") },
           this.renderMenuItems(),
-          this.renderPanels()
+          this.renderPanels(),
         )
       );
     },