Bug 1478175 - Implement the branding in the lower left corner of the payment-summary page. r?mattn
MozReview-Commit-ID: Dp8SdEzlrG3
--- a/browser/components/payments/res/paymentRequest.css
+++ b/browser/components/payments/res/paymentRequest.css
@@ -169,8 +169,21 @@ payment-dialog[changes-prevented][comple
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
+
+#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;
+}
+
+body[dir="rtl"] #branding {
+ background-position: right center;
+}
--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -61,16 +61,17 @@
<!ENTITY failErrorPage.suggestion2 "Make sure your credit card information is accurate.">
<!ENTITY failErrorPage.suggestion3 "If no other solutions work, check with **host-name**.">
<!ENTITY failErrorPage.doneButton.label "OK">
<!ENTITY timeoutErrorPage.title "Whoops! **host-name** took too long to respond.">
<!ENTITY timeoutErrorPage.suggestion1 "Try again later.">
<!ENTITY timeoutErrorPage.suggestion2 "Check your network connection." >
<!ENTITY timeoutErrorPage.suggestion3 "If no other solutions work, check with **host-name**.">
<!ENTITY timeoutErrorPage.doneButton.label "OK">
+ <!ENTITY webPaymentsBranding.label "&brandShortName; Checkout">
]>
<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:"/>
@@ -128,16 +129,17 @@
<address-picker class="payer-related"
label="&payerLabel;"
data-add-link-label="&payer.addLink.label;"
data-edit-link-label="&payer.editLink.label;"
selected-state-key="selectedPayerAddress"></address-picker>
</div>
<footer>
+ <span id="branding">&webPaymentsBranding.label;</span>
<button id="cancel">&cancelPaymentButton.label;</button>
<button id="pay"
class="primary"
data-label="&approvePaymentButton.label;"
data-processing-label="&processingPaymentButton.label;"
data-unknown-label="&unknownPaymentButton.label;"
data-success-label="&successPaymentButton.label;"></button>
</footer>