Bug 1440499 - Add debug options for the payer details and shipping requested. r=MattN
authorSam Foster <sfoster@mozilla.com>
Thu, 01 Mar 2018 11:46:30 -0800
changeset 462318 d1a65f74a21cd71630da13e71cc18e2a3c40e30c
parent 462317 037b50a168a5f2864bea44c6e2e693e623533425
child 462319 f1965cf7425fe422c9e9c78018f11b97e0a0f229
push id1683
push usersfraser@mozilla.com
push dateThu, 26 Apr 2018 16:43:40 +0000
treeherdermozilla-release@5af6cb21869d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1440499
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1440499 - Add debug options for the payer details and shipping requested. r=MattN MozReview-Commit-ID: FnKn639SvzR
toolkit/components/payments/res/debugging.css
toolkit/components/payments/res/debugging.html
toolkit/components/payments/res/debugging.js
--- a/toolkit/components/payments/res/debugging.css
+++ b/toolkit/components/payments/res/debugging.css
@@ -1,7 +1,11 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 h1 {
   font-size: 1em;
 }
+
+fieldset > label {
+  white-space: nowrap;
+}
--- a/toolkit/components/payments/res/debugging.html
+++ b/toolkit/components/payments/res/debugging.html
@@ -13,17 +13,23 @@
     <div>
       <button id="refresh">Refresh</button>
       <button id="rerender">Re-render</button>
       <button id="logState">Log state</button>
       <button id="debugFrame" hidden>Debug frame</button>
       <h1>Requests</h1>
       <button id="setRequest1">Request 1</button>
       <button id="setRequest2">Request 2</button>
-      <button id="setRequestContactNoShipping">Contact &amp; No Shipping</button>
+      <fieldset id="paymentOptions">
+        <legend>Payment Options</legend>
+        <label><input type="checkbox" autocomplete="off" name="requestPayerName" id="setRequestPayerName">requestPayerName</label>
+        <label><input type="checkbox" autocomplete="off" name="requestPayerEmail" id="setRequestPayerEmail">requestPayerEmail</label>
+        <label><input type="checkbox" autocomplete="off" name="requestPayerPhone" id="setRequestPayerPhone">requestPayerPhone</label>
+        <label><input type="checkbox" autocomplete="off" name="requestShipping" id="setRequestShipping">requestShipping</label>
+      </fieldset>
       <h1>Addresses</h1>
       <button id="setAddresses1">Set Addreses 1</button>
       <button id="delete1Address">Delete 1 Address</button>
       <h1>Payment Methods</h1>
       <button id="setBasicCards1">Set Basic Cards 1</button>
       <button id="delete1Card">Delete 1 Card</button>
       <h1>States</h1>
       <button id="setChangesPrevented">Prevent changes</button>
--- a/toolkit/components/payments/res/debugging.js
+++ b/toolkit/components/payments/res/debugging.js
@@ -2,16 +2,34 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const paymentDialog = window.parent.document.querySelector("payment-dialog");
 // The requestStore should be manipulated for most changes but autofill storage changes
 // happen through setStateFromParent which includes some consistency checks.
 const requestStore = paymentDialog.requestStore;
 
+// keep the payment options checkboxes in sync w. actual state
+const paymentOptionsUpdater = {
+  stateChangeCallback(state) {
+    this.render(state);
+  },
+  render(state) {
+    let options = state.request.paymentOptions;
+    let checkboxes = document.querySelectorAll("#paymentOptions input[type='checkbox']");
+    for (let input of checkboxes) {
+      if (options.hasOwnProperty(input.name)) {
+        input.checked = options[input.name];
+      }
+    }
+  },
+};
+
+requestStore.subscribe(paymentOptionsUpdater);
+
 let REQUEST_1 = {
   tabId: 9,
   topLevelPrincipal: {URI: {displayHost: "tschaeff.github.io"}},
   requestId: "3797081f-a96b-c34b-a58b-1083c6e66e25",
   paymentMethods: [],
   paymentDetails: {
     id: "",
     totalItem: {label: "Demo total", amount: {currency: "EUR", value: "1.00"}, pending: false},
@@ -115,38 +133,16 @@ let REQUEST_2 = {
     requestPayerName: false,
     requestPayerEmail: false,
     requestPayerPhone: false,
     requestShipping: true,
     shippingType: "shipping",
   },
 };
 
-let REQUEST_CONTACT_NO_SHIPPING = {
-  tabId: 10,
-  topLevelPrincipal: {URI: {displayHost: "example.org"}},
-  requestId: "8288347a-ccec-4190-b4b1-673dbc709738",
-  paymentMethods: [],
-  paymentDetails: {
-    id: "",
-    totalItem: {label: "", amount: {currency: "EUR", value: "1234.56"}, pending: false},
-    displayItems: [],
-    shippingOptions: [],
-    modifiers: null,
-    error: "",
-  },
-  paymentOptions: {
-    requestPayerName: true,
-    requestPayerEmail: true,
-    requestPayerPhone: true,
-    requestShipping: false,
-    shippingType: "shipping",
-  },
-};
-
 let ADDRESSES_1 = {
   "48bnds6854t": {
     "address-level1": "MI",
     "address-level2": "Some City",
     "country": "US",
     "guid": "48bnds6854t",
     "name": "Mr. Foo",
     "postal-code": "90210",
@@ -263,18 +259,39 @@ let buttonActions = {
   setRequest1() {
     requestStore.setState({request: REQUEST_1});
   },
 
   setRequest2() {
     requestStore.setState({request: REQUEST_2});
   },
 
-  setRequestContactNoShipping() {
-    requestStore.setState({request: REQUEST_CONTACT_NO_SHIPPING});
+  setRequestPayerName() {
+    buttonActions.setPaymentOptions();
+  },
+  setRequestPayerEmail() {
+    buttonActions.setPaymentOptions();
+  },
+  setRequestPayerPhone() {
+    buttonActions.setPaymentOptions();
+  },
+  setRequestShipping() {
+    buttonActions.setPaymentOptions();
+  },
+
+  setPaymentOptions() {
+    let options = {};
+    let checkboxes = document.querySelectorAll("#paymentOptions input[type='checkbox']");
+    for (let input of checkboxes) {
+      options[input.name] = input.checked;
+    }
+    let req = Object.assign({}, requestStore.getState().request, {
+      paymentOptions: options,
+    });
+    requestStore.setState({ request: req });
   },
 
   setShippingError() {
     let request = Object.assign({}, requestStore.getState().request);
     request.paymentDetails = Object.assign({}, requestStore.getState().request.paymentDetails);
     request.paymentDetails.error = "Error!";
     request.paymentDetails.shippingOptions = [];
     requestStore.setState({