Web-bugs: delivery.panerabread.com - see bug description

[webcompat-bot]

URL: https://delivery.panerabread.com/

Browser / Version: Firefox 60.0
Operating System: Mac OS X 10.13
Tested Another Browser: Yes

Problem type: Something else
Description: Selecting one of the Rapid Pickup, Delivery, Order From My Table options does not give login overlay. Shows this iun console:
Steps to Reproduce:

gfx.webrender.all: false
gfx.webrender.blob-images: 1
gfx.webrender.enabled: false
image.mem.shared: 2

_From webcompat.com with ❤️_

[softvision-oana-arbuzov]

I was able to reproduce the issue.
Make sure VPN is active pointing to USA.

Affected area:

<div ng-repeat="orderType in ::orderTypeOrder" class="col-xs-12 col-sm-4 col-md-4" ng-click="setOrderType(orderType)" style="">
    <div class="row visible-xs">
        <div class="col-xs-3">
            <div class="icon rapid-pickup"></div>
        </div>
        <div class="col-xs-8">
            <p class="h3">Rapid Pick-Up

                <!---->
            </p>
        </div>
        <div class="col-xs-1">
            <i class="fa fa-lg fa-arrow-right"></i>
        </div>
    </div>
    <div class="hidden-xs dotted-border-right" ng-class="{'dotted-border-right': !$last &amp;&amp; !(deliveryAvailableNow || showDeliveryNowAvailableMsg),
       'delivery-highlight': orderType == 'DELIVERY' &amp;&amp; (deliveryAvailableNow  || showDeliveryNowAvailableMsg)}">
        <!---->
        <div class="icon rapid-pickup"></div>
        <span class="h3">
      Rapid Pick-Up
    </span>
        <div class="order-type-desc" ng-bind-html="orderTypes[orderType].description">We'll have your order ready on the Rapid Pick-Up shelf at the time you choose. No lines, no wait. Ordering for 10 or more? Click "Order Catering" in the box below.</div>
        <div class="arrow">
            <i class="fa fa-arrow-right"></i>
        </div>
    </div>
</div>

On click:

function(b) {
  var k = a.gci(),
    d;
  if (0 === l.indexOf("KD") || 0 === l.indexOf("KU")) {
    var e = b.keyCode || b.charCode;
    e && (l = 0 === l.indexOf("KD") ? "KD" + e : "KU" + e)
  }
  if (e = b.target || b.currentTarget || b.srcElement || null) k || b.isTrigger || a.bi(e, l), d = h.generateWrapperCallback(c, this, arguments);
  return d
}

Console:

Error: e.navigator.credentials.preventSilentAccess is not a function
t/this.requireUserMediation@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:402:17867
t/this.login@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:402:18597
ue/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:409:16307
s@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:5857
c/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:6029
$eval@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:13524
$digest@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:11993
$apply@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:13809
compile/</<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:40:20953
e.aCF@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:103:125
generateWrapperCallback@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:172:55
k@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:167:357
dispatch@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:30:2799
add/g.handle@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:30:851
EventListener.handleEvent*AELCallback@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:198:235
h.addEventListener@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:202:122
add@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:30:1334
w/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:19:4180
each@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:19:14871
each@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:19:13142
w@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:19:4162
on@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:30:6412
compile/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:40:20867
j/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:5662
_e@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:11081
m@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:3488
a@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:31121
z/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:30652
ee/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:1420
r@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:31616
p@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:1865
compile/</<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:41:3858
i@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:11547
d/i<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:4243
$digest@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:12307
$apply@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:13809
S/c<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:9859
o@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:23148
ut/u.defer/n<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:24611
setTimeout handler*ut/u.defer@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:24586
S@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:9840
$applyAsync@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:13925
c@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:20257
_@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:22220
Mt/</S.onload@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:22693
handleEventCallback@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:197:154
b@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:193:501
e/c[d]@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:194:297
EventHandlerNonNull*e@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:194:35
C@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:194:441
c@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:182:654
v/b.send@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:187:221
Mt/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:22986
g@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:21017
c@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:37:18743
s@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:5857
c/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:6029
$eval@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:13524
$digest@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:11993
$apply@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:38:13809
a/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:8629
a@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:21255
a@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:8550
oe@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:8836
ie@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:36:8075
@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:41:11438
e.aCF@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:103:125
jqLiteReadyCallback@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:146:363
f@https://delivery.panerabread.com/dtagent_ICA23STVgjprx_7000000121011.js:150:16
d@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:25269
o/</p<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:25586
setTimeout handler*o/<@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:25797
l@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:23505
fireWith@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:24281
fire@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:24315
l@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:23505
fireWith@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:24281
ready@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:27241
setTimeout handler*@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:29:27375
@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:19:222
@https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa:19:4
app.min.js:37:30681

Tested with:
Browser / Version: Firefox Nightly 60.0a1 (2018-02-12)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[karlcow]

