Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/homescreen/bower_components/gaia-container/.bower.json

@@ -0,0 +1,12 @@
+{
+  "name": "gaia-container",
+  "_release": "16513d8946",
+  "_resolution": {
+    "type": "branch",
+    "branch": "master",
+    "commit": "16513d894678a754a5297772c05d4d761e76a240"
+  },
+  "_source": "https://gitlab.com/Cwiiis/gaia-container.git",
+  "_target": "*",
+  "_originalSource": "https://gitlab.com/Cwiiis/gaia-container.git"
+}

gaia/apps/homescreen/bower_components/gaia-container/.gitignore

@@ -0,0 +1 @@
+node_modules

gaia/apps/homescreen/bower_components/gaia-container/examples/basic.html

@@ -0,0 +1,122 @@
+<head>
+  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
+  <title>GaiaContainer Demo</title>
+</head>
+
+<script src='../script.js'></script>
+
+<style>
+body {
+  margin: 0;
+}
+
+div:first-of-type {
+  display: flex;
+  flex-direction: row;
+}
+
+div:first-of-type > * {
+  flex: 1;
+}
+
+gaia-container {
+  width: 100%;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+gaia-container.alt {
+  flex-flow: row-reverse wrap-reverse;
+}
+
+gaia-container > .gaia-container-child:not(.added):not(.dragging) {
+  transition: transform 0.2s;
+}
+
+gaia-container > .gaia-container-child.dragging {
+  z-index: 1;
+  will-change: transform;
+}
+
+gaia-container > .gaia-container-child > div {
+  display: inline-block;
+  width: 33vw;
+  height: 33vw;
+}
+
+gaia-container > .gaia-container-child:not(.added):not(.removed) > div {
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+gaia-container > .gaia-container-child.dragging > div {
+  transform: scale(1.1);
+  opacity: 0.8;
+}
+
+gaia-container > .gaia-container-child.added > div {
+  animation-name: added;
+  animation-duration: 0.4s;
+}
+
+@keyframes added {
+  0% { opacity: 0; transform: scale(0.5); }
+  100% { opacity: 100%; }
+}
+
+gaia-container > .gaia-container-child.removed > div {
+  animation-name: removed;
+  animation-duration: 0.4s;
+}
+
+@keyframes removed {
+  45% { transform: scaleY(0.1); }
+  55% { transform: scaleY(0.1); }
+  100% { transform: scale(0); }
+}
+</style>
+
+<div>
+  <button onclick='addBox()'>Add item</button>
+  <button onclick='container.classList.toggle("alt"); container.synchronise()'>Toggle layout</button>
+</div>
+
+<gaia-container drag-and-drop></gaia-container>
+
+<script>
+'use strict';
+
+var container = document.getElementsByTagName('gaia-container')[0];
+
+function randomInt(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+function addBox() {
+  var element = document.createElement('div');
+
+  element.style.backgroundColor = 'rgb(' +
+    randomInt(100, 200) + ',' +
+    randomInt(100, 200) + ',' +
+    randomInt(100, 200) + ')';
+
+  element.onclick = () => {
+    container.removeChild(element);
+  };
+
+  var children = container.children;
+  var insertBefore = children.length ?
+    children[randomInt(0, children.length - 1)] : null
+  container.insertBefore(element, insertBefore);
+}
+
+var resizeTimeout = null;
+window.onresize = () => {
+  if (resizeTimeout !== null) {
+    window.clearTimeout(resizeTimeout);
+  }
+  resizeTimeout = window.setTimeout(() => {
+    resizeTimeout = null;
+    container.synchronise();
+  }, 100);
+}
+</script>

gaia/apps/homescreen/bower_components/gaia-container/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "gaia-container",
+  "version": "0.0.0",
+  "description": "Gaia Container is a drop-in replacement for generic container elements that provides convenience methods and behaviour for animations and drag-and-drop functionality.",
+  "main": "script.js",
+  "scripts": {
+    "test": "./node_modules/karma/bin/karma start test/karma.conf.js --single-run",
+    "test-dev": "./node_modules/karma/bin/karma start test/karma.conf.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.com:Cwiiis/gaia-container.git"
+  },
+  "devDependencies": {
+    "karma": "^0.12.37",
+    "karma-firefox-launcher": "^0.1.6",
+    "karma-mocha": "^0.2.0",
+    "karma-sinon-chai": "^1.0.0",
+    "mocha": "^2.2.5",
+    "mozilla-download": "^1.1.1"
+  },
+  "keywords": [
+    "container",
+    "homescreen",
+    "B2G",
+    "Firefox OS"
+  ],
+  "license": "MIT"
+}

gaia/apps/homescreen/bower_components/gaia-container/script.js

@@ -0,0 +1,848 @@
+'use strict';
+
+window.GaiaContainer = (function(exports) {
+  /**
+   * The time, in ms, to wait for an animation to start in response to a state
+   * change, before removing the associated style class.
+   */
+  const STATE_CHANGE_TIMEOUT = 100;
+
+  /**
+   * The time, in ms, to wait before initiating a drag-and-drop from a
+   * long-press.
+   */
+  const DEFAULT_DND_TIMEOUT = 300;
+
+  /**
+   * The distance, in CSS pixels, in which a touch or mouse point can deviate
+   * before it being discarded for initiation of a drag-and-drop action.
+   */
+  const DND_THRESHOLD = 5;
+
+  /**
+   * The minimum time between sending move events during drag-and-drop.
+   */
+  const DND_MOVE_THROTTLE = 50;
+
+  var proto = Object.create(HTMLElement.prototype);
+
+  proto.createdCallback = function() {
+    this._template = template.content.cloneNode(true);
+
+    var shadow = this.createShadowRoot();
+    shadow.appendChild(this._template);
+
+    this._frozen = false;
+    this._pendingStateChanges = [];
+    this._children = [];
+    this._dnd = {
+      // Whether drag-and-drop is enabled
+      enabled: false,
+
+      // The time, in ms, to wait before initiating a drag-and-drop from a
+      // long-press
+      delay: DEFAULT_DND_TIMEOUT,
+
+      // Timeout used to initiate drag-and-drop actions
+      timeout: null,
+
+      // The child that was tapped/clicked
+      child: null,
+
+      // Whether a drag is active
+      active: false,
+
+      // The start point of the drag action
+      start: { pageX: 0, pageY: 0, clientX: 0, clientY: 0 },
+
+      // The last point of the drag action
+      last: { pageX: 0, pageY: 0, clientX: 0, clientY: 0, timeStamp: 0 },
+
+      // Timeout used to send drag-move events
+      moveTimeout: null,
+
+      // The last time a move event was fired
+      lastMoveEventTime: 0,
+
+      // Whether to capture the next click event
+      clickCapture: false
+    };
+
+    var dndObserverCallback = (mutations) => {
+      if (this._dnd.enabled !== this.dragAndDrop) {
+        this._dnd.enabled = this.dragAndDrop;
+        if (this._dnd.enabled) {
+          this.addEventListener('touchstart', this);
+          this.addEventListener('touchmove', this);
+          this.addEventListener('touchcancel', this);
+          this.addEventListener('touchend', this);
+          this.addEventListener('mousedown', this);
+          this.addEventListener('mousemove', this);
+          this.addEventListener('mouseup', this);
+          this.addEventListener('click', this, true);
+          this.addEventListener('contextmenu', this, true);
+        } else {
+          this.cancelDrag();
+          this.removeEventListener('touchstart', this);
+          this.removeEventListener('touchmove', this);
+          this.removeEventListener('touchcancel', this);
+          this.removeEventListener('touchend', this);
+          this.removeEventListener('mousedown', this);
+          this.removeEventListener('mousemove', this);
+          this.removeEventListener('mouseup', this);
+          this.removeEventListener('click', this, true);
+          this.removeEventListener('contextmenu', this, true);
+        }
+      }
+    };
+    this.dndObserver = new MutationObserver(dndObserverCallback);
+    this.dndObserver.observe(this,
+      { attributes: true, attributeFilter: ['drag-and-drop'] });
+    dndObserverCallback(null);
+  };
+
+  Object.defineProperty(proto, 'children', {
+    get: function() {
+      return this._children.map((child) => {
+        return child.element;
+      });
+    },
+    enumerable: true
+  });
+
+  Object.defineProperty(proto, 'firstChild', {
+    get: function() {
+      return this._children.length ? this._children[0].element : null;
+    },
+    enumerable: true
+  });
+
+  Object.defineProperty(proto, 'lastChild', {
+    get: function() {
+      var length = this._children.length;
+      return length ? this._children[length - 1].element : null;
+    },
+    enumerable: true
+  });
+
+  Object.defineProperty(proto, 'dragAndDrop', {
+    get: function() {
+      return this.getAttribute('drag-and-drop') !== null;
+    },
+    enumerable: true
+  });
+
+  Object.defineProperty(proto, 'dragAndDropTimeout', {
+    get: function() {
+      return this._dnd.delay;
+    },
+    set: function(timeout) {
+      if (timeout >= 0) {
+        this._dnd.delay = timeout;
+      } else {
+        this._dnd.delay = DEFAULT_DND_TIMEOUT;
+      }
+    },
+    enumerable: true
+  });
+
+  proto.realAppendChild = proto.appendChild;
+  proto.appendChild = function(element, callback) {
+    this.insertBefore(element, null, callback);
+  };
+
+  proto.realRemoveChild = proto.removeChild;
+  proto.removeChild = function(element, callback) {
+    var children = this._children;
+    var childToRemove = null;
+
+    for (var child of children) {
+      if (child.element === element) {
+        childToRemove = child;
+        break;
+      }
+    }
+
+    if (childToRemove === null) {
+      throw 'removeChild called on unknown child';
+    }
+
+    this.changeState(childToRemove, 'removed', () => {
+      this.realRemoveChild(childToRemove.container);
+      this.realRemoveChild(childToRemove.master);
+
+      // Find the child again. We need to do this in case the container was
+      // manipulated between removing the child and this callback being reached.
+      for (var i = 0, iLen = children.length; i < iLen; i++) {
+        if (children[i] === childToRemove) {
+          children.splice(i, 1);
+          break;
+        }
+      }
+
+      if (callback) {
+        callback();
+      }
+
+      this.synchronise();
+    });
+  };
+
+  proto.realReplaceChild = proto.replaceChild;
+  proto.replaceChild = function(newElement, oldElement, callback) {
+    if (!newElement || !oldElement) {
+      throw 'replaceChild called with null arguments';
+    }
+
+    // Unparent the newElement if necessary (with support for gaia-container)
+    if (newElement.parentNode) {
+      newElement.parentNode.removeChild(newElement, () => {
+        this.replaceChild(newElement, oldElement, callback);
+      });
+      if (newElement.parentNode) {
+        return;
+      }
+    }
+
+    // Remove the old child and add the new one, but don't run the removed/
+    // added state changes.
+    var children = this._children;
+
+    for (var i = 0, iLen = children.length; i < iLen; i++) {
+      var oldChild = children[i];
+      if (oldChild.element === oldElement) {
+        var newChild = new GaiaContainerChild(newElement);
+        this.realInsertBefore(newChild.container, oldChild.container);
+        this.realInsertBefore(newChild.master, oldChild.master);
+        this.realRemoveChild(oldChild.container);
+        this.realRemoveChild(oldChild.master);
+        this.children.splice(i, 1, newChild);
+        this.synchronise();
+
+        if (callback) {
+          callback();
+        }
+        return;
+      }
+    }
+
+    throw 'removeChild called on unknown child';
+  };
+
+  /**
+   * Reorders the given element to appear before referenceElement.
+   */
+  proto.reorderChild = function(element, referenceElement, callback) {
+    if (!element) {
+      throw 'reorderChild called with null element';
+    }
+
+    var children = this._children;
+    var child = null;
+    var childIndex = null;
+    var referenceChild = null;
+    var referenceChildIndex = null;
+
+    for (var i = 0, iLen = children.length; i < iLen; i++) {
+      if (children[i].element === element) {
+        child = children[i];
+        childIndex = i;
+      } else if (children[i].element === referenceElement) {
+        referenceChild = children[i];
+        referenceChildIndex = i;
+      }
+
+      if (child && (referenceChild || !referenceElement)) {
+        this.realRemoveChild(child.container);
+        this.realRemoveChild(child.master);
+        children.splice(childIndex, 1);
+
+        if (referenceChild) {
+          this.realInsertBefore(child.container, referenceChild.container);
+          this.realInsertBefore(child.master, referenceChild.master);
+        } else {
+          (children.length === 0) ?
+            this.realAppendChild(child.container) :
+            this.realInsertBefore(child.container, children[0].master);
+          this.realAppendChild(child.master);
+        }
+
+        referenceChild ?
+          children.splice(
+            referenceChildIndex - (childIndex < referenceChildIndex) ? 1 : 0,
+            0, child) :
+          children.splice(children.length, 0, child);
+
+        this.synchronise();
+
+        if (callback) {
+          callback();
+        }
+        return;
+      }
+    }
+
+    throw child ? 'reorderChild called on unknown reference element' :
+                  'reorderChild called on unknown child';
+  };
+
+  proto.realInsertBefore = proto.insertBefore;
+  proto.insertBefore = function(element, reference, callback) {
+    var children = this._children;
+    var childToInsert = new GaiaContainerChild(element);
+    var referenceIndex = -1;
+
+    if (reference !== null) {
+      for (var i = 0, iLen = children.length; i < iLen; i++) {
+        if (children[i].element === reference) {
+          referenceIndex = i;
+          break;
+        }
+      }
+      if (referenceIndex === -1) {
+        throw 'insertBefore called on unknown child';
+      }
+    }
+
+    if (referenceIndex === -1) {
+      (children.length === 0) ?
+        this.realAppendChild(childToInsert.container) :
+        this.realInsertBefore(childToInsert.container, children[0].master);
+      this.realAppendChild(childToInsert.master);
+      children.push(childToInsert);
+    } else {
+      this.realInsertBefore(childToInsert.container,
+                            children[referenceIndex].container);
+      this.realInsertBefore(childToInsert.master,
+                            children[referenceIndex].master);
+      children.splice(referenceIndex, 0, childToInsert);
+    }
+
+    this.changeState(childToInsert, 'added', callback);
+    this.synchronise();
+  };
+
+  /**
+   * Used to execute a state-change of a child that may possibly be animated.
+   * @state will be added to the child's class-list. If an animation starts that
+   * has the same name, that animation will complete and @callback will be
+   * called. Otherwise, the class will be removed and @callback called on the
+   * next frame.
+   */
+  proto.changeState = function(child, state, callback) {
+    // Check that the child is still attached to this parent (can happen if
+    // the child is removed while frozen).
+    if (child.container.parentNode !== this) {
+      return;
+    }
+
+    // Check for a redundant state change.
+    if (child.container.classList.contains(state)) {
+      return;
+    }
+
+    // Queue up state change if we're frozen.
+    if (this._frozen) {
+      this._pendingStateChanges.push(
+        this.changeState.bind(this, child, state, callback));
+      return;
+    }
+
+    var animStart = (e) => {
+      if (!e.animationName.endsWith(state)) {
+        return;
+      }
+
+      child.container.removeEventListener('animationstart', animStart);
+
+      window.clearTimeout(child[state]);
+      delete child[state];
+
+      var self = this;
+      child.container.addEventListener('animationend', function animEnd() {
+        child.container.removeEventListener('animationend', animEnd);
+        child.container.classList.remove(state);
+        if (callback) {
+          callback();
+        }
+      });
+    };
+
+    child.container.addEventListener('animationstart', animStart);
+    child.container.classList.add(state);
+
+    child[state] = window.setTimeout(() => {
+      delete child[state];
+      child.container.removeEventListener('animationstart', animStart);
+      child.container.classList.remove(state);
+      if (callback) {
+        callback();
+      }
+    }, STATE_CHANGE_TIMEOUT);
+  };
+
+  proto.getChildOffsetRect = function(element) {
+    var children = this._children;
+    for (var i = 0, iLen = children.length; i < iLen; i++) {
+      var child = children[i];
+      if (child.element === element) {
+        var top = child._lastMasterTop;
+        var left = child._lastMasterLeft;
+        var width = child._lastElementWidth;
+        var height = child._lastElementHeight;
+
+        return {
+          top: top,
+          left: left,
+          width: width,
+          height: height,
+          right: left + width,
+          bottom: top + height
+        };
+      }
+    }
+
+    throw 'getChildOffsetRect called on unknown child';
+  };
+
+  proto.getChildFromPoint = function(x, y) {
+    var children = this._children;
+    for (var parent = this.parentElement; parent;
+         parent = parent.parentElement) {
+      x += parent.scrollLeft - parent.offsetLeft;
+      y += parent.scrollTop - parent.offsetTop;
+    }
+    for (var i = 0, iLen = children.length; i < iLen; i++) {
+      var child = children[i];
+      if (x >= child._lastMasterLeft &&
+          y >= child._lastMasterTop &&
+          x < child._lastMasterLeft + child._lastElementWidth &&
+          y < child._lastMasterTop + child._lastElementHeight) {
+        return child.element;
+      }
+    }
+
+    return null;
+  };
+
+  proto.cancelDrag = function() {
+    if (this._dnd.timeout !== null) {
+      clearTimeout(this._dnd.timeout);
+      this._dnd.timeout = null;
+    }
+
+    if (this._dnd.moveTimeout !== null) {
+      clearTimeout(this._dnd.moveTimeout);
+      this._dnd.moveTimeout = null;
+    }
+
+    if (this._dnd.active) {
+      this._dnd.child.container.classList.remove('dragging');
+      this._dnd.child.container.style.position = 'absolute';
+      this._dnd.child.container.style.top = '0';
+      this._dnd.child.container.style.left = '0';
+      this._dnd.child.markDirty();
+      this._dnd.child = null;
+      this._dnd.active = false;
+      this.synchronise();
+      this._dnd.clickCapture = true;
+      this.dispatchEvent(new CustomEvent('drag-finish'));
+    }
+  };
+
+  proto.startDrag = function() {
+    if (!this.dispatchEvent(new CustomEvent('drag-start',
+        { cancelable: true,
+          detail: { target: this._dnd.child.element,
+                    pageX: this._dnd.start.pageX,
+                    pageY: this._dnd.start.pageY,
+                    clientX: this._dnd.start.clientX,
+                    clientY: this._dnd.start.clientY } }))) {
+      return;
+    }
+
+    this._dnd.active = true;
+    this._dnd.child.container.classList.add('dragging');
+    this._dnd.child.container.style.position = 'fixed';
+    var rect = this.getBoundingClientRect();
+    this._dnd.child.container.style.top = rect.top + 'px';
+    this._dnd.child.container.style.left = rect.left + 'px';
+  };
+
+  proto.continueDrag = function() {
+    if (!this._dnd.active) {
+      return;
+    }
+
+    var left = this._dnd.child.master.offsetLeft +
+      (this._dnd.last.pageX - this._dnd.start.pageX);
+    var top = this._dnd.child.master.offsetTop +
+      (this._dnd.last.pageY - this._dnd.start.pageY);
+    this._dnd.child.container.style.transform =
+      'translate(' + left + 'px, ' + top + 'px)';
+
+    if (this._dnd.moveTimeout === null) {
+      var delay = Math.max(0, DND_MOVE_THROTTLE -
+        (this._dnd.last.timeStamp - this._dnd.lastMoveEventTime));
+      this._dnd.moveTimeout = setTimeout(() => {
+        this._dnd.moveTimeout = null;
+        this._dnd.lastMoveEventTime = this._dnd.last.timeStamp;
+        this.dispatchEvent(new CustomEvent('drag-move',
+          { detail: { target: this._dnd.child.element,
+                      pageX: this._dnd.last.pageX,
+                      pageY: this._dnd.last.pageY,
+                      clientX: this._dnd.last.clientX,
+                      clientY: this._dnd.last.clientY } }));
+      }, delay);
+    }
+  };
+
+  proto.endDrag = function(event) {
+    if (this._dnd.active) {
+      var dropTarget = this.getChildFromPoint(this._dnd.last.clientX,
+                                              this._dnd.last.clientY);
+
+      if (this.dispatchEvent(new CustomEvent('drag-end',
+          { cancelable: true,
+            detail: { target: this._dnd.child.element,
+                      dropTarget: dropTarget,
+                      pageX: this._dnd.last.pageX,
+                      pageY: this._dnd.last.pageY,
+                      clientX: this._dnd.last.clientX,
+                      clientY: this._dnd.last.clientY }}))) {
+        var children = this._children;
+
+        if (dropTarget && dropTarget !== this._dnd.child.element) {
+          var dropChild = null;
+          var dropIndex = -1;
+          var childIndex = -1;
+          var insertBefore = true;
+          for (var i = 0, iLen = children.length; i < iLen; i++) {
+            if (children[i] === this._dnd.child) {
+              childIndex = i;
+              if (!dropChild) {
+                insertBefore = false;
+              }
+            }
+
+            if (children[i].element === dropTarget) {
+              dropChild = children[i];
+              dropIndex = i;
+            }
+
+            if (dropIndex >= 0 && childIndex >= 0) {
+              break;
+            }
+          }
+
+          if (dropIndex >= 0 && childIndex >= 0) {
+            // Default action, rearrange the dragged child to before or after
+            // the child underneath the touch/mouse point.
+            this.realRemoveChild(this._dnd.child.container);
+            this.realRemoveChild(this._dnd.child.master);
+            this.realInsertBefore(this._dnd.child.container,
+              insertBefore ? dropChild.container :
+                             dropChild.container.nextSibling);
+            this.realInsertBefore(this._dnd.child.master,
+              insertBefore ? dropChild.master :
+                             dropChild.master.nextSibling);
+            children.splice(dropIndex, 0,
+              children.splice(childIndex, 1)[0]);
+            this.dispatchEvent(new CustomEvent('drag-rearrange'));
+          }
+        }
+      }
+    } else if (this._dnd.timeout !== null) {
+      var handled = !this.dispatchEvent(new CustomEvent('activate',
+        { cancelable : true, detail: { target: this._dnd.child.element } }));
+      if (handled) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+      }
+    }
+
+    this.cancelDrag();
+  };
+
+  proto.handleEvent = function(event) {
+    switch (event.type) {
+      case 'touchstart':
+      case 'mousedown':
+        if (this._dnd.active || this._dnd.timeout) {
+          this.cancelDrag();
+          break;
+        }
+
+        if (event instanceof MouseEvent) {
+          this._dnd.start.pageX = event.pageX;
+          this._dnd.start.pageY = event.pageY;
+          this._dnd.start.clientX = event.pageX;
+          this._dnd.start.clientY = event.pageY;
+        } else {
+          this._dnd.start.pageX = event.touches[0].pageX;
+          this._dnd.start.pageY = event.touches[0].pageY;
+          this._dnd.start.clientX = event.touches[0].clientX;
+          this._dnd.start.clientY = event.touches[0].clientY;
+        }
+
+        this._dnd.last.pageX = this._dnd.start.pageX;
+        this._dnd.last.pageY = this._dnd.start.pageY;
+        this._dnd.last.clientX = this._dnd.start.clientX;
+        this._dnd.last.clientY = this._dnd.start.clientY;
+        this._dnd.last.timeStamp = event.timeStamp;
+
+        var target = event.target;
+        for (; target.parentNode !== this; target = target.parentNode) {
+          if (target === this || !target.parentNode) {
+            return;
+          }
+        }
+
+        // Find the child
+        var children = this._children;
+        for (var child of children) {
+          if (child.container === target) {
+            this._dnd.child = child;
+            break;
+          }
+        }
+
+        if (!this._dnd.child) {
+          return;
+        }
+
+        if (this._dnd.delay > 0) {
+          this._dnd.timeout = setTimeout(() => {
+            this._dnd.timeout = null;
+            this.startDrag();
+          }, this._dnd.delay);
+        } else {
+          this.startDrag();
+        }
+        break;
+
+      case 'touchmove':
+      case 'mousemove':
+        var pageX, pageY, clientX, clientY;
+        if (event instanceof MouseEvent) {
+          pageX = event.pageX;
+          pageY = event.pageY;
+          clientX = event.clientX;
+          clientY = event.clientY;
+        } else {
+          pageX = event.touches[0].pageX;
+          pageY = event.touches[0].pageY;
+          clientX = event.touches[0].clientX;
+          clientY = event.touches[0].clientY;
+        }
+
+        if (this._dnd.timeout) {
+          if (Math.abs(pageX - this._dnd.start.pageX) > DND_THRESHOLD ||
+              Math.abs(pageY - this._dnd.start.pageY) > DND_THRESHOLD) {
+            clearTimeout(this._dnd.timeout);
+            this._dnd.timeout = null;
+          }
+        } else if (this._dnd.active) {
+          event.preventDefault();
+          this._dnd.last.pageX = pageX;
+          this._dnd.last.pageY = pageY;
+          this._dnd.last.clientX = clientX;
+          this._dnd.last.clientY = clientY;
+          this._dnd.last.timeStamp = event.timeStamp;
+          this.continueDrag();
+        }
+        break;
+
+      case 'touchcancel':
+        this.cancelDrag();
+        break;
+
+      case 'touchend':
+      case 'mouseup':
+        if (this._dnd.active) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }
+        this.endDrag(event);
+        break;
+
+      case 'click':
+        if (this._dnd.clickCapture) {
+          this._dnd.clickCapture = false;
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }
+        break;
+
+      case 'contextmenu':
+        if (this._dnd.active || this._dnd.timeout) {
+          event.stopImmediatePropagation();
+          event.preventDefault();
+        }
+        break;
+    }
+  };
+
+  /**
+   * Temporarily disables element position synchronisation. Useful when adding
+   * multiple elements to the container at the same time, or in quick
+   * succession.
+   */
+  proto.freeze = function() {
+    this._frozen = true;
+  };
+
+  /**
+   * Enables element position synchronisation after freeze() has been called.
+   */
+  proto.thaw = function() {
+    if (this._frozen) {
+      this._frozen = false;
+      for (var callback of this._pendingStateChanges) {
+        callback();
+      }
+      this._pendingStateChanges = [];
+      this.synchronise();
+    }
+  };
+
+  /**
+   * Synchronise positions between the managed container and all children.
+   * This is called automatically when adding/inserting or removing children,
+   * but must be called manually if the managed container is manipulated
+   * outside of these methods (for example, if style properties change, or
+   * if it's resized).
+   */
+  proto.synchronise = function() {
+    if (this._frozen) {
+      return;
+    }
+
+    var child;
+    for (child of this._children) {
+      if (!this._dnd.active || child !== this._dnd.child) {
+        child.synchroniseMaster();
+      }
+    }
+
+    for (child of this._children) {
+      if (!this._dnd.active || child !== this._dnd.child) {
+        child.synchroniseContainer();
+      }
+    }
+  };
+
+  var template = document.createElement('template');
+
+  template.innerHTML =
+    `<style> :host { position: relative; display: block; }</style>` +
+    `<content select='*'></content>`;
+
+  function GaiaContainerChild(element) {
+    this._element = element;
+    this.markDirty();
+  }
+
+  GaiaContainerChild.prototype = {
+    get element() {
+      return this._element;
+    },
+
+    /**
+     * The element that will contain the child element and control its position.
+     */
+    get container() {
+      if (!this._container) {
+        // Create container
+        var container = document.createElement('div');
+        container.classList.add('gaia-container-child');
+        container.style.position = 'absolute';
+        container.style.top = '0';
+        container.style.left = '0';
+        container.appendChild(this.element);
+        this._container = container;
+      }
+
+      return this._container;
+    },
+
+    /**
+     * The element that will be added to the container that will
+     * control the element's transform.
+     */
+    get master() {
+      if (!this._master) {
+        // Create master
+        var master = document.createElement('div');
+        master.style.visibility = 'hidden';
+        this._master = master;
+      }
+
+      return this._master;
+    },
+
+    /**
+     * Clears any cached style properties. To be used if elements are
+     * manipulated outside of the methods of this object.
+     */
+    markDirty() {
+      this._lastElementWidth = null;
+      this._lastElementHeight = null;
+      this._lastElementDisplay = null;
+      this._lastElementOrder = null;
+      this._lastMasterTop = null;
+      this._lastMasterLeft = null;
+    },
+
+    /**
+     * Synchronise the size of the master with the managed child element.
+     */
+    synchroniseMaster() {
+      var master = this.master;
+      var element = this.element;
+
+      var style = window.getComputedStyle(element);
+      var display = style.display;
+      var order = style.order;
+      var width = element.offsetWidth;
+      var height = element.offsetHeight;
+      if (this._lastElementWidth !== width ||
+          this._lastElementHeight !== height ||
+          this._lastElementDisplay !== display ||
+          this._lastElementOrder !== order) {
+        this._lastElementWidth = width;
+        this._lastElementHeight = height;
+        this._lastElementDisplay = display;
+        this._lastElementOrder = order;
+
+        master.style.width = width + 'px';
+        master.style.height = height + 'px';
+        master.style.display = display;
+        master.style.order = order;
+      }
+    },
+
+    /**
+     * Synchronise the container's transform with the position of the master.
+     */
+    synchroniseContainer() {
+      var master = this.master;
+      var container = this.container;
+
+      var top = master.offsetTop;
+      var left = master.offsetLeft;
+
+      if (this._lastMasterTop !== top ||
+          this._lastMasterLeft !== left) {
+        this._lastMasterTop = top;
+        this._lastMasterLeft = left;
+
+        container.style.transform = 'translate(' + left + 'px, ' + top + 'px)';
+      }
+    }
+  };
+
+  exports.GaiaContainerChild = GaiaContainerChild;
+
+  return document.registerElement('gaia-container', { prototype: proto });
+})(window);

