https://discourse.mozilla.org/t/width-of-popup-overflow-menu/27939

One can just estimate it based on the width…

STR:

• manual set high QR code size
• open in overflow menu

So what may be done here:

• check that the popup is shown like that (width)
• compare with QR code size
• if it is likely to be shown distorted as in the image above, maybe show a warning message (depends on Implement (styling of) warning message #83) that it may be shown in a not-so good way
  Add an action button that takes the user to the settings. (Try to let it highlight using the target selector, which has been made for this/can be used for exactly that. Oh, wait, you cannot manually open the about:addons like that, too bad.)

seems like Firefox overflow system breaks several add-ons, so easiest start may be just adding note in the options menu size area stating size will be limited if it is in the overflow menu.

Why not just canvas {width: 100%}?

Because the size can be dynamically adjusted by the user/by settings in the options. "Automatically adjust" should roughly correspond to this.

adding note in the options menu size area stating size will be limited if it is in the overflow menu

I want to avoid showing such a thing when the user does not actually use the overflow menu.

So some ideas I have:

• totally ignore the user's size setting, when the overflow menu is detected and just choose 100% width as noted?
• show some error, if overflow is detected (as this issue originally proposed)

This whole size thing is also related to Android. Also there, depending on the setting, the size of the QR code can be a little suboptimal… (#151)

Generally, I have to admit, that this whole size handling got quite complex and we have edge cases like this one.
What I, however, want to keep, is the custom resizer (#57). And even on Android tablets, this may be a useful.

The default size is specified in the options:

Because they likely do not want to resize it each time the popup is opened. That's also why there is the "remember size" option: You can open the popup, adjust it for your screen/environment etc. and it is just restored again.

I'll certainly won't remove that feature. Or what are you actually suggesting?

I'm not actually a user of your extension but I like its simple popup UI...

Well… then you should definitively try it out. 😃
(Please do so, without having done so, you can hardly judge what features may be missed or how it currently works.)

mobile screen: fill screen

Problem I would have here is the case of tablets… There you are unlikely to want this…

overflow menu: fill available area

That is a good idea and I am thinking about it, as I've said:

So some ideas I have:
[…]

• totally ignore the user's size setting, when the overflow menu is detected and just choose 100% width as noted?

This extension even accounts for managed options... who needs managed options for a QR code generator?

I don't know/care, it's easy to implement though if you've abstracted it once… 😊 (actually, it's not even properly tested: #177) So I cannot answer you this option.

If you skip all of these options, your extension is already done and you can move onto a new project.

Well… implementing this properly certainly takes work, but yes, it could eliminate several problems.

Anyway, let's better discuss this in a new issue, as I like the general idea. I've summarized problems and your ideas in #187, so please let's discuss this there.

This issue could be obsoleted by it, but for now, let's keep this issue a "good first issue" for a small warning. 😄

Right, that's the whole point, you added more work for yourself because now you also have to maintain and test it sweat_smile

Well yeah, but remember I use the same for other add-on's too. So there it is potentially more useful than for a QR code generator. Anyway, that's hardly a thing we need to discuss here…

I don't use QRs

At least for trying/testing it out, you should have a look. 😃

https://github.com/TinyWebEx/EnvironmentDetector could help here.

Hello, I am trying to work on this issue but it seems that I cannot exactly reproduce the situation provided in the initial screenshot (with the QR code overflowing the entire popup window).
However, when I set the QR size code too large (for instance 1000), the QR code is partially cut off and not centered (as shown in image 1) so I've been looking into solving the issue (adding a warning) for this case.
One challenge I've encountered is that the offsetHeight of the QR container, as logged in the console (385px in image 3), differs from its visually displayed height (480px in image 2). This mismatch seems incorrect and in this case I'm not sure how I could check if the size of the QR code would overflow and trigger the warning to be shown (my plan was to compare the size of the QR code with the size of the QR code container). I see that the qr container offset height is set to the correct value upon resizing the window though.

I would highly appreciate any tips/guidance in solving this issue in this case!

Thanks a lot for trying, but indeed this is a fiddly issue, so I am likely of no much help other than: maybe try to fiddle some size difference out there. As it has been said, Firefox trying to (re)size the popup window is another fun thing you usually do not have in "normal" web design challenges. 😉 (So this also can relate to Firefox/your OS, too, further complicating it.)

After all, it has a reason this has been open so much. I once implemented such stuff in the already mentioned library, but whether that helps is dubious. 🙃
In any case, there is also a "debug data" dump that shows much of this stuff: https://github.com/TinyWebEx/EnvironmentDetector/blob/dcb700dff990e328e7acdf6e7b2517059ac6b18b/EnvironmentDetector.js#L161C17-L161C29

One challenge I've encountered is that the offsetHeight of the QR container, as logged in the console (385px in image 3), differs from its visually displayed height (480px in image 2).

Hmm, but your offsetHeight includes padding, which your screenshot also shows (purple parts), so maybe this is where your "missing" 15px are?

That said, this is also not at all high prio as it is really just about an edge case. Anyway, as said, thanks for trying to help here!