Closed Bug 1582866 Opened 2 years ago Closed 2 years ago

Inspector Extension sidebar doesn't overflow

Categories

(DevTools :: Inspector, defect, P3)

All
Unspecified
defect

Tracking

(firefox71 verified)

VERIFIED FIXED
Firefox 71
Tracking Status
firefox71 --- verified

People

(Reporter: nchevobbe, Assigned: nchevobbe)

Details

Attachments

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


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"):

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

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

Flags: needinfo?(gl)
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a093d517fc88
Make the inspector extension sidebar overflow. r=rpl.
Status: ASSIGNED → RESOLVED
Closed: 2 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.

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