Closed Bug 1383660 Opened 6 years ago Closed 6 years ago

speech bubble of Onboarding icon should be clickable

Categories

(Firefox :: General, defect, P1)

Product:
Firefox
Component:
General
Version:
53 Branch
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
Firefox 56
Tracking Flags:
Tracking Status
firefox56 --- verified

People

(Reporter: rexboy, Assigned: rexboy)

References

Details

(Whiteboard: [photon-onboarding])

Attachments

(1 file)

Bug 1383660 - Let speech bubble of onboarding icon clickable.
59 bytes, text/x-review-board-request
mossop
: review+
Details 
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
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?
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 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+
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
https://hg.mozilla.org/mozilla-central/rev/08a4bab2247a
Status: ASSIGNED → RESOLVED
Closed: 6 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]
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]
Status: RESOLVED → VERIFIED
status-firefox56: fixed → verified
You need to log in before you can comment on or make changes to this bug.