Closed Bug 1582866 Opened 4 years ago Closed 4 years ago

Inspector Extension sidebar doesn't overflow


(DevTools :: Inspector, defect, P3)



(firefox71 verified)

Firefox 71
Tracking Status
firefox71 --- verified


(Reporter: nchevobbe, Assigned: nchevobbe)



(2 files)

Steps to reproduce

  1. Download the attachment and unzip it
  2. In Firefox, open a about:debugging tab
  3. Chose "this Nightly" tab on the left
  4. Click on the "Load temporary addon" button, and select a file inside the unzip folder
  5. Navigate to a regular webpage (e.g.
  6. Open the inspector
  7. On the right side, select the DOM sidepanel

Expected results

The object is displayed an I can scroll to see properties below the fold

Actual results

The sidebar doesn't overflow

The following makes it work:

/* inspector.css | chrome://devtools/skin/inspector.css */
.inspector-tabpanel {
  overflow: auto;

but i'm afraid it would cause unwanted behaviors in other panels.
I don't see any specific classname being applied to the extension tab, maybe we could add one?

Flags: needinfo?(pbrosset)
Flags: needinfo?(lgreco)

Thanks Nicolas. I can reproduce this too. I'm not familiar enough with this to reply. So let me forward this to Gabriel.

Flags: needinfo?(pbrosset) → needinfo?(gl)

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

I don't see any specific classname being applied to the extension tab, maybe we could add one?

The extension sidebars that embeds an extension page do have the class name inspector-extension-sidebar-page.

As a side note, that react component is also setting a couple of styling properties in the render method (currently width, height padding and margin).

Flags: needinfo?(lgreco)

I just looked the attached test extension and I noticed that it does embed a variables view in the sidebar (and not an extension page as I assumed in Comment 4).

The shared container for all the devtools inspector sidebar types that an extension can register is defined by devtools/client/inspector/extensions/components/ExtensionSidebar.js and the class name of that container element is "extension-sidebar" (and it also have the class name "inspector-tabpanel"):

This component has also a style property set from the React render method](, and so the following diff should be one way to apply on this frame the css styling fixes mentioned in comment 0:

diff --git a/devtools/client/inspector/extensions/components/ExtensionSidebar.js b/devtools/client/inspector/extensions/components/ExtensionSidebar.js
--- a/devtools/client/inspector/extensions/components/ExtensionSidebar.js
+++ b/devtools/client/inspector/extensions/components/ExtensionSidebar.js
@@ -91,6 +91,7 @@ class ExtensionSidebar extends PureCompo
         style: {
           height: "100%",
+          overflow: "auto",

Thanks a lot Luca, I don't know how I missed it.

Flags: needinfo?(gl)
Pushed by
Make the inspector extension sidebar overflow. r=rpl.
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 71
Flags: qe-verify+

Managed to reproduce with 71.0a1 (2019-09-20).
Fix verified with 71.0b6.

Hardware: Unspecified → All
You need to log in before you can comment on or make changes to this bug.