Bug 944443 - Uplift home button from simulator to b2g desktop. r=vingtetun, r=fabrice
authorAlexandre Poirot <poirot.alex@gmail.com>
Wed, 19 Mar 2014 08:38:59 -0400
changeset 174472 2246fe6ceae069598722f3477a9110df9f3b57ae
parent 174471 463fa756b43be262180ef2002132106b6fdff134
child 174473 2aa1cbf3cd21b9a6b75c5d2b62f2770385dfe424
push id5801
push usercbook@mozilla.com
push dateThu, 20 Mar 2014 13:29:21 +0000
treeherderfx-team@131277cc768d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvingtetun, fabrice
bugs944443
milestone31.0a1
Bug 944443 - Uplift home button from simulator to b2g desktop. r=vingtetun, r=fabrice
b2g/chrome/content/desktop.css
b2g/chrome/content/desktop.js
b2g/chrome/content/images/desktop/home-black.png
b2g/chrome/content/images/desktop/home-white.png
b2g/chrome/content/screen.js
b2g/chrome/content/shell.html
b2g/chrome/content/shell.js
b2g/chrome/jar.mn
configure.in
new file mode 100644
--- /dev/null
+++ b/b2g/chrome/content/desktop.css
@@ -0,0 +1,36 @@
+#controls {
+  position: absolute;
+  left: 0;
+  bottom:0;
+  right: 0;
+  height: 30px;
+  background-color: -moz-dialog;
+}
+
+#home-button {
+  margin: auto;
+  margin-top: 3px;
+  width: 24px;
+  height: 24px;
+  background: #eee url("images/desktop/home-black.png") center no-repeat;
+  border: 1px solid #888;
+  border-radius: 12px;
+  display: block;
+}
+
+#home-button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+#home-button:hover {
+  background-image: url("images/desktop/home-white.png");
+  background-color: #ccc;
+  border-color: #555;
+}
+
+#home-button.active {
+  background-image: url("images/desktop/home-white.png");
+  background-color: #888;
+  border-color: black;
+}
--- a/b2g/chrome/content/desktop.js
+++ b/b2g/chrome/content/desktop.js
@@ -1,17 +1,42 @@
 /* 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/. */
 
