Closed Bug 1331999 Opened 5 years ago Closed 5 years ago

Popup arrow color is not applied consistently


(WebExtensions :: Frontend, defect)

50 Branch
Not set


(firefox52 verified, firefox53 verified)

Tracking Status
firefox52 --- verified
firefox53 --- verified


(Reporter: Leif.AMO, Assigned: kmag)



(3 files)

Attached image popup-bug.png
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.
Attached image popup-proper.png
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).
Component: Untriaged → WebExtensions: General
Product: Firefox → Toolkit
Closed: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1293099
Not sure how this is a duplicate of a "RESOLVED / FIXED" bug, when the bug still exists in nightly, and has never been fixed.
Component: WebExtensions: General → WebExtensions: Frontend
Ever confirmed: true
Resolution: DUPLICATE → ---
Summary: WebExtensions popup style mismatch "tail" → Popup arrow color is not applied consistently
Assignee: nobody → kmaglione+bmo
Comment on attachment 8828079 [details]
Bug 1331999: Fix race in setting initial popup background color.

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.
Attachment #8828079 - Flags: review?(aswan) → review+
Closed: 5 years ago5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla53
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.
Attachment #8828079 - Flags: approval-mozilla-aurora?
Comment on attachment 8828079 [details]
Bug 1331999: Fix race in setting initial popup background color.

fix race condition for webextensions, aurora52+
Attachment #8828079 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Landed in nightly releases earlier today[1].  Seems to yield correct behavior for me.  Much appreciated!

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.
Product: Toolkit → WebExtensions
You need to log in before you can comment on or make changes to this bug.