FF57 browser.windows.create() displays blank panel/detached_panel/popup

Add-ons Development
1

Hello,

I am currently developing an addon with popup menu and panel (which is displayed when the user clicks on the menu), and I have a problem that I can’t solve on my own.
I would like to clarify that I am not an expert in web development (C++ / Python instead).

The bug:

  • Instead of getting the panel and its contents, I get a completely blank window.
  • The content is only “unlocked” after a manual right click on it (and with another trick described below).
  • In Firefox 56, there is no problem: the panel is displayed correctly.
  • In Firefox 57 & 58, the bug is present.
  • Below I use panel type, but there is no difference with popup, or detached_panel.
  • Is similar to these links but there is still no explanation:
    FF57 browser.windows.create() displays blank popup - #5 by mig
    FF57 browser.windows.create() displays blank popup window
  • I tested my code on Linux systems: Debian 8, Fedora 23.
  • browser.windows.update() is a temporary workaround…

Here is a test code allowing to reproduce the bug.
Inspiration is taken mainly from these pages:

Browser toolbar button with a popup (test.html):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="panel">
      <a href="#" id="search_cookie_manager">LINK</a>
    </div>
    <script src="test.js"></script>
  </body>
</html>

JavaScript for the popup menu (test.js):

(function(mycode) {
  mycode(window, document);
}(function(window, document) {

function createWindow(createData) {
  let creating = browser.windows.create(createData);
  creating.then(() => {
    console.log("The panel has been created");
  });
}

document.addEventListener("click", (e) => {
    // Send empty url
    let createData = {
      type: "panel",
      url: "panel.html",
    };
    createWindow(createData);
  e.preventDefault();
});
}));

As you can see, the click on the link allows the creation of a panel.
Here is the code of the panel (panel.html):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>test</p>
  </body>
</html>

Trick: When I include a JS code in panel.html with:
alert('hello');

… the html is displayed below:

paint event bug_1
paint event bug_1389×208 8.43 KB

If I compare the event recordings with the developer tool, I notice that the event “paint”
is not triggered automatically after the event “pageshow” as it is the case on Firefox 56.
The right click allows you to force its triggering.

paint event bug_0
paint event bug_01879×775 124 KB

Is there something I’m doing wrong? How can I explain these different behaviors in the 2 versions of Firefox? Is it documented?

Thank you for your time spent on my problem.

2

This is clearly not the way it is supposed to behave, so the fault isn’t yours and there won’t be any documentation. This is probably caused by the quite massive changed in Firefox “Quantun” (57+).

Looking at the paint graph seems a smart move. If the initial paint isn’t happening, that may actually explain the issues you referenced. The fix proposed there (to resize the window) would force Firefox to re-layout and repaint. Opening a modal or the context menu probably do as well. And my popup that is working adds some elements after the first paint as well; the popups and panels in that extension stay blank suspiciously long, maybe until the first full repaint.

Could you try to do a CSS change shortly after the load that drastically changes the pages layout, say changing the display mode of a block-element wist multiple children to flex?
If that renders your popup, your temporary fix would be to do that, wait a few ms then change it back.

3

Hi,
Thank you for your reading; in fact adding a timeout after creating the page does not trigger its display either:

setTimeout (function () {
    $ ('.container'). css ("display","flex");
}, 2000);

The same when I simulate a right mouse click in JavaScript:

$ ('.container').trigger ({
        type: 'mousedown',
        which: 3
    });

Fun facts:

  • Trigger page reloading with F5 sometimes works (very rarely)
  • The mouse cursor changes its appearance when I hover over buttons/text field etc.
    So these elements are there but invisible! When they are animated contextual menus with JS, I can even interact with them (the right click reveals the fact that the menus have been triggered).
  • When the window type is not defined in browser. windows. create (), the bug is not present but the window is a complete Firefox window and that’s not what I want for my addon.

This is the only temporary resolution i found, in case anyone needs it:

function firefox57_workaround_for_blank_panel () {)
    // browser. windows. create () displays blank windows (panel, popup or detached_panel)
    // The trick to display content is to resize the window...

    function getCurrentWindow () { getCurrentWindow
        return browser. windows. getCurrent ();
    }

    getCurrentWindow (). then ((currentWindow) => {
        var updateInfo = { {
            width: 1200,
            height: 586, // 1 pixel more than original size...
        };
        browser. windows. update (currentWindow. id, updateInfo);
    });
}

Thank you anyway!

4

I believe this is known in Bugzilla as #1425829.

5

Hey ysard,
thank you for your workaround code. There are two small syntax errors in it, which I now have corrected. Also I have modified the code, so it is generic to the specific window size and just adds one pixel for the height. Maybe this is useful for somebody until the bug is fixed.

function firefox57_workaround_for_blank_panel () {
	
    // browser. windows. create () displays blank windows (panel, popup or detached_panel)
    // The trick to display content is to resize the window...

    function getCurrentWindow () { getCurrentWindow
        return browser. windows. getCurrent ();
    }

    getCurrentWindow (). then ((currentWindow) => {
        var updateInfo = {
            width: currentWindow.width,
            height: currentWindow.height + 1, // 1 pixel more than original size...
        };
        browser. windows. update (currentWindow. id, updateInfo);
    });
}