gaia/apps/homescreen/bower_components/gaia-container/test/karma.conf.js

@@ -0,0 +1,28 @@
+/* global module */
+// Karma configuration
+'use strict';
+
+module.exports = function(config) {
+  config.set({
+    frameworks: ['mocha', 'sinon-chai'],
+    client: {
+      captureConsole: true,
+      mocha: {'ui': 'tdd'}
+    },
+
+    basePath: '../',
+    files: [
+      'script.js',
+
+      'test/test.js'
+    ],
+
+    browsers: ['FirefoxLatest'],
+    customLaunchers: {
+      FirefoxLatest: {
+        base: 'FirefoxNightly',
+        prefs: {'dom.webcomponents.enabled': true}
+      }
+    }
+  });
+};

gaia/apps/homescreen/bower_components/gaia-container/test/test.js

@@ -0,0 +1,194 @@
+/* global sinon, assert, suite, setup, teardown, test */
+'use strict';
+
+suite('GaiaContainer', () => {
+  var sinonSandbox, dom, el;
+
+  setup(() => {
+    sinonSandbox = sinon.sandbox.create();
+    // DOM container to put test cases
+    dom = document.createElement('div');
+    dom.innerHTML = '<gaia-container></gaia-container>';
+    el = dom.firstElementChild;
+    document.body.appendChild(dom);
+  });
+
+  teardown(() => {
+    sinonSandbox.restore();
+    document.body.removeChild(dom);
+    dom = null;
+  });
+
+  suite('Drag and drop feature', () => {
+    test('drag-and-drop attribute should not be set by default', () => {
+      assert.equal(el.getAttribute('drag-and-drop'), null);
+      assert.equal(el.hasAttribute('drag-and-drop'), false);
+      assert.equal(el.dragAndDrop, false);
+    });
+
+    test('.dragAndDrop property value should change with the attribute', () => {
+      dom.innerHTML = '<gaia-container drag-and-drop></gaia-container>';
+      el = dom.firstElementChild;
+      assert.equal(el.getAttribute('drag-and-drop'), '');
+      assert.equal(el.hasAttribute('drag-and-drop'), true);
+      assert.equal(el.dragAndDrop, true);
+
+      el.removeAttribute('drag-and-drop');
+      assert.equal(el.getAttribute('drag-and-drop'), null);
+      assert.equal(el.hasAttribute('drag-and-drop'), false);
+      assert.equal(el.dragAndDrop, false);
+    });
+
+    test('.dragAndDropTimeout should only accept positive value', () => {
+      var otherValue = 9999;
+      assert.equal(typeof el.dragAndDropTimeout, 'number');
+
+      el.dragAndDropTimeout = otherValue;
+      assert.equal(el.dragAndDropTimeout, otherValue);
+
+      el.dragAndDropTimeout = 0;
+      el.dragAndDropTimeout = -5555;
+      assert.equal(el.dragAndDropTimeout, otherValue);
+    });
+
+    suite('Events', () => {
+      var icon;
+      setup(() => {
+        icon = document.createElement('div');
+        el.appendChild(icon);
+        el.dragAndDropTimeout = 1;
+      });
+
+      test('drag-start', done => {
+        el.handleEvent({
+          type: 'touchstart',
+          target: icon,
+          touches: [{
+            pageX: 0,
+            pageY: 0,
+            clientX: 0,
+            clientY: 0
+          }]
+        });
+
+        el.addEventListener('drag-start', () => {
+          done();
+        });
+      });
+
+      test('drag-start resets last-drag', done => {
+        el._dnd.last.pageX = el._dnd.last.pageY =
+          el._dnd.last.clientX = el._dnd.last.clientY =
+          el._dnd.last.timeStamp = 100;
+
+        el.handleEvent({
+          type: 'touchstart',
+          target: icon,
+          timeStamp: 0,
+          touches: [{
+            pageX: 0,
+            pageY: 0,
+            clientX: 0,
+            clientY: 0
+          }]
+        });
+
+        el.addEventListener('drag-start', () => {
+          assert.equal(el._dnd.last.pageX, 0);
+          assert.equal(el._dnd.last.pageY, 0);
+          assert.equal(el._dnd.last.clientX, 0);
+          assert.equal(el._dnd.last.clientY, 0);
+          assert.equal(el._dnd.last.timeStamp, 0);
+          done();
+        });
+      });
+    });
+  });
+
+  suite('DOM manipulation', () => {
+    var nodeA, nodeB;
+
+    setup(() => {
+      nodeA = document.createElement('div');
+      nodeB = document.createElement('div');
+
+      el.appendChild(nodeA);
+    });
+
+    test('should add and remove child nodes', done => {
+      assert.equal(el.children.length, 1);
+
+      el.appendChild(nodeB);
+
+      assert.equal(el.children.length, 2);
+      assert.equal(el.firstChild, nodeA);
+      assert.equal(el.lastChild, nodeB);
+
+      el.removeChild(nodeB, () => {
+        assert.equal(el.children.length, 1);
+        assert.equal(el.firstChild, nodeA);
+        assert.equal(el.lastChild, nodeA);
+        done();
+      });
+    });
+
+    test('.replaceChild()', done => {
+      el.appendChild(nodeB);
+
+      el.replaceChild(nodeB, nodeA, () => {
+        assert.equal(el.children.length, 2);
+        assert.equal(el.firstChild, nodeA);
+        assert.equal(el.lastChild, nodeB);
+        done();
+      });
+    });
+
+    test('.insertBefore()', done => {
+      el.insertBefore(nodeB, nodeA, () => {
+        assert.equal(el.children.length, 2);
+        assert.equal(el.firstChild, nodeB);
+        assert.equal(el.lastChild, nodeA);
+        done();
+      });
+    });
+
+    test('.reorderChild()', done => {
+      el.appendChild(nodeB);
+
+      el.reorderChild(nodeB, nodeA, () => {
+        assert.equal(el.children.length, 2);
+        assert.equal(el.firstChild, nodeB);
+        assert.equal(el.lastChild, nodeA);
+
+        el.reorderChild(nodeB, null, () => {
+          assert.equal(el.children.length, 2);
+          assert.equal(el.firstChild, nodeA);
+          assert.equal(el.lastChild, nodeB);
+          done();
+        });
+      });
+    });
+  });
+
+  suite('Utility functions', () => {
+    test('.getBoundingClientRect()', done => {
+      var nodeA = document.createElement('div');
+      nodeA.style.width = '200px';
+      nodeA.style.height = '100px';
+
+      el.style.paddingLeft = '100px';
+      el.style.paddingTop = '50px';
+
+      el.appendChild(nodeA, () => {
+        var rect = el.getChildOffsetRect(nodeA);
+        assert.equal(rect.width, 200);
+        assert.equal(rect.height, 100);
+        assert.equal(rect.left, 100);
+        assert.equal(rect.top, 50);
+        assert.equal(rect.right, 300);
+        assert.equal(rect.bottom, 150);
+        done();
+      });
+    });
+  });
+});