ping @miketaylr for a bit of diagnosis. It sounds related to angular and events.

The original source code is an empty shell. (Thanks google cache)

    <div id="page-body" role="main">
      <android-app-banner></android-app-banner>
      <notification-banner></notification-banner>
      <pnra-navbar></pnra-navbar>
      <app-banner></app-banner>
      <div ng-view ng-cloak autoscroll id="content"></div>
      <pnra-footer></pnra-footer>
      <noscript>Enable JavaScript to view this web page.</noscript>
    </div>

[miketaylr]

OK, yeah. ng-repeat is our dear old friend Angular. Thank you for the excellent pre-diagnosis, @softvision-oana-arbuzov and @karlcow. I wonder if somehow this is related to custom elements.

I can't reproduce the bug as reported in Dev Edition 59, but can reproduce in Nightly 60. So let's use mozregression to see what's up:

mozregression --good=58 --arg=https://delivery.panerabread.com/

19:37.61 INFO: Narrowed inbound regression window from [e08b9e46, 2fb3a756] (3 builds) to [f228865f, 2fb3a756] (2 builds) (~1 steps left)
19:37.61 INFO: No more inbound revisions, bisection finished.
19:37.61 INFO: Last good revision: f228865f492ca24b82720fc40fdb00b8b0e8c10c
19:37.61 INFO: First bad revision: 2fb3a7563abca9759aa1ce834dfdc81ba1c32c76
19:37.61 INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=f228865f492ca24b82720fc40fdb00b8b0e8c10c&tochange=2fb3a7563abca9759aa1ce834dfdc81ba1c32c76

Hmm...

J.C. Jones — Bug 1428918 - Enable Web Authentication in Nightly r=keeler,smaug

[miketaylr]

In https://delivery.panerabread.com/scripts/app.min.js?682fbc2348a11e706cd066ca31470eaa

function() {
    if (navigator.credentials && !navigator.credentials.preventSilentAccess) {
        navigator.credentials.preventSilentAccess = navigator.credentials.requireUserMediation;
        var e = navigator.credentials.get.bind(navigator.credentials);
        navigator.credentials.get = function(t) {
            var n = ["silent", "optional", "required"];
            if (t.mediation && -1 === n.indexOf(t.mediation))
                throw new TypeError("The provided value '" + t.mediation + "' is not a valid enum value.");
            return "required" === t.mediation && console.warn("mediation: 'required' can not be supported in older browsers, using mediation: 'optional' instead."),
            t.unmediated = "silent" === t.mediation,
            e(t)
        }
        ,
        navigator.credentials.create = function(e) {
            var t = "NotSupportedError: Only 'password' and 'federated'credential types are currently supported.";
            return new Promise(function(n, r) {
                if (1 !== Object.keys(e).length)
                    return void r(t);
                if ("password"in e)
                    try {
                        n(new PasswordCredential(e.password))
                    } catch (i) {
                        r(i)
                    }
                else if ("federated"in e)
                    try {
                        n(new FederatedCredential(e.federated))
                    } catch (i) {
                        r(i)
                    }
                else
                    r(t)
            }
            )
        }
    }
}(),

[miketaylr]

Hm, looks like a polyfill for preventSilentAccess...

https://developers.google.com/web/updates/2017/06/credential-management-updates#preventsilentaccess

[miketaylr]

And the polyfill assumes navigator.credentials.requireUserMediation is a thing:

navigator.credentials.preventSilentAccess = navigator.credentials.requireUserMediation;

I don't see that we have this implemented in Firefox, so that would be a problem.

But maybe that's not the problem, according to the stack trace in @softvision-oana-arbuzov's comment.

Oh wait... we don't even get there. This bombs here:

this.login = function() {
  return a.isBrowserCompatible() ? (a.requireUserMediation(),
    e.navigator.credentials.get({
    password: !0,
    mediation: "optional"
  }).then(function(e) {
    return e ? a.loginWithFetch(e) : n.reject()
  })) : n.reject()
}

Which calls:

this.requireUserMediation = function() {
            return a.isBrowserCompatible() ? e.navigator.credentials.preventSilentAccess() || e.navigator.credentials.requireUserMediation() : void 0
}

Which calls:

this.isBrowserCompatible = function() {
  return !_.isUndefined(e.navigator.credentials) && !_.isUndefined(e.fetch)
}

So, since we now support navigator.credentials (and fetch), we pass level 1 of isBrowserCompatible, but choke on level 2, because it throws on navigator.credentials.preventSilentAccess.

So, the site is trying to do the right thing but failing. I'll file a bug in Bugzilla, because it's a site breaking "regression", but we should move to contactready because they're doing feature detection the wrong way.

[karlcow]

Thanks @miketaylr for the diagnosis.

[miketaylr]

Let's close this bug in favor of https://bugzilla.mozilla.org/show_bug.cgi?id=1439805.