Skip to content


Browse files Browse the repository at this point in the history
Web Inspector: Resizing Debugger Resource/Scope Chain column doesn't …
…survive the change of tab

Reviewed by Devin Rousso.

The width of the details sidebar for the Sources tab resets to its minimum width when navigating
to a tab without sidebar panels (Console, Network) or to a tab with a collapsed details sidebar (Graphics, Storage).

Navigating between tabs with visible details sidebar (Sources, Elements) doesn't reset the sidebar width.


Adding and removing sidebar panels triggers `SingleSidebar._recalculateWidth(newWidth = this.width)`
without passing `newWidth` which therefore uses the default `this.width`.

While the sidebar is collapsed, `this.width` is zero (the sidebar DOM element's `offsetWidth`).

These calls clobber any previously set `width` on the sidebar with zero.
But there's a clamp function in `SingleSidebar._recalculateWidth()` which picks
the `SingleSidebar.minimumWidth` for the sidebar. This resets the sidebar width.

Detailed explantion:

--- Symptom 1

When a tab without visible sidebar panels is selected, the details sidebar gets collapsed:
- [TabBrowser._showDetailsSidebarPanelsForTabContentView():L471-L473](
- [ContentBrowserTabContentView.showDetailsSidebarPanels():L195-L196](

--- Symptom 2

The `width` getter for `SingleSidebar` returns it from the corresponding DOM node:
get width()
    return this.element.offsetWidth;

The `width` setter calls `SingleSidebar._recalculateWidth(newWidth = this.width)`:


That default function parameter, `newWidth = this.width`, is the source of the issue.

--- Explanation of issue:

When the sidebar is collapsed, the layout step is skipped in `SingleSidebar._recalculateWidth()`:

if (this.collapsed)

if (this._navigationBar)

if (this.selectedSidebarPanel)

That means that, even though, there's a non-zero `newWidth` on the element,
the `.collapsed` CSS class on the sidebar makes its `offsetWidth` equal to zero.

When sidebar panels are added in `ContentBrowserTabContentView.showDetailsSidebarPanels()`,
they trigger layout via this call chain:

-> `SingleSidebar.didInsertSidebarPanel()`
-> `SingleSidebar._recalculateWidth(newWidth = this.width)`

But in this call there is no value for `newWidth`, so it uses the default function paramter
which calls the `SingleSidebar.width` getter that returns zero (the DOM node's actual `offsetWidth`).

Luckily, there's also an immutable minimum width on the sidebar styles set by `SingleSidebar._recalculateWidth():

``` = `${newWidth}px`; // this is 0px = `${this.minimumWidth}px`; // this is 250px

This allows the sidebar content to be shown but at a different size than the one set when resizing the sidebar.

--- Solution:

Prevent calling `SingleSidebar._recalculateWidth()` when sidebar panels are inserted or removed
while the sidebar is collapsed. This avoids overwriting the element's inline style `width` to zero.

* Source/WebInspectorUI/UserInterface/Views/SingleSidebar.js:

Canonical link:
  • Loading branch information
rcaliman-apple committed Jun 14, 2023
1 parent e553d77 commit 8303e81
Showing 1 changed file with 8 additions and 0 deletions.
8 changes: 8 additions & 0 deletions Source/WebInspectorUI/UserInterface/Views/SingleSidebar.js
Expand Up @@ -89,6 +89,9 @@ WI.SingleSidebar = class SingleSidebar extends WI.Sidebar
this._navigationBar.insertNavigationItem(sidebarPanel.navigationItem, index);

if (this.collapsed)


Expand All @@ -100,6 +103,9 @@ WI.SingleSidebar = class SingleSidebar extends WI.Sidebar

if (this.collapsed)


Expand Down Expand Up @@ -174,6 +180,8 @@ WI.SingleSidebar = class SingleSidebar extends WI.Sidebar

_recalculateWidth(newWidth = this.width)

// Need to add 1 because of the 1px border-inline-start or border-inline-end.
newWidth = Math.ceil(Number.constrain(newWidth, this.minimumWidth + 1, this.maximumWidth)); = `${newWidth}px`;
Expand Down

0 comments on commit 8303e81

Please sign in to comment.