How to calculate the height of a popup?

Add-ons Development
#1

Hi,

within an Web Extension I defined a “default_popup” functionality.

My goal is:
If the content get’s to large, I’d like to have a scrollbar for the content, but not for the header or footer. Similar to this native Firefox popup:

firefo-popup-example
firefo-popup-example.png945×1574 53.8 KB

But sadly I’m unable to archive this layout within my addon.

Since the content change while interacting within the popup, the popup changes it’s size to fit in the content. I would have to calculate the current popup height to fix my content and allow to show a scrollbar.

But currently I found no way on how to read the actual size of the popup. If I read the height of the body with document.body.getBoundingClientRect().height I get number of the whole document, which exceeded to popup height.

Does anyone have a clue on how to archive this?

Thanks in advance.

#2

It seems, that window.innerHeight is current popup height. I can read this value within the console if JS is on hold because of a breakpoint.
But I don’t get the right value within my code, after I changed the popup content.

EDIT:
Currently I use a timeout after content change to wait until the popup is resized:

setTimeout(() => {
    const bodyHeight = document.body.getBoundingClientRect().height;
    const popupHeight = window.innerHeight - 8; // - arrow height
    console.log('height', bodyHeight, popupHeight);

    if (bodyHeight > popupHeight) {
      document.body.style.height = popupHeight + 'px';
      frameShell.classList.add('frame-shell--fixed');
    }
  }, 250);

The odd thing is, that the window.innerHeight is the popup height including the arrow at the top. So I have to remove it from the calculation.

Is there a smarter way of doing this?

#3

I think you are overcomplicating things…
Why not simply have fixed height for the heading and footer and on the content part use max-height style with overflow: auto to limit maximum height.

Also make sure to use Grid layout:

#4

Thanks for your input.

simply have fixed height for the heading and footer

This is what I currently have.

on the content part use max-height style with overflow: auto to limit maximum height.

My thought is, that not every one has an equal height screen and the max-height won’t fit in each case.

I could set a quite small max-height, which wouldn’t allow to view a lot content at a whole. And when I use a to tall max-height it might overflow the screen.
I myself use a quite small laptop when driving with a train and I wouldn’t be satisfied if the popup couldn’t show a very large content.

#5

Well, the popup itself has it’s limits that are quite low: 800x600 pixels
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups#Popup_resizing

So I’m pretty sure more than 99% of your users will never hit the max-height limit :slight_smile:.

Maybe on Android this would need a fix… but there you should be able to fix that with media query, something like @media (min-height: 600px).

Anyway, from my experience, every time I want to use JavaScript to fix a style issue, I really really really try to think a better way, because usually there is :slight_smile:.

#6

I will consider your tip. :+1:

Anyway, from my experience, every time I want to use JavaScript to fix a style issue, I really really really try to think a better way, because usually there is :slight_smile:.

This is a good mantra. :slightly_smiling_face:

1 Like