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 392067 882aabb22057d9420b5f3fee98bea4719799ccc2
parent 392066 8967a5cf4c31f05915470a69ea329762793a7883
child 392068 f28b8bb46e765b7d8d2a8969b383b1415b3cd87e
push id32910
push userrgurzau@mozilla.com
push dateThu, 16 Nov 2017 10:02:59 +0000
treeherdermozilla-central@9941e68b5a53 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1416967
milestone59.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 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">