Merge pull request #17588 from KevinGrandon/bug_987753_vertical_homes…

…creen_initial Bug 987753 - Land a vertical homescreen in test_apps
mozilla-b2g · Apr 15, 2014 · 79b3274 · 79b3274
2 parents a4005d9 + 6b634be
commit 79b3274
Show file tree

Hide file tree

Showing 14 changed files with 859 additions and 1 deletion.
diff --git a/Makefile b/Makefile
@@ -899,7 +899,7 @@ ifdef APP
   JSHINTED_PATH = apps/$(APP)
   GJSLINTED_PATH = $(shell grep "^apps/$(APP)" build/jshint/xfail.list | ( while read file ; do test -f "$$file" && echo $$file ; done ) )
 else
-  JSHINTED_PATH = apps shared build/test/unit
+  JSHINTED_PATH = apps shared build/test/unit test_apps/home2
   GJSLINTED_PATH = $(shell ( while read file ; do test -f "$$file" && echo $$file ; done ) < build/jshint/xfail.list )
 endif
 endif

diff --git a/build/config/phone/apps-engineering.list b/build/config/phone/apps-engineering.list
@@ -6,6 +6,7 @@ test_apps/bookmarks-reader
 test_apps/ds-test
 test_apps/demo-keyboard
 test_apps/geoloc
+test_apps/home2
 test_apps/membuster
 test_apps/music2
 test_apps/test-ime

