Last Comment Bug 1261709 - Google Docs forms editor misplaces menu if touch is enabled
: Google Docs forms editor misplaces menu if touch is enabled
Status: NEW
[sitewait] [country-all][platform-rel...
:
Product: Tech Evangelism
Classification: Other
Component: Desktop (show other bugs)
: unspecified
: Unspecified Unspecified
-- normal 25 (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
:
Mentors:
https://docs.google.com/forms/
Depends on:
Blocks: 1244402
  Show dependency treegraph
 
Reported: 2016-04-03 13:50 PDT by Hallvord R. M. Steen [:hallvors]
Modified: 2016-11-07 12:51 PST (History)
6 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
+


Attachments
g-docs-forms-menu-position.png (62.07 KB, image/png)
2016-04-03 13:50 PDT, Hallvord R. M. Steen [:hallvors]
no flags Details
new-form-google-docs.png (118.05 KB, image/png)
2016-04-03 18:46 PDT, Karl Dubost :karlcow
no flags Details

Description User image Hallvord R. M. Steen [:hallvors] 2016-04-03 13:50:34 PDT
Created attachment 8737637 [details]
g-docs-forms-menu-position.png

Google docs has fairly recently rolled out a new forms editor. Each form element has an associated drop-down where you can choose the type of element. This menu appears near the top of the document, not where you expect it. This is especially annoying if you scroll down, because when you get far enough you don't see the menu at all unless you scroll up again.
Comment 1 User image Karl Dubost :karlcow 2016-04-03 18:38:51 PDT
Having steps to reproduce the bug would be useful.
I don't know how to use Google Docs. But when I do "Start a new document" I don't see a form editor widget. So I need a kick in the right direction.
Comment 2 User image Karl Dubost :karlcow 2016-04-03 18:41:43 PDT
Ah found. 
You need to go to https://docs.google.com/forms/
Comment 3 User image Karl Dubost :karlcow 2016-04-03 18:46:33 PDT
Created attachment 8737666 [details]
new-form-google-docs.png

On a clean fresh profile.

With Firefox Nightly 48.0a1 (2016-04-03) and layout.css.prefixes.webkit;false
I get the menu at the right place.

with layout.css.prefixes.webkit;true
The menu is still at the right place, even with different window widths.

So I can't reproduce for now. Maybe a step by step would help.
Comment 4 User image Hallvord R. M. Steen [:hallvors] 2016-04-04 06:23:36 PDT
Steps to reproduce (sorry, it was rather late when I noticed this):

1) Log in to Google Drive
2) Choose to create a new form (may have to choose "Create -> More -> Forms" or something like that
3) Add several controls to the form to make the document long enough to scroll down
4) Scroll down and use the menu button indicated in the screenshot to change the type of the bottom-most control.
Comment 5 User image Adam Stevenson [:adamopenweb] 2016-04-06 14:50:19 PDT
I tried to reproduce with 45 and 48 a couple times, but wasn't able to make it happen.
Comment 6 User image Hallvord R. M. Steen [:hallvors] 2016-06-03 23:59:49 PDT
This code ends up with a very low negative value for style.top:

    _.k.kY = function (a) {
      var c = this.T().P(),
      d = LX(this).P(),
      e;
      a.style = {
        height: 'auto',
        left: - d.clientLeft + 'px'
      };
      if (1 != this.N.size() || this.Ba('alignbottom').Qb(!1)) e = c.offsetHeight;
       else {
        var f = (0, _.Ta) (DX(this).Mb(), this.N.P()),
        g = GX(this).hb(f),
        f = g.P().offsetTop,
        h = d.clientTop,
        l = _.Sg(c);
        if (this.kx) e = - f - h,
        f = _.jp(c),
        l.body == f ? (h = a.N, f = _.Mj(c).y)  : (h = f.scrollHeight || f.offsetHeight, f = _.Pj(c, f).y),
        d.offsetHeight > h ? e = - f + 1 : 0 > f + e ? e = - f + 1 : f + e + d.offsetHeight > h && (e = h - d.offsetHeight - f);
         else {
          e = _.ah().height;
          var m = _.Mj(c).y,
          n = l.body,
          l = l.documentElement,
          l = m - (new _.Lg(n.scrollLeft || l.scrollLeft, n.scrollTop || l.scrollTop)).y,
          c = c.offsetHeight,
          m = d.scrollHeight,
          g = g.P().offsetHeight,
          d = d.offsetHeight - d.clientHeight,
          q = d - h,
          n = Math.min(0.9 * e, m + d),
          d = Math.min(l, f + h, n - g - q),
          l = Math.min(e - l - c, m + q - f - g, n - g - h);
          d + l + c > n && (e = (n - c) / 2, d < e ? l = n - d - c : l < e ? d = n - l - c : l = d = e);
          e = - d;
          a.style.height = d + l + c + 'px';
          a.style.boxSizing = 'border-box';
          a.style.overflowY = 'auto';
          a.scrollTop = f - d + h
        }
      }
      a.style.top = e + 'px'

One important branching point here is if(this.kx).
Somewhere else in the code, this.kx is set to _.Fca and this again is defined as:

 _.Fca = "ontouchstart" in _.ba || !!(_.ba.document && window.document.documentElement && "ontouchstart" in window.document.documentElement) || !(!_.ba.navigator || !_.ba.navigator.msMaxTouchPoints);

So it fails if touch events are enabled.. (dom.w3c_touch_events.enabled)
Comment 7 User image Mike Taylor [:miketaylr] 2016-08-04 10:15:45 PDT
Karl, given comment #6, can we talk to Google about this?

(This should possibly affect Chrome as well, but I don't have the right device to test).
Comment 8 User image Kartikaya Gupta (email:kats@mozilla.com) 2016-08-04 10:29:48 PDT
I can reproduce this in Firefox both on OS X (if I set dom.w3c_touch_events.enabled=1) and a touch-enabled Windows device. I cannot reproduce in Chrome on the same touch-enabled Windows device.
Comment 9 User image Mike Taylor [:miketaylr] 2016-08-04 10:33:16 PDT
Thanks Kats!
Comment 10 User image Karl Dubost :karlcow 2016-08-04 17:59:13 PDT
Reported to Google. Switching to sitewait.
Comment 11 User image Mike Taylor [:miketaylr] 2016-10-06 05:09:20 PDT
This is still an issue.

Note You need to log in before you can comment on or make changes to this bug.