Bug 1398727 - Fix missing tab title on devtools.panels.elements.createSidebarPane tabs. draft
authorLuca Greco <lgreco@mozilla.com>
Sat, 09 Sep 2017 18:23:52 +0200
changeset 662323 43c1a7c2d56944fb7e252a6f5879178ef34e3915
parent 661929 2a9cffb19ab58a7875aee5492c565c549c037511
child 662325 9f67381001cb2bd79202600b7f100c14a2e38d54
push id79026
push userluca.greco@alcacoop.it
push dateMon, 11 Sep 2017 11:09:40 +0000
bugs1398727
milestone57.0a1
Bug 1398727 - Fix missing tab title on devtools.panels.elements.createSidebarPane tabs. MozReview-Commit-ID: G5F9uEC6izs
browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js
devtools/client/inspector/extensions/extension-sidebar.js
devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
--- a/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js
+++ b/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js
@@ -2,16 +2,21 @@
 /* vim: set sts=2 sw=2 et tw=80: */
 "use strict";
 
 XPCOMUtils.defineLazyModuleGetter(this, "gDevTools",
                                   "resource://devtools/client/framework/gDevTools.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "devtools",
                                   "resource://devtools/shared/Loader.jsm");
 
+function isActiveSidebarTabTitle(inspector, expectedTabTitle, message) {
+  const actualTabTitle = inspector.panelDoc.querySelector(".tabs-menu-item.is-active").innerText;
+  is(actualTabTitle, expectedTabTitle, message);
+}
+
 add_task(async function test_devtools_panels_elements_sidebar() {
   let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, "http://mochi.test:8888/");
 
   async function devtools_page() {
     const sidebar1 = await browser.devtools.panels.elements.createSidebarPane("Test Sidebar 1");
     const sidebar2 = await browser.devtools.panels.elements.createSidebarPane("Test Sidebar 2");
 
     const onShownListener = (event, sidebarInstance) => {
@@ -65,16 +70,19 @@ add_task(async function test_devtools_pa
   const inspector = await toolbox.getPanel("inspector");
 
   inspector.sidebar.show(sidebarIds[0]);
 
   const shownSidebarInstance = await extension.awaitMessage("devtools_sidebar_shown");
 
   is(shownSidebarInstance, "sidebar1", "Got the shown event on the first extension sidebar");
 
+  isActiveSidebarTabTitle(inspector, "Test Sidebar 1",
+                          "Got the expected title on the active sidebar tab");
+
   const sidebarPanel1 = inspector.sidebar.getTabPanel(sidebarIds[0]);
 
   ok(sidebarPanel1, "Got a rendered sidebar panel for the first registered extension sidebar");
 
   is(sidebarPanel1.querySelectorAll("table.treeTable").length, 1,
      "The first sidebar panel contains a rendered TreeView component");
 
   is(sidebarPanel1.querySelectorAll("table.treeTable .stringCell").length, 1,
@@ -89,16 +97,19 @@ add_task(async function test_devtools_pa
   inspector.sidebar.show(sidebarIds[1]);
 
   const shownSidebarInstance2 = await extension.awaitMessage("devtools_sidebar_shown");
   const hiddenSidebarInstance1 = await extension.awaitMessage("devtools_sidebar_hidden");
 
   is(shownSidebarInstance2, "sidebar2", "Got the shown event on the second extension sidebar");
   is(hiddenSidebarInstance1, "sidebar1", "Got the hidden event on the first extension sidebar");
 
+  isActiveSidebarTabTitle(inspector, "Test Sidebar 2",
+                          "Got the expected title on the active sidebar tab");
+
   const sidebarPanel2 = inspector.sidebar.getTabPanel(sidebarIds[1]);
 
   ok(sidebarPanel2, "Got a rendered sidebar panel for the second registered extension sidebar");
 
   is(sidebarPanel2.querySelectorAll("table.treeTable").length, 1,
      "The second sidebar panel contains a rendered TreeView component");
 
   is(sidebarPanel2.querySelectorAll("table.treeTable .numberCell").length, 1,
--- a/devtools/client/inspector/extensions/extension-sidebar.js
+++ b/devtools/client/inspector/extensions/extension-sidebar.js
@@ -47,16 +47,17 @@ class ExtensionSidebar {
   /**
    * Lazily create a React ExtensionSidebarComponent wrapped into a Redux Provider.
    */
   get provider() {
     if (!this._provider) {
       this._provider = createElement(Provider, {
         store: this.store,
         key: this.id,
+        title: this.title,
       }, ExtensionSidebarComponent({
         id: this.id,
       }));
     }
 
     return this._provider;
   }
 
--- a/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
+++ b/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
@@ -17,16 +17,18 @@ add_task(async function () {
 
   const sidebar = await waitSidebarCreated;
 
   is(sidebar, inspector.getPanel(sidebarId),
      "Got an extension sidebar instance equal to the one saved in the inspector");
 
   is(sidebar.title, sidebarTitle,
      "Got the expected title in the extension sidebar instance");
+  is(sidebar.provider.props.title, sidebarTitle,
+     "Got the expeted title in the provider props");
 
   let inspectorStoreState = inspector.store.getState();
 
   ok("extensionsSidebar" in inspectorStoreState,
      "Got the extensionsSidebar sub-state in the inspector Redux store");
 
   Assert.deepEqual(inspectorStoreState.extensionsSidebar, {},
                    "The extensionsSidebar should be initially empty");