--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -127,16 +127,17 @@ function Inspector(toolbox) {
this._handleRejectionIfNotDestroyed = this._handleRejectionIfNotDestroyed.bind(this);
this._onBeforeNavigate = this._onBeforeNavigate.bind(this);
this._onContextMenu = this._onContextMenu.bind(this);
this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
this._updateDebuggerPausedWarning = this._updateDebuggerPausedWarning.bind(this);
this.onDetached = this.onDetached.bind(this);
+ this.onHostChanged = this.onHostChanged.bind(this);
this.onMarkupLoaded = this.onMarkupLoaded.bind(this);
this.onNewSelection = this.onNewSelection.bind(this);
this.onNewRoot = this.onNewRoot.bind(this);
this.onPanelWindowResize = this.onPanelWindowResize.bind(this);
this.onShowBoxModelHighlighterForNode =
this.onShowBoxModelHighlighterForNode.bind(this);
this.onSidebarHidden = this.onSidebarHidden.bind(this);
this.onSidebarResized = this.onSidebarResized.bind(this);
@@ -216,17 +217,17 @@ Inspector.prototype = {
console.error(e);
}
},
_deferredOpen: async function(defaultSelection) {
this.breadcrumbs = new HTMLBreadcrumbs(this);
this.walker.on("new-root", this.onNewRoot);
-
+ this.toolbox.on("host-changed", this.onHostChanged);
this.selection.on("new-node-front", this.onNewSelection);
this.selection.on("detached-front", this.onDetached);
if (this.target.isLocalTab) {
this.target.on("thread-paused", this._updateDebuggerPausedWarning);
this.target.on("thread-resumed", this._updateDebuggerPausedWarning);
this.toolbox.on("select", this._updateDebuggerPausedWarning);
this._updateDebuggerPausedWarning();
@@ -623,102 +624,112 @@ Inspector.prototype = {
this.is3PaneModeEnabled = !this.is3PaneModeEnabled;
Services.prefs.setBoolPref(THREE_PANE_ENABLED_PREF, this.is3PaneModeEnabled);
await this.setupToolbar();
await this.addRuleView();
},
/**
+ * Sets the inspector sidebar split box state. Shows the splitter inside the sidebar
+ * split box, specifies the end panel control and resizes the split box width depending
+ * on the width of the toolbox.
+ */
+ setSidebarSplitBoxState() {
+ const toolboxWidth =
+ this.panelDoc.getElementById("inspector-splitter-box").clientWidth;
+
+ // Get the inspector sidebar's (right panel in horizontal mode or bottom panel in
+ // vertical mode) width.
+ const sidebarWidth = this.splitBox.state.width;
+ // This variable represents the width of the right panel in horizontal mode or
+ // bottom-right panel in vertical mode width in 3 pane mode.
+ let sidebarSplitboxWidth;
+
+ if (this.useLandscapeMode()) {
+ // Whether or not doubling the inspector sidebar's (right panel in horizontal mode
+ // or bottom panel in vertical mode) width will be bigger than half of the
+ // toolbox's width.
+ const canDoubleSidebarWidth = (sidebarWidth * 2) < (toolboxWidth / 2);
+
+ // Resize the main split box's end panel that contains the middle and right panel.
+ // Attempts to resize the main split box's end panel to be double the size of the
+ // existing sidebar's width when switching to 3 pane mode. However, if the middle
+ // and right panel's width together is greater than half of the toolbox's width,
+ // split all 3 panels to be equally sized by resizing the end panel to be 2/3 of
+ // the current toolbox's width.
+ this.splitBox.setState({
+ width: canDoubleSidebarWidth ? sidebarWidth * 2 : toolboxWidth * 2 / 3,
+ });
+
+ // In landscape/horizontal mode, set the right panel back to its original
+ // inspector sidebar width if we can double the sidebar width. Otherwise, set
+ // the width of the right panel to be 1/3 of the toolbox's width since all 3
+ // panels will be equally sized.
+ sidebarSplitboxWidth = canDoubleSidebarWidth ? sidebarWidth : toolboxWidth / 3;
+ } else {
+ // In portrait/vertical mode, set the bottom-right panel to be 1/2 of the
+ // toolbox's width.
+ sidebarSplitboxWidth = toolboxWidth / 2;
+ }
+
+ // Show the splitter inside the sidebar split box. Sets the width of the inspector
+ // sidebar and specify that the end (right in horizontal or bottom-right in
+ // vertical) panel of the sidebar split box should be controlled when resizing.
+ this.sidebarSplitBox.setState({
+ endPanelControl: true,
+ splitterSize: 1,
+ width: sidebarSplitboxWidth,
+ });
+ },
+
+ /**
* Adds the rule view to the middle (in landscape/horizontal mode) or bottom-left panel
* (in portrait/vertical mode) or inspector sidebar depending on whether or not it is 3
* pane mode. The default tab specifies whether or not the rule view should be selected.
* The defaultTab defaults to the rule view when reverting to the 2 pane mode and the
* rule view is being merged back into the inspector sidebar from middle/bottom-left
* panel. Otherwise, we specify the default tab when handling the sidebar setup.
*
* @params {String} defaultTab
* Thie id of the default tab for the sidebar.
*/
async addRuleView(defaultTab = "ruleview") {
const ruleViewSidebar = this.sidebarSplitBox.startPanelContainer;
- const toolboxWidth =
- this.panelDoc.getElementById("inspector-splitter-box").clientWidth;
if (this.is3PaneModeEnabled) {
// Convert to 3 pane mode by removing the rule view from the inspector sidebar
// and adding the rule view to the middle (in landscape/horizontal mode) or
// bottom-left (in portrait/vertical mode) panel.
-
ruleViewSidebar.style.display = "block";
- // Get the inspector sidebar's (right panel in horizontal mode or bottom panel in
- // vertical mode) width.
- const sidebarWidth = this.splitBox.state.width;
- // This variable represents the width of the right panel in horizontal mode or
- // bottom-right panel in vertical mode width in 3 pane mode.
- let sidebarSplitboxWidth;
-
- if (this.useLandscapeMode()) {
- // Whether or not doubling the inspector sidebar's (right panel in horizontal mode
- // or bottom panel in vertical mode) width will be bigger than half of the
- // toolbox's width.
- const canDoubleSidebarWidth = (sidebarWidth * 2) < (toolboxWidth / 2);
-
- // Resize the main split box's end panel that contains the middle and right panel.
- // Attempts to resize the main split box's end panel to be double the size of the
- // existing sidebar's width when switching to 3 pane mode. However, if the middle
- // and right panel's width together is greater than half of the toolbox's width,
- // split all 3 panels to be equally sized by resizing the end panel to be 2/3 of
- // the current toolbox's width.
- this.splitBox.setState({
- width: canDoubleSidebarWidth ? sidebarWidth * 2 : toolboxWidth * 2 / 3,
- });
-
- // In landscape/horizontal mode, set the right panel back to its original
- // inspector sidebar width if we can double the sidebar width. Otherwise, set
- // the width of the right panel to be 1/3 of the toolbox's width since all 3
- // panels will be equally sized.
- sidebarSplitboxWidth = canDoubleSidebarWidth ? sidebarWidth : toolboxWidth / 3;
- } else {
- // In portrait/vertical mode, set the bottom-right panel to be 1/2 of the
- // toolbox's width.
- sidebarSplitboxWidth = toolboxWidth / 2;
- }
-
- // Show the splitter inside the sidebar split box. Sets the width of the inspector
- // sidebar and specify that the end (right in horizontal or bottom-right in
- // vertical) panel of the sidebar split box should be controlled when resizing.
- this.sidebarSplitBox.setState({
- endPanelControl: true,
- splitterSize: 1,
- width: sidebarSplitboxWidth,
- });
+ this.setSidebarSplitBoxState();
// Force the rule view panel creation by calling getPanel
this.getPanel("ruleview");
await this.sidebar.removeTab("ruleview");
this.ruleViewSideBar.addExistingTab(
"ruleview",
INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
true);
this.ruleViewSideBar.show("ruleview");
} else {
// Removes the rule view from the 3 pane mode and adds the rule view to the main
// inspector sidebar.
-
ruleViewSidebar.style.display = "none";
// Set the width of the split box (right panel in horziontal mode and bottom panel
// in vertical mode) to be the width of the inspector sidebar.
+ const splitterBox = this.panelDoc.getElementById("inspector-splitter-box");
this.splitBox.setState({
- width: this.useLandscapeMode() ? this.sidebarSplitBox.state.width : toolboxWidth,
+ width: this.useLandscapeMode() ?
+ this.sidebarSplitBox.state.width : splitterBox.clientWidth,
});
// Hide the splitter to prevent any drag events in the sidebar split box and
// specify that the end (right panel in horziontal mode or bottom panel in vertical
// mode) panel should be uncontrolled when resizing.
this.sidebarSplitBox.setState({
endPanelControl: false,
splitterSize: 0,
@@ -1161,16 +1172,28 @@ Inspector.prototype = {
selection.isElementNode() &&
!selection.isPseudoElementNode() &&
!selection.isAnonymousNode() &&
!invalidTagNames.includes(
selection.nodeFront.nodeName.toLowerCase());
},
/**
+ * Handler for the "host-changed" event from the toolbox. Resets the inspector
+ * sidebar sizes when the toolbox host type changes.
+ */
+ onHostChanged: function() {
+ if (!this.is3PaneModeEnabled) {
+ return;
+ }
+
+ this.setSidebarSplitBoxState();
+ },
+
+ /**
* When a new node is selected.
*/
onNewSelection: function(value, reason) {
if (reason === "selection-destroy") {
return;
}
// Wait for all the known tools to finish updating and then let the