speech bubble of Onboarding icon should be clickable

VERIFIED FIXED in Firefox 56

Status

()

Firefox
General
P1
normal
VERIFIED FIXED
a month ago
21 days ago

People

(Reporter: rexboy, Assigned: rexboy)

Tracking

(Blocks: 1 bug)

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

Firefox Tracking Flags

(firefox56 verified)

Details

(Whiteboard: [photon-onboarding])

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(1 attachment)

(Assignee)

Description

a month ago
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.
(Assignee)

Comment 1

a month ago
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.

Updated

a month ago
Status: NEW → ASSIGNED
Flags: qe-verify+
QA Contact: jwilliams
Comment hidden (mozreview-request)
(Assignee)

Comment 3

a month ago
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

a month ago
Duplicate of this bug: 1383883
Comment hidden (mozreview-request)
(Assignee)

Comment 6

a month ago
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

a month 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)
(Assignee)

Updated

29 days ago
Keywords: checkin-needed

Comment 9

29 days 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

28 days ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/08a4bab2247a
Status: ASSIGNED → RESOLVED
Last Resolved: 28 days ago
status-firefox56: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 56
Screenshots:

https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=388d81ed93fa640f91d155f36254667c734157cf&newProject=mozilla-central&newRev=f1693d664f8e8ee4c79801630c181c28095cad56&filter=primaryUI
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

22 days 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

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