User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.1.0 Waterfox/50.1.0 Build ID: 20161219224911 Steps to reproduce: 1. Create a demo WebExtension 2. manifest.json has (among other basic items) "browser_action": { "browser_style": false, "default_popup": "popup.html" } 3. popup.html has (among other stuff): <link rel="stylesheet" type="text/css" href="popup.css"> 4. popup.css has (among other very basic things) body { background-color: #5f5f5f; } Actual results: The background of the popup is dark grey, except for the little "triangle" (or "tail" or "arrow", not sure what the proper terminology is for this part of a popup's anatomy) that connects the popup "bubble" to the browser_action button. This little "triangle" remains white. There does not seem to be any CSS in chrome://browser/content/extension.css to control this area, likely it's outside of the document object where popup.html is created, and outside of influence of the API as well. Expected results: This small triangle should match the style of the background-color style of the document. XUL popups did this correctly. If anyone creates any non-white popup backgrounds, they suffer a very ugly result. Non-white popups may be useful, depending on overall browser theme (a dark theme), or when dealing with [contrived example] image or other content that has a white or near-white edge you wish to see, for whatever reason. Or, the dark background may simply be to accentuate the difference between browser and popup content. Anyways, the same color should flow uninterrupted from button to popup area, to create a visual link between the two. The white "triangle" interrupts that visual link, may subconsciously irritate or confuse user (definitely does to the developer), makes the add-on and the browser look "broken". Attached image demonstrates the WebExtensions popup style mismatch bug.

Example of a proper popup, where the background color matches the "tail".

Forgot to mention, I first noticed this several months ago (~v46?), and still persists on nightly (v53).

Not sure how this is a duplicate of a "RESOLVED / FIXED" bug, when the bug still exists in nightly, and has never been fixed.

Comment on attachment 8828079 [details] Bug 1331999: Fix race in setting initial popup background color. https://reviewboard.mozilla.org/r/105592/#review106526 I don't know this code well enough to comment on other possible ways to address this or other potential problems, but the actual patch here certainly looks fine.

Comment on attachment 8828079 [details] Bug 1331999: Fix race in setting initial popup background color. Approval Request Comment [Feature/Bug causing the regression]: Bug 1293099 [User impact if declined]: This causes styling to be inconsistently applied to WebExtension popups [Is this code covered by automated tests?]: Yes, but the regression is a race, and is not. [Has the fix been verified in Nightly?]: No. [Needs manual test from QE? If yes, steps to reproduce]: Steps to reproduce are included in bug 1293099. [List of other uplifts needed for the feature/fix]: None. [Is the change risky?]: Low-risk. [Why is the change risky/not risky?]: This is a trivial change that simply re-applies style changes that happen too early to take effect. [String changes made/needed]: None.

Comment on attachment 8828079 [details] Bug 1331999: Fix race in setting initial popup background color. fix race condition for webextensions, aurora52+

Landed in nightly releases earlier today[1]. Seems to yield correct behavior for me. Much appreciated! [1] http://releases.mozilla.org/pub/firefox/nightly/2017/01/2017-01-20-03-02-14-mozilla-central/

I was able to reproduce the initial issue on Firefox 53.0a1 (2017-01-18) under Windows 10 64-bit. Verified fixed on Firefox 54.0a1 (2017-01-29), Firefox 53.0a2 (2017-01-29) and Firefox 52.0b1 (20170124094647) under Windows 10 64-bit, Ubuntu 16.04 32-bit and Mac OS X 10.12.1. The pop-up background is successfully extended to the arrow.