code fragments

chrono.css

...
/* NOTE: set fixed size on empty visible elements
[role="chrono"] > p span {
  width: -moz-calc(100% / 3);
  height: 100%;
  ...
}
...
/* NOTE: move real offscreen DOM elements
[role="chrono"] > div {
  position: absolute;
  left: -moz-calc((100%) + 10px);
  ...
}

...

chrono.js

...
  // NOTE: generate seconds, minutes and hours elements
  for (var i=0; i<60; i++) {
    var txt = i < 10 ? "0"+i : i;
    var el = $("<li>", {role: "option", class: txt}).html(txt);
    $("#seconds").append(el);
  }
...
  // NOTE: scroll current seconds/minutes/hours element 
  //       inside offscreen containers
  function scroll(element, parent, val){
    var pos = $(element).get(0).clientHeight * val;
    $(parent).animate({ scrollTop: pos },
                      { duration: "0.3s", easing: 'swing',
                        step: function() {
                          force_redraw(element.get(0));
                        }
                      });
  }

index.html

...
<section role="chrono">
  <p>
    <!-- render offscreen DOM elements as backgrounds -->
    <span style="background-image: -moz-element(#hours);"></span>
    <span style="background-image: -moz-element(#minutes);"></span>
    <span style="background-image: -moz-element(#seconds);"></span>
  </p>
  <!-- real DOM elements moved offscreen -->
  <div>
    <ul id="hours" role="listbox">
    </ul>
  </div>
  <div>
    <ul id="minutes" role="listbox">
    </ul>
  </div>
  <div>
    <ul id="seconds" role="listbox">
    </ul>
  </div>
</section>
...

paths_in_manifest.webapp

{
  ...
  "launch_path": "/gaia-chrono-app/index.html",
  "appcache_path": "/gaia-chrono-app/manifest.appcache",
  ...
  "icons": {
    "128": "/gaia-chrono-app/icons/chrono-128.png",
    "64": "/gaia-chrono-app/icons/chrono-64.png"
  },
  ...
}

snippet_from_install.js

/* Mozilla/Firefox installation */
var base = location.href.split("#")[0]; // WORKAROUND: remove hash from url
base = base.replace("index.html",""); // WORKAROUND: remove index.html
install.mozillaInstallUrl = base + '/manifest.webapp'; 

install.mozillaInstall = function () {
  var installRequest = navigator.mozApps.install(install.mozillaInstallUrl);

  installRequest.onsuccess = function (data) {
    triggerChange('installed');
  };

  installRequest.onerror = function (err) {
    install.error = err;
    triggerChange('error');
  };
};

snippet_from_install2.js

function get_chrono_installed(success,error) {
  try1();

  // TRY1: get our application management object using getSelf()
  //       this works correctly when running into the webapp runtime container 
  function try1() {
    req1 = navigator.mozApps.getSelf();
    req1.onsuccess = function () {
      if (req1.result === null) {
        try2();
      } else {
        success(req1.result);
      }
    };
    req1.onerror = function () {
      try2();
    }
  }

  // TRY1: get our application management object using getInstalled()
  //       this works correctly when running as "self service installer"
  //       in a Firefox browser tab
  function try2() {
    req2 = navigator.mozApps.getInstalled();
    req2.onsuccess = function () {
      var result = null;
      var myorigin = window.location.protocol + "//" + window.location.host;
      if (req2.result !== null) {
        req2.result.forEach(function (app) {
          if (app.origin == myorigin)
            result = app;
        });
      }
      success(result);
    }
    req2.onerror = error;
  }
}

snippet_from_install3.js

function uninstall_error() { $('.install-error').html("UNINSTALL ERROR: retry later."); }
function uninstall_success() { 
  install.state = "uninstalled";
  updateInstallButton(); 
  $('.install-error').html("UNINSTALL: app removed."); 
}

function uninstall() {
  get_chrono_installed(function (app) {
    var req2 = app.uninstall();
    req2.onsuccess = uninstall_success;
    req2.onerror = uninstall_error;
  }, uninstall_error);  
  
  return false;
}

workaround_android_redraw.js

// Firefox For Android: force redraw workaround
define(function (require) {
  var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
  var is_android = navigator.userAgent.toLowerCase().indexOf("android") > -1;

  var n = document.createTextNode(' ');

  return {
    force_redraw: function (element) {
      if(is_firefox && is_android) {
        rafId = window.mozRequestAnimationFrame(
          function(){
            element.appendChild(n);
            n.parentNode.removeChild(n)
            window.mozCancelRequestAnimationFrame(rafId);
          }
        );
      }
    }
  }
});

workaround_updateready_bug.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="styles/main.css">
    <script>
// WORKAROUND BUG: https://bugzilla.mozilla.org/show_bug.cgi?id=683794
window.applicationCache.addEventListener('updateready', function () {
 // dummy, fired
}, false);
    </script>
    <script data-main="js/app" src="js/lib/require.js"></script>
   ...