mail.google.com - Unable to sign out

[webcompat-bot]

URL: https://mail.google.com/mail/mu/mp/921/#mn

Browser / Version: Firefox Mobile 68.0
Operating System: Android 8.0.0
Tested Another Browser: Yes

Problem type: Something else
Description: Sign out doesn't work.
Steps to Reproduce:
For a moment, it isn't possible to sign out, even after an update of Firefox mobile.

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20190729203625
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: true
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: false
• channel: beta

Console Messages:

[u'[JavaScript Warning: "Content Security Policy: Ignoring \'report-sample\' within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring \'unsafe-inline\' within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring https: within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring http: within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 141 column: 14 source: "//@ sourceURL=closure,ui,prefsmanager.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 65 column: 14 source: "//@ sourceURL=tl.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 53 column: 14 source: "//@ sourceURL=ads.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 169 column: 14 source: "//@ sourceURL=offline.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 8 column: 14 source: "//@ sourceURL=cacheactions.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 52 column: 14 source: "//@ sourceURL=avatar,bamenu,menu.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 11 column: 14 source: "//@ sourceURL=imagepreloader.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 31 column: 14 source: "//@ sourceURL=tlactions.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 11 column: 14 source: "//@ sourceURL=keyboard.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 146 column: 14 source: "//@ sourceURL=fx,conv.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 15 column: 14 source: "//@ sourceURL=undo.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 8 column: 14 source: "//@ sourceURL=query.js"}]', u'[JavaScript Warning: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!" {file: "https://mail.google.com/mail/mu/mp/921/#cv/priority/%5Esmartlabel_personal/16c868705b3b42c5" line: 0}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 19 column: 14 source: "//@ sourceURL=settings.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 89 column: 14 source: "//@ sourceURL=compose.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 8 column: 14 source: "//@ sourceURL=cachedrafts.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 9 column: 14 source: "//@ sourceURL=upload.js"}]', u'[JavaScript Warning: "Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead" {file: "https://mail.google.com/mail/mu/mp/921/" line: 44 column: 14 source: "//@ sourceURL=preferences.js"}]']

From webcompat.com with ❤️

[cipriansv]

Thanks for the report,
I was indeed able to reproduce the issue. I am not able to sign out.

Tested with:
Browser / Version: Firefox Nightly Mobile 68.1a1 (2019-08-13), Chrome Mobile 76.0.3809.111
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Nightly when I try to access the menu for signing out:

And this is the web page displayed in Chrome:

[wisniewskit]

Odd. It also works in the RDM, which is showing a console error when I click on my username to bring up the sign-out options:

TypeError: a is undefined 121:1411:414
    Ng https://mail.google.com/mail/mu/mp/121/:1411
    Wg https://mail.google.com/mail/mu/mp/121/:1412
    D https://mail.google.com/mail/mu/mp/121/:1661
    <anonymous> self-hosted:1063
    sendTouchEvent resource://devtools/server/actors/emulation/touch-simulator.js:373
    handleEvent resource://devtools/server/actors/emulation/touch-simulator.js:279

It then proceeds to do what Chrome does anyway, which is to change the tab's location to their SignOutOptions page. It looks like Fennec isn't hitting that error, and whatever their event-handler is doing isn't working properly.

Mobile Chrome also redirects to SignOutOptions, but does not hit the same error I'm seeing in the RDM. However, when I try the RDM in Chrome desktop with a Fennec user-agent string, it does not redirect, but rather shows a black frame right on the page with the sign-out options. So this is something they are serving to Firefox and not Chrome (for now?).

This is how the markup for that black frame should look:

<div class="Un f">
  <div class="pA" style="">
    <div class="Fn Gn" style="top: 36px; left: 39px;">
      <div class="tA">
         <div class="sA">
            <div class="uA">Accounts</div>
            <ul class="nA">
              <li>
                 <div class="M j vA wA xA l" data-onclick="Gd" data-onclick-arg="121" role="button" tabindex="0">
                   <div class="V j a l" style="max-width:100%">webcompat.tester@gmail.com</div>
                 </div>
              </li>
            </ul>
            <ul class="nA">
              <li>
                <div class="M j vA wA" data-onclick="Hd" role="button" tabindex="0">
                  <div class="V j a" style="max-width:100%">Sign into another account...</div>
                </div>
              </li>
              <li>
                 <div class="M j vA xA" data-onclick="q" role="button" tabindex="0">
                   <div class="V j a" style="max-width:100%">Sign out of all accounts</div>
                 </div>
              </li>
           </ul>
        </div>
      </div>
      <div class="sA">
        <div class="yA">
          <a class="zA" href="#" data-onclick="r">Help</a>
        </div>
      </div>
    </div>
  </div>
</div>

