Bug 1457317 - Show a title for the add/edit pages. r=MattN
authorJared Wein <jwein@mozilla.com>
Thu, 26 Apr 2018 15:43:31 -0700
changeset 472807 7a6c8a95fc9f4c087ef1172dbcaeb74e79631888
parent 472806 ec8911b8f9c7ea3fcb51a7957903503eb163ae30
child 472808 b2bbaf13b5ebebdfdd733fe27cc02716e5cf8cb4
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1457317
milestone61.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 1457317 - Show a title for the add/edit pages. r=MattN MozReview-Commit-ID: 9B8aA6lPpJX
browser/components/payments/res/containers/address-form.js
browser/components/payments/res/containers/address-picker.js
browser/components/payments/res/containers/basic-card-form.js
browser/components/payments/res/containers/payment-dialog.js
browser/components/payments/res/containers/payment-method-picker.js
browser/components/payments/res/paymentRequest.xhtml
browser/components/payments/test/browser/browser_address_edit.js
browser/components/payments/test/browser/browser_card_edit.js
browser/components/payments/test/mochitest/test_address_form.html
browser/components/payments/test/mochitest/test_basic_card_form.html
--- a/browser/components/payments/res/containers/address-form.js
+++ b/browser/components/payments/res/containers/address-form.js
@@ -13,16 +13,17 @@ import paymentRequest from "../paymentRe
  * XXX: Bug 1446164 - This form isn't localized when used via this custom element
  * as it will be much easier to share the logic once we switch to Fluent.
  */
 
 export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement) {
   constructor() {
     super();
 
+    this.pageTitle = document.createElement("h1");
     this.genericErrorText = document.createElement("div");
 
     this.backButton = document.createElement("button");
     this.backButton.addEventListener("click", this);
 
     this.saveButton = document.createElement("button");
     this.saveButton.addEventListener("click", this);
 
@@ -44,16 +45,17 @@ export default class AddressForm extends
       });
       xhr.open("GET", url);
       xhr.send();
     });
   }
 
   connectedCallback() {
     this.promiseReady.then(form => {
+      this.appendChild(this.pageTitle);
       this.appendChild(form);
 
       let record = {};
       this.formHandler = new EditAddress({
         form,
       }, record, {
         DEFAULT_REGION: PaymentDialogUtils.DEFAULT_REGION,
         getFormFormat: PaymentDialogUtils.getFormFormat,
@@ -74,16 +76,17 @@ export default class AddressForm extends
     this.saveButton.textContent = this.dataset.saveButtonLabel;
 
     let record = {};
     let {
       page,
       savedAddresses,
     } = state;
 
+    this.pageTitle.textContent = page.title;
     this.genericErrorText.textContent = page.error;
 
     let editing = !!page.guid;
 
     // If an address is selected we want to edit it.
     if (editing) {
       record = savedAddresses[page.guid];
       if (!record) {
--- a/browser/components/payments/res/containers/address-picker.js
+++ b/browser/components/payments/res/containers/address-picker.js
@@ -167,22 +167,24 @@ export default class AddressPicker exten
         id: "address-page",
         selectedStateKey: this.selectedStateKey,
       },
     };
 
     switch (target) {
       case this.addLink: {
         nextState.page.guid = null;
+        nextState.page.title = this.dataset.addAddressTitle;
         break;
       }
       case this.editLink: {
         let state = this.requestStore.getState();
         let selectedAddressGUID = state[this.selectedStateKey];
         nextState.page.guid = selectedAddressGUID;
+        nextState.page.title = this.dataset.editAddressTitle;
         break;
       }
       default: {
         throw new Error("Unexpected onClick");
       }
     }
 
     this.requestStore.setState(nextState);
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -15,16 +15,17 @@ import paymentRequest from "../paymentRe
  * XXX: Bug 1446164 - This form isn't localized when used via this custom element
  * as it will be much easier to share the logic once we switch to Fluent.
  */
 
 export default class BasicCardForm extends PaymentStateSubscriberMixin(HTMLElement) {
   constructor() {
     super();
 
+    this.pageTitle = document.createElement("h1");
     this.genericErrorText = document.createElement("div");
 
     this.backButton = document.createElement("button");
     this.backButton.addEventListener("click", this);
 
     this.saveButton = document.createElement("button");
     this.saveButton.addEventListener("click", this);
 
@@ -48,16 +49,17 @@ export default class BasicCardForm exten
       });
       xhr.open("GET", url);
       xhr.send();
     });
   }
 
   connectedCallback() {
     this.promiseReady.then(form => {
+      this.appendChild(this.pageTitle);
       this.appendChild(form);
 
       let record = {};
       let addresses = [];
       this.formHandler = new EditCreditCard({
         form,
       }, record, addresses, {
         isCCNumber: PaymentDialogUtils.isCCNumber,
@@ -70,26 +72,28 @@ export default class BasicCardForm exten
       this.appendChild(this.saveButton);
       // Only call the connected super callback(s) once our markup is fully
       // connected, including the shared form fetched asynchronously.
       super.connectedCallback();
     });
   }
 
   render(state) {
+    let {
+      page,
+      savedAddresses,
+      selectedShippingAddress,
+    } = state;
+
+    this.pageTitle.textContent = page.title;
     this.backButton.textContent = this.dataset.backButtonLabel;
     this.saveButton.textContent = this.dataset.saveButtonLabel;
     this.persistCheckbox.label = this.dataset.persistCheckboxLabel;
 
     let record = {};
-    let {
-      page,
-      savedAddresses,
-      selectedShippingAddress,
-    } = state;
     let basicCards = paymentRequest.getBasicCards(state);
 
     this.genericErrorText.textContent = page.error;
 
     let editing = !!page.guid;
     this.form.querySelector("#cc-number").disabled = editing;
 
     // If a card is selected we want to edit it.
--- a/browser/components/payments/res/containers/payment-dialog.js
+++ b/browser/components/payments/res/containers/payment-dialog.js
@@ -40,16 +40,17 @@ export default class PaymentDialog exten
 
     this._viewAllButton = contents.querySelector("#view-all");
     this._viewAllButton.addEventListener("click", this);
 
     this._mainContainer = contents.getElementById("main-container");
     this._orderDetailsOverlay = contents.querySelector("#order-details-overlay");
 
     this._shippingTypeLabel = contents.querySelector("#shipping-type-label");
+    this._shippingAddressPicker = contents.querySelector("address-picker.shipping-related");
     this._shippingRelatedEls = contents.querySelectorAll(".shipping-related");
     this._payerRelatedEls = contents.querySelectorAll(".payer-related");
     this._payerAddressPicker = contents.querySelector("address-picker.payer-related");
 
     this._errorText = contents.querySelector("#error-text");
 
     this._disabledOverlay = contents.getElementById("disabled-overlay");
 
@@ -230,16 +231,22 @@ export default class PaymentDialog exten
     this._cachedState.selectedShippingOption = state.selectedShippingOption;
   }
 
   render(state) {
     let request = state.request;
     let paymentDetails = request.paymentDetails;
     this._hostNameEl.textContent = request.topLevelPrincipal.URI.displayHost;
 
+    let shippingType = state.request.paymentOptions.shippingType || "shipping";
+    this._shippingAddressPicker.dataset.addAddressTitle =
+      this.dataset[shippingType + "AddressTitleAdd"];
+    this._shippingAddressPicker.dataset.editAddressTitle =
+      this.dataset[shippingType + "AddressTitleEdit"];
+
     let totalItem = paymentRequest.getTotalItem(state);
     let totalAmountEl = this.querySelector("#total > currency-amount");
     totalAmountEl.value = totalItem.amount.value;
     totalAmountEl.currency = totalItem.amount.currency;
 
     this._orderDetailsOverlay.hidden = !state.orderDetailsShowing;
     this._errorText.textContent = paymentDetails.error;
 
@@ -264,18 +271,19 @@ export default class PaymentDialog exten
       }
       if (paymentOptions.requestPayerPhone) {
         fieldNames.add("tel");
       }
       this._payerAddressPicker.setAttribute("address-fields", [...fieldNames].join(" "));
     } else {
       this._payerAddressPicker.removeAttribute("address-fields");
     }
+    this._payerAddressPicker.dataset.addAddressTitle = this.dataset.payerTitleAdd;
+    this._payerAddressPicker.dataset.editAddressTitle = this.dataset.payerTitleEdit;
 
-    let shippingType = paymentOptions.shippingType || "shipping";
     this._shippingTypeLabel.querySelector("label").textContent =
       this._shippingTypeLabel.dataset[shippingType + "AddressLabel"];
 
     this._renderPayButton(state);
 
     for (let page of this._mainContainer.querySelectorAll(":scope > .page")) {
       page.hidden = state.page.id != page.id;
     }
--- a/browser/components/payments/res/containers/payment-method-picker.js
+++ b/browser/components/payments/res/containers/payment-method-picker.js
@@ -131,22 +131,24 @@ export default class PaymentMethodPicker
       page: {
         id: "basic-card-page",
       },
     };
 
     switch (target) {
       case this.addLink: {
         nextState.page.guid = null;
+        nextState.page.title = this.dataset.addBasicCardTitle;
         break;
       }
       case this.editLink: {
         let state = this.requestStore.getState();
         let selectedPaymentCardGUID = state[this.selectedStateKey];
         nextState.page.guid = selectedPaymentCardGUID;
+        nextState.page.title = this.dataset.editBasicCardTitle;
         break;
       }
       default: {
         throw new Error("Unexpected onClick");
       }
     }
 
     this.requestStore.setState(nextState);
--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -14,16 +14,26 @@
   <!ENTITY shippingOptionsLabel       "Shipping Options">
   <!ENTITY paymentMethodsLabel        "Payment Method">
   <!ENTITY address.addLink.label      "Add">
   <!ENTITY address.editLink.label     "Edit">
   <!ENTITY basicCard.addLink.label    "Add">
   <!ENTITY basicCard.editLink.label   "Edit">
   <!ENTITY payer.addLink.label        "Add">
   <!ENTITY payer.editLink.label       "Edit">
+  <!ENTITY shippingAddress.addPage.title  "Add Shipping Address">
+  <!ENTITY shippingAddress.editPage.title "Edit Shipping Address">
+  <!ENTITY deliveryAddress.addPage.title  "Add Delivery Address">
+  <!ENTITY deliveryAddress.editPage.title "Edit Delivery Address">
+  <!ENTITY pickupAddress.addPage.title    "Add Pickup Address">
+  <!ENTITY pickupAddress.editPage.title   "Edit Pickup Address">
+  <!ENTITY basicCard.addPage.title    "Add Credit Card">
+  <!ENTITY basicCard.editPage.title   "Edit Credit Card">
+  <!ENTITY payer.addPage.title        "Add Payer Contact">
+  <!ENTITY payer.editPage.title       "Edit Payer Contact">
   <!ENTITY payerLabel                 "Contact Information">
   <!ENTITY cancelPaymentButton.label   "Cancel">
   <!ENTITY approvePaymentButton.label  "Pay">
   <!ENTITY processingPaymentButton.label "Processing">
   <!ENTITY successPaymentButton.label    "Done">
   <!ENTITY failPaymentButton.label       "Fail">
   <!ENTITY unknownPaymentButton.label    "Unknown">
   <!ENTITY orderDetailsLabel          "Order Details">
@@ -87,16 +97,18 @@
                           data-edit-link-label="&address.editLink.label;"
                           selected-state-key="selectedShippingAddress"></address-picker>
 
           <div class="shipping-related"><label>&shippingOptionsLabel;</label></div>
           <shipping-option-picker class="shipping-related"></shipping-option-picker>
 
           <div><label>&paymentMethodsLabel;</label></div>
           <payment-method-picker selected-state-key="selectedPaymentCard"
+                                 data-add-basic-card-title="&basicCard.addPage.title;"
+                                 data-edit-basic-card-title="&basicCard.editPage.title;"
                                  data-add-link-label="&basicCard.addLink.label;"
                                  data-edit-link-label="&basicCard.editLink.label;">
           </payment-method-picker>
 
           <div class="payer-related"><label>&payerLabel;</label></div>
           <address-picker class="payer-related"
                           data-add-link-label="&payer.addLink.label;"
                           data-edit-link-label="&payer.editLink.label;"
@@ -149,11 +161,18 @@
       <currency-amount></currency-amount>
     </div>
   </template>
 </head>
 <body dir="&locale.dir;">
   <iframe id="debugging-console"
           hidden="hidden"
           height="400"></iframe>
-  <payment-dialog></payment-dialog>
+  <payment-dialog data-shipping-address-title-add="&shippingAddress.addPage.title;"
+                  data-shipping-address-title-edit="&shippingAddress.editPage.title;"
+                  data-delivery-address-title-add="&deliveryAddress.addPage.title;"
+                  data-delivery-address-title-edit="&deliveryAddress.editPage.title;"
+                  data-pickup-address-title-add="&pickupAddress.addPage.title;"
+                  data-pickup-address-title-edit="&pickupAddress.editPage.title;"
+                  data-payer-title-add="&payer.addPage.title;"
+                  data-payer-title-edit="&payer.editPage.title;"></payment-dialog>
 </body>
 </html>
--- a/browser/components/payments/test/browser/browser_address_edit.js
+++ b/browser/components/payments/test/browser/browser_address_edit.js
@@ -42,16 +42,19 @@ add_task(async function test_add_link() 
       is(addLink.textContent, "Add", "Add link text");
 
       addLink.click();
 
       let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" && !state.page.guid;
       }, "Check add page state");
 
+      let title = content.document.querySelector("address-form h1");
+      is(title.textContent, "Add Shipping Address", "Page title should be set");
+
       info("filling fields");
       for (let [key, val] of Object.entries(address)) {
         let field = content.document.getElementById(key);
         if (!field) {
           ok(false, `${key} field not found`);
         }
         field.value = val;
         ok(!field.disabled, `Field #${key} shouldn't be disabled`);
@@ -117,16 +120,19 @@ add_task(async function test_edit_link()
       is(editLink.textContent, "Edit", "Edit link text");
 
       editLink.click();
 
       let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" && !!state.page.guid;
       }, "Check edit page state");
 
+      let title = content.document.querySelector("address-form h1");
+      is(title.textContent, "Edit Shipping Address", "Page title should be set");
+
       info("overwriting field values");
       for (let [key, val] of Object.entries(address)) {
         let field = content.document.getElementById(key);
         field.value = val;
         ok(!field.disabled, `Field #${key} shouldn't be disabled`);
       }
 
       content.document.querySelector("address-form button:last-of-type").click();
--- a/browser/components/payments/test/browser/browser_card_edit.js
+++ b/browser/components/payments/test/browser/browser_card_edit.js
@@ -16,16 +16,19 @@ add_task(async function test_add_link() 
     is(addLink.textContent, "Add", "Add link text");
 
     addLink.click();
 
     let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
       return state.page.id == "basic-card-page" && !state.page.guid;
     }, "Check add page state");
 
