Bug 1416967 - Support payment request development over file: with CSP and a debugging console. r=jaws
MozReview-Commit-ID: 3FgDhVN7IWR
--- a/toolkit/components/payments/.eslintrc.js
+++ b/toolkit/components/payments/.eslintrc.js
@@ -1,13 +1,12 @@
"use strict";
module.exports = {
rules: {
- "mozilla/balanced-listeners": "error",
"mozilla/var-only-at-top-level": "error",
"array-bracket-spacing": ["error", "never"],
"block-scoped-var": "error",
"comma-dangle": ["error", "always-multiline"],
complexity: ["error", {
max: 20,
}],
--- a/toolkit/components/payments/docs/index.rst
+++ b/toolkit/components/payments/docs/index.rst
@@ -9,22 +9,23 @@ JSDoc style comments are used within the
.. toctree::
:maxdepth: 5
Debugging
=========
Set the pref ``dom.payments.loglevel`` to "Debug".
-To open a debugger in the context of the remote payment frame, run the following while the dialog is the most recent window:
-``
-gDevToolsBrowser.openContentProcessToolbox({
- selectedBrowser: Services.wm.getMostRecentWindow(null).document.getElementById("paymentRequestFrame").frameLoader,
-})
-``
+To open a debugger in the context of the remote payment frame, run the following while the dialog is the most recent window::
+
+ gDevToolsBrowser.openContentProcessToolbox({
+ selectedBrowser: Services.wm.getMostRecentWindow(null).document.getElementById("paymentRequestFrame").frameLoader,
+ })
+
+To open the debugging console in the dialog, use the keyboard shortcut **Ctrl-Alt-d (Ctrl-Option-d on macOS)**.
Communication with the DOM
==========================
Communication from the DOM to the UI happens via the `paymentUIService.js` (implementing ``nsIPaymentUIService``).
The UI talks to the DOM code via the ``nsIPaymentRequestService`` interface.
--- a/toolkit/components/payments/jar.mn
+++ b/toolkit/components/payments/jar.mn
@@ -4,9 +4,11 @@
toolkit.jar:
% content payments %content/payments/
content/payments/paymentDialog.css (content/paymentDialog.css)
content/payments/paymentDialog.js (content/paymentDialog.js)
content/payments/paymentDialogFrameScript.js (content/paymentDialogFrameScript.js)
content/payments/paymentDialog.xhtml (content/paymentDialog.xhtml)
% resource payments %res/payments/
- res/payments (res/paymentRequest.*)
+ res/payments (res/paymentRequest.*)
+ res/payments/debugging.html (res/debugging.html)
+ res/payments/debugging.js (res/debugging.js)
new file mode 100644
--- /dev/null
+++ b/toolkit/components/payments/res/debugging.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- 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>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
+ <script src="debugging.js"></script>
+ </head>
+ <body>
+ <div>
+ <button id="refresh">Refresh</button>
+ </div>
+ </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/toolkit/components/payments/res/debugging.js
@@ -0,0 +1,18 @@
+/* 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/. */
+
+let buttonActions = {
+ refresh() {
+ window.parent.location.reload(true);
+ },
+};
+
+window.addEventListener("click", function onButtonClick(evt) {
+ let id = evt.target.id;
+ if (!id || typeof(buttonActions[id]) != "function") {
+ return;
+ }
+
+ buttonActions[id]();
+});
--- a/toolkit/components/payments/res/paymentRequest.css
+++ b/toolkit/components/payments/res/paymentRequest.css
@@ -1,16 +1,20 @@
/* 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;
}
+#debugging-console {
+ float: right;
+}
+
#total {
border: 1px solid black;
margin: 5px;
text-align: center;
}
#total .label {
font-size: 15px;
--- a/toolkit/components/payments/res/paymentRequest.js
+++ b/toolkit/components/payments/res/paymentRequest.js
@@ -13,16 +13,18 @@
let PaymentRequest = {
request: null,
domReadyPromise: null,
init() {
// listen to content
window.addEventListener("paymentChromeToContent", this);
+ window.addEventListener("keypress", this);
+
this.domReadyPromise = new Promise(function dcl(resolve) {
window.addEventListener("DOMContentLoaded", resolve, {once: true});
}).then(this.handleEvent.bind(this));
// This scope is now ready to listen to the initialization data
this.sendMessageToChrome("initializeRequest");
},
@@ -36,16 +38,24 @@ let PaymentRequest = {
switch (event.target.id) {
case "cancel": {
this.onCancel();
break;
}
}
break;
}
+ case "keypress": {
+ if (event.code != "KeyD" || !event.altKey || !event.ctrlKey) {
+ break;
+ }
+ let debuggingConsole = document.getElementById("debugging-console");
+ debuggingConsole.hidden = !debuggingConsole.hidden;
+ break;
+ }
case "unload": {
this.onPaymentRequestUnload();
break;
}
case "paymentChromeToContent": {
this.onChromeToContent(event);
break;
}
--- a/toolkit/components/payments/res/paymentRequest.xhtml
+++ b/toolkit/components/payments/res/paymentRequest.xhtml
@@ -1,20 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- 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/. -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
+ <meta http-equiv="Content-Security-Policy" content="default-src 'self'"/>
<title></title>
- <link rel="stylesheet" href="resource://payments/paymentRequest.css" />
- <script src="resource://payments/paymentRequest.js"></script>
+ <link rel="stylesheet" href="paymentRequest.css"/>
+ <script src="paymentRequest.js"></script>
</head>
<body>
+ <iframe id="debugging-console" hidden="hidden" src="debugging.html"></iframe>
<div id="host-name"></div>
<div id="total">
<h2 class="label"></h2>
<span class="value"></span>
<span class="currency"></span>
</div>
<div id="controls-container">