Bug 1097814 - Fix fake hardware buttons in mulet. r=paul, r=vingtetun

b2g/components/SystemAppProxy.jsm

@@ -89,10 +89,16 @@ let SystemAppProxy = {
   },
 
   // Now deprecated, use sendCustomEvent with a custom event name
-  dispatchEvent: function systemApp_sendChromeEvent(details, target) {
+  dispatchEvent: function systemApp_dispatchEvent(details, target) {
     return this._sendCustomEvent('mozChromeEvent', details, false, target);
   },
 
+  dispatchKeyboardEvent: function systemApp_dispatchKeyboardEvent(type, details) {
+    let content = this._frame ? this._frame.contentWindow : null;
+    let e = new content.KeyboardEvent(type, details);
+    content.dispatchEvent(e);
+  },
+
   // Listen for dom events on the system app
   addEventListener: function systemApp_addEventListener() {
     let content = this._frame ? this._frame.contentWindow : null;

browser/devtools/responsivedesign/responsivedesign.jsm

@@ -482,11 +482,11 @@ ResponsiveUI.prototype = {
     sleepButton.className = "devtools-responsiveui-sleep-button";
     sleepButton.setAttribute("top", 0);
     sleepButton.setAttribute("right", 0);
-    sleepButton.addEventListener("mousedown", function() {
-      SystemAppProxy.dispatchEvent({type: "sleep-button-press"});
+    sleepButton.addEventListener("mousedown", () => {
+      SystemAppProxy.dispatchKeyboardEvent("keydown", {key: "Power"});
     });
-    sleepButton.addEventListener("mouseup", function() {
-      SystemAppProxy.dispatchEvent({type: "sleep-button-release"});
+    sleepButton.addEventListener("mouseup", () => {
+      SystemAppProxy.dispatchKeyboardEvent("keyup", {key: "Power"});
     });
     this.stack.appendChild(sleepButton);
 
@@ -497,20 +497,20 @@ ResponsiveUI.prototype = {
 
     let volumeUp = this.chromeDoc.createElement("button");
     volumeUp.className = "devtools-responsiveui-volume-up-button";
-    volumeUp.addEventListener("mousedown", function() {
-      SystemAppProxy.dispatchEvent({type: "volume-up-button-press"});
+    volumeUp.addEventListener("mousedown", () => {
+      SystemAppProxy.dispatchKeyboardEvent("keydown", {key: "VolumeUp"});
     });
-    volumeUp.addEventListener("mouseup", function() {
-      SystemAppProxy.dispatchEvent({type: "volume-up-button-release"});
+    volumeUp.addEventListener("mouseup", () => {
+      SystemAppProxy.dispatchKeyboardEvent("keyup", {key: "VolumeUp"});
     });
 
     let volumeDown = this.chromeDoc.createElement("button");
     volumeDown.className = "devtools-responsiveui-volume-down-button";
-    volumeDown.addEventListener("mousedown", function() {
-      SystemAppProxy.dispatchEvent({type: "volume-down-button-press"});
+    volumeDown.addEventListener("mousedown", () => {
+      SystemAppProxy.dispatchKeyboardEvent("keydown", {key: "VolumeDown"});
     });
-    volumeDown.addEventListener("mouseup", function() {
-      SystemAppProxy.dispatchEvent({type: "volume-down-button-release"});
+    volumeDown.addEventListener("mouseup", () => {
+      SystemAppProxy.dispatchKeyboardEvent("keyup", {key: "VolumeDown"});
     });
 
     volumeButtons.appendChild(volumeUp);
@@ -524,11 +524,11 @@ ResponsiveUI.prototype = {
 
     let homeButton = this.chromeDoc.createElement("toolbarbutton");
     homeButton.className = "devtools-responsiveui-toolbarbutton devtools-responsiveui-home-button";
-    homeButton.addEventListener("mousedown", function() {
-      SystemAppProxy.dispatchEvent({type: "home-button-press"});
+    homeButton.addEventListener("mousedown", () => {
+      SystemAppProxy.dispatchKeyboardEvent("keydown", {key: "Home"});
     });
-    homeButton.addEventListener("mouseup", function() {
-      SystemAppProxy.dispatchEvent({type: "home-button-release"});
+    homeButton.addEventListener("mouseup", () => {
+      SystemAppProxy.dispatchKeyboardEvent("keyup", {key: "Home"});
     });
     bottomToolbar.appendChild(homeButton);
     this.bottomToolbar = bottomToolbar;