-window.addEventListener("ContentStart", function(evt) {
-  // Enable touch event shim on desktop that translates mouse events
-  // into touch ones
-  let require = Cu.import("resource://gre/modules/devtools/Loader.jsm", {})
+// Enable touch event shim on desktop that translates mouse events
+// into touch ones
+function enableTouch() {
+  let require = Cu.import('resource://gre/modules/devtools/Loader.jsm', {})
                   .devtools.require;
-  let { TouchEventHandler } = require("devtools/touch-events");
+  let { TouchEventHandler } = require('devtools/touch-events');
   let chromeEventHandler = window.QueryInterface(Ci.nsIInterfaceRequestor)
                                  .getInterface(Ci.nsIWebNavigation)
                                  .QueryInterface(Ci.nsIDocShell)
                                  .chromeEventHandler || window;
   let touchEventHandler = new TouchEventHandler(chromeEventHandler);
   touchEventHandler.start();
+}
+
+function setupHomeButton() {
+  let homeButton = document.getElementById('home-button');
+  if (!homeButton) {
+    // The toolbar only exists in b2g desktop build with
+    // FXOS_SIMULATOR turned on.
+    return;
+  }
+  // The touch event helper is enabled on shell.html document,
+  // so that click events are delayed and it is better to
+  // listen for touch events.
+  homeButton.addEventListener('touchstart', function() {
+    shell.sendChromeEvent({type: 'home-button-press'});
+    homeButton.classList.add('active');
+  });
+  homeButton.addEventListener('touchend', function() {
+    shell.sendChromeEvent({type: 'home-button-release'});
+    homeButton.classList.remove('active');
+  });
+}
+
+window.addEventListener('ContentStart', function() {
+  enableTouch();
+  setupHomeButton();
 });
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c51187ed49e128d49b64adabf003fd140411477d
GIT binary patch
literal 331
zc$@)C0kr;!P)<h;3K|Lk000e1NJLTq000aC000aK1^@s6R&`wG00006VoOIv0RI60
z0RN!9r;`8x0RTxvK~yNutx&s7#6T3BdER{{^R7fdf-DnI05J(Y5F7<SjA-K|L<|Ku
zL81gIfD*6_2^reVTKl{t=aU6@BH<<PH}ghsfPaY0Ik$AqEdgXdmz+06QFvp_gSGYy
z0Q$av9){sEgz)u?P!z?Hsy-TH4pnsp05QgF7>17+<9P_-4U?qz{xr|?Cu{A#wRR;U
ziDX)5Cn5_~ed)UHJ@ejQsp`G8RwwXAp2V88M{=R6fhnb904G&d-H{x(xsXzlrfIGL
zyl#Fd%koo1#*`A9rnv!ts;X{Drg0plZQBC?kl7VZnPg3}p3f$nY?0@-dMDwpm|we?
dxl`|&eFNOMWnB{Vk-q={002ovPDHLkV1gK|iDUo(
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..43379d0e949ccb5b6664f6e230f47d448e723254
GIT binary patch
literal 276
zc%17D@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kwj^(N7l!{JxM1({$v}~lo-U3d
z8t0ex8|EEy5ODp!eJ4YxMo{2|bt&5|{j*%W=V}E_X)a({m*BmxRqzyVg524>6je3N
zAD1%Rjo+Vt<I&HxqVc=T*ZL1a77X#0d<Q<s?dj{VQ#yBmqerl?uR|_EeBG%J-AfiP
zN%s_2XqZrPa%*y0$^+4g$t_E=>y~d?5;ZCJ{oJ5i3}+2^=2yPbzqu~REBf|cb@QH^
z54Po&Pr6ciw_PPCd|P;Gtl^x7*IOdnZmi3-ua&p`{CsE3cb@vJz)8z8x7p7w-YUIt
Xdi(biYu9-KJ;mVZ>gTe~DWM4f`2KW(
--- a/b2g/chrome/content/screen.js
+++ b/b2g/chrome/content/screen.js
@@ -123,18 +123,25 @@ window.addEventListener('ContentStart', 
   
   // In order to do rescaling, we set the <browser> tag to the specified
   // width and height, and then use a CSS transform to scale it so that
   // it appears at the correct size on the host display.  We also set
   // the size of the <window> element to that scaled target size.
   let scale = rescale ? hostDPI / dpi : 1;
 
   // Set the window width and height to desired size plus chrome
+  // Set the window width and height to desired size plus chrome
+  // Include the size of the toolbox displayed under the system app
+  let controls = document.getElementById('controls');
+  let controlsHeight = 0;
+  if (controls) {
+    controlsHeight = controls.getBoundingClientRect().height;
+  }
   let chromewidth = window.outerWidth - window.innerWidth;
-  let chromeheight = window.outerHeight - window.innerHeight;
+  let chromeheight = window.outerHeight - window.innerHeight + controlsHeight;
   window.resizeTo(Math.round(width * scale) + chromewidth,
                   Math.round(height * scale) + chromeheight);
 
   // Set the browser element to the full unscaled size of the screen
   browser.style.width = browser.style.minWidth = browser.style.maxWidth =
     width + 'px';
   browser.style.height = browser.style.minHeight = browser.style.maxHeight =
     height + 'px';
--- a/b2g/chrome/content/shell.html
+++ b/b2g/chrome/content/shell.html
@@ -7,17 +7,21 @@
       id="shell"
       windowtype="navigator:browser"
 #ifdef ANDROID
       sizemode="fullscreen"
 #endif
       >
 
 <head>
-  <link rel="stylesheet" href="shell.css" type="text/css" media="all" />
+  <link rel="stylesheet" href="shell.css" type="text/css">
+#ifdef FXOS_SIMULATOR
+  <link rel="stylesheet" href="desktop.css" type="text/css">
+#endif
+
   <script type="application/javascript;version=1.8"
           src="chrome://b2g/content/settings.js"> </script>
   <script type="application/javascript;version=1.8"
           src="chrome://b2g/content/shell.js"> </script>
 
 #ifndef MOZ_WIDGET_GONK
   <!-- various task that has to happen only on desktop -->
   <script type="application/javascript;version=1.8"
@@ -26,17 +30,24 @@
   <script type="application/javascript;version=1.8"
           src="chrome://b2g/content/screen.js"> </script>
   <!-- this script handles the "runapp" argument for desktop builds -->
   <script type="application/javascript;version=1.8"
           src="chrome://b2g/content/runapp.js"> </script>
 #endif
 </head>
   <body id="container">
-#ifdef MOZ_WIDGET_COCOA
+#ifdef FXOS_SIMULATOR
+    <!--
+     Some additional buttons are displayed on desktop to fake hardware buttons.
+    -->
+    <footer id="controls">
+      <button id="home-button"></button>
+    </footer>
+#elifdef MOZ_WIDGET_COCOA
     <!--
      If the document is empty at startup, we don't display the window
      at all on Mac OS...
     -->
     <h1 id="placeholder">wtf mac os!</h1>
 #endif
     <!-- The html:iframe containing the UI is created here. -->
   </body>
--- a/b2g/chrome/content/shell.js
+++ b/b2g/chrome/content/shell.js
@@ -298,17 +298,21 @@ var shell = {
     systemAppFrame.setAttribute('id', 'systemapp');
     systemAppFrame.setAttribute('mozbrowser', 'true');
     systemAppFrame.setAttribute('mozapp', manifestURL);
     systemAppFrame.setAttribute('allowfullscreen', 'true');
     systemAppFrame.setAttribute('style', "overflow: hidden; height: 100%; width: 100%; border: none;");
     systemAppFrame.setAttribute('src', "data:text/html;charset=utf-8,%3C!DOCTYPE html>%3Cbody style='background:black;");
     let container = document.getElementById('container');
 #ifdef MOZ_WIDGET_COCOA
-    container.removeChild(document.getElementById('placeholder'));
+    // See shell.html
+    let hotfix = document.getElementById('placeholder');
+    if (hotfix) {
+      container.removeChild(hotfix);
+    }
 #endif
     container.appendChild(systemAppFrame);
 
     systemAppFrame.contentWindow
                   .QueryInterface(Ci.nsIInterfaceRequestor)
                   .getInterface(Ci.nsIWebNavigation)
                   .sessionHistory = Cc["@mozilla.org/browser/shistory;1"]
                                       .createInstance(Ci.nsISHistory);
--- a/b2g/chrome/jar.mn
+++ b/b2g/chrome/jar.mn
@@ -9,17 +9,22 @@ chrome.jar:
 % content b2g %content/
 
   content/arrow.svg                     (content/arrow.svg)
 * content/settings.js                   (content/settings.js)
 * content/shell.html                    (content/shell.html)
 * content/shell.js                      (content/shell.js)
   content/shell.css                     (content/shell.css)
   content/devtools.js                   (content/devtools.js)
-#ifndef ANDROID
+#ifdef FXOS_SIMULATOR
+  content/desktop.css                   (content/desktop.css)
+  content/images/desktop/home-black.png (content/images/desktop/home-black.png)
+  content/images/desktop/home-white.png (content/images/desktop/home-white.png)
+#endif
+#ifndef MOZ_WIDGET_GONK
   content/desktop.js                    (content/desktop.js)
   content/screen.js                     (content/screen.js)
   content/runapp.js                     (content/runapp.js)
 #endif
 * content/content.css                   (content/content.css)
   content/touchcontrols.css             (content/touchcontrols.css)
 
 * content/payment.js                    (content/payment.js)
--- a/configure.in
+++ b/configure.in
@@ -171,17 +171,21 @@ fi
 AC_SUBST(GAIADIR)
 if test -n "$GAIADIR" ; then
     AC_DEFINE(PACKAGE_GAIA)
 fi
 
 if test -n "$FXOS_SIMULATOR" -a -z "$GAIADIR" ; then
     AC_MSG_ERROR([FXOS_SIMULATOR=1 requires GAIADIR to be defined])
 fi
-AC_SUBST(FXOS_SIMULATOR)
+
+if test -n "$FXOS_SIMULATOR" ; then
+    AC_DEFINE(FXOS_SIMULATOR)
+    AC_SUBST(FXOS_SIMULATOR)
+fi
 
 MOZ_ARG_WITH_STRING(gonk,
 [  --with-gonk=DIR
                location of gonk dir],
     gonkdir=$withval)
 
 MOZ_ARG_WITH_STRING(gonk-toolchain-prefix,
 [  --with-gonk-toolchain-prefix=DIR