commit d2b846924263976026b7255043416bea926a2871
parent 6d1575b857f299845811ba3950a8ed36810686b1
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Wed, 8 Oct 2025 08:35:55 +0000
Bug 1992975 - [devtools] Use proper private fields in ToolSidebar. r=devtools-reviewers,ochameau.
This highlighted that one of the constructor parameter, as well as a couple of
properties weren't actually used, so remove them.
Differential Revision: https://phabricator.services.mozilla.com/D267778
Diffstat:
3 files changed, 65 insertions(+), 60 deletions(-)
diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js
@@ -1304,11 +1304,11 @@ class Inspector extends EventEmitter {
},
};
- this.sidebar = new ToolSidebar(sidebar, this, "inspector", options);
+ this.sidebar = new ToolSidebar(sidebar, this, options);
this.sidebar.on("select", this.onSidebarSelect);
const ruleSideBar = this.panelDoc.getElementById("inspector-rules-sidebar");
- this.ruleViewSideBar = new ToolSidebar(ruleSideBar, this, "inspector", {
+ this.ruleViewSideBar = new ToolSidebar(ruleSideBar, this, {
hideTabstripe: true,
});
diff --git a/devtools/client/inspector/toolsidebar.js b/devtools/client/inspector/toolsidebar.js
@@ -7,73 +7,79 @@
const EventEmitter = require("resource://devtools/shared/event-emitter.js");
class ToolSidebar extends EventEmitter {
- constructor(tabbox, panel, uid, options = {}) {
+ constructor(tabbox, panel, options = {}) {
super();
- this._tabbox = tabbox;
- this._uid = uid;
- this._panelDoc = this._tabbox.ownerDocument;
- this._toolPanel = panel;
- this._options = options;
+ this.#tabbox = tabbox;
+ this.#panelDoc = this.#tabbox.ownerDocument;
+ this.#toolPanel = panel;
+ this.#options = options;
if (!options.disableTelemetry) {
- this._telemetry = this._toolPanel.telemetry;
+ this.#telemetry = this.#toolPanel.telemetry;
}
- this._tabs = [];
-
- if (this._options.hideTabstripe) {
- this._tabbox.setAttribute("hidetabs", "true");
+ if (this.#options.hideTabstripe) {
+ this.#tabbox.setAttribute("hidetabs", "true");
}
this.render();
- this._toolPanel.emit("sidebar-created", this);
+ this.#toolPanel.emit("sidebar-created", this);
}
TABPANEL_ID_PREFIX = "sidebar-panel-";
+ #currentTool;
+ #destroyed;
+ #options;
+ #panelDoc;
+ #tabbar;
+ #tabbox;
+ #telemetry;
+ #toolNames;
+ #toolPanel;
// React
get React() {
- return this._toolPanel.React;
+ return this.#toolPanel.React;
}
get ReactDOM() {
- return this._toolPanel.ReactDOM;
+ return this.#toolPanel.ReactDOM;
}
get browserRequire() {
- return this._toolPanel.browserRequire;
+ return this.#toolPanel.browserRequire;
}
get InspectorTabPanel() {
- return this._toolPanel.InspectorTabPanel;
+ return this.#toolPanel.InspectorTabPanel;
}
get TabBar() {
- return this._toolPanel.TabBar;
+ return this.#toolPanel.TabBar;
}
// Rendering
render() {
const sidebar = this.TabBar({
- menuDocument: this._toolPanel.toolbox.doc,
+ menuDocument: this.#toolPanel.toolbox.doc,
showAllTabsMenu: true,
- allTabsMenuButtonTooltip: this._options.allTabsMenuButtonTooltip,
- sidebarToggleButton: this._options.sidebarToggleButton,
+ allTabsMenuButtonTooltip: this.#options.allTabsMenuButtonTooltip,
+ sidebarToggleButton: this.#options.sidebarToggleButton,
onSelect: this.handleSelectionChange.bind(this),
});
- this._tabbar = this.ReactDOM.render(sidebar, this._tabbox);
+ this.#tabbar = this.ReactDOM.render(sidebar, this.#tabbox);
}
/**
* Adds all the queued tabs.
*/
addAllQueuedTabs() {
- this._tabbar.addAllQueuedTabs();
+ this.#tabbar.addAllQueuedTabs();
}
/**
@@ -86,7 +92,7 @@ class ToolSidebar extends EventEmitter {
* @param {Number} index the position where the tab should be inserted
*/
addTab(id, title, panel, selected, index) {
- this._tabbar.addTab(id, title, selected, panel, null, index);
+ this.#tabbar.addTab(id, title, selected, panel, null, index);
this.emit("new-tab-registered", id);
}
@@ -120,7 +126,7 @@ class ToolSidebar extends EventEmitter {
* @param {Number} index the position where the tab should be inserted
*/
queueTab(id, title, panel, selected, index) {
- this._tabbar.queueTab(id, title, selected, panel, null, index);
+ this.#tabbar.queueTab(id, title, selected, panel, null, index);
this.emit("new-tab-registered", id);
}
@@ -151,7 +157,7 @@ class ToolSidebar extends EventEmitter {
* got created.
*/
removeTab(tabId) {
- this._tabbar.removeTab(tabId);
+ this.#tabbar.removeTab(tabId);
this.emit("tab-unregistered", tabId);
}
@@ -162,21 +168,21 @@ class ToolSidebar extends EventEmitter {
* @param {String} id The ID of the tab to be hidden.
*/
toggleTab(isVisible, id) {
- this._tabbar.toggleTab(id, isVisible);
+ this.#tabbar.toggleTab(id, isVisible);
}
/**
* Select a specific tab.
*/
select(id) {
- this._tabbar.select(id);
+ this.#tabbar.select(id);
}
/**
* Return the id of the selected tab.
*/
getCurrentTabID() {
- return this._currentTool;
+ return this.#currentTool;
}
/**
@@ -187,7 +193,7 @@ class ToolSidebar extends EventEmitter {
getTabPanel(id) {
// Search with and without the ID prefix as there might have been existing
// tabpanels by the time the sidebar got created
- return this._panelDoc.querySelector(
+ return this.#panelDoc.querySelector(
"#" + this.TABPANEL_ID_PREFIX + id + ", #" + id
);
}
@@ -196,20 +202,20 @@ class ToolSidebar extends EventEmitter {
* Event handler.
*/
handleSelectionChange(id) {
- if (this._destroyed) {
+ if (this.#destroyed) {
return;
}
- const previousTool = this._currentTool;
+ const previousTool = this.#currentTool;
if (previousTool) {
this.emit(previousTool + "-unselected");
}
- this._currentTool = id;
+ this.#currentTool = id;
this.updateTelemetryOnChange(id, previousTool);
- this.emit(this._currentTool + "-selected");
- this.emit("select", this._currentTool);
+ this.emit(this.#currentTool + "-selected");
+ this.emit("select", this.#currentTool);
}
/**
@@ -221,7 +227,7 @@ class ToolSidebar extends EventEmitter {
* id of the previously selected tool.
*/
updateTelemetryOnChange(currentToolId, previousToolId) {
- if (currentToolId === previousToolId || !this._telemetry) {
+ if (currentToolId === previousToolId || !this.#telemetry) {
// Skip telemetry if the tool id did not change or telemetry is unavailable.
return;
}
@@ -230,15 +236,15 @@ class ToolSidebar extends EventEmitter {
if (previousToolId) {
previousToolId = this.getTelemetryPanelNameOrOther(previousToolId);
- this._telemetry.toolClosed(previousToolId, this);
+ this.#telemetry.toolClosed(previousToolId, this);
- this._telemetry.recordEvent("sidepanel_changed", "inspector", null, {
+ this.#telemetry.recordEvent("sidepanel_changed", "inspector", null, {
oldpanel: previousToolId,
newpanel: currentToolId,
- os: this._telemetry.osNameAndVersion,
+ os: this.#telemetry.osNameAndVersion,
});
}
- this._telemetry.toolOpened(currentToolId, this);
+ this.#telemetry.toolOpened(currentToolId, this);
}
/**
@@ -251,17 +257,17 @@ class ToolSidebar extends EventEmitter {
* The panel id we would like to process.
*/
getTelemetryPanelNameOrOther(id) {
- if (!this._toolNames) {
+ if (!this.#toolNames) {
// Get all built in tool ids. We identify third party tool ids by checking
// for a "-", which shows it originates from an addon.
- const ids = this._tabbar.state.tabs.map(({ id: toolId }) => {
+ const ids = this.#tabbar.state.tabs.map(({ id: toolId }) => {
return toolId.includes("-") ? "other" : toolId;
});
- this._toolNames = new Set(ids);
+ this.#toolNames = new Set(ids);
}
- if (!this._toolNames.has(id)) {
+ if (!this.#toolNames.has(id)) {
return "other";
}
@@ -275,7 +281,7 @@ class ToolSidebar extends EventEmitter {
* The sidebar tab id to select.
*/
show(id) {
- this._tabbox.hidden = false;
+ this.#tabbox.hidden = false;
// If an id is given, select the corresponding sidebar tab.
if (id) {
@@ -289,7 +295,7 @@ class ToolSidebar extends EventEmitter {
* Show the sidebar.
*/
hide() {
- this._tabbox.hidden = true;
+ this.#tabbox.hidden = true;
this.emit("hide");
}
@@ -298,26 +304,25 @@ class ToolSidebar extends EventEmitter {
* Clean-up.
*/
destroy() {
- if (this._destroyed) {
+ if (this.#destroyed) {
return;
}
- this._destroyed = true;
+ this.#destroyed = true;
this.emit("destroy");
- if (this._currentTool && this._telemetry) {
- this._telemetry.toolClosed(this._currentTool, this);
+ if (this.#currentTool && this.#telemetry) {
+ this.#telemetry.toolClosed(this.#currentTool, this);
}
- this._toolPanel.emit("sidebar-destroyed", this);
+ this.#toolPanel.emit("sidebar-destroyed", this);
- this.ReactDOM.unmountComponentAtNode(this._tabbox);
+ this.ReactDOM.unmountComponentAtNode(this.#tabbox);
- this._tabs = null;
- this._tabbox = null;
- this._telemetry = null;
- this._panelDoc = null;
- this._toolPanel = null;
+ this.#tabbox = null;
+ this.#telemetry = null;
+ this.#panelDoc = null;
+ this.#toolPanel = null;
}
}
diff --git a/devtools/docs/user/devtoolsapi/index.rst b/devtools/docs/user/devtoolsapi/index.rst
@@ -691,7 +691,7 @@ If the loaded document exposes a ``window.setPanel(ToolPanel)`` function, the si
* - Method
- Description
- * - ``new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)``
+ * - ``new ToolSidebar(xul:tabbox, ToolPanel, showTabstripe=true)``
- ToolSidebar constructor
* - ``void addTab(tabId, url, selected=false)``
@@ -791,7 +791,7 @@ Add a sidebar to an existing tool:
.. code-block:: JavaScript
- let sidebar = new ToolSidebar(xulTabbox, toolPanel, "toolId");
+ let sidebar = new ToolSidebar(xulTabbox, toolPanel);
sidebar.addTab("tab1", "chrome://browser/content/.../tab1.xhtml", true);
sidebar.addTab("tab2", "chrome://browser/content/.../tab2.xhtml", false);
sidebar.show();
