1196921 - [Aries][Browser] Touchmove event sent sent for non-moving touches (breaking overlay menu on m.youtube.com)

Status: VERIFIED FIXED

(Core :: Panning and Zooming, defect)

Description

[Adam Alldredge [:AdamA][Inactive]]

Attachment: logcat

Description:
On the mobile youtube site when users press the 3 vertical dots to bring up a menu overlay the cancel button does not work. All of the other buttons in the menu work, just the cancel buttons do not work. Users have to reload the page to use the website.

Repro Steps:
1) Update a Aries to 20150820012109
2) Open browser and go to m.youtube.com
3) Select the 3 vertical dots to open a menu overlay
4) Press the cancel button
5) Observe screen

Actual:
The cancel button does not dismiss the menus on youtube

Expected:
It is expected that the menu is dismissed when the cancel button is pressed

Environmental Variables:
Device: Aries 2.5 
Build ID: 20150820012109
Gaia: 89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb
Gecko: 29b2df16e961
Gonk: 2916e2368074b5383c80bf5a0fba3fc83ba310bd
Version: 43.0a1 (2.5)
Firmware Version: D5803_23.1.A.1.28_NCB.ftf
User Agent: Mozilla/5.0 (Mobile; rv:43.0) Gecko/43.0 Firefox/43.0

