Bug 1466720 - Default PaymentRequest dialog styles for background, <a>, and debugging.html. r=jaws,sfoster
MozReview-Commit-ID: 5WFzbFFBvYj
--- a/browser/components/payments/res/components/rich-select.css
+++ b/browser/components/payments/res/components/rich-select.css
@@ -24,10 +24,9 @@ rich-select[open] > .rich-select-popup-b
background-color: #ffa;
}
.rich-option {
display: grid;
border-bottom: 1px solid #ddd;
background: #fff; /* TODO: system colors */
padding: 5px 20px;
- font-size: .8em;
}
--- a/browser/components/payments/res/containers/address-form.js
+++ b/browser/components/payments/res/containers/address-form.js
@@ -14,29 +14,29 @@ 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.pageTitle = document.createElement("h2");
this.genericErrorText = document.createElement("div");
this.cancelButton = document.createElement("button");
this.cancelButton.className = "cancel-button";
this.cancelButton.addEventListener("click", this);
this.backButton = document.createElement("button");
this.backButton.className = "back-button";
this.backButton.addEventListener("click", this);
this.saveButton = document.createElement("button");
- this.saveButton.className = "save-button";
+ this.saveButton.className = "save-button primary";
this.saveButton.addEventListener("click", this);
this.persistCheckbox = new LabelledCheckbox();
this._errorFieldMap = {
addressLine: "#street-address-container",
city: "#address-level2-container",
country: "#country-container",
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -15,17 +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.pageTitle = document.createElement("h2");
this.genericErrorText = document.createElement("div");
this.cancelButton = document.createElement("button");
this.cancelButton.className = "cancel-button";
this.cancelButton.addEventListener("click", this);
this.addressAddLink = document.createElement("a");
this.addressAddLink.className = "add-link";
@@ -36,17 +36,17 @@ export default class BasicCardForm exten
this.addressEditLink.href = "javascript:void(0)";
this.addressEditLink.addEventListener("click", this);
this.backButton = document.createElement("button");
this.backButton.className = "back-button";
this.backButton.addEventListener("click", this);
this.saveButton = document.createElement("button");
- this.saveButton.className = "save-button";
+ this.saveButton.className = "save-button primary";
this.saveButton.addEventListener("click", this);
this.persistCheckbox = new LabelledCheckbox();
// The markup is shared with form autofill preferences.
let url = "formautofill/editCreditCard.xhtml";
this.promiseReady = this._fetchMarkup(url).then(doc => {
this.form = doc.getElementById("form");
--- a/browser/components/payments/res/containers/order-details.css
+++ b/browser/components/payments/res/containers/order-details.css
@@ -42,10 +42,10 @@ order-details > .details-total {
margin: 0;
font-size: large;
grid-column-start: 2;
grid-column-end: 3;
text-align: end;
}
.details-total > currency-amount {
font-size: large;
- text-align: start;
+ text-align: end;
}
--- a/browser/components/payments/res/debugging.css
+++ b/browser/components/payments/res/debugging.css
@@ -1,11 +1,21 @@
/* 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/. */
+html {
+ /* Based on global.css styles for top-level XUL windows */
+ -moz-appearance: dialog;
+ background-color: -moz-Dialog;
+ color: -moz-DialogText;
+ font: message-box;
+ /* Make sure the background ends to the bottom if there is unused space */
+ height: 100%;
+}
+
h1 {
font-size: 1em;
}
fieldset > label {
white-space: nowrap;
}
--- a/browser/components/payments/res/paymentRequest.css
+++ b/browser/components/payments/res/paymentRequest.css
@@ -1,39 +1,59 @@
/* 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/. */
html {
- background: -moz-dialog;
+ /* Based on global.css styles for top-level XUL windows */
+ color: -moz-DialogText;
+ font: message-box;
height: 100%;
}
body {
+ /* Override font-size from in-content/common.css which is too large */
+ font-size: inherit;
+}
+
+#order-details-overlay,
+html {
+ /* Based on global.css styles for top-level XUL windows */
+ -moz-appearance: dialog;
+ background-color: -moz-Dialog;
+}
+
+body {
height: 100%;
margin: 0;
overflow: hidden;
}
[hidden] {
display: none !important;
}
#debugging-console {
+ /* include the default borders in the max-height */
+ box-sizing: border-box;
float: right;
+ /* avoid causing the body to scroll */
+ max-height: 100vh;
/* Float above the other overlays */
position: relative;
z-index: 99;
}
payment-dialog {
+ box-sizing: border-box;
display: grid;
grid-template-rows: fit-content(10%) auto;
height: 100%;
margin: 0 10%;
+ padding: 1em;
}
payment-dialog > header {
display: flex;
}
#main-container {
display: flex;
@@ -47,17 +67,16 @@ payment-dialog > header {
position: relative;
}
#error-text {
text-align: center;
}
#order-details-overlay {
- background-color: -moz-dialog;
overflow: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
@@ -75,22 +94,16 @@ payment-dialog > footer {
flex: 0 1 auto;
}
#total .label {
font-size: 15px;
font-weight: bold;
}
-#pay {
- background-color: #0060df;
- color: white;
- border: none;
-}
-
payment-dialog[changes-prevented][completion-state="fail"] #pay,
payment-dialog[changes-prevented][completion-state="unknown"] #pay,
payment-dialog[changes-prevented][completion-state="processing"] #pay,
payment-dialog[changes-prevented][completion-state="success"] #pay {
/* Show the pay button above #disabled-overlay */
position: relative;
z-index: 1;
}
--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -56,16 +56,17 @@
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>&paymentSummaryTitle;</title>
<!-- chrome: is needed for global.dtd -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' chrome:"/>
+ <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"/>
<link rel="stylesheet" href="paymentRequest.css"/>
<link rel="stylesheet" href="components/rich-select.css"/>
<link rel="stylesheet" href="components/address-option.css"/>
<link rel="stylesheet" href="components/basic-card-option.css"/>
<link rel="stylesheet" href="components/shipping-option.css"/>
<link rel="stylesheet" href="components/payment-details-item.css"/>
<link rel="stylesheet" href="containers/address-form.css"/>
<link rel="stylesheet" href="containers/order-details.css"/>
@@ -86,17 +87,17 @@
</div>
<div id="top-buttons" >
<button id="view-all" class="closed">&viewAllItems;</button>
</div>
</header>
<div id="main-container">
<section id="payment-summary" class="page">
- <h1>&paymentSummaryTitle;</h1>
+ <h2>&paymentSummaryTitle;</h2>
<section>
<div id="error-text"></div>
<div class="shipping-related"
id="shipping-type-label"
data-shipping-address-label="&shippingAddressLabel;"
data-delivery-address-label="&deliveryAddressLabel;"
@@ -122,25 +123,26 @@
data-edit-link-label="&payer.editLink.label;"
selected-state-key="selectedPayerAddress"></address-picker>
<div id="error-text"></div>
</section>
<footer id="controls-container">
<button id="cancel">&cancelPaymentButton.label;</button>
<button id="pay"
+ class="primary"
data-initial-label="&approvePaymentButton.label;"
data-processing-label="&processingPaymentButton.label;"
data-fail-label="&failPaymentButton.label;"
data-unknown-label="&unknownPaymentButton.label;"
data-success-label="&successPaymentButton.label;"></button>
</footer>
</section>
<section id="order-details-overlay" hidden="hidden">
- <h1>&orderDetailsLabel;</h1>
+ <h2>&orderDetailsLabel;</h2>
<order-details></order-details>
</section>
<basic-card-form id="basic-card-page"
class="page"
data-add-basic-card-title="&basicCard.addPage.title;"
data-edit-basic-card-title="&basicCard.editPage.title;"
data-error-generic-save="&basicCardPage.error.genericSave;"
--- a/browser/components/payments/test/browser/browser_address_edit.js
+++ b/browser/components/payments/test/browser/browser_address_edit.js
@@ -39,17 +39,17 @@ add_task(async function test_add_link()
is(addLink.textContent, "Add", "Add link text");
addLink.click();
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" && !state["address-page"].guid;
}, "Check add page state");
- let title = content.document.querySelector("address-form h1");
+ let title = content.document.querySelector("address-form h2");
is(title.textContent, "Add Shipping Address", "Page title should be set");
let persistCheckbox = content.document.querySelector("address-form labelled-checkbox");
ok(!persistCheckbox.hidden, "checkbox should be visible when adding a new address");
ok(Cu.waiveXrays(persistCheckbox).checked, "persist checkbox should be checked by default");
info("filling fields");
for (let [key, val] of Object.entries(address)) {
@@ -130,17 +130,17 @@ add_task(async function test_edit_link()
is(editLink.textContent, "Edit", "Edit link text");
editLink.click();
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" && !!state["address-page"].guid;
}, "Check edit page state");
- let title = content.document.querySelector("address-form h1");
+ let title = content.document.querySelector("address-form h2");
is(title.textContent, "Edit Shipping Address", "Page title should be set");
let persistCheckbox = content.document.querySelector("address-form labelled-checkbox");
ok(persistCheckbox.hidden, "checkbox should be hidden when editing an address");
info("overwriting field values");
for (let [key, val] of Object.entries(address)) {
let field = content.document.getElementById(key);
@@ -215,17 +215,17 @@ add_task(async function test_add_payer_c
is(addLink.textContent, "Add", "Add link text");
addLink.click();
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" && !state["address-page"].guid;
}, "Check add page state");
- let title = content.document.querySelector("address-form h1");
+ let title = content.document.querySelector("address-form h2");
is(title.textContent, "Add Payer Contact", "Page title should be set");
let persistCheckbox = content.document.querySelector("address-form labelled-checkbox");
ok(!persistCheckbox.hidden, "checkbox should be visible when adding a new address");
ok(Cu.waiveXrays(persistCheckbox).checked, "persist checkbox should be checked by default");
info("filling fields");
for (let [key, val] of Object.entries(address)) {
@@ -302,17 +302,17 @@ add_task(async function test_edit_payer_
is(editLink.textContent, "Edit", "Edit link text");
editLink.click();
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" && !!state["address-page"].guid;
}, "Check edit page state");
- let title = content.document.querySelector("address-form h1");
+ let title = content.document.querySelector("address-form h2");
is(title.textContent, "Edit Payer Contact", "Page title should be set");
let persistCheckbox = content.document.querySelector("address-form labelled-checkbox");
ok(persistCheckbox.hidden, "checkbox should be hidden when editing an address");
info("overwriting field values");
for (let [key, val] of Object.entries(address)) {
let field = content.document.getElementById(key);
--- a/browser/components/payments/test/browser/browser_card_edit.js
+++ b/browser/components/payments/test/browser/browser_card_edit.js
@@ -21,17 +21,17 @@ add_task(async function test_add_link()
return state.page.id == "basic-card-page" && !state["basic-card-page"].guid;
}, "Check add page state");
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return Object.keys(state.savedBasicCards).length == 0 &&
Object.keys(state.savedAddresses).length == 0;
}, "Check no cards or addresses present at beginning of test");
- let title = content.document.querySelector("basic-card-form h1");
+ let title = content.document.querySelector("basic-card-form h2");
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 persistCheckbox = content.document.querySelector("basic-card-form labelled-checkbox");
ok(Cu.waiveXrays(persistCheckbox).checked, "persist checkbox should be checked by default");
let card = Object.assign({}, PTU.BasicCards.JohnDoe);
@@ -52,17 +52,17 @@ add_task(async function test_add_link()
"The only option should be the blank/empty option");
let addressAddLink = content.document.querySelector(".billingAddressRow .add-link");
addressAddLink.click();
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" && !state["address-page"].guid;
}, "Check address page state");
- let addressTitle = content.document.querySelector("address-form h1");
+ let addressTitle = content.document.querySelector("address-form h2");
is(addressTitle.textContent, "Add Billing Address",
"Address on add address page should be correct");
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return Object.keys(state.savedBasicCards).length == 0;
}, "Check card was not added when clicking the 'add' address button");
let addressBackButton = content.document.querySelector("address-form .back-button");
@@ -161,17 +161,17 @@ add_task(async function test_edit_link()
return state.page.id == "basic-card-page" && state["basic-card-page"].guid;
}, "Check edit page state");
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return Object.keys(state.savedBasicCards).length == 1 &&
Object.keys(state.savedAddresses).length == 1;
}, "Check card and address present at beginning of test");
- let title = content.document.querySelector("basic-card-form h1");
+ let title = content.document.querySelector("basic-card-form h2");
is(title.textContent, "Edit Credit Card", "Edit title should be set");
let card = Object.assign({}, PTU.BasicCards.JohnDoe);
// cc-number cannot be modified
delete card["cc-number"];
card["cc-exp-year"]++;
card["cc-exp-month"]++;
@@ -193,17 +193,17 @@ add_task(async function test_edit_link()
billingAddressSelect.selectedIndex = 0;
let addressEditLink = content.document.querySelector(".billingAddressRow .edit-link");
addressEditLink.click();
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" && !state["address-page"].guid;
}, "Clicking edit button when the empty option is selected will go to 'add' page (no guid)");
- let addressTitle = content.document.querySelector("address-form h1");
+ let addressTitle = content.document.querySelector("address-form h2");
is(addressTitle.textContent, "Add Billing Address",
"Address on add address page should be correct");
let addressBackButton = content.document.querySelector("address-form .back-button");
addressBackButton.click();
state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "basic-card-page" && state["basic-card-page"].guid &&
Object.keys(state.savedAddresses).length == 1;
--- a/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
+++ b/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
@@ -46,17 +46,17 @@ add_task(async function test_onboarding_
info("Check if the total header is visible on the address page during on-boarding");
let header = content.document.querySelector("header");
ok(content.isVisible(header),
"Total Header is visible on the address page during on-boarding");
ok(header.textContent, "Total Header contains text");
info("Check if the page title is visible on the address page");
- let addressPageTitle = content.document.querySelector("address-form h1");
+ let addressPageTitle = content.document.querySelector("address-form h2");
ok(content.isVisible(addressPageTitle), "Address page title is visible");
is(addressPageTitle.textContent, "Add Shipping Address",
"Address page title is correctly shown");
let addressCancelButton = content.document.querySelector("address-form .cancel-button");
ok(content.isVisible(addressCancelButton),
"The cancel button on the address page is visible");
@@ -72,17 +72,17 @@ add_task(async function test_onboarding_
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "basic-card-page";
}, "Basic card page is shown after the address page during on boarding");
let cardSaveButton = content.document.querySelector("basic-card-form .save-button");
ok(content.isVisible(cardSaveButton), "Basic card page is rendered");
- let basicCardTitle = content.document.querySelector("basic-card-form h1");
+ let basicCardTitle = content.document.querySelector("basic-card-form h2");
ok(content.isVisible(basicCardTitle), "Basic card page title is visible");
is(basicCardTitle.textContent, "Add Credit Card", "Basic card page title is correctly shown");
info("Check if the correct billing address is selected in the basic card page");
PTU.DialogContentUtils.waitForState((state) => {
let billingAddressSelect = content.document.querySelector("#billingAddressGUID");
return state.selectedShippingAddress == billingAddressSelect.value;
}, "Shipping address is selected as the billing address");
@@ -319,17 +319,17 @@ add_task(async function test_onboarding_
}, "Billing address page is shown first during on-boarding if requestShipping is turned off");
info("Checking if the billing address page has been rendered");
let addressSaveButton = content.document.querySelector("address-form .save-button");
ok(content.isVisible(addressSaveButton),
"Address save button is rendered");
info("Check if the page title is visible on the address page");
- let addressPageTitle = content.document.querySelector("address-form h1");
+ let addressPageTitle = content.document.querySelector("address-form h2");
ok(content.isVisible(addressPageTitle), "Address page title is visible");
is(addressPageTitle.textContent, "Add Billing Address",
"Address page title is correctly shown");
for (let [key, val] of Object.entries(PTU.Addresses.TimBL2)) {
let field = content.document.getElementById(key);
if (!field) {
ok(false, `${key} field not found`);