Bug 1476204 - Implement the payment summary error bar. r=jaws
MozReview-Commit-ID: 3Rc9ljfMCW3
--- a/browser/components/payments/res/containers/payment-dialog.js
+++ b/browser/components/payments/res/containers/payment-dialog.js
@@ -48,17 +48,17 @@ export default class PaymentDialog exten
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._header = contents.querySelector("header");
- this._errorText = contents.querySelector("#payment-summary .page-error");
+ this._errorText = contents.querySelector("header > .page-error");
this._disabledOverlay = contents.getElementById("disabled-overlay");
this.appendChild(contents);
super.connectedCallback();
}
--- a/browser/components/payments/res/paymentRequest.css
+++ b/browser/components/payments/res/paymentRequest.css
@@ -40,21 +40,35 @@ payment-dialog > header,
.page > .page-body,
.page > footer {
padding: 0 10%;
}
payment-dialog > header {
border-bottom: 1px solid rgba(0,0,0,0.1);
display: flex;
+ /* Wrap so that the error text appears full-width above the rest of the contents */
+ flex-wrap: wrap;
/* from visual spec: */
padding-bottom: 19px;
padding-top: 19px;
}
+payment-dialog > header > .page-error:empty {
+ display: none;
+}
+
+payment-dialog > header > .page-error {
+ background: #D70022;
+ border-radius: 3px;
+ color: white;
+ padding: 6px;
+ width: 100%;
+}
+
#main-container {
display: flex;
grid-area: main;
position: relative;
max-height: 100%;
padding-top: 18px;
}
--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -89,29 +89,29 @@
<script src="formautofill/autofillEditForms.js"></script>
<script type="module" src="containers/payment-dialog.js"></script>
<script type="module" src="paymentRequest.js"></script>
<template id="payment-dialog-template">
<header>
+ <div class="page-error" aria-live="polite"></div>
<div id="total">
<currency-amount display-code="display-code"></currency-amount>
<div>&header.payTo; <span id="host-name"></span></div>
</div>
<div id="top-buttons" hidden="hidden">
<button id="view-all" class="closed">&viewAllItems;</button>
</div>
</header>
<div id="main-container">
<payment-request-page id="payment-summary">
<div class="page-body">
- <div class="page-error" aria-live="polite"></div>
<address-picker class="shipping-related"
data-add-link-label="&address.addLink.label;"
data-edit-link-label="&address.editLink.label;"
data-shipping-address-label="&shippingAddressLabel;"
data-delivery-address-label="&deliveryAddressLabel;"
data-pickup-address-label="&pickupAddressLabel;"
selected-state-key="selectedShippingAddress"></address-picker>
--- a/browser/components/payments/test/browser/browser_shippingaddresschange_error.js
+++ b/browser/components/payments/test/browser/browser_shippingaddresschange_error.js
@@ -32,17 +32,17 @@ add_task(async function test_show_error_
await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.selectShippingOptionById, "1");
info("awaiting the shippingoptionchange event");
await ContentTask.spawn(browser, {
eventName: "shippingoptionchange",
}, PTU.ContentTasks.awaitPaymentRequestEventPromise);
await spawnPaymentDialogTask(frame, expectedText => {
- let errorText = content.document.querySelector("#payment-summary .page-error");
+ let errorText = content.document.querySelector("header .page-error");
is(errorText.textContent, expectedText, "Error text should be on dialog");
ok(content.isVisible(errorText), "Error text should be visible");
}, PTU.Details.genericShippingError.error);
info("setting up the event handler for shippingaddresschange");
await ContentTask.spawn(browser, {
eventName: "shippingaddresschange",
details: Object.assign({},
@@ -54,17 +54,17 @@ add_task(async function test_show_error_
await selectPaymentDialogShippingAddressByCountry(frame, "DE");
info("awaiting the shippingaddresschange event");
await ContentTask.spawn(browser, {
eventName: "shippingaddresschange",
}, PTU.ContentTasks.awaitPaymentRequestEventPromise);
await spawnPaymentDialogTask(frame, () => {
- let errorText = content.document.querySelector("#payment-summary .page-error");
+ let errorText = content.document.querySelector("header .page-error");
is(errorText.textContent, "", "Error text should not be on dialog");
ok(content.isHidden(errorText), "Error text should not be visible");
});
info("clicking cancel");
spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
@@ -107,17 +107,17 @@ add_task(async function test_show_field_
let {
PaymentTestUtils: PTU,
} = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
await PTU.DialogContentUtils.waitForState(content, (state) => {
return Object.keys(state.request.paymentDetails.shippingAddressErrors).length;
}, "Check that there are shippingAddressErrors");
- is(content.document.querySelector("#payment-summary .page-error").textContent,
+ is(content.document.querySelector("header .page-error").textContent,
PTU.Details.fieldSpecificErrors.error,
"Error text should be present on dialog");
info("click the Edit link");
content.document.querySelector("address-picker .edit-link").click();
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" && state["address-page"].guid;
@@ -160,17 +160,17 @@ add_task(async function test_show_field_
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "payment-summary";
}, "Check we're back on summary view");
await PTU.DialogContentUtils.waitForState(content, (state) => {
return !Object.keys(state.request.paymentDetails.shippingAddressErrors).length;
}, "Check that there are no more shippingAddressErrors");
- is(content.document.querySelector("#payment-summary .page-error").textContent,
+ is(content.document.querySelector("header .page-error").textContent,
"", "Error text should not be present on dialog");
info("click the Edit link again");
content.document.querySelector("address-picker .edit-link").click();
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" && state["address-page"].guid;
}, "Check edit page state");