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 192961 2246fe6ceae069598722f3477a9110df9f3b57ae
parent 192960 463fa756b43be262180ef2002132106b6fdff134
child 192962 2aa1cbf3cd21b9a6b75c5d2b62f2770385dfe424
push id3624
push userasasaki@mozilla.com
push dateMon, 09 Jun 2014 21:49:01 +0000
treeherdermozilla-beta@b1a5da15899a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvingtetun, fabrice
bugs944443
milestone31.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 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