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_menu/examples/example.js

@@ -0,0 +1,8 @@
+'use strict';
+
+(function() {
+  var menu = document.getElementById('menu');
+  menu.addEventListener('gaiamenu-cancel', function () {
+    alert('Cancelled');
+  });
+})();

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

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>GaiaMenu Demo</title>
+  <meta name="description" content="Demo app for gaia-menu">
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+    }
+  </style>
+  <script src="../../../js/component_utils.js"></script>
+  <script>window.GaiaMenuBaseurl = '../';</script>
+  <script src="../script.js"></script>
+  <script defer src="example.js"></script>
+</head>
+<body role="application">
+  <gaia-menu id="menu">
+    <header>Gaia Menu Header</header>
+    <button>Button 1</button>
+    <button>Button 2</button>
+    <button>Button 3</button>
+  </gaia-menu>
+</body>
+</html>

gaia/shared/elements/gaia_menu/examples/index_close_icon.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>GaiaMenu Demo</title>
+  <meta name="description" content="Demo app for gaia-menu">
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+    }
+  </style>
+  <script src="../../../js/component_utils.js"></script>
+  <script>window.GaiaMenuBaseurl = '../';</script>
+  <script src="../script.js"></script>
+  <script defer src="example.js"></script>
+</head>
+<body role="application">
+  <gaia-menu id="menu">
+    <header>
+      <a class="icon icon-close" href="#close">close</a>
+    </header>
+    <button>Button 1</button>
+    <button>Button 2</button>
+    <button>Button 3</button>
+  </gaia-menu>
+</body>
+</html>

gaia/shared/elements/gaia_menu/examples/index_close_link.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>GaiaMenu Demo</title>
+  <meta name="description" content="Demo app for gaia-menu">
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+    }
+  </style>
+  <script src="../../../js/component_utils.js"></script>
+  <script>window.GaiaMenuBaseurl = '../';</script>
+  <script src="../script.js"></script>
+  <script defer src="example.js"></script>
+</head>
+<body role="application">
+  <gaia-menu id="menu">
+    <header>
+      <a href="#close">close</a>
+    </header>
+    <button>Button 1</button>
+    <button>Button 2</button>
+    <button>Button 3</button>
+  </gaia-menu>
+</body>
+</html>

gaia/shared/elements/gaia_menu/examples/index_title.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>GaiaMenu Demo</title>
+  <meta name="description" content="Demo app for gaia-menu">
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+    }
+  </style>
+  <script src="../../../js/component_utils.js"></script>
+  <script>window.GaiaMenuBaseurl = '../';</script>
+  <script src="../script.js"></script>
+  <script defer src="example.js"></script>
+</head>
+<body role="application">
+  <gaia-menu id="menu">
+    <header><h1 dir="auto">Gaia Menu HeadeGaia Menu HeadeGaia Menu HeadeGaia Menu HeadeGaia Menu HeadeGaia Menu HeadeGaia Menu HeaderrrrrrrGaia Menu Header</h1></header>
+    <button>Button 1</button>
+    <button dir="auto">long Button long Button long Button long Button long Button long Button long Button long Button long Button long Button long Button long Button long Button 2222222222222</button>
+    <button>كمنضتثب</button>
+    <button dir="auto">
+      كشنميتبكشمي بكمشن يبكمنش يبكمنتش يبكمن تشيسكبمن شكسيمنبتشك خهثبتكخه
+      شصثتبخهكصضثت كشمنيتبكشنيسكشني بكمشن يبكمنش تيسبكمنت شسيكمبن تشكمسينب
+      تمشكنسي تبكمشنستبي كمنش سيبكمن
+    </button>
+  </gaia-menu>
+</body>
+</html>

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

@@ -0,0 +1 @@
+gaia-menu-cancel = Cancel

gaia/shared/elements/gaia_menu/script.js

