Bug 1416967 - Support payment request development over file: with CSP and a debugging console. r=jaws
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Mon, 13 Nov 2017 21:10:54 -0800
changeset 436629 882aabb22057d9420b5f3fee98bea4719799ccc2
parent 436628 8967a5cf4c31f05915470a69ea329762793a7883
child 436630 f28b8bb46e765b7d8d2a8969b383b1415b3cd87e
push id117
push userfmarier@mozilla.com
push dateTue, 28 Nov 2017 20:17:16 +0000
reviewersjaws
bugs1416967
milestone59.0a1
Bug 1416967 - Support payment request development over file: with CSP and a debugging console. r=jaws MozReview-Commit-ID: 3FgDhVN7IWR
toolkit/components/payments/.eslintrc.js
toolkit/components/payments/docs/index.rst
toolkit/components/payments/jar.mn
toolkit/components/payments/res/debugging.html
toolkit/components/payments/res/debugging.js
toolkit/components/payments/res/paymentRequest.css
toolkit/components/payments/res/paymentRequest.js
toolkit/components/payments/res/paymentRequest.xhtml
--- 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">