[Payments] Add metrics for Payment Request aborts.

chrome/test/data/android/payments/metrics.js

+/*
+ * Copyright 2016 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/* global PaymentRequest:false */
+/* global toDictionary:false */
+
+/**
+ * Launches the PaymentRequest UI that accepts credit cards.
+ */
+function buy() {  // eslint-disable-line no-unused-vars

[Bernhard Bauer, 2016/08/04 08:14:38]

Out of curiosity: Where do we run a JS linting step?

[please use gerrit instead, 2016/08/04 19:08:56]

I run this manually in my editor. You can also run this locally after install
eslint and the Google config (https://github.com/google/eslint-config-google):

$ eslint -c google --env browser .

+  try {
+    var request = new PaymentRequest(
+        [{supportedMethods: ['visa']}], {
+          total: {label: 'Total', amount: {currency: 'USD', value: '5.00'}},
+          shippingOptions: [{
+            id: 'freeShippingOption',
+            label: 'Free global shipping',
+            amount: {currency: 'USD', value: '0'},
+            selected: true
+          }]
+        },
+        {requestShipping: true});
+    request.show()
+        .then(function(resp) {
+          resp.complete('success')

[Bernhard Bauer, 2016/08/04 08:14:38]

If you return this from the callback, you can chain the then() calls, avoiding
the "leaning tower of callbacks" as well as the need for multiple .catch() calls
(rejected promises will simply propagate).

[sebsg, 2016/08/04 20:47:49]

Nice! I'll fix that for the other js files too: crbug.com/634457

+              .then(function() {
+                print(
+                    resp.shippingOption + '<br>' +
+                    JSON.stringify(
+                        toDictionary(resp.shippingAddress), undefined, 2) +
+                    '<br>' + resp.methodName + '<br>' +
+                    JSON.stringify(resp.details, undefined, 2));
+              })
+              .catch(function(error) {
+                print(error);
+              });
+        })
+        .catch(function(error) {
+          print(error);
+        });
+  } catch (error) {
+    print(error.message);

[Bernhard Bauer, 2016/08/04 08:14:38]

Maybe for a future CL: You could try to use window.onerror to install a global
handler for uncaught exceptions (I haven't tried that myself, but it would
remove the need to wrap every single call in a try/catch).

[sebsg, 2016/08/04 20:47:50]

I'll try that: crbug.com/634463

+  }
+}
+
+/**
+ * Launches the PaymentRequest UI which accepts a supported payment method but
+ * does not accept credit cards.
+ */
+function noMatching() {  // eslint-disable-line no-unused-vars
+  try {
+    var request = new PaymentRequest(
+        [{supportedMethods: ['https://bobpay.com']}], {
+          total: {label: 'Total', amount: {currency: 'USD', value: '5.00'}},
+          shippingOptions: [{
+            id: 'freeShippingOption',
+            label: 'Free global shipping',
+            amount: {currency: 'USD', value: '0'},
+            selected: true
+          }]
+        },
+        {requestShipping: true});
+    request.show()
+        .then(function(resp) {

[Bernhard Bauer, 2016/08/04 08:14:38]

Would a `=>`-style function work here as well?

[please use gerrit instead, 2016/08/04 17:16:49]

These test files will eventually be used on iOS, which does not support ()=>{}
style functions yet. If we use ()=>{} today, then we'd have to change it back
later. So I advise against it, but you may use your own judgement.

[sebsg, 2016/08/04 20:47:50]

Removed the => completely.

+          resp.complete('success')
+              .then(function() {
+                print(
+                    resp.shippingOption + '<br>' +
+                    JSON.stringify(
+                        toDictionary(resp.shippingAddress), undefined, 2) +
+                    '<br>' + resp.methodName + '<br>' +
+                    JSON.stringify(resp.details, undefined, 2));
+              })
+              .catch(function(error) {
+                print(error);
+              });
+        })
+        .catch(function(error) {
+          print(error);
+        });
+  } catch (error) {
+    print(error.message);
+  }
+}
+
+/**
+ * Launches the PaymentRequest UI which accepts only an unsupported payment
+ * method.
+ */
+function noSupported() {  // eslint-disable-line no-unused-vars
+  try {
+    var request = new PaymentRequest(
+        [{supportedMethods: ['https://randompay.com']}], {
+          total: {label: 'Total', amount: {currency: 'USD', value: '5.00'}},
+          shippingOptions: [{
+            id: 'freeShippingOption',
+            label: 'Free global shipping',
+            amount: {currency: 'USD', value: '0'},
+            selected: true
+          }]
+        },
+        {requestShipping: true});
+    request.show()
+        .then(function(resp) {
+          resp.complete('success')
+              .then(function() {
+                print(
+                    resp.shippingOption + '<br>' +
+                    JSON.stringify(
+                        toDictionary(resp.shippingAddress), undefined, 2) +
+                    '<br>' + resp.methodName + '<br>' +
+                    JSON.stringify(resp.details, undefined, 2));
+              })
+              .catch(function(error) {
+                print(error);
+              });
+        })
+        .catch(function(error) {
+          print(error);
+        });
+  } catch (error) {
+    print(error.message);
+  }
+}
+
+/**
+ * Aborts the current PaymentRequest.
+ */
+function abort() {  // eslint-disable-line no-unused-vars
+  try {
+    request.abort().then(() => {

[Bernhard Bauer, 2016/08/04 08:14:38]

Is this method actually called? What does |request| refer to? I see a |request|
above, but both instances should be in a closure.

(Also, you could try to see whether adding "use strict" to the top of the file
would have caught this.)

[sebsg, 2016/08/04 20:47:49]

I tried adding "use strict" but I didn't get any warning or error. Is there a
special flag to set to GN or something like that?

For the rest, it seems I was dumb and actually didn't test it... Fixed it now
thanks!

[Bernhard Bauer, 2016/08/05 08:56:12]

Oh right, I think even strict mode would only catch this at runtime, because it
only knows at runtime whether that property on the window object exists or
not... <sigh> Javascript.

+      print('Aborted');
+    }).catch(() => {
+      print('Cannot abort');
+    });
+  } catch (error) {
+    print(error.message);
+  }
+}