diff --git a/test_apps/home2/index.html b/test_apps/home2/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <title>FirefoxOS Homescreen</title>
+
+    <link rel="stylesheet" href="style/css/app.css">
+    <link rel="resource" type="application/l10n" href="locales/locales.ini">
+
+    <script defer src="shared/js/l10n.js"></script>
+
+    <script defer src="js/divider.js"></script>
+    <script defer src="js/icon.js"></script>
+    <script defer src="js/dragdrop.js"></script>
+    <script defer src="js/zoom.js"></script>
+    <script defer src="js/app.js"></script>
+  </head>
+  <body>
+    <div id="icons"></div>
+  </body>
+</html>
diff --git a/test_apps/home2/js/.jshintrc b/test_apps/home2/js/.jshintrc
@@ -0,0 +1,6 @@
+{
+  "extends": "../../../.jshintrc",
+  "predef": [
+    "app"
+  ]
+}
diff --git a/test_apps/home2/js/app.js b/test_apps/home2/js/app.js
@@ -0,0 +1,197 @@
+'use strict';
+/* global Divider */
+/* global DragDrop */
+/* global Icon */
+/* global Zoom */
+
+(function(exports) {
+
+  // For now we inject a divider every few icons for testing.
+  var tempDivideEvery = 6;
+  var tempCurrent = 0;
+
+  // Hidden manifest roles that we do not show
+  const HIDDEN_ROLES = ['system', 'keyboard', 'homescreen', 'search'];
+
+  function App() {
+    this.zoom = new Zoom();
+    this.dragdrop = new DragDrop();
+
+    this.container = document.getElementById('icons');
+    this.iconLaunch = this.clickIcon.bind(this);
+  }
+
+  App.prototype = {
+
+    /**
+     * List of all application icons.
+     * Maps an icon identifier to an icon object.
+     */
+    icons: {},
+
+    /**
+     * Lists of all displayed objects in the homescreen.
+     * Includes app icons, dividers, and bookmarks.
+     */
+    items: [],
+
+    /**
+     * Fetch all icons and render them.
+     */
+    init: function() {
+      navigator.mozApps.mgmt.getAll().onsuccess = function(event) {
+        event.target.result.forEach(this.makeIcons.bind(this));
+        this.render();
+        this.start();
+      }.bind(this);
+    },
+
+    start: function() {
+      this.container.addEventListener('click', this.iconLaunch);
+    },
+
+    stop: function() {
+      this.container.removeEventListener('click', this.iconLaunch);
+    },
+
+    /**
+     * Creates icons for an app based on hidden roles and entry points.
+     */
+    makeIcons: function(app) {
+      if (HIDDEN_ROLES.indexOf(app.manifest.role) !== -1) {
+        return;
+      }
+
+      function eachIcon(icon) {
+        /* jshint validthis:true */
+
+        // If there is no icon entry, do not push it onto items.
+        if (!icon.icon) {
+          return;
+        }
+
+        // FIXME: Remove after we have real divider insertion/remembering.
+        tempCurrent++;
+        if (tempCurrent >= tempDivideEvery) {
+          this.items.push(new Divider());
+          tempCurrent = 0;
+        }
+
+        this.items.push(icon);
+        this.icons[icon.identifier] = icon;
+      }
+
+      if (app.manifest.entry_points) {
+        for (var i in app.manifest.entry_points) {
+          eachIcon.call(this, new Icon(app, i));
+        }
+      } else {
+        eachIcon.call(this, new Icon(app));
+      }
+    },
+
+    /**
+     * Scrubs the list of items, removing empty sections.
+     */
+    cleanItems: function() {
+      var appCount = 0;
+      var toRemove = [];
+
+      this.items.forEach(function(item, idx) {
+        if (item instanceof Divider) {
+          if (appCount === 0) {
+            toRemove.push(idx);
+          }
+          appCount = 0;
+        } else {
+          appCount++;
+        }
+      }, this);
+
+      toRemove.reverse();
+      toRemove.forEach(function(idx) {
+        var removed = this.items.splice(idx, 1)[0];
+        removed.remove();
+      }, this);
+
+      // There should always be a divider at the end, it's hidden in CSS when 
+      // not in edit mode.
+      var lastItem = this.items[this.items.length - 1];
+      if (!(lastItem instanceof Divider)) {
+        this.items.push(new Divider());
+      }
+    },
+
+    /**
+     * Renders all icons.
+     * Positions app icons and dividers accoriding to available space
+     * on the grid.
+     */
+    render: function() {
+
+      app.cleanItems();
+
+      // Reset offset steps
+      this.zoom.offsetY = 0;
+
+      // Grid render coordinates
+      var x = 0;
+      var y = 0;
+
+      /**
+       * Steps the y-axis.
+       * @param {Object} item
+       */
+      function step(item) {
+        app.zoom.stepYAxis(item.pixelHeight);
+
+        x = 0;
+        y++;
+      }
+
+      this.items.forEach(function(item, idx) {
+
+        // If the item would go over the boundary before rendering,
+        // step the y-axis.
+        if (x > 0 && item.gridWidth > 1 &&
+            x + item.gridWidth >= this.zoom.perRow) {
+          // Step the y-axis by the size of the last row.
+          // For now we just check the height of the last item.
+          var lastItem = this.items[idx - 1];
+          step(lastItem);
+        }
+
+        item.render({
+          x: x,
+          y: y
+        }, idx);
+
+        // Increment the x-step by the sizing of the item.
+        // If we go over the current boundary, reset it, and step the y-axis.
+        x += item.gridWidth;
+        if (x >= this.zoom.perRow) {
+          step(item);
+        }
+      }, this);
+    },
+
+    /**
+     * Launches an app.
+     */
+    clickIcon: function(e) {
+      var container = e.target;
+      var identifier = container.dataset.identifier;
+      var icon = this.icons[identifier];
+
+      if (!icon) {
+        return;
+      }
+
+      icon.launch();
+    }
+  };
+
+  exports.app = new App();
+  exports.app.init();
+
+}(window));
diff --git a/test_apps/home2/js/divider.js b/test_apps/home2/js/divider.js
@@ -0,0 +1,58 @@
+'use strict';
+
+(function() {
+  // Icon container
+  var container = document.getElementById('icons');
+
+  /**
+   * Represents a single divider on the homepage.
+   */
+  function Divider() {}
+
+  Divider.prototype = {
+
+    x: 0,
+    y: 0,
+
+    /**
+     * Height in pixels of each divider.
+     */
+    pixelHeight: 70,
+
+    /**
+     * Width in grid units for each divider.
+     */
+    gridWidth: 4,
+
+    scale: 1,
+
+    /**
+     * Renders the icon to the container.
+     * @param {Object} coordinates Grid coordinates to render to.
+     * @param {Number} itemIndex The index of the items list of this item.
+     */
+    render: function(coordinates, itemIndex) {
+      // Generate the content if we need to
+      if (!this.divider) {
+        var divider = document.createElement('div');
+        divider.className = 'divider';
+        this.divider = divider;
+
+        container.appendChild(divider);
+      }
+
+      var y = app.zoom.offsetY;
+      this.divider.style.transform = 'translate(0 ,' + y + 'px)';
+
+      this.itemIndex = itemIndex;
+      this.y = y;
+    },
+
+    remove: function() {
+      this.divider.parentNode.removeChild(this.divider);
+    }
+  };
+
+  window.Divider = Divider;
+
+}());