Popup arrow color is not applied consistently

VERIFIED FIXED in Firefox 52

Status

defect
VERIFIED FIXED
3 years ago
Last year

People

(Reporter: Leif.AMO, Assigned: kmag)

Tracking

50 Branch
mozilla53

Firefox Tracking Flags

(firefox52 verified, firefox53 verified)

Details

Attachments

(3 attachments)

Reporter

Description

3 years ago
Posted 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.
Reporter

Comment 1

3 years ago
Posted image popup-proper.png
Example of a proper popup, where the background color matches the "tail".
Reporter

Comment 2

3 years ago
Forgot to mention, I first noticed this several months ago (~v46?), and still persists on nightly (v53).
Component: Untriaged → WebExtensions: General
Product: Firefox → Toolkit
Assignee

Updated

3 years ago
Status: UNCONFIRMED → RESOLVED
Closed: 3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1293099
Reporter

Comment 4

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

Updated

3 years ago
Status: RESOLVED → REOPENED
Component: WebExtensions: General → WebExtensions: Frontend
Ever confirmed: true
Resolution: DUPLICATE → ---
Summary: WebExtensions popup style mismatch "tail" → Popup arrow color is not applied consistently
Assignee

Updated

3 years ago
Status: REOPENED → NEW
Assignee

Updated

3 years ago
Assignee: nobody → kmaglione+bmo
Comment hidden (mozreview-request)

Comment 6

3 years ago
mozreview-review
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.
Attachment #8828079 - Flags: review?(aswan) → review+

Comment 7

3 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/3544f347daf2
Status: NEW → RESOLVED
Closed: 3 years ago3 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla53
Assignee

Comment 8

3 years ago
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+
Reporter

Comment 10

3 years ago
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.
Status: RESOLVED → VERIFIED

Updated

Last year
Product: Toolkit → WebExtensions
You need to log in before you can comment on or make changes to this bug.