Repro frequency: 10/10
See attached: video clip(https://youtu.be/UYyFJBXzh9c), logcat

Comment 1

[Adam Alldredge [:AdamA][Inactive]]

This issue DOES NOT occur on Flame 2.5

Environmental Variables:
Device: Flame 2.5 [Full Flash]
Build ID: 20150820030207
Gaia: 89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb
Gecko: 29b2df16e961
Gonk: c4779d6da0f85894b1f78f0351b43f2949e8decd
Version: 43.0a1 (2.5)
Firmware Version: v18D
User Agent: Mozilla/5.0 (Mobile; rv:43.0) Gecko/43.0 Firefox/43.0

Result:
Selecting the cancel button dismisses the menu.

Comment 2

[Jayme Mercado [:JMercado] (Inactive 3/4/2016)]

[Blocking Requested - why for this release]:

Broken Youtube functionality.  

Setting qawanted to check if this worked in earlier Aries builds.

Comment 3

[Mahendra Potharaju [:mahe]]

Blocking 2.5

Comment 4

[Pi Wei Cheng [:piwei] (inactive)]

This issue is reproducible on earliest Aries build that we have. Tapping on Cancel button does nothing.

Device: Aries
BuildID: 20150516110322
Gaia: 4c0f36e9dfe017bf2a698d416a57c8156b43383d
Gecko: 0273e9c967ec
Gonk: 3af1ede0d0956cfbf9c549df7cd9a6807a9efdf2
Version: 41.0a1 (2.5 Master) 
Firmware Version: D5803_23.1.A.1.28_NCB.ftf
User Agent: Mozilla/5.0 (Mobile; rv:41.0) Gecko/41.0 Firefox/41.0

Comment 5

[Alberto Pastor [:albertopq]]

(In reply to Adam Alldredge [:AdamA] from comment #1)
> This issue DOES NOT occur on Flame 2.5
> 
> Environmental Variables:
> Device: Flame 2.5 [Full Flash]
> Build ID: 20150820030207
> Gaia: 89e0096a3de0378e3eda77e6a2a0bb5ca03eb8bb
> Gecko: 29b2df16e961
> Gonk: c4779d6da0f85894b1f78f0351b43f2949e8decd
> Version: 43.0a1 (2.5)
> Firmware Version: v18D
> User Agent: Mozilla/5.0 (Mobile; rv:43.0) Gecko/43.0 Firefox/43.0
> 
> Result:
> Selecting the cancel button dismisses the menu.

Should we mark this as resolved then?

Comment 6

[Pi Wei Cheng [:piwei] (inactive)]

Alberto, that means this bug is Aries specific if it can't be reproduced on Flame.

Comment 7

[Alberto Pastor [:albertopq]]

Let's check if is a regression then. Thanks!

Comment 8

[Pi Wei Cheng [:piwei] (inactive)]

Comment 4 states this occurs on earliest Aries build that we have so it's not a regression.

Comment 9

[Alberto Pastor [:albertopq]]

Oh! I know why I was so confused... Watching the video, I noticed you guys mean the 3 dots *inside* the youtube app. That code is part of youtube.com, so we can do nothing. I thought you were talking about the 3 dots in the browser chrome, which works fine.

Comment 10

[Pi Wei Cheng [:piwei] (inactive)]

Yes it's the vertical 3 dots on youtube website. It looks like we're not handling the overlay that's being brought up correctly? But it seems to only affect the Cancel button, all other buttons on that overlay worked fine.

Comment 11

[Alberto Pastor [:albertopq]]

But that overlay is coming from youtube.com, not from gaia... What can we do about it? Not sure why does it work on the flame though. Michael, ideas?

Comment 12

[Gregor Wagner [:gwagner]]

kats, any ideas here? Could this be apz related?

Comment 13

[Michael Henretty [:mikehenrty][:mhenretty]]

Yeah, most likely this is not a systems front-end issue.

Comment 14

[Kartikaya Gupta (email:[e-mail])]

This is almost certainly a problem with the webpage. I looked at the page in WebIDE and the Cancel button is actually a <button> with an onclick handler which does something different than clicking on the rest of the items in the list. The code is obfuscated so I'm not going to spend any more time looking into it.

Comment 15

[Alberto Pastor [:albertopq]]

Yeah, I thought the same, but is weird that it does work on the flame, isn't it? Any idea why?

Comment 16

[Kartikaya Gupta (email:[e-mail])]

Not really. A guess is that they're doing something wrong with window.devicePixelRatio since that's the main difference between Flame and Aries.

Comment 17

[Hallvord R. M. Steen [:hallvors]]

We have some "it's unclickable at high resolution because the page cancels touchmove and we interpret that as cancelling click" bugs - might be related?

Comment 18

[Kartikaya Gupta (email:[e-mail])]

Maybe. I'm pretty sure I checked that the click event was getting properly dispatched to content, but there might still be content-side code that listens for the touchmove and sets some flag that prevents the click from happening.

Comment 19

[Mike Taylor [:miketaylr]]

If I spoof as B2G on my Android phone w/ a DPR of 3, Cancel works as expected. But the Aries has DPR of 2, so that's not entirely conclusive evidence.

Comment 20

[Mike Taylor [:miketaylr]]

OK, after doing some event logging I don't think we're in Tech Evangelism territory any longer.

Here's the results of Chrome Mobile, Fennec, and Aries all sending the same B2G (Gecko 43.0) UA string:

Chrome Mobile


touchstart being sent to <button id="cancel_button" onclick="return koya.onEvent(arguments[0]||window.event,'928_0')" class="_mad _mgf">Cancel</button>
touchend being sent to <button id="cancel_button" onclick="return koya.onEvent(arguments[0]||window.event,'928_0')" class="_mad _mgf">Cancel</button>
click being sent to <button id="cancel_button" onclick="return koya.onEvent(arguments[0]||window.event,'928_0')" class="_mad _mgf">Cancel</button>
VM692:15 focus() [object HTMLButtonElement]

Fennec:

touchstart being sent to <button id="cancel_button" onclick="return koya.onEvent(arguments[0]||window.event,'698_0')" class="_mad _mgf">Cancel</button>
touchend being sent to <button id="cancel_button" onclick="return koya.onEvent(arguments[0]||window.event,'698_0')" class="_mad _mgf">Cancel</button>
click being sent to <button id="cancel_button" onclick="return koya.onEvent(arguments[0]||window.event,'698_0')" class="_mad _mgf">Cancel</button>
focus() [object HTMLButtonElement]


B2G:

touchstart being sent to <button id="cancel_button" onclick="return koya.onEvent(arguments[0]||window.event,'62_0')" class="_mad _mgf">Cancel</button>
touchmove being sent to <button id="cancel_button" onclick="return koya.onEvent(arguments[0]||window.event,'62_0')" class="_mad _mgf">Cancel</button>
touchend being sent to <button id="cancel_button" onclick="return koya.onEvent(arguments[0]||window.event,'62_0')" class="_mad _mgf">Cancel</button>

We're never sending the synthetic click in the B2G case (and sending touchmove for some reason?), so onclick="" never has a chance to do anything.

Let me see if I can reduce this to something small.

Comment 21

[Mike Taylor [:miketaylr]]

Essentially what's happening is the following:

There's a <div class="_mlc"> that is a parent to all the menu items. It's listening for "touchmove" events and calling e.stopPropagation() when it gets them in g.ol:

g.ol = function(a) {
  g.nl.push(a);
  a.register(g.Ic("lightbox"));
  a.A = (0,
  g.x)(a.Cf, a);
  Yi(a.A);
  g.pg();
  g.Lc("_mlc").addEventListener("touchmove", Raa, !1);
  ug(!1);
  g.Ic("content-container").setAttribute("aria-hidden", !0);
  a.B = window.document.activeElement;
  a.Z("lightbox").focus()
}

The "Raa" event handler is simple:

var Raa = function(a) {
  a.stopPropagation();
  return !1
}

For whatever reason, the Xperia Z3 is sending a touchmove event between touchstart and touchend, for non-moving touches. Youtube stops the event from propagating down to the menu items that are listening for the synthetic click events, so that's why the Cancel button (or clicking outside the menu) doesn't close the overlay.

To verify, visit https://miketaylr.com/bzla/youtube.html and tap where it says "Touch Me". You should never see Red. Chrome Mobile, Fennec, and B2G on my Flame all pass. B2G on the X3C fails.

Comment 22

[Mike Taylor [:miketaylr]]

I'm not actually sure where to move this to. Kats, would this live in B2G or Core?

Comment 23

[Kartikaya Gupta (email:[e-mail])]

Thanks for digging into this! So technically I consider it a bug in the content because they don't appear to have a threshold on the touchmove event. But it's the same bug that exists in a lot of content and we'll just have to live with it. We can fix it on our end with bug 1141127, so I'll mark it dependent on that and move it back to Core.

Comment 25

[Milan Sreckovic [:milan] (needinfo for best results)]

I don't see this being practical to work around on our side (e.g., bug 1141127) as a bug - it needs to be handled as a feature request.

Comment 26

[Kartikaya Gupta (email:[e-mail])]

This should be fixed now with bug 1141127.

Comment 27

[Jessica]

Attachment: verified_Aries KK v2.6.3gp

According to the STR of Comment 0, this bug has been verified as pass on latest Aries KK v2.6.

Actual results: The menu is dismissed when the cancel button is pressed
See attachment: verified_Aries KK v2.6.3gp
Reproduce rate: 0/6


Device: Aries KK v2.6 (master) (Pass)
Build ID               20151109151826
Gaia Revision          23cab7ea0fcecab7689d340baf604e024e88f9a3
Gaia Date              2015-11-09 06:13:17
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/e1ef2be156de1dad31bb4189a51b178b12b23340
Gecko Version          45.0a1
Device Name            aries
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.worker.20151109.143842
Firmware Date          Mon Nov  9 14:38:50 UTC 2015
Bootloader             s1