Bug 1305979 - Test for addSidebarTab API. r=jdescottes
authorJan Odvarko <odvarko@gmail.com>
Mon, 03 Oct 2016 18:14:14 +0200
changeset 359169 5515701bca4012993bc468fb8dfe3719c1f97db5
parent 359168 13100266a43467be705fe91a6e9affd63b75a118
child 359170 b26e668306fba754bba594572ac721bf5b0990ef
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-beta@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1305979
milestone52.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 1305979 - Test for addSidebarTab API. r=jdescottes
devtools/client/inspector/test/browser.ini
devtools/client/inspector/test/browser_inspector_addSidebarTab.js
devtools/client/shared/components/tabs/tabbar.js
--- a/devtools/client/inspector/test/browser.ini
+++ b/devtools/client/inspector/test/browser.ini
@@ -40,16 +40,17 @@ support-files =
   !/devtools/client/commandline/test/helpers.js
   !/devtools/client/framework/test/shared-head.js
   !/devtools/client/shared/test/test-actor.js
   !/devtools/client/shared/test/test-actor-registry.js
 
 [browser_inspector_addNode_01.js]
 [browser_inspector_addNode_02.js]
 [browser_inspector_addNode_03.js]
+[browser_inspector_addSidebarTab.js]
 [browser_inspector_breadcrumbs.js]
 [browser_inspector_breadcrumbs_highlight_hover.js]
 [browser_inspector_breadcrumbs_keybinding.js]
 [browser_inspector_breadcrumbs_keyboard_trap.js]
 skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
 [browser_inspector_breadcrumbs_mutations.js]
 [browser_inspector_breadcrumbs_namespaced.js]
 [browser_inspector_breadcrumbs_visibility.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_addSidebarTab.js
@@ -0,0 +1,62 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URI = "data:text/html;charset=UTF-8," +
+  "<h1>browser_inspector_addtabbar.js</h1>";
+
+const CONTENT_TEXT = "Hello World!";
+
+/**
+ * Verify InspectorPanel.addSidebarTab() API that can be consumed
+ * by DevTools extensions as well as DevTools code base.
+ */
+add_task(function* () {
+  let { inspector } = yield openInspectorForURL(TEST_URI);
+
+  const React = inspector.React;
+  const { div } = React.DOM;
+
+  info("Adding custom panel.");
+
+  // Define custom side-panel.
+  let tabPanel = React.createFactory(React.createClass({
+    displayName: "myTabPanel",
+    render: function () {
+      return (
+        div({className: "my-tab-panel"},
+          CONTENT_TEXT
+        )
+      );
+    }
+  }));
+
+  // Append custom panel (tab) into the Inspector panel and
+  // make sure it's selected by default (the last arg = true).
+  inspector.addSidebarTab("myPanel", "My Panel", tabPanel, true);
+  is(inspector.sidebar.getCurrentTabID(), "myPanel",
+     "My Panel is selected by default");
+
+  // Define another custom side-panel.
+  tabPanel = React.createFactory(React.createClass({
+    displayName: "myTabPanel2",
+    render: function () {
+      return (
+        div({className: "my-tab-panel2"},
+          "Another Content"
+        )
+      );
+    }
+  }));
+
+  // Append second panel, but don't select it by default.
+  inspector.addSidebarTab("myPanel", "My Panel", tabPanel, false);
+  is(inspector.sidebar.getCurrentTabID(), "myPanel",
+     "My Panel is selected by default");
+
+  // Check the the panel content is properly rendered.
+  let tabPanelNode = inspector.panelDoc.querySelector(".my-tab-panel");
+  is(tabPanelNode.textContent, CONTENT_TEXT,
+    "Side panel content has been rendered.");
+});
--- a/devtools/client/shared/components/tabs/tabbar.js
+++ b/devtools/client/shared/components/tabs/tabbar.js
@@ -49,17 +49,21 @@ let Tabbar = createClass({
     let newState = Object.assign({}, this.state, {
       tabs: tabs,
     });
 
     if (selected) {
       newState.activeTab = tabs.length - 1;
     }
 
-    this.setState(newState);
+    this.setState(newState, () => {
+      if (this.props.onSelect && selected) {
+        this.props.onSelect(id);
+      }
+    });
   },
 
   toggleTab: function (tabId, isVisible) {
     let index = this.getTabIndex(tabId);
     if (index < 0) {
       return;
     }