@@ -0,0 +1,62 @@
+'use strict';
+/* global ComponentUtils */
+
+window.GaiaMenu = (function(win) {
+  // Extend from HTMLElement prototype
+  var proto = Object.create(HTMLElement.prototype);
+
+  // Allow baseurl to be overridden (used for demo page)
+  var baseurl = window.GaiaMenuBaseurl ||
+    '/shared/elements/gaia_menu/';
+
+  proto.createdCallback = function () {
+    var shadow = this.createShadowRoot();
+
+    this._template = template.content.cloneNode(true);
+
+    var cancelButton = this._template.querySelector('.gaia-menu-cancel button');
+
+    cancelButton.addEventListener('click', function () {
+      this.hide();
+      this.dispatchEvent(new CustomEvent('gaiamenu-cancel'));
+    }.bind(this));
+
+    shadow.appendChild(this._template);
+
+    ComponentUtils.style.call(this, baseurl);
+
+    document.l10n.ready.then(this.localize.bind(this));
+    document.addEventListener('DOMRetranslated', this.localize.bind(this));
+  };
+
+  proto.localize = function() {
+    document.l10n.formatValue('gaia-menu-cancel').then(value => {
+      this.shadowRoot.querySelector('button').textContent = value;
+    });
+  };
+
+  proto.show = function() {
+    this.removeAttribute('hidden');
+  };
+
+  proto.hide = function() {
+    this.setAttribute('hidden', 'hidden');
+  };
+
+  var template = document.createElement('template');
+
+  template.innerHTML =
+    `<form role="dialog" data-type="action">
+      <content select="header"></content>
+      <menu>
+        <content select="button"></content>
+        <span class="gaia-menu-cancel">
+          <button>Cancel</button>
+        </span>
+      </menu>
+    </form>`;
+
+  // Register and return the constructor
+  return document.registerElement('gaia-menu', { prototype: proto });
+
+})(window);

gaia/shared/elements/gaia_menu/style.css

