Bug 1466720 - Default PaymentRequest dialog styles for background, <a>, and debugging.html. r=jaws
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Wed, 13 Jun 2018 11:40:11 -0700
changeset 479169 beee9be72f9d40a49258be2a05f0a050a1cfdabf
parent 479168 afba719bf9034570c6d52992ceab97128da55b69
child 479170 09023041e95acb429bc8b298eae3dba046dfe6ae
push id1757
push userffxbld-merge
push dateFri, 24 Aug 2018 17:02:43 +0000
treeherdermozilla-release@736023aebdb1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1466720
milestone62.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 1466720 - Default PaymentRequest dialog styles for background, <a>, and debugging.html. r=jaws MozReview-Commit-ID: 5WFzbFFBvYj
browser/components/payments/res/components/rich-select.css
browser/components/payments/res/containers/address-form.js
browser/components/payments/res/containers/basic-card-form.js
browser/components/payments/res/containers/order-details.css
browser/components/payments/res/debugging.css
browser/components/payments/res/paymentRequest.css
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/browser/browser_payments_onboarding_wizard.js
--- 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`);