Bug 1398727 - Fix missing tab title on devtools.panels.elements.createSidebarPane tabs.
MozReview-Commit-ID: G5F9uEC6izs
--- 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");