@@ -0,0 +1,314 @@
+/* ----------------------------------
+ * gaia_menu
+ * ---------------------------------- */
+
+/* default alignment follows the UI direction, not the content direction */
+:-moz-dir(ltr) [dir] { text-align: left; }
+:-moz-dir(rtl) [dir] { text-align: right; }
+
+/* Main dialog setup */
+gaia-menu {
+  background-color: #2d2d2d;
+  overflow: hidden;
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 0 7rem;
+  /**
+   * Using "font-size: 0" to avoid the unwanted visual space (about 3px) created
+   * by white spaces and line breaks in the code between inline-block elements.
+   */
+  font-size: 0;
+  color: #fff;
+  display: block;
+  transition: transform ease-in-out var(--transition-duration),
+              visibility var(--transition-duration);
+}
+
+gaia-menu[hidden] {
+  transform: translateY(100%);
+  visibility: hidden;
+}
+
+gaia-menu:before {
+  content: '';
+  display: inline-block;
+  vertical-align: top;
+  width: 0.1rem;
+  height: 100%;
+  margin-inline-start: -0.1rem;
+}
+
+header {
+  -moz-box-sizing: border-box;
+  font-size: 1.6rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  height: 5rem;
+  line-height: 4.9rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  font-weight: normal;
+  padding: 0 3rem;
+  border-bottom: 0.1rem solid #616262;
+}
+
+header h1 {
+  font-size: 1.6rem;
+  line-height: 4.9rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  height: 100%;
+  font-weight: normal;
+}
+
+/* Generic set of actions in toolbar */
+header menu.toolbar {
+  height: 100%;
+  margin: 0 -3rem;
+  margin-inline-start: 1rem;
+  padding: 0;
+}
+header:-moz-dir(ltr) menu.toolbar { float: right; }
+header:-moz-dir(rtl) menu.toolbar { float: left; }
+
+header menu.toolbar a,
+header menu.toolbar button {
+  -moz-box-sizing: border-box;
+  position: relative;
+  width: auto;
+  min-width: 5rem;
+  height: 4.9rem;
+  margin-bottom: 0;
+  padding: 0 1rem;
+  border-radius: 0;
+  line-height: 4.9rem;
+  background: none;
+  text-align: center;
+  text-shadow: none;
+  z-index: 5;
+}
+header:-moz-dir(ltr) menu.toolbar a,
+header:-moz-dir(ltr) menu.toolbar button {
+  float: left;
+}
+header:-moz-dir(rtl) menu.toolbar a,
+header:-moz-dir(rtl) menu.toolbar button {
+  float: right;
+}
+
+header a,
+header button {
+  border: none;
+  padding: 0;
+  overflow: hidden;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.1em;
+  color: #fff;
+  border-radius: 0;
+  text-decoration: none;
+}
+
+button::-moz-focus-inner {
+  outline: none;
+  border: none;
+}
+
+/* Pressed state */
+header a:active .icon:after,
+header button:active .icon:after,
+header menu.toolbar a:active,
+header menu.toolbar button:active  {
+  background: #008aaa;
+}
+
+/* Disabled state */
+header menu.toolbar a[aria-disabled="true"],
+header menu.toolbar button[disabled]  {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Icon definitions */
+header .icon {
+  position: relative;
+  float: none;
+  display: inline-block;
+  vertical-align: top;
+  width: 4rem;
+  height: 4.9rem;
+  margin: 0 -1rem;
+  background: transparent no-repeat center center / 3rem auto;
+  font-size: 0;
+  overflow: hidden;
+}
+
+header .icon.icon-close {
+  background-image: url(images/icons/close.png);
+}
+
+header .icon.icon-back {
+  background-image: url(images/icons/back.png);
+}
+
+/* Navigation links (back, cancel, etc) */
+header > button,
+header > a {
+  width: 5rem;
+  height: 4.9rem;
+  background: none;
+  overflow: visible;
+  margin: 0 -1rem;
+  margin-inline-start: -3rem;
+  position: relative;
+}
+header:-moz-dir(ltr) > button,
+header:-moz-dir(ltr) > a {
+  float: left;
+}
+header:-moz-dir(rtl) > button,
+header:-moz-dir(rtl) > a {
+  float: right;
+}
+
+header > button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+header > button .icon,
+header > a .icon {
+  position: static;
+  display: block;
+  width: 3rem;
+  height: 4.9rem;
+  margin: 0;
+  overflow: visible;
+  font-size: 0;
+}
+
+header > button .icon:after,
+header > a .icon:after {
+  content: "";
+  position: absolute;
+  offset-inline-start: 0;
+  top: 0;
+  z-index: -1;
+  width: 3rem;
+  height: 4.9rem;
+}
+
+/* Content */
+section {
+  color: #fff;
+  position: absolute;
+  top: 7rem;
+  left: 1.5rem;
+  right: 1.5rem;
+  bottom: 2rem;
+  font-size: 1.6rem;
+  overflow: scroll;
+}
+
+/* Specific component code */
+menu {
+  margin: 0;
+  padding: 0;
+  max-height: calc(100% - 13.5rem); /*header(5rem) + footer(7rem) + padding(1.5rem)*/
+  height: auto;
+  padding-top: 1.5rem;
+  overflow: auto;
+  width: auto;
+  border: none;
+  background: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 7rem;
+}
+
+button {
+  width: calc(100% - 3rem);
+  height: 4rem;
+  -moz-box-sizing: border-box;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: normal;
+  line-height: 4rem;
+  outline: none;
+  font-size: 1.6rem;
+  text-shadow: none;
+  padding: 0 1.2rem;
+  margin: 0 1.5rem 1rem;
+  background: rgba(87, 87, 87, 0.8);
+  border: none;
+  border-radius: 0;
+  position: relative;
+  color: #fff;
+  font-family: sans-serif;
+  font-style: italic;
+}
+button:-moz-dir(ltr) { text-align: left; }
+button:-moz-dir(rtl) { text-align: right; }
+
+span.gaia-menu-cancel {
+  position: fixed;
+  width: 100%;
+  background: #4d4d4d;
+  height: 7rem;
+  offset-inline-start: 0;
+  bottom: 0;
+}
+
+span.gaia-menu-cancel button {
+  position: fixed;
+  bottom: 0;
+  offset-inline-start: 0;
+  color: #333;
+  background: #d8d8d8;
+  text-align: center;
+  border: none;
+  margin-bottom: 1.5rem;
+  border-radius: 2rem;
+}
+
+button:nth-last-child(2) {
+  margin-bottom: 1.5rem;
+}
+
+/* Press state */
+button:active,
+span.gaia-menu-cancel button:active {
+  background: #00aacc;
+  color: #fff;
+}
+
+/* Disabled */
+button[disabled] {
+  background-color: rgba(87, 87, 87, 0.8);
+  color: rgba(255, 255, 255, 0.4);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+button[disabled]:last-child {
+  background-color: #e7e7e7;
+  color: #a6a6a6;
+  opacity: 1;
+}