But in the Fennec inspector, there is nothing inside that pA element. This implies a script is failing to load that content, but there are no console warnings, so it's unclear what is breaking this.

The script which handles this is: https://mail.google.com/mail/mu/mp/121/settings.js
It seems as though the d8 function in that script is what generates the markup that should end up in the black frame, and it probably is not returning the correct results in Firefox.

Unfortunately, it's buried in a module embedded in the 1-megabyte-sized markup, which made this a royal pain to debug. Ultimately I had to copy-as-curl to get that huge markup for use in Tinker Tester as a network override on Fennec, have it bypass CORS, strip out the JS nonces from the source, change the module in that output to the pretty-printed version Firefox was showing me, and go from there.

Ultimately, it turns out that Firefox does call the d8 function properly, and get the same HTML to inject. So something in this code is likely failing to inject that string into the markup properly:

  r.show = function () {
    So(this.B);
    if (this.A) {
      var a = this.A,
      b = d8(this),
      c = document.createElement('div');
      be(c, lj(b));
      a.M.innerHTML = c.firstChild.innerHTML
    } else {
      a = d8(this);
      b = this.T;
      c = y(this.Ia, this);
      var d = this.L,
      e = this.Y,
      g = document.createElement('div');
      be(g, lj(a));
      this.A = new b8(g.firstChild, b, c, d, e)
    }
    rg(this.C);
    this.ec = !0;
    this.A.show()
  };

But that also seems to be working. Firefox enters the else clause, creates a div with the expected innerHTML, and ends up placing that into this.A.M. It then calls this.A.show() (here de-minified):

    r.show = function() {
        if (!this.ec) {
          H(this.M, !0);
          if (!this.D) { 
            this.M.style.visibility = "hidden";
            this.C.appendChild(this.M);
            this.D = !0;
          }
          this.mc();
          this.M.style.visibility = "";
          this.ec = !0;
          if (this.A) {
            rg(this.A);
          }
        }
    };

And if I add a debugger statement to the top of that function and step through, now the Un f element looks "empty" in the inspector. Weird! However, when I right-click it and "copy outer HTML" it seems to have the correct markup inside of it. Too weird!

I decided to remove my debugger statement and play around a bit with the DOM tree. It seems that now the Un f element is "empty" in the inspector, rather than the pA element, so something pretty weird is going on here.

I right-clicked the Un f and selected "use in console" to play with it there. When I set its innerHTML to this, I see "test" appear on-screen, but the inspector still doesn't see anything inside of the pA element:

`<div class="pA"><div class="Fn Gn">test</div></div>`

So maybe the inspector issue is separate from the real issue? This is the markup they are setting:

`<div class="pA" style=""><div class="Fn Gn" style="top: 36px; left: 39px;"><div class="tA"><div class="sA"><div class="uA">Accounts</div><ul class="nA"><li><div class="M j vA wA xA l" data-onclick="Gd" data-onclick-arg="121" role="button" tabindex="0"><div class="V j a l" style="max-width:100%">webcompat.tester@gmail.com</div></div></li></ul><ul class="nA"><li><div class="M j vA wA" data-onclick="Hd" role="button" tabindex="0"><div class="V j a" style="max-width:100%">Sign into another account...</div></div></li><li><div class="M j vA xA" data-onclick="q" role="button" tabindex="0"><div class="V j a" style="max-width:100%">Sign out of all accounts</div></div></li></ul></div></div><div class="sA"><div class="yA"><a class="zA" href="#" data-onclick="r">Help</a></div></div></div></div>`

When I strip away the top/left style properties, I do see different content being rendered; it's just "behind" the username and placed strangely. And oddly enough, if I change the ancestor element <div class="dn "> so that it has `position:absolute' instead of relative, then the black framed content also appears.

But I cannot "drill down" into the contents to test which elements need changes, or what those changes are, and doing so without the inspector would be incredibly time-consuming at best, so I'm not sure what to recommend here. More distressingly, when I use my Testcase Reducer on the Chrome RDM output and try that in Fennec, everything renders correctly. So I can't even tell if it's just a CSS difference in the engines, or some combination of scripts.

Howeer, I did at least find out that the devtools aren't letting me drill into the nodes because of what seems to be a bug: the remote inspector cannot "see" all of the content that is added to a document with innerHTML.

Knowing that doesn't help me diagnose this further, though. @miketaylr, @denschub, any ideas? Given that Chrome is not even hitting this black frame, I wonder if we ought to just contact GMail, since this could be a bug specific to their Firefox version.

[miketaylr]

Howeer, I did at least find out that the devtools aren't letting me drill into the nodes because of what seems to be a bug: the remote inspector cannot "see" all of the content that is added to a document with innerHTML.

That bug got fixed a few days ago, is it worth trying to poke at this again in Nightly @wisniewskit?

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.