Bug 1440499 - Add debug options for the payer details and shipping requested. r=MattN

MozReview-Commit-ID: FnKn639SvzR

--HG--
extra : rebase_source : 02b64c921eacda7c24e1c2bc33c66d05b21cf267

toolkit/components/payments/res/debugging.css

@@ -5,3 +5,7 @@
 h1 {
   font-size: 1em;
 }
+
+fieldset > label {
+  white-space: nowrap;
+}

toolkit/components/payments/res/debugging.html

@@ -18,7 +18,13 @@
       <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>

toolkit/components/payments/res/debugging.js

@@ -7,6 +7,24 @@ const paymentDialog = window.parent.document.querySelector("payment-dialog");
 // 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"}},
@@ -120,28 +138,6 @@ let REQUEST_2 = {
   },
 };
 
-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",
@@ -268,8 +264,29 @@ let buttonActions = {
     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() {