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/shared/elements/gaia_progress/examples/example.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var toggle = document.getElementById('toggle');
+var progress2 = document.getElementById('progress2');
+
+toggle.addEventListener('click', function() {
+  var animating = progress2.hasAttribute('animated');
+  if (animating) {
+    progress2.stop();
+  } else {
+    progress2.start();
+  }
+});

gaia/shared/elements/gaia_progress/examples/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>GaiaProgress Demo</title>
+  <meta name="description" content="Demo app for gaia-progress" />
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+
+    gaia-progress {
+      margin-bottom: 50px;
+    }
+  </style>
+  <script src="../../../js/component_utils.js"></script>
+  <script>window.GaiaProgressBaseurl = '../';</script>
+  <script src="../script.js" type="text/javascript"></script>
+  <link rel="stylesheet" href="../style/external.css">
+  <script src="./example.js" defer></script>
+  <script>
+    window.onload = function(){
+      document.getElementById('dir').checked = false;
+    };
+  </script>
+</head>
+<body>
+  <p dir="ltr">
+    <label class="bb-docs">
+      <input id="dir" type="checkbox" checked="false"
+        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
+      RTL mode
+    </label>
+  </p>
+
+  <gaia-progress></gaia-progress>
+  <gaia-progress id="progress2" animated></gaia-progress>
+  <button id="toggle">toggle</button>
+</body>
+</html>

gaia/shared/elements/gaia_progress/locales/gaia_progress.en-US.properties

@@ -0,0 +1,4 @@
+# LOCALIZATION NOTE(gaia-progress-loading/loaded.aria-valuetext): 
+# The following string is spoken by screen readers and not shown on the screen.
+gaia-progress-loading.ariaValueText = loading
+gaia-progress-loaded.ariaValueText = loaded

gaia/shared/elements/gaia_progress/script.js

@@ -0,0 +1,55 @@
+'use strict';
+/* global ComponentUtils */
+
+window.GaiaProgress = (function(win) {
+  // Extend from the HTMLElement prototype
+  var proto = Object.create(HTMLElement.prototype);
+
+  // Allow baseurl to be overridden (used for demo page)
+  var baseurl = window.GaiaProgressBaseurl || '/shared/elements/gaia_progress/';
+
+  proto.createdCallback = function() {
+    //set Accessibility attributes on creation
+    this.setAttribute('role', 'progressbar');
+    this.setAttribute('aria-live', 'polite');
+
+    var shadow = this.createShadowRoot();
+
+    this._template = template.content.cloneNode(true);
+    this._progress = this._template.getElementById('progress');
+
+    shadow.appendChild(this._template);
+
+    ComponentUtils.style.call(this, baseurl);
+
+    if (this.hasAttribute('animated')) {
+      this.start();
+    }
+  };
+
+  /**
+   * Starts the animation for the gaia-progress element.
+   * This is a workaround for bug 962594.
+   */
+  proto.start = function() {
+    this.setAttribute('animated', '');
+    this._progress.classList.add('animated');
+    this.setAttribute('data-l10n-id', 'gaia-progress-loading');
+  };
+
+  /**
+   * Stops the animation for the gaia-progress element.
+   * This is a workaround for bug 962594.
+   */
+  proto.stop = function() {
+    this.removeAttribute('animated');
+    this._progress.classList.remove('animated');
+    this.setAttribute('data-l10n-id', 'gaia-progress-loaded');
+  };
+
+  var template = document.createElement('template');
+  template.innerHTML = '<div id="progress"></div>';
+
+  // Register and return the constructor
+  return document.registerElement('gaia-progress', { prototype: proto });
+})(window);

gaia/shared/elements/gaia_progress/style.css

@@ -0,0 +1,27 @@
+gaia-progress {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  height: 0.4rem;
+  border: none;
+  position: relative;
+}
+
+gaia-progress:-moz-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#progress {
+  height: 0.4rem;
+  /* Since we animate, we need to extend the width to 100% + 1 full animation */
+  width: calc(100% + 15rem);
+  background: #00caf2 repeating-linear-gradient(135deg, #92F4FE, #92F4FE 5rem, #00CDF0 5rem, #00CDF0 10rem);
+  border: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#progress.animated {
+  animation: moving-backward 1.5s steps(15) infinite;
+}

gaia/shared/elements/gaia_progress/style/external.css

@@ -0,0 +1,23 @@
+/**
+Some css properties are global (keyframes) and cannot be specified
+to to only apply to our shadow dom so we hack around this by including
+this file without scoping it.
+Bug 1018269 - we need to specify the keyframe outside of the web component.
+*/
+
+/**
+Moving backward because:
+http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
+*/
+@-moz-keyframes moving-backward {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    /**
+    The width of the gradient is 10rem, but we adjust to 14.2 to account for
+    the gradient rotation. Without this adjustment the animation will jump.
+    */
+    transform: translateX(-14.2rem);
+  }
+}