speech bubble of Onboarding icon should be clickable

VERIFIED FIXED in Firefox 56

Status

()

P1
normal
VERIFIED FIXED
2 years ago
2 years ago

People

(Reporter: rexboy, Assigned: rexboy)

Tracking

53 Branch
Firefox 56
Points:
---
Bug Flags:
qe-verify +

Firefox Tracking Flags

(firefox56 verified)

Details

(Whiteboard: [photon-onboarding])

Attachments

(1 attachment)

STR:
- Start Nightly
- Open a new tab
- Click on the speech bubble of the fox icon on top-left

Expected:
- Onboarding overlay displayed.

Actual:
- Nothing happened.


For now we implemented the speech bubble by button::after; but for some reason button::after is not able to receive onclick event (while div::after can). Although this is confusing and there's a bug filed (Bug 1382110), but I was told ::before and ::after pseudo-elements have no definition on standard whether it can receive click events.

So, as we can't expect this issue would be fixed shortly, we may have to workaround this problem by making the bubble an individual HTML element.
If I remove position:absolute I can keep it valid. But the line breaking behavior changes as I do that so I can't break them into 2 lines. Still investigating. If I make the line wrap successful we may just need to change CSS rather than changing DOM structure.
Status: NEW → ASSIGNED
Flags: qe-verify+
QA Contact: jwilliams
Comment hidden (mozreview-request)
This patch fixes the problem by use "display: inline-block" and remove "position: absolute" for button::after. It seems that the click listener stop working on ::after only if I add "position: absolute" (or fixed).

The speech bubble in notification is left unchanged with "position: absolute". (I need to move it out from common style though).

Mossop may you take a look for this patch?

Updated

2 years ago
Duplicate of this bug: 1383883
Comment hidden (mozreview-request)
Per offline discussion with Verdi, please allow me with some trivial css tweaks in this patch:
- The fox icon for overlay should align with the icon in notification.
- The tour link in overlay should not have white background on hover or active.

Comment 7

2 years ago
mozreview-review
Comment on attachment 8889709 [details]
Bug 1383660 - Let speech bubble of onboarding icon clickable.

https://reviewboard.mozilla.org/r/160772/#review166308
Attachment #8889709 - Flags: review?(dtownsend) → review+
Comment hidden (mozreview-request)
Keywords: checkin-needed

Comment 9

2 years ago
Pushed by cbook@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/08a4bab2247a
Let speech bubble of onboarding icon clickable. r=mossop
Keywords: checkin-needed

Comment 10

2 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/08a4bab2247a
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
status-firefox56: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 56
I have reproduced this bug with nightly 56.0a1 (2017-07-24) on Linux Mint (64 Bit).

The bug's fix is now verified on Latest Nightly 56.0a1

Build ID 	20170727100240
User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0
QA Whiteboard: [bugday-20170726]

Comment 13

2 years ago
I have reproduced this bug with Nightly 56.0a1 (2017-07-24) on Windows 8.1 (64 Bit)

This bug's fix is verified on Latest Nightly 56.0a1.

Build ID : 20170801100311
User Agent : Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0

[bugday-20170802]

Updated

2 years ago
Status: RESOLVED → VERIFIED
status-firefox56: fixed → verified
You need to log in before you can comment on or make changes to this bug.