1582866 - Inspector Extension sidebar doesn't overflow

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

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. mozilla.org)
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

---

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

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?

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: devtools-inspector-sidebar.zip

Comment 3

[Patrick Brosset <:pbro>]

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

Comment 4

[Luca Greco [:rpl] [:luca] [:lgreco]]

(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).

Comment 5

[Luca Greco [:rpl] [:luca] [: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"):

https://searchfox.org/mozilla-central/rev/e3fc8f8970491aef14d3212b2d052942f4d29818/devtools/client/inspector/extensions/components/ExtensionSidebar.js#86

This component has also a style property set from the React render method](https://searchfox.org/mozilla-central/rev/e3fc8f8970491aef14d3212b2d052942f4d29818/devtools/client/inspector/extensions/components/ExtensionSidebar.js#92-94)), 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
         className,
         style: {
           height: "100%",
+          overflow: "auto",
         },
       },
       sidebarContentEl

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

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

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1582866 - Make the inspector extension sidebar overflow. r=rpl.

Depends on D47272

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a093d517fc88
Make the inspector extension sidebar overflow. r=rpl.

Comment 9

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/a093d517fc88

Comment 10

[Cristian Fogel [:cfogel]]

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