Redux-devtools-extension: Firefox: bottom of tool scrolls out of view

Created on 24 Jun 2017 · 20Comments · Source: zalmoxisus/redux-devtools-extension

See:

I'm using Firefox 54.0.

Source

FLamparski

👍21

Most helpful comment

I ended up adding the following to userContent.css as a temporary workaround.

.inspector-331775157 {
  min-height: 0;
}

gluxon on 22 Jan 2018

👍10 🎉5

All 20 comments

I have similar problem on every Redux Dev Tools window. When I click redux icon in address bar, open bottom/left/right window or in developers tools, the content of ReduxDevTools doesn't fit to window within it's open. I have to manually scroll window content by pressing UP/DOWN on keyboard.

But if content is small, and scrolls doen't show up, then everything looks fine.

screen_1
screen_2
screen_3

MichalWadowski on 7 Jul 2017

Oh, I just noticed that you can see the bottom part of the tool by pressing the down arrow key.

Open the devtools
Go to the Redux tab
If the content is too tall (eg. on the state screen), the bottom of the content is hidden (like an "overflow: hidden")
Press the down arrow of your keyboard
The content "scrolls" to the bottom
Press the up arrow and you go back to the top

GuillaumeAmat on 18 Jul 2017

Yes, I can see bottom part of devtools by pressing arrows on keyboard. But it is uncomfortable to scrolling up/down all the time (I can't scroll by mouse).

ReduxDevTools on google chrome doesn't have this issue, it's fit how it should be.

MichalWadowski on 19 Jul 2017

Agreed @MichalWadowski, it's not comfortable. But in the meantime, we can use it ;)

GuillaumeAmat on 19 Jul 2017

In Firfox Nightly 57, I cannot use the arrow key workaround anymore. This is very annoying.

MazeChaZer on 11 Sep 2017

👍9

This line looks very suspicious: https://github.com/zalmoxisus/redux-devtools-extension/blob/a244e254c28506e478d579f58ea0b50de4bc2517/src/browser/views/devpanel.pug#L10
@zalmoxisus Can you reproduce this issue? This seems to be very annoying for some users and looks like it's easy to fix.

MazeChaZer on 17 Sep 2017

Nevermind about my previous hint, that was bogus.

MazeChaZer on 19 Sep 2017

I believe I found where the problem comes from.
The body of the Redux devtools has position: fixed and height: 100%:

https://github.com/zalmoxisus/remotedev-app/blob/19c8a3607ea85c0da23a68eb75677272f8d59edc/src/views/index.pug#L9
https://github.com/zalmoxisus/remotedev-app/blob/19c8a3607ea85c0da23a68eb75677272f8d59edc/src/views/index.pug#L11

Because of this combination, 100% means the total height of the develop tools, including the tab bar. This makes the height of the Redux view too tall, exactly by the height of the tab bar.
Removing the position: fixed from the body element might solve the problem. Perhaps a CSS like this could do the job: http://jsbin.com/rohaquropu/edit?html,css,output
That example expects width: 100% on html and body, so this might not work.

I would really like to tinker with this myself instead of doing guesswork, but I currently don't have the time to setup an Add-On development environment for myself.

MazeChaZer on 19 Sep 2017

That position fixed is necessary for the popup from location bar. We could use different styles for the devpanel. However, I was working on a new UI, which should solve this issue as well. Unfortunately, didn't have much time for oss recently.

zalmoxisus on 19 Sep 2017

👍2

Love using Firefox and the extension, so solving this issue would make it even better.

@zalmoxisus how far along with the new UI are you? If you're not really there yet I would like to invest some time and take a look at this issue and do a fix for the time being.

Gaya on 22 Nov 2017

Found out .inspector-0-0 needs an overflow: auto to fix some of the content disappearing. This happens because in Firefox, this remote dev inspector container keeps growing.

The styling of which I was able to trace back to https://github.com/zalmoxisus/remotedev-inspector-monitor/blob/remotedev-inspector/src/utils/createStylingFromTheme.js#L41

Submitted a pull request which will solve this problem.

https://github.com/zalmoxisus/remotedev-inspector-monitor/pull/2

Gaya on 22 Nov 2017

had a similar problem, commented on a closed ticket, here is the text again:

I have a similar issue:

I tracked it down to missing height on an element. The element is:

<div class="actionListRows-4144605864" style="">

When you assign it:

flex: 1 1 0;

it renders okay:

meiriko on 22 Nov 2017

Any ETA on when a fix lands (as it seems that @eppsilon's commit has fixed the issue)? I would prefer not to switch to Chrome to debug :)

rahulthewall on 7 Dec 2017

👍6

So we have two pull requests trying to fix this but nothing happens here :(
This bug is really annoying, I don't understand why Firefox get this low priority here...

Fensterbank on 15 Dec 2017

👍12

Facing the same issue,on firefox 58, sense we already have solutions, but why this bug takes so long and still exists?

ChenXiyu on 27 Dec 2017

I ended up adding the following to userContent.css as a temporary workaround.

.inspector-331775157 {
  min-height: 0;
}

gluxon on 22 Jan 2018

👍10 🎉5

Thanks for mentioning the workaround! This seems like a good approach until your fix can be merged.

ibrahima on 13 Feb 2018

🎉4

Fixed in version 2.15.2 of the extension. It's available on AMO. Sorry about the delay!

zalmoxisus on 2 Mar 2018

🎉7

Awesome, thanks!

Gaya on 2 Mar 2018

Woo!

On Fri, Mar 2, 2018 at 3:42 PM Gaya Kessler notifications@github.com
wrote:

Awesome, thanks!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/zalmoxisus/redux-devtools-extension/issues/377#issuecomment-369956924,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHHYRltWw-H5-zO7l7z1XviRN0yuxk_1ks5taWhqgaJpZM4OERVA
.