+    let title = content.document.querySelector("basic-card-form h1");
+    is(title.textContent, "Add Credit Card", "Add title should be set");
+
     ok(!state.isPrivate,
        "isPrivate flag is not set when paymentrequest is shown from a non-private session");
     let persistInput = content.document.querySelector("basic-card-form labelled-checkbox");
     ok(Cu.waiveXrays(persistInput).checked, "persist checkbox should be checked by default");
 
     let year = (new Date()).getFullYear();
     let card = {
       "cc-number": "4111111111111111",
@@ -75,16 +78,19 @@ add_task(async function test_edit_link()
     is(editLink.textContent, "Edit", "Edit link text");
 
     editLink.click();
 
     let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
       return state.page.id == "basic-card-page" && !!state.page.guid;
     }, "Check edit page state");
 
+    let title = content.document.querySelector("basic-card-form h1");
+    is(title.textContent, "Edit Credit Card", "Edit title should be set");
+
     let nextYear = (new Date()).getFullYear() + 1;
     let card = {
       // cc-number cannot be modified
       "cc-name": "A. Nonymous",
       "cc-exp-month": 3,
       "cc-exp-year": nextYear,
     };
 
--- a/browser/components/payments/test/mochitest/test_address_form.html
+++ b/browser/components/payments/test/mochitest/test_address_form.html
@@ -69,23 +69,26 @@ add_task(async function test_initialStat
 });
 
 add_task(async function test_backButton() {
   let form = new AddressForm();
   form.dataset.backButtonLabel = "Back";
   await form.requestStore.setState({
     page: {
       id: "test-page",
+      title: "Sample page title",
     },
   });
   await form.promiseReady;
   display.appendChild(form);
   await asyncElementRendered();
 
   let stateChangePromise = promiseStateChange(form.requestStore);
+  is(form.pageTitle.textContent, "Sample page title", "Check label");
+
   is(form.backButton.textContent, "Back", "Check label");
   form.backButton.scrollIntoView();
   synthesizeMouseAtCenter(form.backButton, {});
 
   let {page} = await stateChangePromise;
   is(page.id, "payment-summary", "Check initial page after appending");
 
   form.remove();
--- a/browser/components/payments/test/mochitest/test_basic_card_form.html
+++ b/browser/components/payments/test/mochitest/test_basic_card_form.html
@@ -64,23 +64,25 @@ add_task(async function test_initialStat
 });
 
 add_task(async function test_backButton() {
   let form = new BasicCardForm();
   form.dataset.backButtonLabel = "Back";
   await form.requestStore.setState({
     page: {
       id: "test-page",
+      title: "Sample page title 2",
     },
   });
   await form.promiseReady;
   display.appendChild(form);
   await asyncElementRendered();
 
   let stateChangePromise = promiseStateChange(form.requestStore);
+  is(form.pageTitle.textContent, "Sample page title 2", "Check title");
   is(form.backButton.textContent, "Back", "Check label");
   synthesizeMouseAtCenter(form.backButton, {});
 
   let {page} = await stateChangePromise;
   is(page.id, "payment-summary", "Check initial page after appending");
 
   form.remove();
 });