Bug 1489629 - Adjust the size of the error images, sizing and position of text, and add footer branding to the error pages. r=sfoster

Differential Revision: https://phabricator.services.mozilla.com/D5320

--HG--
extra : moz-landing-system : lando

browser/components/payments/res/containers/completion-error-page.js

@@ -26,6 +26,10 @@ export default class CompletionErrorPage extends PaymentStateSubscriberMixin(Pay
     this.suggestions = [];
     this.body.append(this.suggestionsList);
 
+    this.brandingSpan = document.createElement("span");
+    this.brandingSpan.classList.add("branding");
+    this.footer.appendChild(this.brandingSpan);
+
     this.doneButton = document.createElement("button");
     this.doneButton.classList.add("done-button", "primary");
     this.doneButton.addEventListener("click", this);
@@ -51,6 +55,7 @@ export default class CompletionErrorPage extends PaymentStateSubscriberMixin(Pay
 
     this.pageTitleHeading.textContent = this.dataset.pageTitle;
     this.suggestionHeading.textContent = this.dataset.suggestionHeading;
+    this.brandingSpan.textContent = this.dataset.brandingLabel;
     this.doneButton.textContent = this.dataset.doneButtonLabel;
 
     this.suggestionsList.textContent = "";

browser/components/payments/res/containers/error-page.css

@@ -1,9 +1,11 @@
 .error-page.illustrated > .page-body {
-  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  min-height: 160px;
   background-position: left center;
   background-repeat: no-repeat;
-  background-size: 38%;
-  padding-inline-start: 38%;
+  background-size: 160px;
+  padding-inline-start: 160px;
 }
 
 .error-page.illustrated > .page-body:dir(rtl) {
@@ -14,6 +16,17 @@
   background: none;
   padding-inline-start: 0;
   margin-inline-start: 0;
+  font-weight: lighter;
+  font-size: 2rem;
+}
+
+.error-page.illustrated > .page-body > p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.error-page.illustrated > .page-body > ul {
+  margin-top: .5rem;
 }
 
 .error-page#completion-timeout-error > .page-body {

browser/components/payments/res/debugging.js

@@ -37,7 +37,7 @@ const paymentOptionsUpdater = {
 
 let REQUEST_1 = {
   tabId: 9,
-  topLevelPrincipal: {URI: {displayHost: "tschaeff.github.io"}},
+  topLevelPrincipal: {URI: {displayHost: "debugging.example.com"}},
   requestId: "3797081f-a96b-c34b-a58b-1083c6e66e25",
   completeStatus: "",
   paymentMethods: [],

browser/components/payments/res/paymentRequest.css

@@ -159,10 +159,6 @@ payment-dialog[changes-prevented][complete-status="success"] #pay {
   z-index: 1;
 }
 
-#cancel {
-  margin-inline-start: auto;
-}
-
 #disabled-overlay {
   background: white;
   grid-area: disabled-overlay;
@@ -176,15 +172,16 @@ payment-dialog[changes-prevented][complete-status="success"] #pay {
   left: 0;
 }
 
-#branding {
+.branding {
   background-image: url(chrome://branding/content/icon32.png);
   background-size: 16px;
   background-repeat: no-repeat;
   background-position: left center;
   padding-inline-start: 20px;
   line-height: 20px;
+  margin-inline-end: auto;
 }
 
-body[dir="rtl"] #branding {
+body[dir="rtl"] .branding {
   background-position: right center;
 }

browser/components/payments/res/paymentRequest.xhtml

@@ -154,7 +154,7 @@
         </div>
 
         <footer>
-          <span id="branding">&webPaymentsBranding.label;</span>
+          <span class="branding">&webPaymentsBranding.label;</span>
           <button id="cancel">&cancelPaymentButton.label;</button>
           <button id="pay"
                   class="primary"
@@ -198,6 +198,7 @@
       <completion-error-page id="completion-timeout-error" class="illustrated"
                   data-page-title="&timeoutErrorPage.title;"
                   data-suggestion-heading="&timeoutErrorPage.suggestionHeading;"
+                  data-branding-label="&webPaymentsBranding.label;"
                   data-done-button-label="&timeoutErrorPage.doneButton.label;"
                   hidden="hidden"></completion-error-page>
       <completion-error-page id="completion-fail-error" class="illustrated"
@@ -205,6 +206,7 @@
                   data-suggestion-heading="&failErrorPage.suggestionHeading;"
                   data-suggestion-1="&failErrorPage.suggestion1;"
                   data-suggestion-2="&failErrorPage.suggestion2;"
+                  data-branding-label="&webPaymentsBranding.label;"
                   data-done-button-label="&failErrorPage.doneButton.label;"
                   hidden="hidden"></completion-error-page>
     </div>

browser/components/payments/test/mochitest/test_completion_error_page.html

@@ -21,6 +21,7 @@ Test the completion-error-page component
             data-suggestion-heading="Sample suggestion heading"
             data-suggestion-1="Sample suggestion"
             data-suggestion-2="Sample suggestion"
+            data-branding-label="Sample Brand"
             data-done-button-label="OK"></completion-error-page>
   </p>
 <div id="content" style="display: none">
@@ -44,6 +45,7 @@ add_task(async function test_no_values() {
      "Suggestion 1 set on page");
   is(page.dataset["suggestion-2"], "Sample suggestion",
      "Suggestion 2 set on page");
+  is(page.dataset.brandingLabel, "Sample Brand", "Branding string set");
 
   page.dataset.pageTitle = "Oh noes! **host-name** is having an issue";
   page.dataset["suggestion-2"] = "You should probably blame **host-name**, not us";
@@ -72,6 +74,12 @@ add_task(async function test_no_values() {
   is(page.querySelector("li:nth-child(2)").textContent,
      `You should probably blame ${displayHost}, not us`,
      "Suggestion 2 includes host-name");
+  is(page.querySelector(".branding").textContent,
+     "Sample Brand",
+     "Branding set on page");
+  is(page.querySelector(".primary").textContent,
+     "OK",
+     "Primary button label set correctly");
 });
 </script>