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.

assets/webapps/costcontrol.gaiamobile.org/shared/elements/config.js

@@ -0,0 +1 @@
+;;;window.COMPONENTS_BASE_URL='/shared/elements/';

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia-header/dist/gaia-header.js

@@ -0,0 +1,373 @@
+;;;(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.GaiaHeader=f()}})(function(){var define,module,exports;return(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){;(function(define){define(function(require,exports,module){'use strict';var debug=0?console.log.bind(console):function(){};var cache={};var MIN=16;var MAX=24;var BUFFER=3;module.exports=function(config){debug('font fit',config);var space=config.space-BUFFER;var min=config.min||MIN;var max=config.max||MAX;var text=trim(config.text);var fontSize=max;var textWidth;var font;do{font=config.font.replace(/\d+px/,fontSize+'px');textWidth=getTextWidth(text,font);}while(textWidth>space&&fontSize!==min&&fontSize--);return{textWidth:textWidth,fontSize:fontSize,overflowing:textWidth>space};};function getTextWidth(text,font){var ctx=getCanvasContext(font);var width=ctx.measureText(text).width;debug('got text width',width);return width;}
+function getCanvasContext(font){debug('get canvas context',font);var cached=cache[font];if(cached){return cached;}
+var canvas=document.createElement('canvas');canvas.setAttribute('moz-opaque','true');canvas.setAttribute('width','1px');canvas.setAttribute('height','1px');debug('created canvas',canvas);var ctx=canvas.getContext('2d',{willReadFrequently:true});ctx.font=font;return cache[font]=ctx;}
+function trim(text){return text.replace(/\s+/g,' ').trim();}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('font-fit',this));},{}],2:[function(require,module,exports){;(function(define){'use strict';define(function(require,exports,module){var textContent=Object.getOwnPropertyDescriptor(Node.prototype,'textContent');var innerHTML=Object.getOwnPropertyDescriptor(Element.prototype,'innerHTML');var removeAttribute=Element.prototype.removeAttribute;var setAttribute=Element.prototype.setAttribute;var noop=function(){};exports.register=function(name,props){var baseProto=getBaseProto(props.extends);var template=props.template||baseProto.templateString;var extensible=props.extensible=props.hasOwnProperty('extensible')?props.extensible:true;delete props.extends;if(template){if(extensible&&props.template){props.templateString=props.template;}
+var output=processCss(template,name);props.template=document.createElement('template');props.template.innerHTML=output.template;props.lightCss=output.lightCss;props.globalCss=props.globalCss||'';props.globalCss+=output.globalCss;}
+injectGlobalCss(props.globalCss);delete props.globalCss;var descriptors=mixin(props.attrs||{},base.descriptors);props._attrs=props.attrs;delete props.attrs;var proto=createProto(baseProto,props);Object.defineProperties(proto,descriptors);try{return document.registerElement(name,{prototype:proto});}catch(e){if(e.name!=='NotSupportedError'){throw e;}}};var base={properties:{GaiaComponent:true,attributeChanged:noop,attached:noop,detached:noop,created:noop,createdCallback:function(){if(this.dirObserver){addDirObserver();}
+injectLightCss(this);this.created();},attributeChangedCallback:function(name,from,to){var prop=toCamelCase(name);if(this._attrs&&this._attrs[prop]){this[prop]=to;}
+this.attributeChanged(name,from,to);},attachedCallback:function(){if(this.dirObserver){this.setInnerDirAttributes=setInnerDirAttributes.bind(null,this);document.addEventListener('dirchanged',this.setInnerDirAttributes);}
+this.attached();},detachedCallback:function(){if(this.dirObserver){document.removeEventListener('dirchanged',this.setInnerDirAttributes);}
+this.detached();},setupShadowRoot:function(){if(!this.template){return;}
+var node=document.importNode(this.template.content,true);this.createShadowRoot().appendChild(node);if(this.dirObserver){setInnerDirAttributes(this);}
+return this.shadowRoot;},setAttr:function(name,value){var internal=this.shadowRoot.firstElementChild;setAttribute.call(internal,name,value);setAttribute.call(this,name,value);},removeAttr:function(name){var internal=this.shadowRoot.firstElementChild;removeAttribute.call(internal,name);removeAttribute.call(this,name);}},descriptors:{textContent:{set:function(value){textContent.set.call(this,value);if(this.lightStyle){this.appendChild(this.lightStyle);}},get:function(){return textContent.get();}},innerHTML:{set:function(value){innerHTML.set.call(this,value);if(this.lightStyle){this.appendChild(this.lightStyle);}},get:innerHTML.get}}};var defaultPrototype=createProto(HTMLElement.prototype,base.properties);function getBaseProto(proto){if(!proto){return defaultPrototype;}
+proto=proto.prototype||proto;return!proto.GaiaComponent?createProto(proto,base.properties):proto;}
+function createProto(proto,props){return mixin(Object.create(proto),props);}
+var hasShadowCSS=(function(){var div=document.createElement('div');try{div.querySelector(':host');div.querySelector('::content');return true;}
+catch(e){return false;}})();var regex={shadowCss:/(?:\:host|\:\:content)[^{]*\{[^}]*\}/g,':host':/(?:\:host)/g,':host()':/\:host\((.+)\)(?: \:\:content)?/g,':host-context':/\:host-context\((.+)\)([^{,]+)?/g,'::content':/(?:\:\:content)/g};function processCss(template,name){var globalCss='';var lightCss='';if(!hasShadowCSS){template=template.replace(regex.shadowCss,function(match){var hostContext=regex[':host-context'].exec(match);if(hostContext){globalCss+=match.replace(regex['::content'],'').replace(regex[':host-context'],'$1 '+name+'$2').replace(/ +/g,' ');}else{lightCss+=match.replace(regex[':host()'],name+'$1').replace(regex[':host'],name).replace(regex['::content'],name);}
+return'';});}
+return{template:template,lightCss:lightCss,globalCss:globalCss};}
+function injectGlobalCss(css){if(!css){return;}
+var style=document.createElement('style');style.innerHTML=css.trim();headReady().then(function(){document.head.appendChild(style);});}
+function headReady(){return new Promise(function(resolve){if(document.head){return resolve();}
+window.addEventListener('load',function fn(){window.removeEventListener('load',fn);resolve();});});}
+function injectLightCss(el){if(hasShadowCSS){return;}
+var stylesheet=el.querySelector('style');if(!stylesheet){stylesheet=document.createElement('style');stylesheet.setAttribute('scoped','');stylesheet.appendChild(document.createTextNode(el.lightCss));el.appendChild(stylesheet);}
+el.lightStyle=stylesheet;}
+function toCamelCase(string){return string.replace(/-(.)/g,function replacer(string,p1){return p1.toUpperCase();});}
+var dirObserver;function setInnerDirAttributes(component){var dir=component.dir||document.dir;Array.from(component.shadowRoot.children).forEach(element=>{if(element.nodeName!=='STYLE'){element.dir=dir;}});}
+function addDirObserver(){if(dirObserver){return;}
+dirObserver=new MutationObserver(onChanged);dirObserver.observe(document.documentElement,{attributeFilter:['dir'],attributes:true});function onChanged(mutations){document.dispatchEvent(new Event('dirchanged'));}}
+function mixin(target,source){for(var key in source){target[key]=source[key];}
+return target;}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-component',this));},{}],3:[function(require,module,exports){(function(define){'use strict';define(function(require,exports,module){var base=window.GAIA_ICONS_BASE_URL||window.COMPONENTS_BASE_URL||'bower_components/';if(!document.documentElement){window.addEventListener('load',load);}else{load();}
+function load(){if(isLoaded()){return;}
+var link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href=base+'gaia-icons/gaia-icons.css';document.head.appendChild(link);exports.loaded=true;}
+function isLoaded(){return exports.loaded||document.querySelector('link[href*=gaia-icons]')||document.documentElement.classList.contains('gaia-icons-loaded');}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-icons',this));},{}],4:[function(require,module,exports){;(function(define){'use strict';define(function(require,exports,module){var component=require('gaia-component');var fontFit=require('font-fit');require('gaia-icons');var debug=0?console.log.bind(console):function(){};const KNOWN_ACTIONS={menu:'menu',back:'back',close:'close'};const TITLE_FONT='italic 300 24px FiraSans';const TITLE_PADDING=10;const MINIMUM_FONT_SIZE_CENTERED=20;const MINIMUM_FONT_SIZE_UNCENTERED=16;const MAXIMUM_FONT_SIZE=23;module.exports=component.register('gaia-header',{extensible:false,dirObserver:true,created:function(){debug('created');this.setupShadowRoot();this.els={actionButton:this.shadowRoot.querySelector('.action-button'),titles:this.getElementsByTagName('h1')};this.els.actionButton.addEventListener('click',e=>this.onActionButtonClick(e));this.observer=new MutationObserver(this.onMutation.bind(this));this.ignoreDir=this.hasAttribute('ignore-dir');this.titleEnd=this.getAttribute('title-end');this.titleStart=this.getAttribute('title-start');this.noFontFit=this.getAttribute('no-font-fit');this.notFlush=this.hasAttribute('not-flush');this.action=this.getAttribute('action');this.unresolved={};this.pending={};this._resizeThrottlingId=null;this.onResize=this.onResize.bind(this);},attached:function(){debug('attached');this.runFontFitSoon();this.observerStart();window.addEventListener('resize',this.onResize);},detached:function(){debug('detached');window.removeEventListener('resize',this.onResize);this.observerStop();this.clearPending();},clearPending:function(){for(var key in this.pending){this.pending[key].clear();delete this.pending[key];}
+window.cancelAnimationFrame(this._resizeThrottlingId);this._resizeThrottlingId=null;},runFontFit:function(){debug('run font-fit');if(this.noFontFit){return Promise.resolve();}
+var titles=this.els.titles;var space=this.getTitleSpace();var styles=[].map.call(titles,el=>this.getTitleStyle(el,space));return this.setTitleStylesSoon(styles);},runFontFitSoon:function(){debug('run font-fit soon');if(this.pending.runFontFitSoon){return;}
+this.pending.runFontFitSoon=this.nextTick(()=>{delete this.pending.runFontFitSoon;this.runFontFit();});},getTitleStyle:function(el,space){debug('get el style',el,space);var text=el.textContent;var styleId=space.start+text+space.end+'#'+space.value;if(!text||!text.trim()){return debug('exit: no text');}
+if(getStyleId(el)===styleId){return debug('exit: no change');}
+var marginStart=this.getTitleMarginStart();var textSpace=space.value-Math.abs(marginStart);var fontFitResult=this.fontFit(text,textSpace,{min:MINIMUM_FONT_SIZE_CENTERED});var overflowing=fontFitResult.overflowing;var padding={start:0,end:0};if(overflowing){debug('title overflowing');padding.start=!space.start?TITLE_PADDING:0;padding.end=!space.end?TITLE_PADDING:0;textSpace=space.value-padding.start-padding.end;fontFitResult=this.fontFit(text,textSpace);marginStart=0;}
+return{id:styleId,fontSize:fontFitResult.fontSize,marginStart:marginStart,overflowing:overflowing,padding:padding};},setTitleStylesSoon:function(styles){debug('set title styles soon',styles);var key='setStyleTitlesSoon';this._titleStyles=styles;if(this.unresolved[key]){return this.unresolved[key];}
+this.unresolved[key]=new Promise((resolve)=>{this.pending[key]=this.nextTick(()=>{var styles=this._titleStyles;var els=this.els.titles;[].forEach.call(els,(el,i)=>{if(!styles[i]){return debug('exit');}
+this.setTitleStyle(el,styles[i]);});delete this._titleStyles;delete this.unresolved[key];delete this.pending[key];resolve();});});},setTitleStyle:function(el,style){debug('set title style',style);this.observerStop();if(this.ignoreDir){el.style.marginLeft=style.marginStart+'px';el.style.paddingLeft=style.padding.start+'px';el.style.paddingRight=style.padding.end+'px';}else{el.style.marginInlineStart=style.marginStart+'px';el.style.paddingInlineStart=style.padding.start+'px';el.style.paddingInlineEnd=style.padding.end+'px';}
+el.style.fontSize=style.fontSize+'px';setStyleId(el,style.id);this.observerStart();},fontFit:function(text,space,opts={}){debug('font fit:',text,space,opts);var fontFitArgs={font:TITLE_FONT,min:opts.min||MINIMUM_FONT_SIZE_UNCENTERED,max:MAXIMUM_FONT_SIZE,text:text,space:space};return fontFit(fontFitArgs);},observerStart:function(){if(this.observing){return;}
+this.observer.observe(this,{childList:true,attributes:true,subtree:true});this.observing=true;debug('observer started');},observerStop:function(){if(!this.observing){return;}
+this.observer.disconnect();this.observing=false;debug('observer stopped');},onResize:function(e){debug('onResize',this._resizeThrottlingId);if(this._resizeThrottlingId!==null){return;}
+this._resizeThrottlingId=window.requestAnimationFrame(()=>{this._resizeThrottlingId=null;this.runFontFitSoon();});},onMutation:function(mutations){debug('on mutation',mutations);if(!this.pending.runFontFitSoon){this.runFontFit();}},getTitleSpace:function(){var start=this.titleStart;var end=this.titleEnd;var space=this.getWidth()-start-end;var result={value:space,start:start,end:end};debug('get title space',result);return result;},getWidth:function(){var value=this.notFlush?this.clientWidth:window.innerWidth;debug('get width',value);return value;},triggerAction:function(){if(this.action){this.els.actionButton.click();}},onActionButtonClick:function(){debug('action button click');var config={detail:{type:this.action}};var e=new CustomEvent('action',config);setTimeout(()=>this.dispatchEvent(e));},getTitleMarginStart:function(){var start=this.titleStart;var end=this.titleEnd;var marginStart=end-start;debug('get title margin start',marginStart);return marginStart;},getButtonsBeforeTitle:function(){var children=this.children;var l=children.length;var els=[];for(var i=0;i<l;i++){var el=children[i];if(el.tagName==='H1'){break;}
+if(!contributesToLayout(el)){continue;}
+els.push(el);}
+if(this.action){els.push(this.els.actionButton);}
+return els;},getButtonsAfterTitle:function(){var children=this.children;var els=[];for(var i=children.length-1;i>=0;i--){var el=children[i];if(el.tagName==='H1'){break;}
+if(!contributesToLayout(el)){continue;}
+els.push(el);}
+return els;},sumButtonWidths:function(buttons){var defaultWidth=50;var sum=buttons.reduce((prev,button)=>{var isStandardButton=button===this.els.actionButton;var width=isStandardButton?defaultWidth:button.clientWidth;return prev+width;},0);debug('sum button widths',buttons,sum);return sum;},attrs:{action:{get:function(){return this._action;},set:function(value){var action=KNOWN_ACTIONS[value];if(action===this._action){return;}
+this.setAttr('action',action);this._action=action;}},titleStart:{get:function(){debug('get title-start');if('_titleStart'in this){return this._titleStart;}
+var buttons=this.getButtonsBeforeTitle();var value=this.sumButtonWidths(buttons);debug('get title-start',buttons,value);return value;},set:function(value){debug('set title-start',value);value=parseInt(value,10);if(value===this._titleStart||isNaN(value)){return;}
+this.setAttr('title-start',value);this._titleStart=value;debug('set');}},titleEnd:{get:function(){debug('get title-end');if('_titleEnd'in this){return this._titleEnd;}
+var buttons=this.getButtonsAfterTitle();return this.sumButtonWidths(buttons);},set:function(value){debug('set title-end',value);value=parseInt(value,10);if(value===this._titleEnd||isNaN(value)){return;}
+this.setAttr('title-end',value);this._titleEnd=value;}},noFontFit:{get:function(){return this._noFontFit||false;},set:function(value){debug('set no-font-fit',value);value=!!(value||value==='');if(value===this.noFontFit){return;}
+this._noFontFit=value;if(value){this.setAttr('no-font-fit','');}
+else{this.removeAttr('no-font-fit');}}},ignoreDir:{get:function(){return this._ignoreDir||false;},set:function(value){debug('set ignore-dir',value);value=!!(value||value==='');if(value===this.ignoreDir){return;}
+this._ignoreDir=value;this.dirObserver=!value;if(value){this.setAttr('ignore-dir','');}
+else{this.removeAttr('ignore-dir');}}}},template:`<div class="inner">
+    <button class="action-button">
+      <content select="[l10n-action]"></content>
+    </button>
+    <content></content>
+  </div>
+
+  <style>
+
+  :host {
+    display: block;
+    -moz-user-select: none;
+
+    --gaia-header-button-color:
+      var(--header-button-color,
+      var(--header-color,
+      var(--link-color,
+      inherit)));
+  }
+
+  /**
+   * [hidden]
+   */
+
+  :host[hidden] {
+    display: none;
+  }
+
+  /** Reset
+   ---------------------------------------------------------*/
+
+  ::-moz-focus-inner { border: 0; }
+
+  /** Inner
+   ---------------------------------------------------------*/
+
+  .inner {
+    display: flex;
+    min-height: 50px;
+    -moz-user-select: none;
+
+    background:
+      var(--header-background,
+      var(--background,
+      #fff));
+  }
+
+  /** Action Button
+   ---------------------------------------------------------*/
+
+  /**
+   * 1. Hidden by default
+   */
+
+  .action-button {
+    position: relative;
+
+    display: none; /* 1 */
+    width: 50px;
+    font-size: 30px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+
+    align-items: center;
+    background: none;
+    cursor: pointer;
+    transition: opacity 200ms 280ms;
+    color:
+      var(--header-action-button-color,
+      var(--header-icon-color,
+      var(--gaia-header-button-color)));
+  }
+
+  /**
+   * [action=back]
+   * [action=menu]
+   * [action=close]
+   *
+   * 1. For icon vertical-alignment
+   */
+
+  [action=back] .action-button,
+  [action=menu] .action-button,
+  [action=close] .action-button {
+    display: flex; /* 1 */
+  }
+
+  /**
+   * :active
+   */
+
+  .action-button:active {
+    transition: none;
+    opacity: 0.2;
+  }
+
+  /** Action Button Icon
+   ---------------------------------------------------------*/
+
+  .action-button:before {
+    font-family: 'gaia-icons';
+    font-style: normal;
+    text-rendering: optimizeLegibility;
+    font-weight: 500;
+  }
+
+  [action=close] .action-button:before { content: 'close' }
+  [action=menu] .action-button:before { content: 'menu' }
+
+  [action=back]:-moz-dir(ltr) .action-button:before { content: 'left' }
+  [action=back]:-moz-dir(rtl) .action-button:before { content: 'right' }
+
+  /** Action Button Icon
+   ---------------------------------------------------------*/
+
+  /**
+   * 1. To enable vertical alignment.
+   */
+
+  .action-button:before {
+    display: block;
+  }
+
+  /** Action Button Text
+   ---------------------------------------------------------*/
+
+  /**
+   * To provide custom localized content for
+   * the action-button, we allow the user
+   * to provide an element with the class
+   * .l10n-action. This node is then
+   * pulled inside the real action-button.
+   *
+   * Example:
+   *
+   *   <gaia-header action="back">
+   *     <span l10n-action aria-label="Back">Localized text</span>
+   *     <h1>title</h1>
+   *   </gaia-header>
+   */
+
+  ::content [l10n-action] {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    font-size: 0;
+  }
+
+  /** Title
+   ---------------------------------------------------------*/
+
+  /**
+   * 1. Vertically center text. We can't use flexbox
+   *    here as it breaks text-overflow ellipsis
+   *    without an inner div.
+   */
+
+  ::content h1 {
+    flex: 1;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: center;
+    line-height: 50px; /* 1 */
+    font-weight: 300;
+    font-style: italic;
+    font-size: 24px;
+
+    color:
+      var(--header-title-color,
+      var(--header-color,
+      var(--title-color,
+      var(--text-color,
+      inherit))));
+  }
+
+  /**
+   * [ignore-dir]
+   *
+   * When the <gaia-header> component has an [ignore-dir] attribute, header
+   * direction is forced to LTR but we still want the <h1> text to be reversed
+   * so that strings like '1 selected' become 'selected 1'.
+   *
+   * When we're happy for <gaia-header> to be fully RTL responsive we won't need
+   * these rules anymore, but this depends on all Gaia apps being ready.
+   *
+   * This should be safe to remove when bug 1179459 lands.
+   */
+
+  :host[ignore-dir] {
+    direction: ltr;
+  }
+
+  :host[ignore-dir]:-moz-dir(rtl) h1 {
+    direction: rtl;
+  }
+
+  /** Buttons
+   ---------------------------------------------------------*/
+
+  ::content a,
+  ::content button {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    display: flex;
+    width: auto;
+    height: auto;
+    min-width: 50px;
+    margin: 0;
+    padding: 0 10px;
+    outline: 0;
+    border: 0;
+
+    font-size: 14px;
+    line-height: 1;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    text-align: center;
+    background: none;
+    border-radius: 0;
+    font-style: italic;
+    cursor: pointer;
+    transition: opacity 200ms 280ms;
+    color: var(--gaia-header-button-color);
+  }
+
+  /**
+   * :active
+   */
+
+  ::content a:active,
+  ::content button:active {
+    transition: none;
+    opacity: 0.2;
+  }
+
+  /**
+   * [hidden]
+   */
+
+  ::content a[hidden],
+  ::content button[hidden] {
+    display: none;
+  }
+
+  /**
+   * [disabled]
+   */
+
+  ::content a[disabled],
+  ::content button[disabled] {
+    pointer-events: none;
+    color: var(--header-disabled-button-color);
+  }
+
+  /** Icon Buttons
+   ---------------------------------------------------------*/
+
+  /**
+   * Icons are a different color to text
+   */
+
+  ::content .icon,
+  ::content [data-icon] {
+    color:
+      var(--header-icon-color,
+      var(--gaia-header-button-color));
+  }
+
+  /**
+   * If users want their action button
+   * to be in the component's light-dom
+   * they can add an .action class
+   * to make it look like the
+   * shadow action button.
+   */
+
+  ::content .action {
+    color:
+      var(--header-action-button-color,
+      var(--header-icon-color,
+      var(--gaia-header-button-color)));
+  }
+
+  /**
+   * [data-icon]:empty
+   *
+   * Icon buttons with no textContent,
+   * should always be 50px.
+   *
+   * This is to prevent buttons being
+   * larger than they should be before
+   * icon-font has loaded.
+   */
+
+  ::content [data-icon]:empty {
+    width: 50px;
+  }
+
+  </style>`,nextTick:nextTick});function contributesToLayout(el){return el.localName!=='style'&&!el.hasAttribute('l10n-action');}
+function setStyleId(el,id){el._styleId=id;}
+function getStyleId(el){return el._styleId;}
+function nextTick(fn){var cleared;Promise.resolve().then(()=>{if(!cleared){fn();}});return{clear:function(){cleared=true;}};}});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-header',this));},{"font-fit":1,"gaia-component":2,"gaia-icons":3}]},{},[4])(4)});

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia-icons/gaia-icons.css

@@ -0,0 +1,40 @@
+/* Generated by grunt-webfont */
+/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */
+
+@font-face {
+	font-family: "gaia-icons";
+	src: url("fonts/gaia-icons.ttf") format("truetype");
+	font-weight: 500;
+	font-style: normal;
+}
+
+[data-icon]:before,
+.ligature-icons {
+	font-family: "gaia-icons";
+	content: attr(data-icon);
+	display: inline-block;
+	font-weight: 500;
+	font-style: normal;
+	text-decoration: inherit;
+	text-transform: none;
+	text-rendering: optimizeLegibility;
+	font-size: 30px;
+	-webkit-font-smoothing: antialiased;
+}
+
+[data-icon]:not([data-l10n-id]):not([aria-label]):not([aria-hidden="true"]):before {
+	/* Highlight cases where icons are not localized and still visible to screen
+	   reader */
+	background: rgba(255, 0, 0, 0.4);
+}
+
+[data-icon]:not([data-l10n-id]):not([aria-label]):not([aria-hidden="true"]):after {
+	background: #333;
+	color: #fff;
+	position: absolute;
+	width: 20rem;
+	border-radius: 0.5rem;
+	padding: 0.5rem;
+	content: "Icon is not localized and is still visible to screen reader. Please add data-l10n-id or aria-label for localization or use aria-hidden to hide the icon from screen reader.";
+	z-index: 9999;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_buttons/images/left-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 18.2995,19.66 -5.056,-5.057 5.056,-5.056 c -0.31,-0.516 -0.62,-1.032 -0.93,-1.34 l -5.672,5.673 v 1.652 l 5.675,5.676 c 0.31,-0.515 0.722,-0.928 0.93,-1.547 z"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_buttons/images/right-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="M11.8,19.9l4.9-4.9l-4.9-4.9c0.3-0.5,0.6-1,0.9-1.3l5.5,5.5c0,0.3,0,0.5,0,0.8c0,0.3,0,0.5,0,0.8l-5.5,5.5 C12.4,20.9,12,20.5,11.8,19.9z"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_buttons/script.js

@@ -0,0 +1 @@
+;'use strict';window.GaiaButtons=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaButtonsBaseurl||'/shared/elements/gaia_buttons/';proto.createdCallback=function(){ComponentUtils.style.call(this,baseurl);};return document.registerElement('gaia-buttons',{prototype:proto});})(window);

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_buttons/style.css

@@ -0,0 +1,281 @@
+/* ---------------------------------------
+ * gaia-buttons:
+ * Container for buttons e.g:
+ * action menu, confirm, edit mode, FTU
+ * --------------------------------------- */
+
+gaia-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 7rem;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+gaia-buttons:not(.inline) {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  border-top: 0.1rem solid #e7e7e7;
+  padding: 0;
+  background-color: #f4f4f4;
+}
+/* this 'end' padding must match the buttons 'start' margin */
+gaia-buttons:not(.inline):-moz-dir(ltr) { padding-right: 1.5rem; }
+gaia-buttons:not(.inline):-moz-dir(rtl) { padding-left: 1.5rem; }
+
+gaia-buttons.inline a,
+gaia-buttons.inline button {
+  margin: 0;
+}
+
+button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+a,
+button {
+  position: relative;
+  font-family: sans-serif;
+  font-style: italic;
+  width: 100%;
+  height: 4rem;
+  margin: 0;
+  padding: 0 0.2rem;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #d8d8d8;
+  border: none;
+  border-radius: 2rem;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 4rem;
+  color: #333;
+  text-align: center;
+  text-decoration: none;
+  outline: none;
+}
+:-moz-dir(ltr) a,
+:-moz-dir(ltr) button {
+  margin-left: 1.5rem;
+}
+:-moz-dir(rtl) a,
+:-moz-dir(rtl) button {
+  margin-right: 1.5rem;
+}
+
+/* Recommend */
+a.recommend,
+button.recommend {
+  background-color: #00caf2;
+  color: #fff;
+}
+
+/* Danger */
+a.danger,
+button.danger {
+  background-color: #e51e1e;
+  color: #fff;
+}
+
+/* Pressed */
+a:active,
+button:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+a::-moz-selection,
+button::-moz-selection {
+  background-color: transparent;
+}
+
+/* Disabled */
+a[aria-disabled="true"],
+button[disabled] {
+  background-color: rgba(0,0,0,0.05);
+  color: #c7c7c7;
+  pointer-events: auto;
+}
+
+a[aria-disabled="true"].recommend,
+button[disabled].recommend {
+  background-color: #97cbd5;
+  color: rgba(255,255,255,0.5);
+}
+
+a[aria-disabled="true"].danger,
+button[disabled].danger {
+  background-color: #eb7474;
+  color: rgba(255,255,255,0.5);
+}
+
+a[aria-disabled="true"]::-moz-selection,
+button[disabled]::-moz-selection {
+  -moz-user-select: none;
+}
+
+/* Hidden */
+[hidden] {
+  visibility: hidden;
+}
+
+/* Icons */
+a.icon,
+button.icon {
+  position: relative;
+}
+
+a.icon:before,
+button.icon:before {
+  content: "";
+  width: 3rem;
+  height: 3rem;
+  position: absolute;
+  top: 50%;
+  margin-top: -1.5rem;
+  background: transparent no-repeat center center / 100% auto;
+}
+:-moz-dir(ltr) a.icon:before,
+:-moz-dir(ltr) button.icon:before { right: 0.5rem; }
+:-moz-dir(rtl) a.icon:before,
+:-moz-dir(rtl) button.icon:before { left: 0.5rem; }
+
+a.icon-next:before,
+button.icon-next:before {
+  background-size: 3rem;
+}
+:-moz-dir(ltr) a.icon-next:before,
+:-moz-dir(ltr) button.icon-next:before {
+  background-image: url(images/right-light.svg);
+}
+:-moz-dir(rtl) a.icon-next:before,
+:-moz-dir(rtl) button.icon-next:before {
+  background-image: url(images/left-light.svg);
+}
+
+a.icon-previous:before,
+button.icon-previous:before {
+  background-size: 3rem;
+}
+:-moz-dir(ltr) a.icon-previous:before,
+:-moz-dir(ltr) button.icon-previous:before {
+  left: 0.5rem;
+  background-image: url(images/left-light.svg);
+}
+:-moz-dir(rtl) a.icon-previous:before,
+:-moz-dir(rtl) button.icon-previous:before {
+  right: 0.5rem;
+  background-image: url(images/right-light.svg);
+}
+
+
+/* -----------------------------------------------------------------
+  SKIN: dark
+----------------------------------------------------------------- */
+
+gaia-buttons[skin="dark"] {
+  background: #4d4d4d;
+  border: none;
+}
+
+/* Pressed */
+[skin="dark"] a:active,
+[skin="dark"] button:active {
+  background-color: #00aacc;
+}
+
+/* Disabled */
+[skin="dark"] a[aria-disabled="true"],
+[skin="dark"] button[disabled] {
+  background-color: #565656;
+  color: rgba(255,255,255,0.4);
+}
+
+[skin="dark"] a[aria-disabled="true"].recommend,
+[skin="dark"] button[disabled].recommend {
+  background-color: #006579;
+}
+
+[skin="dark"] a[aria-disabled="true"].danger,
+[skin="dark"] button[disabled].danger {
+  background-color: #730f0f;
+}
+
+/* -----------------------------------------------------------------
+  Transitions
+----------------------------------------------------------------- */
+
+[transition] {
+  display: flex;
+  transition: visibility var(--transition-duration);
+}
+
+[transition][hidden] {
+  pointer-events: none;
+}
+
+[transition="slide"] {
+  transform: translateY(0);
+  transition: transform var(--transition-duration) ease,
+              visibility var(--transition-duration);
+}
+
+[transition="slide"][hidden] {
+  transform: translateY(100%);
+}
+
+[transition="fade"] {
+  opacity: 1;
+  transition: opacity var(--transition-duration) ease,
+              visibility var(--transition-duration);
+}
+
+[transition="fade"][hidden] {
+  opacity: 0;
+}
+
+/* -----------------------------------------------------------------
+  RESPONSIVE: tablet
+----------------------------------------------------------------- */
+
+@media (min-width: 768px) {
+
+  gaia-buttons {
+    height: 10rem;
+  }
+
+  gaia-buttons:not(.inline) {
+    border-top-width: 0.2rem;
+  }
+  /* this 'end' padding must match the buttons 'start' margin */
+  gaia-buttons:not(.inline):-moz-dir(ltr) { padding-right: 3rem; }
+  gaia-buttons:not(.inline):-moz-dir(rtl) { padding-left: 3rem; }
+
+  a,
+  button {
+    font-size: 2rem;
+    height: 5rem;
+    line-height: 5rem;
+    border-radius: 2.5rem;
+    max-width: 40rem;
+  }
+  :-moz-dir(ltr) a,
+  :-moz-dir(ltr) button {
+    margin-left: 3rem;
+  }
+  :-moz-dir(rtl) a,
+  :-moz-dir(rtl) button {
+    margin-right: 3rem;
+  }
+
+}
+

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_checkbox/script.js

@@ -0,0 +1,5 @@
+;'use strict';window.GaiaCheckbox=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaCheckboxBaseurl||'/shared/elements/gaia_checkbox/';proto.createdCallback=function(){this.lastClick=0;this.throttleTime=250;var shadow=this.createShadowRoot();this._template=template.content.cloneNode(true);this._wrapper=this._template.getElementById('checkbox');this._wrapper.addEventListener('click',this.handleClick.bind(this));this.configureClass();this.checked=this.hasAttribute('checked');this._wrapper.setAttribute('aria-checked',this.checked);this.setAttribute('role','presentation');shadow.appendChild(this._template);ComponentUtils.style.call(this,baseurl);};proto.handleClick=function(e){e.preventDefault();e.stopImmediatePropagation();if(this.lastClick+this.throttleTime>Date.now()){return;}
+this.lastClick=Date.now();var event=new MouseEvent('click',{view:window,bubbles:true,cancelable:true});this.dispatchEvent(event);if(!event.defaultPrevented){this.checked=!this.checked;this._wrapper.setAttribute('aria-checked',this.checked);}
+this.dispatchEvent(new CustomEvent('change',{bubbles:true,cancelable:false}));};proto.configureClass=function(){this._wrapper.className=this.className;};proto.attributeChangedCallback=function(name,from,to){if(name==='class'){this._wrapper.className=to;}};Object.defineProperty(proto,'checked',{get:function(){return this._checked||false;},set:function(value){this._wrapper.classList.toggle('checked',value);this._checked=value;}});Object.defineProperty(proto,'name',{get:function(){return this.getAttribute('name');},set:function(value){this.setAttribute('name',value);}});var template=document.createElement('template');template.innerHTML=`<span id="checkbox" role="checkbox">
+      <span role="presentation"><content select="label"></content></span>
+    </span>`;return document.registerElement('gaia-checkbox',{prototype:proto});})(window);

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_checkbox/style.css

@@ -0,0 +1,71 @@
+gaia-checkbox {
+  display: inline-block;
+  width: 100%;
+}
+
+#checkbox {
+  display: block;
+  width: 100%;
+  /* Normal gaia-checkboxes are the heights of their parents. */
+  height: 100%;
+  position: relative;
+  background: none;
+}
+
+#checkbox span {
+  font-size: 1.9rem;
+  font-weight: normal;
+  color: var(--label-color);
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  min-width: 2.2rem;
+  min-height: 2.2rem;
+  width: 100%;
+  padding-inline-end: 2.2rem;
+  /* Override inheriting nowrap from legacy lists building blocks. */
+  white-space: normal;
+}
+
+/* Inline gaia-checkboxes are the heights of their parents. */
+#checkbox.inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#checkbox:not(.invisible) span:after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 50%;
+  margin: -1.2rem 0 0;
+  margin-inline-start: -1.2rem;
+  width: 2.2rem;
+  height: 2.2rem;
+}
+
+#checkbox.inline span {
+  padding-inline-start: 3rem;
+  padding-inline-end: 0;
+  height: auto;
+}
+
+#checkbox.inline span:after {
+  offset-inline-start: 1.2rem;
+  offset-inline-end: unset;
+  margin: -1.2rem 0 0;
+  margin-inline-start: -1.2rem;
+}
+
+#checkbox:not(.invisible) span:after {
+  background: url(images/default.png) no-repeat center top / 2.2rem auto;
+}
+
+#checkbox.checked span:after {
+  background-position: center bottom;
+}
+
+/* 'Dangerous' checkboxes */
+#checkbox.danger span:after {
+  background-image: url(images/danger.png);
+}

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_menu/script.js

@@ -0,0 +1,9 @@
+;'use strict';window.GaiaMenu=(function(win){var proto=Object.create(HTMLElement.prototype);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>`;return document.registerElement('gaia-menu',{prototype:proto});})(window);

assets/webapps/costcontrol.gaiamobile.org/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;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_radio/script.js

@@ -0,0 +1,9 @@
+;'use strict';window.GaiaRadio=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaRadioBaseurl||'/shared/elements/gaia_radio/';proto.createdCallback=function(){var shadow=this.createShadowRoot();this._template=template.content.cloneNode(true);this._wrapper=this._template.getElementById('radio');this._wrapper.addEventListener('click',this.handleClick.bind(this));if(this.dataset.role){this._wrapper.setAttribute('role',this.dataset.role);}
+if(!this.hasAttribute('role')){this.setAttribute('role','presentation');}
+this.configureClass();shadow.appendChild(this._template);this.checked=this.hasAttribute('checked');this._wrapper.setAttribute('aria-checked',this.checked);setTimeout(function nextTick(){var label=this.querySelector('label, p');if(!label){return;}
+label.addEventListener('click',this.handleClick.bind(this));}.bind(this));ComponentUtils.style.call(this,baseurl);var dirObserver=new MutationObserver(this.updateInternalDir.bind(this));dirObserver.observe(document.documentElement,{attributeFilter:['dir'],attributes:true});this.updateInternalDir();};proto.updateInternalDir=function(){var internal=this.shadowRoot.firstElementChild;if(document.documentElement.dir==='rtl'){internal.setAttribute('dir','rtl');}else{internal.removeAttribute('dir');}};proto.handleClick=function(e){e.stopImmediatePropagation();var event=new MouseEvent('click',{view:window,bubbles:true,cancelable:true});this.dispatchEvent(event);if(this.checked){return;}
+if(!event.defaultPrevented){this.checked=!this.checked;}
+this.dispatchEvent(new CustomEvent('change',{bubbles:true,cancelable:false}));};proto.configureClass=function(){this._wrapper.className=this.className;this._wrapper.classList.toggle('checked',this._checked);};proto.hideDetails=function(){this.shadowRoot.querySelector('.details').style.display='none';};proto.attributeChangedCallback=function(name,from,to){if(name==='class'){this._wrapper.className=to;}};Object.defineProperty(proto,'checked',{get:function(){return this._checked;},set:function(value){if(!this._template){return;}
+if(value){var relevant=document.querySelectorAll('gaia-radio[name="'+this.getAttribute('name')+'"]');for(var i=0,iLen=relevant.length;i<iLen;i++){relevant[i].checked=false;}
+this.setAttribute('checked',true);}else{this.removeAttribute('checked');}
+this._wrapper.classList.toggle('checked',value);this._wrapper.setAttribute('aria-checked',value);this._checked=value;}});Object.defineProperty(proto,'name',{get:function(){return this.getAttribute('name');},set:function(value){this.setAttribute('name',value);}});Object.defineProperty(proto,'value',{get:function(){return this.getAttribute('value');},set:function(value){this.setAttribute('value',value);}});Object.defineProperty(proto,'type',{get:function(){return'gaia-radio';}});var template=document.createElement('template');template.innerHTML='<span role="radio" id="radio">'+'<span><content select="p,label"></content></span>'+'<div class="details"><content select="details"></content></div>'+'<div class="divider"></div>'+'</span>';return document.registerElement('gaia-radio',{prototype:proto});})(window);

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_radio/style.css

@@ -0,0 +1,107 @@
+gaia-radio {
+  display: inline-block;
+  width: 100%;
+}
+
+#radio {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  position: relative;
+  background: none;
+}
+
+gaia-radio.inline,
+#radio.inline {
+  width: 5rem;
+  height: 100%;
+}
+
+#radio span {
+  font-size: 1.9rem;
+  color: var(--label-color);
+  padding: 1rem 0;
+  padding-inline-end: 2.4rem;
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  /* Override inheriting nowrap from legacy lists building blocks. */
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+/* Users may choose to truncate text instead of it wrapping by adding the "truncate" className */
+#radio.truncate span {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#radio span:after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 50%;
+  margin: -1.1rem 0 0;
+  margin-inline-start: -1.1rem;
+  width: 2.2rem;
+  height: 2.2rem;
+  background: url(images/default.png) no-repeat center top / 2.2rem auto;
+}
+
+#radio.checked span:after {
+  background-position: center bottom;
+}
+
+/* 'Dangerous' radio */
+#radio.danger span:after {
+  background-image: url(images/danger.png);
+}
+
+/* 'checkone' radio */
+#radio.checkone span:after {
+  background: none;
+}
+
+#radio.checkone.checked span:after {
+  background: url(images/checked.png) no-repeat right center / 100%;
+}
+
+#radio.checkone.checked span {
+  font-weight: 500;
+}
+
+/* 'split' radio label */
+#radio.split .divider {
+  content: '';
+  position: absolute;
+  background-color: #E6E6E3;
+  offset-inline-end: 3.5rem;
+  width: 0.1rem;
+  height: calc(100% - 1rem);
+  top: 0.5rem;
+}
+
+gaia-radio.split label {
+  display: block;
+  width: 100%;
+}
+
+/******************************************************************************
+ * A <details> slot may be specified in addition the the <label>.
+ * When provided, it appears under the <label> and can provide additional context.
+ */
+#radio div.details {
+  position: relative;
+  top: -1.5rem;
+  display: block;
+  margin: 0;
+  padding-top: 0.5rem;
+  -moz-padding-start: 0;
+  -moz-padding-end: 8rem;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  color: #505859;
+  font-style: normal;
+  white-space: normal;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_select/script.js

@@ -0,0 +1,3 @@
+;;'use strict';window.GaiaSelect=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaSelectBaseurl||'/shared/elements/gaia_select/';var selectCounter=0;proto.createdCallback=function(){var label=this.querySelector('label');if(label){var select=this.querySelector('select');if(label.control!=select){var id=select.id;if(!id){select.id=id='gaia-select-'+(++selectCounter);}
+label.htmlFor=id;}}
+ComponentUtils.style.call(this,baseurl);};return document.registerElement('gaia-select',{prototype:proto});})(window);

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_select/style.css

@@ -0,0 +1,72 @@
+/* ----------------------------------
+ * SWITCHES
+ * ---------------------------------- */
+
+gaia-select {
+  width: 100%;
+  position: relative;
+  display: block;
+}
+
+gaia-select > label {
+  margin: 0 0 10px 15px;
+  line-height: 22px;
+  font-size: 18px;
+  display: block;
+}
+
+gaia-select::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: auto;
+  right: 0.8rem;
+  bottom: 0.5rem;
+  border-top: 0.7rem solid transparent;
+  border-bottom: 0.7rem solid transparent;
+  border-left: 0.7rem solid #00AAC5;
+  transform: rotate(45deg);
+  z-index: 1;
+  pointer-events: none;
+}
+
+gaia-select:-moz-dir(rtl)::after {
+  left: 0.8rem;
+  right: unset;
+  transform: rotate(135deg);
+}
+
+select {
+  border: 0.1rem solid #C7C7C7;
+  border-radius: 0;
+  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: initial;
+  width: 100%;
+  padding: 0.8rem 3rem 0.7rem 0.8rem;
+  margin: 0;
+  font-family: sans-serif;
+  font-style: italic;
+  white-space: nowrap;
+  font-weight: normal;
+  font-size: 1.6rem;
+  height: auto;
+  min-height: 4rem;
+  line-height: 2rem;
+  -moz-appearance: none;
+  /* remove dotted outline */
+  color: transparent;
+  text-shadow: 0 0 0 #333;
+}
+
+select:active {
+  background-color: #B2F2FF;
+  text-shadow: 0 0 0 #fff;
+}
+
+option {
+  background-color: initial;
+  color: #333;
+  text-shadow: none;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_subheader/script.js

@@ -0,0 +1 @@
+;'use strict';window.GaiaSubheader=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaSubheaderBaseurl||'/shared/elements/gaia_subheader/';proto.createdCallback=function(){ComponentUtils.style.call(this,baseurl);};return document.registerElement('gaia-subheader',{prototype:proto});})(window);

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_subheader/style.css

@@ -0,0 +1,40 @@
+gaia-subheader[hidden] {
+  display: none;
+}
+
+/**
+ * Gaia Subheader
+ *
+ * Dividing header usually found
+ * heading and separating lists.
+ */
+
+gaia-subheader {
+  display: block;
+  padding: 0.8rem 3rem;
+  border-bottom: solid 0.1rem #e6e6e6;
+  color: #424242;
+  font-size: 1.5rem;
+  line-height: 1.8rem;
+  text-align: start;
+}
+
+/**
+ * [data-skin="organic"]
+ */
+
+gaia-subheader[skin="organic"] {
+  border: 0;
+  background-color: #e7e7e7;
+  color: #4d4d4d;
+}
+
+/**
+ * [data-skin="dark"]
+ */
+
+gaia-subheader[skin="dark"] {
+  border: 0;
+  background-color: #2c353b;
+  color: #fff;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_switch/script.js

@@ -0,0 +1,9 @@
+;;'use strict';window.GaiaSwitch=(function(win){var proto=Object.create(HTMLElement.prototype);var baseurl=window.GaiaSwitchBaseurl||'/shared/elements/gaia_switch/';proto.createdCallback=function(){var shadow=this.createShadowRoot();this._template=template.content.cloneNode(true);this._input=this._template.querySelector('input[type="checkbox"]');var checked=this.getAttribute('checked');if(checked!==null){this._input.checked=true;}
+var wrapper=this._template.getElementById('switch');wrapper.addEventListener('click',this.handleClick.bind(this));shadow.appendChild(this._template);ComponentUtils.style.call(this,baseurl);var dirObserver=new MutationObserver(this.updateInternalDir.bind(this));dirObserver.observe(document.documentElement,{attributeFilter:['dir'],attributes:true});this.updateInternalDir();};proto.updateInternalDir=function(){var internal=this.shadowRoot.firstElementChild;if(document.documentElement.dir==='rtl'){internal.setAttribute('dir','rtl');}else{internal.removeAttribute('dir');}};proto.handleClick=function(e){if(e&&e.target.tagName==='A'){return;}
+e&&e.preventDefault();e&&e.stopImmediatePropagation();var event=new MouseEvent('click',{view:window,bubbles:true,cancelable:true});this.dispatchEvent(event);if(!event.defaultPrevented){this.checked=!this.checked;}
+this.dispatchEvent(new CustomEvent('change',{bubbles:true,cancelable:false}));};proto.click=function(){this.handleClick();};Object.defineProperty(proto,'checked',{get:function(){return this._input.checked;},set:function(value){this._input.checked=value;}});Object.defineProperty(proto,'disabled',{get:function(){return this.hasAttribute('disabled');},set:function(value){if(value){this.setAttribute('disabled',true);}else{this.removeAttribute('disabled');}}});Object.defineProperty(proto,'name',{get:function(){return this.getAttribute('name');},set:function(value){this.setAttribute('name',value);}});Object.defineProperty(proto,'type',{get:function(){return'gaia-switch';}});var template=document.createElement('template');template.innerHTML=`<span id="switch">
+      <input type="checkbox">
+      <span><content select="label"></content></span>
+      <div class="details"><content select="details"></content></div>
+      <content select="a"></content>
+    </span>`;return document.registerElement('gaia-switch',{prototype:proto});})(window);

assets/webapps/costcontrol.gaiamobile.org/shared/elements/gaia_switch/style.css

@@ -0,0 +1,116 @@
+gaia-switch {
+  display: inline-block;
+  width: 100%;
+}
+
+#switch {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  position: relative;
+  background: none;
+}
+
+#switch span {
+  font-size: 1.9rem;
+  color: var(--label-color);
+  padding: 1rem 0;
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  /* Override inheriting nowrap from legacy lists building blocks. */
+  white-space: normal;
+}
+#switch span:-moz-dir(ltr) { float: left; }
+#switch span:-moz-dir(rtl) { float: right; }
+
+#switch span:not(:empty) {
+  padding-inline-end: 6rem;
+}
+
+#switch input {
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+}
+
+#switch input:checked ~ span::after {
+  background-position: center bottom;
+}
+
+/* ----------------------------------
+ * ON/OFF SWITCHES
+ * ---------------------------------- */
+
+#switch input ~ span::after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 2.5rem;
+  width: 6rem;
+  margin: -1.4rem 0 0;
+  height: 2.7rem;
+  border-radius: 1.35rem;
+  overflow: hidden;
+  background-color: #e6e6e6;
+  background-image: url(images/background_off.png);
+  background-repeat: no-repeat;
+  background-size: 9.2rem 2.7rem;
+  transition: background 0.2s ease;
+}
+#switch input ~ span:-moz-dir(ltr)::after { background-position: -3.2rem 0; }
+#switch input ~ span:-moz-dir(rtl)::after { background-position: 0 0; }
+
+/* switch: 'ON' state */
+#switch input:checked ~ span:-moz-dir(ltr)::after {
+  background-image: url(images/background.png);
+  background-position: 0 0;
+}
+#switch input:checked ~ span:-moz-dir(rtl)::after {
+  background-image: url(images/background_rtl.png);
+  background-position: -3.2rem 0;
+}
+
+/* switch: disabled state */
+#switch input:disabled ~ span::after {
+  opacity: 0.4;
+}
+
+#switch input.uninit ~ span::after {
+  transition: none;
+}
+
+/**
+ * A <details> slot may be specified in addition the the <label>.
+ * When provided, it appears under the <label> and can provide additional context.
+ */
+#switch div.details {
+  clear: both;
+  position: relative;
+  top: -1.5rem;
+  display: block;
+  margin: 0;
+  padding-top: 0.5rem;
+  padding-inline-start: 0;
+  padding-inline-end: 8rem;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  color: #505859;
+  font-style: normal;
+  white-space: normal;
+}
+
+/**
+ * A <a> link slow may be specified in addition to the <label> and <details>.
+ * When provided, it will appear under the <details> section.
+ */
+gaia-switch a {
+  position: relative;
+  top: -0.8rem;
+  font-size: 1.7rem;
+  line-height: 2.4rem;
+  font-weight: 400;
+  color: #35679a;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/js/accessibility_helper.js

@@ -0,0 +1 @@
+;'use strict';(function(exports){var AccessibilityHelper={setAriaSelected:function ah_setAriaSelected(selectedTab,tabs){Array.prototype.forEach.call(tabs,function setAriaSelectedAttr(tab){tab.setAttribute('aria-selected',tab===selectedTab?'true':'false');});}};exports.AccessibilityHelper=AccessibilityHelper;})(window);

assets/webapps/costcontrol.gaiamobile.org/shared/js/airplane_mode_helper.js

@@ -0,0 +1,2 @@
+;(function(exports){'use strict';const kEventName='statechange';const kCommunicationKey='airplaneMode.enabled';const kStatusKey='airplaneMode.status';var AirplaneModeHelper={_mozSettings:window.navigator.mozSettings,_callbacks:[],_cachedStatus:'',ready:function(cb){if(this._cachedStatus===''){var self=this;this.addEventListener(kEventName,function onChangeEvent(){if(self._cachedStatus!==''){self.removeEventListener(kEventName,onChangeEvent);cb();}});}else{cb();}},getStatus:function(){return this._cachedStatus;},addEventListener:function(eventName,callback){if(eventName===kEventName){this._callbacks.push(callback);}},removeEventListener:function(eventName,callback){if(eventName===kEventName){var index=this._callbacks.indexOf(callback);if(index>=0){this._callbacks.splice(index,1);}}},setEnabled:function(enabled){this.ready(function(){var status=this.getStatus();if(status==='enabling'||status==='disabling'){}else{if(enabled&&status==='enabled'||!enabled&&status==='disabled'){return;}
+var setObj={};setObj[kCommunicationKey]=enabled;this._mozSettings.createLock().set(setObj);}}.bind(this));},init:function(){var self=this;var lock=window.navigator.mozSettings.createLock();var req=lock.get(kStatusKey);req.onsuccess=function(){self._cachedStatus=req.result[kStatusKey];self._callbacks.forEach(function(callback){callback(self._cachedStatus);});};this._mozSettings.addObserver(kStatusKey,function(evt){var currentStatus=evt.settingValue;self._cachedStatus=currentStatus;self._callbacks.forEach(function(callback){callback(currentStatus);});});}};exports.AirplaneModeHelper=AirplaneModeHelper;AirplaneModeHelper.init();})(this);

assets/webapps/costcontrol.gaiamobile.org/shared/js/async_storage.js

@@ -0,0 +1,14 @@
+;;;;this.asyncStorage=(function(){'use strict';var DBNAME='asyncStorage';var DBVERSION=1;var STORENAME='keyvaluepairs';var db=null;function withDatabase(f){if(db){f();}else{var openreq=indexedDB.open(DBNAME,DBVERSION);openreq.onerror=function withStoreOnError(){console.error('asyncStorage: can\'t open database:',openreq.error.name);};openreq.onupgradeneeded=function withStoreOnUpgradeNeeded(){openreq.result.createObjectStore(STORENAME);};openreq.onsuccess=function withStoreOnSuccess(){db=openreq.result;f();};}}
+function withStore(type,callback,oncomplete){withDatabase(function(){var transaction=db.transaction(STORENAME,type);if(oncomplete){transaction.oncomplete=oncomplete;}
+callback(transaction.objectStore(STORENAME));});}
+function getItem(key,callback){var req;withStore('readonly',function getItemBody(store){req=store.get(key);req.onerror=function getItemOnError(){console.error('Error in asyncStorage.getItem(): ',req.error.name);};},function onComplete(){var value=req.result;if(value===undefined){value=null;}
+callback(value);});}
+function setItem(key,value,callback){withStore('readwrite',function setItemBody(store){var req=store.put(value,key);req.onerror=function setItemOnError(){console.error('Error in asyncStorage.setItem(): ',req.error.name);};},callback);}
+function removeItem(key,callback){withStore('readwrite',function removeItemBody(store){var req=store.delete(key);req.onerror=function removeItemOnError(){console.error('Error in asyncStorage.removeItem(): ',req.error.name);};},callback);}
+function clear(callback){withStore('readwrite',function clearBody(store){var req=store.clear();req.onerror=function clearOnError(){console.error('Error in asyncStorage.clear(): ',req.error.name);};},callback);}
+function length(callback){var req;withStore('readonly',function lengthBody(store){req=store.count();req.onerror=function lengthOnError(){console.error('Error in asyncStorage.length(): ',req.error.name);};},function onComplete(){callback(req.result);});}
+function key(n,callback){if(n<0){callback(null);return;}
+var req;withStore('readonly',function keyBody(store){var advanced=false;req=store.openCursor();req.onsuccess=function keyOnSuccess(){var cursor=req.result;if(!cursor){return;}
+if(n===0||advanced){return;}
+advanced=true;cursor.advance(n);};req.onerror=function keyOnError(){console.error('Error in asyncStorage.key(): ',req.error.name);};},function onComplete(){var cursor=req.result;callback(cursor?cursor.key:null);});}
+return{getItem:getItem,setItem:setItem,removeItem:removeItem,clear:clear,length:length,key:key};}());

assets/webapps/costcontrol.gaiamobile.org/shared/js/component_utils.js

@@ -0,0 +1,2 @@
+;;;(function(exports){'use strict';exports.ComponentUtils={style:function(baseUrl){if(window.VulpesCompat){window.VulpesCompat.componentStyle(this,baseUrl).catch(console.error);return;}var style=document.createElement('style');var url=baseUrl+'style.css';var self=this;style.setAttribute('scoped','');style.innerHTML='@import url('+url+');';this.appendChild(style);this.style.visibility='hidden';style.addEventListener('load',function(){if(self.shadowRoot){self.shadowRoot.appendChild(style.cloneNode(true));}
+self.style.visibility='';});}};}(window));

assets/webapps/costcontrol.gaiamobile.org/shared/js/date_time_helper.js

@@ -0,0 +1,49 @@
+/**
+ * Shim for navigator.mozHour12 API.
+ * Send `localechanged` event if mozHour12 is changed.
+ *
+ * App need include following permission in manifest:
+ *
+ * "settings":{ "access": "readonly" }
+ */
+(function(){
+  'use strict';
+  // not polyfill if API already exists
+  if (window.navigator.mozHour12 || window.navigator.hour12) {return;}
+
+  // mock mozHour12 onto window.navigator
+  window.navigator.mozHour12 = undefined;
+
+  // set hour12 and emit the locale change event if value changed
+  var _setMozHour12 = function(result) {
+    if (result === null) {
+      // locale.hour12 may be true, false, `undefined` or `null`.
+      // We can't write to mozSettings with `undefined`, but we want to cast
+      // null to be undefined because then we can easily assign
+      // Intl hour12: navigator.mozHour12 which is a paradigm we want to use.
+      //
+      // if you set hour12 to undefined it uses automatic value, but it doesn't
+      // work if you set it to `null`, so we cast here to `undefined`.
+      result = undefined;
+    }
+    if (window.navigator.mozHour12 !== result) {
+      window.navigator.mozHour12 = result;
+      // emit the locale change event
+      window.dispatchEvent(new CustomEvent('timeformatchange'));
+    }
+  };
+
+  // handler observer event
+  var _hour12Handler = function(event) {
+    _setMozHour12(event.settingValue);
+  };
+
+  var _kLocaleTime = 'locale.hour12';
+  // update mozHour12 to real value
+  var req = window.navigator.mozSettings.createLock().get(_kLocaleTime);
+  req.onsuccess = function() {
+    _setMozHour12(req.result[_kLocaleTime]);
+  };
+  // monitor settings changes
+  window.navigator.mozSettings.addObserver(_kLocaleTime, _hour12Handler);
+})();

assets/webapps/costcontrol.gaiamobile.org/shared/js/format.js

@@ -0,0 +1,2 @@
+;;;'use strict';var Format={padLeft:function(input,len,padWith){padWith=padWith||' ';var pad=len-(input+'').length;while(--pad>-1){input=padWith+input;}
+return input;}};

assets/webapps/costcontrol.gaiamobile.org/shared/js/l10n.js

@@ -0,0 +1,245 @@
+;;;;;(function(window,undefined){'use strict';function L10nError(message,id,loc){this.name='L10nError';this.message=message;this.id=id;this.loc=loc;}
+L10nError.prototype=Object.create(Error.prototype);L10nError.prototype.constructor=L10nError;var io={_load:function(type,url,callback,sync){var xhr=new XMLHttpRequest();var needParse;if(xhr.overrideMimeType){xhr.overrideMimeType(type);}
+xhr.open('GET',url,!sync);if(type==='application/json'){if(sync){needParse=true;}else{xhr.responseType='json';}}
+xhr.addEventListener('load',function io_onload(e){if(e.target.status===200||e.target.status===0){var res=e.target.response||e.target.responseText;callback(null,needParse?JSON.parse(res):res);}else{callback(new L10nError('Not found: '+url));}});xhr.addEventListener('error',callback);xhr.addEventListener('timeout',callback);try{xhr.send(null);}catch(e){if(e.name==='NS_ERROR_FILE_NOT_FOUND'){callback(new L10nError('Not found: '+url));}else{throw e;}}},load:function(url,callback,sync){return io._load('text/plain',url,callback,sync);},loadJSON:function(url,callback,sync){return io._load('application/json',url,callback,sync);}};function EventEmitter(){}
+EventEmitter.prototype.emit=function ee_emit(){if(!this._listeners){return;}
+var args=Array.prototype.slice.call(arguments);var type=args.shift();if(!this._listeners[type]){return;}
+var typeListeners=this._listeners[type].slice();for(var i=0;i<typeListeners.length;i++){typeListeners[i].apply(this,args);}};EventEmitter.prototype.addEventListener=function ee_add(type,listener){if(!this._listeners){this._listeners={};}
+if(!(type in this._listeners)){this._listeners[type]=[];}
+this._listeners[type].push(listener);};EventEmitter.prototype.removeEventListener=function ee_rm(type,listener){if(!this._listeners){return;}
+var typeListeners=this._listeners[type];var pos=typeListeners.indexOf(listener);if(pos===-1){return;}
+typeListeners.splice(pos,1);};function getPluralRule(lang){var locales2rules={'af':3,'ak':4,'am':4,'ar':1,'asa':3,'az':0,'be':11,'bem':3,'bez':3,'bg':3,'bh':4,'bm':0,'bn':3,'bo':0,'br':20,'brx':3,'bs':11,'ca':3,'cgg':3,'chr':3,'cs':12,'cy':17,'da':3,'de':3,'dv':3,'dz':0,'ee':3,'el':3,'en':3,'eo':3,'es':3,'et':3,'eu':3,'fa':0,'ff':5,'fi':3,'fil':4,'fo':3,'fr':5,'fur':3,'fy':3,'ga':8,'gd':24,'gl':3,'gsw':3,'gu':3,'guw':4,'gv':23,'ha':3,'haw':3,'he':2,'hi':4,'hr':11,'hu':0,'id':0,'ig':0,'ii':0,'is':3,'it':3,'iu':7,'ja':0,'jmc':3,'jv':0,'ka':0,'kab':5,'kaj':3,'kcg':3,'kde':0,'kea':0,'kk':3,'kl':3,'km':0,'kn':0,'ko':0,'ksb':3,'ksh':21,'ku':3,'kw':7,'lag':18,'lb':3,'lg':3,'ln':4,'lo':0,'lt':10,'lv':6,'mas':3,'mg':4,'mk':16,'ml':3,'mn':3,'mo':9,'mr':3,'ms':0,'mt':15,'my':0,'nah':3,'naq':7,'nb':3,'nd':3,'ne':3,'nl':3,'nn':3,'no':3,'nr':3,'nso':4,'ny':3,'nyn':3,'om':3,'or':3,'pa':3,'pap':3,'pl':13,'ps':3,'pt':3,'rm':3,'ro':9,'rof':3,'ru':11,'rwk':3,'sah':0,'saq':3,'se':7,'seh':3,'ses':0,'sg':0,'sh':11,'shi':19,'sk':12,'sl':14,'sma':7,'smi':7,'smj':7,'smn':7,'sms':7,'sn':3,'so':3,'sq':3,'sr':11,'ss':3,'ssy':3,'st':3,'sv':3,'sw':3,'syr':3,'ta':3,'te':3,'teo':3,'th':0,'ti':4,'tig':3,'tk':3,'tl':4,'tn':3,'to':0,'tr':0,'ts':3,'tzm':22,'uk':11,'ur':3,'ve':3,'vi':0,'vun':3,'wa':4,'wae':3,'wo':0,'xh':3,'xog':3,'yo':0,'zh':0,'zu':3};function isIn(n,list){return list.indexOf(n)!==-1;}
+function isBetween(n,start,end){return typeof n===typeof start&&start<=n&&n<=end;}
+var pluralRules={'0':function(){return'other';},'1':function(n){if((isBetween((n%100),3,10))){return'few';}
+if(n===0){return'zero';}
+if((isBetween((n%100),11,99))){return'many';}
+if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'2':function(n){if(n!==0&&(n%10)===0){return'many';}
+if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'3':function(n){if(n===1){return'one';}
+return'other';},'4':function(n){if((isBetween(n,0,1))){return'one';}
+return'other';},'5':function(n){if((isBetween(n,0,2))&&n!==2){return'one';}
+return'other';},'6':function(n){if(n===0){return'zero';}
+if((n%10)===1&&(n%100)!==11){return'one';}
+return'other';},'7':function(n){if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'8':function(n){if((isBetween(n,3,6))){return'few';}
+if((isBetween(n,7,10))){return'many';}
+if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'9':function(n){if(n===0||n!==1&&(isBetween((n%100),1,19))){return'few';}
+if(n===1){return'one';}
+return'other';},'10':function(n){if((isBetween((n%10),2,9))&&!(isBetween((n%100),11,19))){return'few';}
+if((n%10)===1&&!(isBetween((n%100),11,19))){return'one';}
+return'other';},'11':function(n){if((isBetween((n%10),2,4))&&!(isBetween((n%100),12,14))){return'few';}
+if((n%10)===0||(isBetween((n%10),5,9))||(isBetween((n%100),11,14))){return'many';}
+if((n%10)===1&&(n%100)!==11){return'one';}
+return'other';},'12':function(n){if((isBetween(n,2,4))){return'few';}
+if(n===1){return'one';}
+return'other';},'13':function(n){if((isBetween((n%10),2,4))&&!(isBetween((n%100),12,14))){return'few';}
+if(n!==1&&(isBetween((n%10),0,1))||(isBetween((n%10),5,9))||(isBetween((n%100),12,14))){return'many';}
+if(n===1){return'one';}
+return'other';},'14':function(n){if((isBetween((n%100),3,4))){return'few';}
+if((n%100)===2){return'two';}
+if((n%100)===1){return'one';}
+return'other';},'15':function(n){if(n===0||(isBetween((n%100),2,10))){return'few';}
+if((isBetween((n%100),11,19))){return'many';}
+if(n===1){return'one';}
+return'other';},'16':function(n){if((n%10)===1&&n!==11){return'one';}
+return'other';},'17':function(n){if(n===3){return'few';}
+if(n===0){return'zero';}
+if(n===6){return'many';}
+if(n===2){return'two';}
+if(n===1){return'one';}
+return'other';},'18':function(n){if(n===0){return'zero';}
+if((isBetween(n,0,2))&&n!==0&&n!==2){return'one';}
+return'other';},'19':function(n){if((isBetween(n,2,10))){return'few';}
+if((isBetween(n,0,1))){return'one';}
+return'other';},'20':function(n){if((isBetween((n%10),3,4)||((n%10)===9))&&!(isBetween((n%100),10,19)||isBetween((n%100),70,79)||isBetween((n%100),90,99))){return'few';}
+if((n%1000000)===0&&n!==0){return'many';}
+if((n%10)===2&&!isIn((n%100),[12,72,92])){return'two';}
+if((n%10)===1&&!isIn((n%100),[11,71,91])){return'one';}
+return'other';},'21':function(n){if(n===0){return'zero';}
+if(n===1){return'one';}
+return'other';},'22':function(n){if((isBetween(n,0,1))||(isBetween(n,11,99))){return'one';}
+return'other';},'23':function(n){if((isBetween((n%10),1,2))||(n%20)===0){return'one';}
+return'other';},'24':function(n){if((isBetween(n,3,10)||isBetween(n,13,19))){return'few';}
+if(isIn(n,[2,12])){return'two';}
+if(isIn(n,[1,11])){return'one';}
+return'other';}};var index=locales2rules[lang.replace(/-.*$/,'')];if(!(index in pluralRules)){return function(){return'other';};}
+return pluralRules[index];}
+var MAX_PLACEABLES=100;var PropertiesParser={patterns:null,entryIds:null,init:function(){this.patterns={comment:/^\s*#|^\s*$/,entity:/^([^=\s]+)\s*=\s*(.*)$/,multiline:/[^\\]\\$/,index:/\{\[\s*(\w+)(?:\(([^\)]*)\))?\s*\]\}/i,unicode:/\\u([0-9a-fA-F]{1,4})/g,entries:/[^\r\n]+/g,controlChars:/\\([\\\n\r\t\b\f\{\}\"\'])/g,placeables:/\{\{\s*([^\s]*?)\s*\}\}/,};},parse:function(ctx,source){if(!this.patterns){this.init();}
+var ast=[];this.entryIds=Object.create(null);var entries=source.match(this.patterns.entries);if(!entries){return ast;}
+for(var i=0;i<entries.length;i++){var line=entries[i];if(this.patterns.comment.test(line)){continue;}
+while(this.patterns.multiline.test(line)&&i<entries.length){line=line.slice(0,-1)+entries[++i].trim();}
+var entityMatch=line.match(this.patterns.entity);if(entityMatch){try{this.parseEntity(entityMatch[1],entityMatch[2],ast);}catch(e){if(ctx){ctx._emitter.emit('parseerror',e);}else{throw e;}}}}
+return ast;},parseEntity:function(id,value,ast){var name,key;var pos=id.indexOf('[');if(pos!==-1){name=id.substr(0,pos);key=id.substring(pos+1,id.length-1);}else{name=id;key=null;}
+var nameElements=name.split('.');if(nameElements.length>2){throw new L10nError('Error in ID: "'+name+'".'+' Nested attributes are not supported.');}
+var attr;if(nameElements.length>1){name=nameElements[0];attr=nameElements[1];if(attr[0]==='$'){throw new L10nError('Attribute can\'t start with "$"',id);}}else{attr=null;}
+this.setEntityValue(name,attr,key,this.unescapeString(value),ast);},setEntityValue:function(id,attr,key,rawValue,ast){var pos,v;var value=rawValue.indexOf('{{')>-1?this.parseString(rawValue):rawValue;if(attr){pos=this.entryIds[id];if(pos===undefined){v={$i:id};if(key){v[attr]={};v[attr][key]=value;}else{v[attr]=value;}
+ast.push(v);this.entryIds[id]=ast.length-1;return;}
+if(key){if(typeof(ast[pos][attr])==='string'){ast[pos][attr]={$x:this.parseIndex(ast[pos][attr]),$v:{}};}
+ast[pos][attr].$v[key]=value;return;}
+ast[pos][attr]=value;return;}
+if(key){pos=this.entryIds[id];if(pos===undefined){v={};v[key]=value;ast.push({$i:id,$v:v});this.entryIds[id]=ast.length-1;return;}
+if(typeof(ast[pos].$v)==='string'){ast[pos].$x=this.parseIndex(ast[pos].$v);ast[pos].$v={};}
+ast[pos].$v[key]=value;return;}
+ast.push({$i:id,$v:value});this.entryIds[id]=ast.length-1;},parseString:function(str){var chunks=str.split(this.patterns.placeables);var complexStr=[];var len=chunks.length;var placeablesCount=(len-1)/2;if(placeablesCount>=MAX_PLACEABLES){throw new L10nError('Too many placeables ('+placeablesCount+', max allowed is '+MAX_PLACEABLES+')');}
+for(var i=0;i<chunks.length;i++){if(chunks[i].length===0){continue;}
+if(i%2===1){complexStr.push({t:'idOrVar',v:chunks[i]});}else{complexStr.push(chunks[i]);}}
+return complexStr;},unescapeString:function(str){if(str.lastIndexOf('\\')!==-1){str=str.replace(this.patterns.controlChars,'$1');}
+return str.replace(this.patterns.unicode,function(match,token){return unescape('%u'+'0000'.slice(token.length)+token);});},parseIndex:function(str){var match=str.match(this.patterns.index);if(!match){throw new L10nError('Malformed index');}
+if(match[2]){return[{t:'idOrVar',v:match[1]},match[2]];}else{return[{t:'idOrVar',v:match[1]}];}}};var KNOWN_MACROS=['plural'];var MAX_PLACEABLE_LENGTH=2500;var rePlaceables=/\{\{\s*(.+?)\s*\}\}/g;var nonLatin1=/[^\x01-\xFF]/;var FSI='\u2068';var PDI='\u2069';function createEntry(node,env){var keys=Object.keys(node);if(typeof node.$v==='string'&&keys.length===2){return node.$v;}
+var attrs;for(var i=0,key;key=keys[i];i++){if(key[0]==='$'){continue;}
+if(!attrs){attrs=Object.create(null);}
+attrs[key]=createAttribute(node[key],env,node.$i+'.'+key);}
+return{id:node.$i,value:node.$v!==undefined?node.$v:null,index:node.$x||null,attrs:attrs||null,env:env,dirty:false};}
+function createAttribute(node,env,id){if(typeof node==='string'){return node;}
+return{id:id,value:node.$v||(node!==undefined?node:null),index:node.$x||null,env:env,dirty:false};}
+function format(args,entity){if(typeof entity==='string'){return[{},entity];}
+if(entity.dirty){throw new L10nError('Cyclic reference detected: '+entity.id);}
+entity.dirty=true;var rv;try{rv=resolveValue({},args,entity.env,entity.value,entity.index);}finally{entity.dirty=false;}
+return rv;}
+function resolveIdentifier(args,env,id){if(KNOWN_MACROS.indexOf(id)>-1){return[{},env['__'+id]];}
+if(args&&args.hasOwnProperty(id)){if(typeof args[id]==='string'||(typeof args[id]==='number'&&!isNaN(args[id]))){return[{},args[id]];}else{throw new L10nError('Arg must be a string or a number: '+id);}}
+if(id in env&&id!=='__proto__'){return format(args,env[id]);}
+throw new L10nError('Unknown reference: '+id);}
+function subPlaceable(locals,args,env,id){var res;try{res=resolveIdentifier(args,env,id);}catch(err){return[{error:err},'{{ '+id+' }}'];}
+var value=res[1];if(typeof value==='number'){return res;}
+if(typeof value==='string'){if(value.length>=MAX_PLACEABLE_LENGTH){throw new L10nError('Too many characters in placeable ('+
+value.length+', max allowed is '+
+MAX_PLACEABLE_LENGTH+')');}
+if(locals.contextIsNonLatin1||value.match(nonLatin1)){res[1]=FSI+value+PDI;}
+return res;}
+return[{},'{{ '+id+' }}'];}
+function interpolate(locals,args,env,arr){return arr.reduce(function(prev,cur){if(typeof cur==='string'){return[prev[0],prev[1]+cur];}else if(cur.t==='idOrVar'){var placeable=subPlaceable(locals,args,env,cur.v);return[prev[0],prev[1]+placeable[1]];}},[locals,'']);}
+function resolveSelector(args,env,expr,index){var selectorName=index[0].v;var selector=resolveIdentifier(args,env,selectorName)[1];if(typeof selector!=='function'){return selector;}
+var argValue=index[1]?resolveIdentifier(args,env,index[1])[1]:undefined;if(selector===env.__plural){if(argValue===0&&'zero'in expr){return'zero';}
+if(argValue===1&&'one'in expr){return'one';}
+if(argValue===2&&'two'in expr){return'two';}}
+return selector(argValue);}
+function resolveValue(locals,args,env,expr,index){if(!expr){return[locals,expr];}
+if(typeof expr==='string'||typeof expr==='boolean'||typeof expr==='number'){return[locals,expr];}
+if(Array.isArray(expr)){locals.contextIsNonLatin1=expr.some(function($_){return typeof($_)==='string'&&$_.match(nonLatin1);});return interpolate(locals,args,env,expr);}
+if(index){var selector=resolveSelector(args,env,expr,index);if(expr.hasOwnProperty(selector)){return resolveValue(locals,args,env,expr[selector]);}}
+if('other'in expr){return resolveValue(locals,args,env,expr.other);}
+throw new L10nError('Unresolvable value');}
+var Resolver={createEntry:createEntry,format:format,rePlaceables:rePlaceables};function walkContent(node,fn){if(typeof node==='string'){return fn(node);}
+if(node.t==='idOrVar'){return node;}
+var rv=Array.isArray(node)?[]:{};var keys=Object.keys(node);for(var i=0,key;(key=keys[i]);i++){if(key==='$i'||key==='$x'){rv[key]=node[key];}else{rv[key]=walkContent(node[key],fn);}}
+return rv;}
+var reAlphas=/[a-zA-Z]/g;var reVowels=/[aeiouAEIOU]/g;var ACCENTED_MAP='\u0226\u0181\u0187\u1E12\u1E16\u0191\u0193\u0126\u012A'+'\u0134\u0136\u013F\u1E3E\u0220\u01FE\u01A4\u024A\u0158'+'\u015E\u0166\u016C\u1E7C\u1E86\u1E8A\u1E8E\u1E90'+'[\\]^_`'+'\u0227\u0180\u0188\u1E13\u1E17\u0192\u0260\u0127\u012B'+'\u0135\u0137\u0140\u1E3F\u019E\u01FF\u01A5\u024B\u0159'+'\u015F\u0167\u016D\u1E7D\u1E87\u1E8B\u1E8F\u1E91';var FLIPPED_MAP='\u2200\u0510\u2183p\u018E\u025F\u05E4HI\u017F'+'\u04FC\u02E5WNO\u0500\xD2\u1D1AS\u22A5\u2229\u0245'+'\uFF2DX\u028EZ'+'[\\]\u1D65_,'+'\u0250q\u0254p\u01DD\u025F\u0183\u0265\u0131\u027E'+'\u029E\u0285\u026Fuodb\u0279s\u0287n\u028C\u028Dx\u028Ez';function makeLonger(val){return val.replace(reVowels,function(match){return match+match.toLowerCase();});}
+function replaceChars(map,val){return val.replace(reAlphas,function(match){return map.charAt(match.charCodeAt(0)-65);});}
+var reWords=/[^\W0-9_]+/g;function makeRTL(val){return val.replace(reWords,function(match){return'\u202e'+match+'\u202c';});}
+var reExcluded=/(%[EO]?\w|\{\s*.+?\s*\}|&[#\w]+;|<\s*.+?\s*>)/;function mapContent(fn,val){if(!val){return val;}
+var parts=val.split(reExcluded);var modified=parts.map(function(part){if(reExcluded.test(part)){return part;}
+return fn(part);});return modified.join('');}
+function Pseudo(id,name,charMap,modFn){this.id=id;this.translate=mapContent.bind(null,function(val){return replaceChars(charMap,modFn(val));});this.name=this.translate(name);}
+var PSEUDO={'fr-x-psaccent':new Pseudo('fr-x-psaccent','Runtime Accented',ACCENTED_MAP,makeLonger),'ar-x-psbidi':new Pseudo('ar-x-psbidi','Runtime Bidi',FLIPPED_MAP,makeRTL)};function Locale(id,ctx){this.id=id;this.ctx=ctx;this.isReady=false;this.entries=Object.create(null);this.entries.__plural=getPluralRule(this.isPseudo()?this.ctx.defaultLocale:id);}
+Locale.prototype.isPseudo=function(){return this.ctx.qps.indexOf(this.id)!==-1;};var bindingsIO={extra:function(id,ver,path,type,callback,errback){if(type==='properties'){type='text';}
+navigator.mozApps.getLocalizationResource(id,ver,path,type).then(callback.bind(null,null),errback);},app:function(id,ver,path,type,callback,errback,sync){switch(type){case'properties':io.load(path,callback,sync);break;case'json':io.loadJSON(path,callback,sync);break;}},};Locale.prototype.build=function L_build(callback){var sync=!callback;var ctx=this.ctx;var self=this;var l10nLoads=ctx.resLinks.length;function onL10nLoaded(err){if(err){ctx._emitter.emit('fetcherror',err);}
+if(--l10nLoads<=0){self.isReady=true;if(callback){callback();}}}
+if(l10nLoads===0){onL10nLoaded();return;}
+function onJSONLoaded(err,json){if(!err&&json){self.addAST(json);}
+onL10nLoaded(err);}
+function onPropLoaded(err,source){if(!err&&source){var ast=PropertiesParser.parse(ctx,source);self.addAST(ast);}
+onL10nLoaded(err);}
+var idToFetch=this.isPseudo()?ctx.defaultLocale:this.id;var appVersion=null;var source='app';if(typeof(navigator)!=='undefined'){source=navigator.mozL10n._config.localeSources[this.id]||'app';appVersion=navigator.mozL10n._config.appVersion;}
+for(var i=0;i<ctx.resLinks.length;i++){var resLink=decodeURI(ctx.resLinks[i]);var path=resLink.replace('{locale}',idToFetch);var type=path.substr(path.lastIndexOf('.')+1);var cb;switch(type){case'json':cb=onJSONLoaded;break;case'properties':cb=onPropLoaded;break;}
+bindingsIO[source](this.id,appVersion,path,type,cb,onL10nLoaded,sync);}};function createPseudoEntry(node,entries){return Resolver.createEntry(walkContent(node,PSEUDO[this.id].translate),entries);}
+Locale.prototype.addAST=function(ast){var createEntry=this.isPseudo()?createPseudoEntry.bind(this):Resolver.createEntry;for(var i=0;i<ast.length;i++){this.entries[ast[i].$i]=createEntry(ast[i],this.entries);}};function Context(id){this.id=id;this.isReady=false;this.isLoading=false;this.defaultLocale='en-US';this.availableLocales=[];this.supportedLocales=[];this.qps=[];this.resLinks=[];this.locales={};this._emitter=new EventEmitter();this._ready=new Promise(this.once.bind(this));}
+function reportMissing(id,err){this._emitter.emit('notfounderror',err);return id;}
+function getWithFallback(id){var cur=0;var loc;var locale;while(loc=this.supportedLocales[cur]){locale=this.getLocale(loc);if(!locale.isReady){locale.build(null);}
+var entry=locale.entries[id];if(entry===undefined){cur++;reportMissing.call(this,id,new L10nError('"'+id+'"'+' not found in '+loc+' in '+this.id,id,loc));continue;}
+return entry;}
+throw new L10nError('"'+id+'"'+' missing from all supported locales in '+this.id,id);}
+function formatTuple(args,entity){try{return Resolver.format(args,entity);}catch(err){this._emitter.emit('resolveerror',err);var locals={error:err};return[locals,entity.id];}}
+function formatValue(args,entity){if(typeof entity==='string'){return entity;}
+return formatTuple.call(this,args,entity)[1];}
+function formatEntity(args,entity){var entityTuple=formatTuple.call(this,args,entity);var value=entityTuple[1];var formatted={value:value,attrs:null,};if(entity.attrs){formatted.attrs=Object.create(null);}
+for(var key in entity.attrs){var attrTuple=formatTuple.call(this,args,entity.attrs[key]);formatted.attrs[key]=attrTuple[1];}
+return formatted;}
+function formatAsync(fn,id,args){return this._ready.then(getWithFallback.bind(this,id)).then(fn.bind(this,args),reportMissing.bind(this,id));}
+Context.prototype.formatValue=function(id,args){return formatAsync.call(this,formatValue,id,args);};Context.prototype.formatEntity=function(id,args){return formatAsync.call(this,formatEntity,id,args);};function legacyGet(fn,id,args){if(!this.isReady){throw new L10nError('Context not ready');}
+var entry;try{entry=getWithFallback.call(this,id);}catch(err){if(err.loc){throw err;}
+reportMissing.call(this,id,err);return'';}
+return fn.call(this,args,entry);}
+Context.prototype.get=function(id,args){return legacyGet.call(this,formatValue,id,args);};Context.prototype.getEntity=function(id,args){return legacyGet.call(this,formatEntity,id,args);};Context.prototype.getLocale=function getLocale(code){var locales=this.locales;if(locales[code]){return locales[code];}
+return locales[code]=new Locale(code,this);};function negotiate(available,requested,defaultLocale){var supportedLocale;for(var i=0;i<requested.length;i++){var locale=requested[i];if(available.indexOf(locale)!==-1){supportedLocale=locale;break;}}
+if(!supportedLocale||supportedLocale===defaultLocale){return[defaultLocale];}
+return[supportedLocale,defaultLocale];}
+function freeze(supported){var locale=this.getLocale(supported[0]);if(locale.isReady){setReady.call(this,supported);}else{locale.build(setReady.bind(this,supported));}}
+function setReady(supported){this.supportedLocales=supported;this.isReady=true;this._emitter.emit('ready');}
+Context.prototype.registerLocales=function(defLocale,available){if(defLocale){this.defaultLocale=defLocale;}
+this.availableLocales=[this.defaultLocale];this.qps=Object.keys(PSEUDO);if(available){for(var i=0,loc;loc=available[i];i++){if(this.availableLocales.indexOf(loc)===-1){this.availableLocales.push(loc);var pos=this.qps.indexOf(loc);if(pos!==-1){this.qps.splice(pos,1);}}}}};Context.prototype.requestLocales=function requestLocales(){if(this.isLoading&&!this.isReady){throw new L10nError('Context not ready');}
+this.isLoading=true;var requested=Array.prototype.slice.call(arguments);if(requested.length===0){throw new L10nError('No locales requested');}
+var supported=negotiate(this.availableLocales.concat(this.qps),requested,this.defaultLocale);if(this.supportedLocales[0]!==supported[0]){freeze.call(this,supported);}};Context.prototype.addEventListener=function(type,listener){this._emitter.addEventListener(type,listener);};Context.prototype.removeEventListener=function(type,listener){this._emitter.removeEventListener(type,listener);};Context.prototype.ready=function(callback){if(this.isReady){setTimeout(callback);}
+this.addEventListener('ready',callback);};Context.prototype.once=function(callback){if(this.isReady){setTimeout(callback);return;}
+var callAndRemove=(function(){this.removeEventListener('ready',callAndRemove);callback();}).bind(this);this.addEventListener('ready',callAndRemove);};var allowed={elements:['a','em','strong','small','s','cite','q','dfn','abbr','data','time','code','var','samp','kbd','sub','sup','i','b','u','mark','ruby','rt','rp','bdi','bdo','span','br','wbr'],attributes:{global:['title','aria-label','aria-valuetext','aria-moz-hint'],a:['download'],area:['download','alt'],input:['alt','placeholder'],menuitem:['label'],menu:['label'],optgroup:['label'],option:['label'],track:['label'],img:['alt'],textarea:['placeholder'],th:['abbr']}};var rtlList=['ar','he','fa','ps','ar-x-psbidi','ur'];var nodeObserver=null;var pendingElements=null;var moConfig={attributes:true,characterData:false,childList:true,subtree:true,attributeFilter:['data-l10n-id','data-l10n-args']};navigator.mozL10n={ctx:null,get:function get(id,ctxdata){return navigator.mozL10n.ctx.get(id,ctxdata);},formatValue:function(id,ctxdata){return navigator.mozL10n.ctx.formatValue(id,ctxdata);},formatEntity:function(id,ctxdata){return navigator.mozL10n.ctx.formatEntity(id,ctxdata);},translateFragment:function(fragment){return translateFragment.call(navigator.mozL10n,fragment);},setAttributes:setL10nAttributes,getAttributes:getL10nAttributes,ready:function ready(callback){return navigator.mozL10n.ctx.ready(callback);},once:function once(callback){return navigator.mozL10n.ctx.once(callback);},get readyState(){return navigator.mozL10n.ctx.isReady?'complete':'loading';},language:{set code(lang){navigator.mozL10n.ctx.requestLocales(lang);},get code(){return navigator.mozL10n.ctx.supportedLocales[0];},get direction(){return getDirection(navigator.mozL10n.ctx.supportedLocales[0]);}},qps:PSEUDO,_config:{appVersion:null,localeSources:Object.create(null),isPretranslated:false,},_getInternalAPI:function(){return{Error:L10nError,Context:Context,Locale:Locale,Resolver:Resolver,getPluralRule:getPluralRule,rePlaceables:rePlaceables,translateDocument:translateDocument,onMetaInjected:onMetaInjected,PropertiesParser:PropertiesParser,walkContent:walkContent,buildLocaleList:buildLocaleList};}};function getDirection(lang){return(rtlList.indexOf(lang)>=0)?'rtl':'ltr';}
+var readyStates={loading:0,interactive:1,complete:2};function whenInteractive(callback){if(readyStates[document.readyState]>=readyStates.interactive){callback();return;}
+document.addEventListener('readystatechange',function l10n_onrsc(){if(readyStates[document.readyState]>=readyStates.interactive){document.removeEventListener('readystatechange',l10n_onrsc);callback();}});}
+function initObserver(){nodeObserver=new MutationObserver(onMutations.bind(navigator.mozL10n));nodeObserver.observe(document,moConfig);}
+function init(pretranslate){if(!pretranslate){initObserver();}
+initResources.call(navigator.mozL10n);}
+function initResources(){var meta={};var nodes=document.head.querySelectorAll('link[rel="localization"],'+'meta[name="availableLanguages"],'+'meta[name="defaultLanguage"],'+'meta[name="appVersion"],'+'script[type="application/l10n"]');for(var i=0,node;node=nodes[i];i++){var type=node.getAttribute('rel')||node.nodeName.toLowerCase();switch(type){case'localization':this.ctx.resLinks.push(node.getAttribute('href'));break;case'meta':onMetaInjected.call(this,node,meta);break;case'script':onScriptInjected.call(this,node);break;}}
+var additionalLanguagesPromise;if(navigator.mozApps&&navigator.mozApps.getAdditionalLanguages){additionalLanguagesPromise=navigator.mozApps.getAdditionalLanguages().catch(function(e){console.error('Error while loading getAdditionalLanguages',e);});document.addEventListener('additionallanguageschange',function(evt){registerLocales.call(this,meta,evt.detail);this.ctx.requestLocales.apply(this.ctx,navigator.languages||[navigator.language]);}.bind(this));}else{additionalLanguagesPromise=Promise.resolve();}
+additionalLanguagesPromise.then(function(extraLangs){registerLocales.call(this,meta,extraLangs);initLocale.call(this);}.bind(this));}
+function registerLocales(meta,extraLangs){var locales=buildLocaleList.call(this,meta,extraLangs);navigator.mozL10n._config.localeSources=locales[1];this.ctx.registerLocales(locales[0],Object.keys(locales[1]));}
+function getMatchingLangpack(appVersion,langpacks){for(var i=0,langpack;(langpack=langpacks[i]);i++){if(langpack.target===appVersion){return langpack;}}
+return null;}
+function buildLocaleList(meta,extraLangs){var loc,lp;var localeSources=Object.create(null);var defaultLocale=meta.defaultLanguage||this.ctx.defaultLocale;if(meta.availableLanguages){for(loc in meta.availableLanguages){localeSources[loc]='app';}}
+if(extraLangs){for(loc in extraLangs){lp=getMatchingLangpack(this._config.appVersion,extraLangs[loc]);if(!lp){continue;}
+if(!(loc in localeSources)||!meta.availableLanguages[loc]||parseInt(lp.revision)>meta.availableLanguages[loc]){localeSources[loc]='extra';}}}
+if(!(defaultLocale in localeSources)){localeSources[defaultLocale]='app';}
+return[defaultLocale,localeSources];}
+function splitAvailableLanguagesString(str){var langs={};str.split(',').forEach(function(lang){lang=lang.trim().split(':');langs[lang[0]]=parseInt(lang[1]);});return langs;}
+function onMetaInjected(node,meta){switch(node.getAttribute('name')){case'availableLanguages':meta.availableLanguages=splitAvailableLanguagesString(node.getAttribute('content'));break;case'defaultLanguage':meta.defaultLanguage=node.getAttribute('content');break;case'appVersion':navigator.mozL10n._config.appVersion=node.getAttribute('content');break;}}
+function onScriptInjected(node){var lang=node.getAttribute('lang');var locale=this.ctx.getLocale(lang);locale.addAST(JSON.parse(node.textContent));}
+function initLocale(){this.ctx.requestLocales.apply(this.ctx,navigator.languages||[navigator.language]);window.addEventListener('languagechange',function l10n_langchange(){this.ctx.requestLocales.apply(this.ctx,navigator.languages||[navigator.language]);}.bind(this));}
+function localizeMutations(mutations){var mutation;var targets=new Set();for(var i=0;i<mutations.length;i++){mutation=mutations[i];if(mutation.type==='childList'){var addedNode;for(var j=0;j<mutation.addedNodes.length;j++){addedNode=mutation.addedNodes[j];if(addedNode.nodeType!==Node.ELEMENT_NODE){continue;}
+targets.add(addedNode);}}
+if(mutation.type==='attributes'){targets.add(mutation.target);}}
+targets.forEach(function(target){if(target.childElementCount){translateFragment.call(this,target);}else if(target.hasAttribute('data-l10n-id')){translateElement.call(this,target);}},this);}
+function onMutations(mutations,self){self.disconnect();localizeMutations.call(this,mutations);self.observe(document,moConfig);}
+function onReady(){if(!navigator.mozL10n._config.isPretranslated){translateDocument.call(this);}
+navigator.mozL10n._config.isPretranslated=false;if(pendingElements){for(var i=0,element;element=pendingElements[i];i++){translateElement.call(this,element);}
+pendingElements=null;}
+if(!nodeObserver){initObserver();}
+fireLocalizedEvent.call(this);}
+function fireLocalizedEvent(){var event=new CustomEvent('localized',{'bubbles':false,'cancelable':false,'detail':{'language':this.ctx.supportedLocales[0]}});window.dispatchEvent(event);}
+var reOverlay=/<|&#?\w+;/;var reHtml=/[&<>]/g;var htmlEntities={'&':'&amp;','<':'&lt;','>':'&gt;',};function translateDocument(){document.documentElement.lang=this.language.code;document.documentElement.dir=this.language.direction;translateFragment.call(this,document.documentElement);}
+function translateFragment(element){if(typeof element.hasAttribute==='function'&&element.hasAttribute('data-l10n-id')){translateElement.call(this,element);}
+var nodes=getTranslatableChildren(element);for(var i=0;i<nodes.length;i++){translateElement.call(this,nodes[i]);}}
+function setL10nAttributes(element,id,args){element.setAttribute('data-l10n-id',id);if(args){element.setAttribute('data-l10n-args',JSON.stringify(args));}}
+function getL10nAttributes(element){return{id:element.getAttribute('data-l10n-id'),args:JSON.parse(element.getAttribute('data-l10n-args'))};}
+function getTranslatableChildren(element){return element?element.querySelectorAll('*[data-l10n-id]'):[];}
+function camelCaseToDashed(string){if(string==='ariaValueText'){return'aria-valuetext';}
+return string.replace(/[A-Z]/g,function(match){return'-'+match.toLowerCase();}).replace(/^-/,'');}
+function escapeL10nArgs(match){return htmlEntities[match];}
+function translateElement(element){if(!this.ctx.isReady){if(!pendingElements){pendingElements=[];}
+pendingElements.push(element);return;}
+var l10nId=element.getAttribute('data-l10n-id');if(!l10nId){return false;}
+var l10nArgs=element.getAttribute('data-l10n-args');var entity=this.ctx.getEntity(l10nId,l10nArgs?JSON.parse(l10nArgs.replace(reHtml,escapeL10nArgs)):undefined);var value=entity.value;if(typeof value==='string'){if(!reOverlay.test(value)){element.textContent=value;}else{var translation=element.ownerDocument.createElement('template');translation.innerHTML=value;overlayElement(element,translation.content);}}
+for(var key in entity.attrs){var attrName=camelCaseToDashed(key);if(isAttrAllowed({name:attrName},element)){element.setAttribute(attrName,entity.attrs[key]);}}}
+function overlayElement(sourceElement,translationElement){var result=translationElement.ownerDocument.createDocumentFragment();var k,attr;var childElement;while((childElement=translationElement.childNodes[0])){translationElement.removeChild(childElement);if(childElement.nodeType===Node.TEXT_NODE){result.appendChild(childElement);continue;}
+var index=getIndexOfType(childElement);var sourceChild=getNthElementOfType(sourceElement,childElement,index);if(sourceChild){overlayElement(sourceChild,childElement);result.appendChild(sourceChild);continue;}
+if(isElementAllowed(childElement)){var sanitizedChild=childElement.ownerDocument.createElement(childElement.nodeName);overlayElement(sanitizedChild,childElement);result.appendChild(sanitizedChild);continue;}
+result.appendChild(document.createTextNode(childElement.textContent));}
+sourceElement.textContent='';sourceElement.appendChild(result);if(translationElement.attributes){for(k=0,attr;(attr=translationElement.attributes[k]);k++){if(isAttrAllowed(attr,sourceElement)){sourceElement.setAttribute(attr.name,attr.value);}}}}
+function isElementAllowed(element){return allowed.elements.indexOf(element.tagName.toLowerCase())!==-1;}
+function isAttrAllowed(attr,element){var attrName=attr.name.toLowerCase();var tagName=element.tagName.toLowerCase();if(allowed.attributes.global.indexOf(attrName)!==-1){return true;}
+if(!allowed.attributes[tagName]){return false;}
+if(allowed.attributes[tagName].indexOf(attrName)!==-1){return true;}
+if(tagName==='input'&&attrName==='value'){var type=element.type.toLowerCase();if(type==='submit'||type==='button'||type==='reset'){return true;}}
+return false;}
+function getNthElementOfType(context,element,index){var nthOfType=0;for(var i=0,child;child=context.children[i];i++){if(child.nodeType===Node.ELEMENT_NODE&&child.tagName===element.tagName){if(nthOfType===index){return child;}
+nthOfType++;}}
+return null;}
+function getIndexOfType(element){var index=0;var child;while((child=element.previousElementSibling)){if(child.tagName===element.tagName){index++;}}
+return index;}
+var DEBUG=false;navigator.mozL10n.ctx=new Context(window.document?document.URL:null);navigator.mozL10n.ctx.ready(onReady.bind(navigator.mozL10n));navigator.mozL10n.ctx.addEventListener('notfounderror',function reportMissingEntity(e){if(DEBUG||e.loc==='en-US'){console.warn(e.toString());}});if(DEBUG){navigator.mozL10n.ctx.addEventListener('fetcherror',console.error.bind(console));navigator.mozL10n.ctx.addEventListener('parseerror',console.error.bind(console));navigator.mozL10n.ctx.addEventListener('resolveerror',console.error.bind(console));}
+if(window.document){navigator.mozL10n._config.isPretranslated=document.documentElement.lang===navigator.language;var forcePretranslate=!navigator.mozL10n._config.isPretranslated;whenInteractive(init.bind(navigator.mozL10n,forcePretranslate));}
+document.l10n={setAttributes:navigator.mozL10n.setAttributes,getAttributes:navigator.mozL10n.getAttributes,formatValue:function(id,args){return navigator.mozL10n.formatValue(id,args);},translateFragment:function(frag){return Promise.resolve(navigator.mozL10n.translateFragment(frag));},ready:new Promise(function(resolve){navigator.mozL10n.once(resolve);}),formatValues:function(){var keys=arguments;var resp=keys.map(function(key){if(Array.isArray(key)){return navigator.mozL10n.formatValue(key[0],key[1]);}
+return navigator.mozL10n.formatValue(key);});return Promise.all(resp);},requestLanguages:function(langs){navigator.mozL10n.ctx.requestLocales.apply(navigator.mozL10n.ctx,langs);},pseudo:{'fr-x-psaccent':{getName:function(){return Promise.resolve(navigator.mozL10n.qps['fr-x-psaccent'].name);},processString:function(s){return Promise.resolve(navigator.mozL10n.qps['fr-x-psaccent'].translate(s));}},'ar-x-psbidi':{getName:function(){return Promise.resolve(navigator.mozL10n.qps['ar-x-psbidi'].name);},processString:function(s){return Promise.resolve(navigator.mozL10n.qps['ar-x-psbidi'].translate(s));}}},};navigator.mozL10n.ready(function(){document.documentElement.setAttribute('langs',navigator.mozL10n.ctx.supportedLocales.join(' '));});navigator.mozL10n.once(function(){window.addEventListener('localized',function(){document.dispatchEvent(new CustomEvent('DOMRetranslated',{bubbles:false,cancelable:false}));});});})(this);

assets/webapps/costcontrol.gaiamobile.org/shared/js/lazy_loader.js

@@ -0,0 +1,11 @@
+;;;;;'use strict';var LazyLoader=(function(){function LazyLoader(){this._loaded={};this._isLoading={};}
+LazyLoader.prototype={_js:function(file,callback){var script=document.createElement('script');script.src=file;script.async=false;script.addEventListener('load',callback);document.head.appendChild(script);this._isLoading[file]=script;},_css:function(file,callback){var style=document.createElement('link');style.type='text/css';style.rel='stylesheet';style.href=file;document.head.appendChild(style);callback();},_html:function(domNode,callback){if(domNode.getAttribute('is')){this.load(['/shared/js/html_imports.js'],function(){HtmlImports.populate(callback);}.bind(this));return;}
+for(var i=0;i<domNode.childNodes.length;i++){if(domNode.childNodes[i].nodeType==document.COMMENT_NODE){domNode.innerHTML=domNode.childNodes[i].nodeValue;break;}}
+window.dispatchEvent(new CustomEvent('lazyload',{detail:domNode}));callback();},getJSON:function(file,mozSystem){return new Promise(function(resolve,reject){var xhr;if(mozSystem){xhr=new XMLHttpRequest({mozSystem:true});}else{xhr=new XMLHttpRequest();}
+xhr.open('GET',file,true);xhr.responseType='json';xhr.onerror=function(error){reject(error);};xhr.onload=function(){if(xhr.response!==null){resolve(xhr.response);}else{reject(new Error('No valid JSON object was found ('+
+xhr.status+' '+xhr.statusText+')'));}};xhr.send();});},load:function(files,callback){var deferred={};deferred.promise=new Promise(resolve=>{deferred.resolve=resolve;});if(!Array.isArray(files)){files=[files];}
+var loadsRemaining=files.length,self=this;function perFileCallback(file){if(self._isLoading[file]){delete self._isLoading[file];}
+self._loaded[file]=true;if(--loadsRemaining===0){deferred.resolve();if(callback){callback();}}}
+for(var i=0;i<files.length;i++){var file=files[i];if(this._loaded[file.id||file]){perFileCallback(file);}else if(this._isLoading[file]){this._isLoading[file].addEventListener('load',perFileCallback.bind(null,file));}else{var method,idx;if(typeof file==='string'){method=file.match(/\.([^.]+)$/)[1];idx=file;}else{method='html';idx=file.id;}
+this['_'+method](file,perFileCallback.bind(null,idx));}}
+return deferred.promise;}};return new LazyLoader();}());

assets/webapps/costcontrol.gaiamobile.org/shared/js/notification_helper.js

@@ -0,0 +1,8 @@
+;(function(window){'use strict';window.NotificationHelper={getIconURI:function nh_getIconURI(app,entryPoint){var icons=app.manifest.icons;if(entryPoint){icons=app.manifest.entry_points[entryPoint].icons;}
+if(!icons){return null;}
+var sizes=Object.keys(icons).map(function parse(str){return parseInt(str,10);});sizes.sort(function(x,y){return y-x;});var HVGA=document.documentElement.clientWidth<480;var index=sizes[HVGA?sizes.length-1:0];return app.installOrigin+icons[index];},send:function nh_send(titleL10n,options){return Promise.all([titleL10n,options.bodyL10n].map(getL10n)).then(([title,body])=>{if(body){options.body=body;}
+options.lang=document.documentElement.getAttribute('lang');var notification=new window.Notification(title,options);if(options.closeOnClick!==false){notification.addEventListener('click',function nh_click(){notification.removeEventListener('click',nh_click);notification.close();});}
+return notification;});},};function getL10n(l10nAttrs){if(!l10nAttrs){return;}
+if(typeof l10nAttrs==='string'){return document.l10n.formatValue(l10nAttrs);}
+if(typeof l10nAttrs.raw==="string"){return l10nAttrs.raw;}
+return document.l10n.formatValue(l10nAttrs.id,l10nAttrs.args);}})(this);

assets/webapps/costcontrol.gaiamobile.org/shared/js/settings_listener.js

@@ -0,0 +1,4 @@
+;;;;'use strict';var SettingsListener={_lock:null,_observers:[],getSettingsLock:function sl_getSettingsLock(){if(this._lock&&!this._lock.closed){return this._lock;}
+var settings=window.navigator.mozSettings;return(this._lock=settings.createLock());},observe:function sl_observe(name,defaultValue,callback){var settings=window.navigator.mozSettings;if(!settings){window.setTimeout(function(){callback(defaultValue);});return;}
+var req;try{req=this.getSettingsLock().get(name);}catch(e){console.warn('Stale lock in settings_listener.js.','See https://bugzilla.mozilla.org/show_bug.cgi?id=793239');this._lock=null;req=this.getSettingsLock().get(name);}
+req.addEventListener('success',(function onsuccess(){callback(typeof(req.result[name])!='undefined'?req.result[name]:defaultValue);}));var settingChanged=function settingChanged(evt){callback(evt.settingValue);};settings.addObserver(name,settingChanged);this._observers.push({name:name,callback:callback,observer:settingChanged});},unobserve:function sl_unobserve(name,callback){var settings=window.navigator.mozSettings;var that=this;this._observers.forEach(function(value,index){if(value.name===name&&value.callback===callback){settings.removeObserver(name,value.observer);that._observers.splice(index,1);}});}};

assets/webapps/costcontrol.gaiamobile.org/shared/js/url_helper.js

@@ -0,0 +1,6 @@
+;'use strict';var rscheme=/^(?:[a-z\u00a1-\uffff0-9-+]+)(?::(?:\/\/)?)/i;var UrlHelper={a:null,getUrlFromInput:function urlHelper_getUrlFromInput(input){this.a=this.a||document.createElement('a');this.a.href=input;return this.a.href;},_getScheme:function(input){return(rscheme.exec(input)||[])[0];},hasScheme:function(input){return!!this._getScheme(input);},isURL:function urlHelper_isURL(input){return!UrlHelper.isNotURL(input);},isNotURL:function urlHelper_isNotURL(input){var case1Reg=/^(\?)|(\?.+\s)/;var case2Reg=/[\?\.\s\:]/;var case3Reg=/^(data|view-source)\:/;var str=input.trim();if(case1Reg.test(str)||!case2Reg.test(str)||this._getScheme(str)===str){return true;}
+if(case3Reg.test(str)){return false;}
+if(!this.hasScheme(str)){str='http://'+str;}
+if(!this.urlValidate){this.urlValidate=document.createElement('input');this.urlValidate.setAttribute('type','url');}
+this.urlValidate.setAttribute('value',str);return!this.urlValidate.validity.valid;},resolveUrl:function urlHelper_resolveURL(url,baseUrl){if(!url){return null;}
+try{return new URL(url,baseUrl).href;}catch(e){return null;}},getHostname:function urlHelper_getHostname(url){try{return new URL(url).hostname;}catch(e){return null;}}};

assets/webapps/costcontrol.gaiamobile.org/shared/style/buttons.css

@@ -0,0 +1,428 @@
+/* ----------------------------------
+ * Buttons
+ * ---------------------------------- */
+
+.button::-moz-focus-inner,
+.bb-button::-moz-focus-inner,
+button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+button,
+.bb-button,
+.button {
+  font-family: sans-serif;
+  font-style: italic;
+  width: 100%;
+  height: 4rem;
+  margin: 0 0 1rem;
+  padding: 0 1.2rem;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #d8d8d8;
+  border: none;
+  border-radius: 2rem;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 4rem;
+  color: #333;
+  text-align: center;
+  text-decoration: none;
+  outline: none;
+}
+
+/* Recommend */
+button.recommend,
+.bb-button.recommend {
+  background-color: #00caf2;
+  color: #fff;
+}
+
+/* Danger */
+button.danger,
+.danger.bb-button {
+  background-color: #e51e1e;
+  color: #fff;
+}
+
+/* Pressed */
+button:active,
+.bb-button:active,
+.button:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+/* Icons */
+button[data-icon],
+.bb-button[data-icon],
+.button[data-icon] {
+  position: relative;
+}
+
+button[data-icon]:before,
+.bb-button[data-icon]:before,
+.button[data-icon]:before {
+  position: absolute;
+  top: 50%;
+  margin-top: -1.5rem;
+  offset-inline-end: 1.5rem;
+  line-height: 3rem;
+}
+
+button[data-icon]:active:before,
+.bb-button[data-icon]:active:before,
+.button[data-icon]:active:before {
+  color: #fff;
+}
+
+/* Pressed with dark skin */
+.skin-dark button:active,
+.skin-dark .bb-button:active,
+.skin-dark .button:active {
+  background-color: #00aacc;
+}
+
+/* Disabled */
+button[disabled],
+.bb-button[aria-disabled="true"],
+.button[aria-disabled="true"] {
+  background-color: rgba(0,0,0,0.05);
+  color: #c7c7c7;
+  pointer-events: none;
+}
+
+button[disabled].recommend,
+.bb-button[aria-disabled="true"].recommend,
+.button[aria-disabled="true"].recommend {
+  background-color: #97cbd5;
+  color: rgba(255,255,255,0.5);
+}
+
+button[disabled].danger,
+.bb-button[aria-disabled="true"].danger,
+.button[aria-disabled="true"].danger {
+  background-color: #eb7474;
+  color: rgba(255,255,255,0.5);
+}
+
+/* Disabled with dark background */
+.skin-dark button[disabled],
+.skin-dark .button[aria-disabled="true"],
+.skin-dark .bb-button[aria-disabled="true"] {
+  background-color: #565656;
+  color: rgba(255,255,255,0.4);
+}
+
+.skin-dark button[disabled].recommend,
+.skin-dark .button[aria-disabled="true"].recommend,
+.skin-dark .bb-button[aria-disabled="true"].recommend {
+  background-color: #006579;
+}
+
+.skin-dark button[disabled].danger,
+.skin-dark .button[aria-disabled="true"].danger,
+.skin-dark .bb-button[aria-disabled="true"].danger {
+  background-color: #730f0f;
+}
+
+button[disabled]::-moz-selection,
+.button[aria-disabled="true"]::-moz-selection,
+.bb-button[aria-disabled="true"]::-moz-selection {
+  -moz-user-select: none;
+}
+
+/* ----------------------------------
+ * Buttons inside lists
+ * ---------------------------------- */
+
+li button,
+li .bb-button,
+li .button {
+  position: relative;
+  border: 0.1rem solid #c7c7c7;
+  background: rgba(0,0,0,0.05);
+  margin: 0 0 1rem;
+  overflow: hidden;
+  border-radius: 0;
+  display: flex;
+  height: auto;
+  min-height: 4rem;
+  text-overflow: initial;
+  white-space: normal;
+  line-height: 2rem;
+  padding: 1rem 1.2rem;
+}
+html[dir="ltr"] li button,
+html[dir="ltr"] li .bb-button,
+html[dir="ltr"] li .button {
+  text-align: left;
+}
+html[dir="rtl"] li button,
+html[dir="rtl"] li .bb-button,
+html[dir="rtl"] li .button {
+  text-align: right;
+}
+
+/* Press */
+li .bb-button:active:after,
+li .button:active:after,
+li button:active:after {
+  opacity: 0;
+}
+
+/* Disabled */
+li button:disabled,
+li .bb-button[aria-disabled="true"],
+li .button[aria-disabled="true"] {
+  opacity: 0.5;
+}
+
+/* Icons */
+li button.icon,
+li .bb-button.icon,
+li .button.icon {
+  padding-inline-end: 4rem;
+}
+
+li button.icon:before,
+li .bb-button.icon:before,
+li .button.icon:before {
+  content: "";
+  width: 3rem;
+  height: 3rem;
+  position: absolute;
+  top: 50%;
+  offset-inline-end: 0.5rem;
+  margin-top: -1.5rem;
+  background: transparent no-repeat center center / 100% auto;
+  pointer-events: none;
+}
+
+li button[data-icon]:before,
+li .bb-button[data-icon]:before,
+li .button[data-icon]:before {
+  offset-inline-end: 1rem;
+}
+
+li button.icon-view:active,
+li .bb-button.icon-view:active,
+li .button.icon-view:active {
+  background-color: #b2f2ff;
+}
+
+li button[data-icon="expand"]:before,
+li .bb-button[data-icon="expand"]:before,
+li .button[data-icon="expand"]:before {
+  color: #00aac5;
+  top: unset;
+  bottom: 0;
+}
+
+li button[data-icon="expand"][disabled]:before,
+li .bb-button[data-icon="expand"][aria-disabled="true"]:before,
+li .button[data-icon="expand"][aria-disabled="true"]:before {
+  color: #A9A9A9;
+}
+
+li button[data-icon="forward"]:before,
+li .bb-button[data-icon="forward"]:before,
+li .button[data-icon="forward"]:before {
+  color: #686f72;
+}
+
+/* Getting more space for text, as icon is shorter */
+li button.icon-dialog,
+li .bb-button.icon-dialog,
+li .button.icon-dialog {
+  padding-inline-end: 3rem;
+}
+
+li button.icon-dialog:before,
+li .bb-button.icon-dialog:before,
+li .button.icon-dialog:before {
+  width: 0;
+  height: 0;
+  top: auto;
+  offset-inline-end: 0.8rem;
+  bottom: 0.5rem;
+  border-top: 0.7rem solid transparent;
+  border-bottom: 0.7rem solid transparent;
+  border-inline-start: 0.7rem solid #00aac5;
+  z-index: 1;
+}
+html[dir="ltr"] li button.icon-dialog:before,
+html[dir="ltr"] li .bb-button.icon-dialog:before,
+html[dir="ltr"] li .button.icon-dialog:before {
+  transform: rotate(45deg);
+}
+html[dir="rtl"] li button.icon-dialog:before,
+html[dir="rtl"] li .bb-button.icon-dialog:before,
+html[dir="rtl"] li .button.icon-dialog:before {
+  transform: rotate(-45deg);
+}
+
+li button.icon-dialog:disabled:before,
+li .bb-button[aria-disabled="true"].icon-dialog:before,
+li .button[aria-disabled="true"].icon-dialog:before {
+  border-inline-start: 0.7rem solid #a9a9a9;
+}
+
+/* ----------------------------------
+ * Theme: Dark
+ * ---------------------------------- */
+
+.skin-dark li button,
+.skin-dark li .bb-button,
+.skin-dark li .button {
+  background-color: #454545;
+  border: none;
+  color: #fff;
+  font-weight: normal;
+}
+
+.skin-dark li button:active,
+.skin-dark li .button:active,
+.skin-dark li .bb-button:active {
+  background-color: #00aacc;
+}
+
+.skin-dark li button.icon-view:active,
+.skin-dark li .button.icon-view:active,
+.skin-dark li .bb-button.icon-view:active {
+  background-color: #00aacc;
+}
+
+.skin-dark li button.icon-dialog:active:before,
+.skin-dark li .bb-button.icon-dialog:active:before,
+.skin-dark li .button.icon-dialog:active:before {
+  border-inline-start: 0.7rem solid #b2f2ff;
+}
+
+.skin-dark li button:disabled,
+.skin-dark li .bb-button[aria-disabled="true"],
+.skin-dark li .button[aria-disabled="true"] {
+  background-color: #454545;
+  opacity: 0.5;
+}
+
+/* Inputs inside of .button */
+.button input,
+body[role="application"] .bb-button input,
+body[role="application"] .button input {
+  border: 0;
+  background: none;
+}
+
+/* select */
+select {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: sans-serif;
+  font-style: italic;
+  font-size: 1.6rem;
+  color: #333;
+  margin: 0 0 1rem;
+  padding: 0;
+  padding-inline-start: 1.1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 4rem;
+  border: 0.1rem solid #c7c7c7;
+  background: rgba(0,0,0,0.05);
+}
+
+.skin-dark select {
+  background-color: rgba(87, 87, 87, 0.8);
+  border: none;
+  color: #fff;
+}
+
+/* remove dotted outline */
+select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #333;
+}
+
+.skin-dark select:-moz-focusring {
+  text-shadow: 0 0 0 #fff;
+}
+
+/* Hides dropdown arrow until bug #649849 is fixed */
+.bb-button.icon select,
+.button.icon select,
+.bb-button[data-icon] select,
+.button[data-icon] select {
+  position: absolute;
+  top: -0.6rem;
+  offset-inline-start: 0;
+  width: calc(100% + 3rem);
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  padding-inline-end: 5rem;
+  text-indent: 0;
+  font-weight: 400;
+  font-size: 1.7rem;
+  color: rgba(0,0,0,0);
+  border: none;
+  background: none;
+}
+/**
+ * The select element uses the text color to determine the color of the outline.
+ * We put a text shadow with needed offset and no blur, so that replaces the text.
+ */
+html[dir="ltr"] .bb-button.icon select,
+html[dir="ltr"] .button.icon select,
+html[dir="ltr"] .bb-button[data-icon] select,
+html[dir="ltr"] .button[data-icon] select,
+html[dir="ltr"] .bb-button.icon-dialog select,
+html[dir="ltr"] .button.icon-dialog select {
+  text-shadow: 1rem 0.5rem 0 #333;
+}
+html[dir="rtl"] .bb-button.icon select,
+html[dir="rtl"] .button.icon select,
+html[dir="rtl"] .bb-button[data-icon] select,
+html[dir="rtl"] .button[data-icon] select,
+html[dir="rtl"] .bb-button.icon-dialog select,
+html[dir="rtl"] .button.icon-dialog select {
+  text-shadow: -1rem 0.5rem 0 #333;
+}
+
+.bb-button.icon select option,
+.button.icon select option,
+.bb-button[data-icon] select option,
+.button[data-icon] select option {
+  color: #000;
+  border: 0;
+  padding: 0.6rem 1.3rem;
+  text-shadow: 0 0 0 rgba(0,0,0,0);
+}
+
+.bb-button.icon-dialog,
+.button.icon-dialog {
+  overflow: hidden;
+}
+
+html[dir="ltr"] .skin-dark .bb-button.icon select,
+html[dir="ltr"] .skin-dark .button.icon select,
+html[dir="ltr"] .skin-dark .bb-button[data-icon] select,
+html[dir="ltr"] .skin-dark .button[data-icon] select,
+html[dir="ltr"] .skin-dark .bb-button.icon-dialog select,
+html[dir="ltr"] .skin-dark .button.icon-dialog select {
+  text-shadow: 1rem 0.5rem 0 #fff;
+}
+html[dir="rtl"] .skin-dark .bb-button.icon select,
+html[dir="rtl"] .skin-dark .button.icon select,
+html[dir="rtl"] .skin-dark .bb-button[data-icon] select,
+html[dir="rtl"] .skin-dark .button[data-icon] select,
+html[dir="rtl"] .skin-dark .bb-button.icon-dialog select,
+html[dir="rtl"] .skin-dark .button.icon-dialog select {
+  text-shadow: -1rem 0.5rem 0 #fff;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/style/buttons/images/left-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 18.2995,19.66 -5.056,-5.057 5.056,-5.056 c -0.31,-0.516 -0.62,-1.032 -0.93,-1.34 l -5.672,5.673 v 1.652 l 5.675,5.676 c 0.31,-0.515 0.722,-0.928 0.93,-1.547 z"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/style/buttons/images/right-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 11.698,19.66 5.056,-5.057 -5.056,-5.056 c 0.31,-0.516 0.62,-1.032 0.93,-1.34 L 18.3,13.88 v 1.652 l -5.675,5.676 c -0.31,-0.515 -0.722,-0.928 -0.93,-1.547 z"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/style/buttons/index.html

@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Buttons</title>
+  <link rel="stylesheet" href="../buttons.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
+
+  <!--
+    - These <style> and <script> elements are only used for the example code,
+    - they are not needed for the real case.
+    -->
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+
+    label.bb-docs {
+      font-family: sans-serif;
+      font-size: 1.2rem;
+      margin-left: 1.5rem;
+    }
+
+    h2.bb-docs {
+      font-size: 1.8rem;
+      font-weight: 300;
+      color: #666;
+      margin: -0.1rem 0 0;
+      background-color: #f5f5f5;
+      padding: 0.4rem 3rem;
+      border: solid 0.1rem #e8e8e8;
+      font-family: sans-serif;
+    }
+
+    div.bb-docs {
+      padding: 1.5rem;
+    }
+
+    div.bb-docs.skin-organic {
+      background: #f4f4f4;
+    }
+
+    div.bb-docs.skin-dark {
+      background: #000;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+    body[role="application"] > [role="region"] {
+      height: 100%;
+      position: relative;
+    }
+
+    [data-icon]:before {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  </style>
+  <script>
+    window.onload = function() {
+      document.getElementById('dir').checked = false;
+    };
+  </script>
+</head>
+<body role="application">
+  <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>
+  <h2 class="bb-docs">Special buttons</h2>
+  <div class="bb-docs skin-organic">
+    <button>Default</button>
+    <button class="recommend">Recommend</button>
+    <button class="danger">Danger</button>
+  </div>
+
+  <h2 class="bb-docs">Buttons with icons</h2>
+  <div class="bb-docs skin-organic">
+    <button data-icon="forward" aria-label="forward" data-l10n-id="">Default</button>
+    <button data-icon="forward" aria-label="forward" data-l10n-id="" class="recommend">Recommend</button>
+    <button data-icon="forward" aria-label="forward" data-l10n-id="" class="danger">Danger</button>
+    <button data-icon="forward-light" aria-label="forward-light" data-l10n-id="">Default</button>
+    <button data-icon="back" aria-label="back" data-l10n-id="">Default</button>
+    <button data-icon="back-light" aria-label="back-light" data-l10n-id="">Default</button>
+  </div>
+
+  <h2 class="bb-docs">Disabled</h2>
+  <div class="bb-docs skin-organic">
+    <button disabled>Default</button>
+    <a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
+    <button disabled class="danger">Danger</button>
+  </div>
+
+  <h2 class="bb-docs">Skin dark</h2>
+  <div class="bb-docs skin-dark">
+    <button>Default</button>
+    <button class="recommend">Recommend</button>
+    <button class="danger">Danger</button>
+   </div>
+
+  <h2 class="bb-docs">Disabled</h2>
+  <div class="bb-docs skin-dark">
+    <button disabled>Default</button>
+    <a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
+    <button disabled class="danger">Danger</button>
+  </div>
+
+  <h2 class="bb-docs">List buttons</h2>
+  <div class="bb-docs skin-organic">
+    <ul>
+      <li>
+        <button>Default</button>
+      </li>
+      <li>
+        <button disabled>Disabled</button>
+      </li>
+      <li>
+        <button class="icon icon-view">
+          Icon view button
+        </button>
+      </li>
+      <li>
+        <button class="icon icon-dialog">
+          Icon dialog button
+        </button>
+      </li>
+      <li>
+        <span class="button icon icon-dialog">
+          <select>
+            <option selected>Icon dialog with options</option>
+            <option>option 1</option>
+            <option>option 2</option>
+            <option>option 3</option>
+          </select>
+        </span>
+      </li>
+      <li>
+        <button class="icon icon-dialog" disabled>
+          Icon dialog button disabled
+        </button>
+      </li>
+      <li>
+        <button data-icon="forward" aria-label="forward" data-l10n-id="">
+          Side navigation
+        </button>
+      </li>
+      <li>
+        <button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
+          Side navigation
+        </button>
+      </li>
+      <li>
+        <a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
+          Tuesday Sept. 18, 2012
+        </a>
+      </li>
+      <li>
+        <a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
+            Tuesday Sept. 18, 2012
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <h2 class="bb-docs">Skin Dark</h2>
+  <div class="bb-docs skin-dark">
+    <ul>
+      <li>
+        <button>Default</button>
+      </li>
+      <li>
+        <button disabled>Disabled</button>
+      </li>
+      <li>
+        <button class="icon icon-dialog">
+          Dark icon dialog button
+        </button>
+      </li>
+      <li>
+        <button data-icon="forward" aria-label="forward" data-l10n-id="">
+          Side navigation
+        </button>
+      </li>
+      <li>
+        <button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
+          Side navigation
+        </button>
+      </li>
+      <li>
+        <a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
+          Tuesday Sept. 18, 2012
+        </a>
+      </li>
+      <li>
+        <a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
+          Tuesday Sept. 18, 2012
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <h2 class="bb-docs">Select</h2>
+  <div class="bb-docs">
+    <select>
+      <option>option 1</option>
+      <option>option 2</option>
+    </select>
+  </div>
+
+  <h2 class="bb-docs">Fake select</h2>
+  <div class="bb-docs">
+    <ul>
+      <li>
+        <span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
+          <select>
+            <option>option 1</option>
+            <option>option 2</option>
+          </select>
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <h2 class="bb-docs">Disabled select</h2>
+  <div class="bb-docs">
+    <ul>
+      <li>
+        <span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
+          <select>
+            <option>option 1</option>
+            <option>option 2</option>
+          </select>
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <h2 class="bb-docs">Skin dark</h2>
+  <div class="bb-docs skin-dark">
+    <select>
+      <option>option 1</option>
+      <option>option 2</option>
+    </select>
+  </div>
+
+  <h2 class="bb-docs">Fake select</h2>
+  <div class="bb-docs skin-dark">
+    <ul>
+      <li>
+        <span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
+          <select>
+            <option>option 1</option>
+            <option>option 2</option>
+          </select>
+        </span>
+      </li>
+      <li>
+        <span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
+          <select>
+            <option>option 1</option>
+            <option>option 2</option>
+          </select>
+        </span>
+      </li>
+    </ul>
+  </div>
+
+</body>
+</html>

assets/webapps/costcontrol.gaiamobile.org/shared/style/confirm.css

@@ -0,0 +1,265 @@
+/* ----------------------------------
+ * Confirm
+ * ---------------------------------- */
+
+/* Main dialog setup */
+form[role="dialog"][data-type="confirm"] {
+  background: #2d2d2d;
+  overflow: hidden;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding-bottom: 7rem;
+  font-size: 0;
+  /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
+  created by white-spaces and break lines in the code betewen inline-block elements */
+  color: #fff;
+}
+html[dir="ltr"] form[role="dialog"][data-type="confirm"] { text-align: left; }
+html[dir="rtl"] form[role="dialog"][data-type="confirm"] { text-align: right; }
+
+form[role="dialog"][data-type="confirm"]:before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 0.1rem;
+  height: 100%;
+  margin-inline-start: -0.1rem;
+}
+
+form[role="dialog"][data-type="confirm"] > section {
+  font-weight: 300;
+  font-size: 2.2rem;
+  color: #FAFAFA;
+  padding: 0 1.5rem;
+  box-sizing: padding-box;
+  width: 100%;
+  display: inline-block;
+  overflow-y: scroll;
+  max-height: 100%;
+  vertical-align: middle;
+  white-space: normal;
+}
+
+form[role="dialog"][data-type="confirm"] h1 {
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 1.5em;
+  color: #fff;
+  margin: 0;
+  padding: 1rem 1.5rem 0;
+  word-wrap: break-word;
+}
+
+/* Menu & buttons setup */
+form[role="dialog"][data-type="confirm"] menu {
+  white-space: nowrap;
+  margin: 0;
+  padding: 1.5rem;
+  background: #4d4d4d;
+  display: flex;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+form[role="dialog"][data-type="confirm"] menu button::-moz-focus-inner {
+  border: none;
+  outline: none;
+  margin-top: -0.2rem; /* To fix line-height bug (697451) */
+}
+
+form[role="dialog"][data-type="confirm"] menu button {
+  font-family: sans-serif;
+  font-style: italic;
+  width: 100%;
+  height: 4rem;
+  margin: 0 0 1rem;
+  padding: 0 0.2rem;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #d8d8d8;
+  border: none;
+  border-radius: 2rem;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 4rem;
+  color: #333;
+  text-align: center;
+  text-shadow: none;
+  text-decoration: none;
+  outline: none;
+}
+
+/* Recommend */
+form[role="dialog"][data-type="confirm"] menu button.recommend {
+  background-color: #00caf2;
+  color: #fff;
+}
+
+/* Danger */
+form[role="dialog"][data-type="confirm"] menu button.danger {
+  background-color: #e51e1e;
+  color: #fff;
+}
+
+/* Pressed */
+form[role="dialog"][data-type="confirm"] menu button:active {
+  background: #00aacc;
+  color: #fff;
+}
+
+/* Disabled */
+form[role="dialog"][data-type="confirm"] > menu > button[disabled] {
+  background-color: #565656;
+  color: rgba(255,255,255,0.4);
+  pointer-events: none;
+}
+
+form[role="dialog"][data-type="confirm"] > menu > button[disabled].recommend {
+  background-color: #006579;
+}
+
+form[role="dialog"][data-type="confirm"] > menu > button[disabled].danger {
+  background-color: #730f0f;
+}
+
+button[disabled]::-moz-selection {
+  -moz-user-select: none;
+}
+
+form[role="dialog"][data-type="confirm"] menu button {
+  margin: 0;
+  margin-inline-end: 1rem;
+}
+
+form[role="dialog"][data-type="confirm"] menu button:last-child {
+  margin-inline-end: 0;
+}
+
+/*
+** Specific component code
+**
+** 1. Text in confirm dialog should not be selectable.
+ */
+form[role="dialog"][data-type="confirm"] p:nth-child(2) {
+  margin: 1rem 0 0;
+  overflow: hidden;
+}
+
+form[role="dialog"][data-type="confirm"] p {
+  word-wrap: break-word;
+  margin: 0;
+  padding: 1rem 1.5rem;
+  border-top: 0.1rem solid #686868;
+  line-height: 3rem;
+  -moz-user-select: none; /* 1 */
+}
+
+form[role="dialog"][data-type="confirm"] p > span {
+  font-size: 1.5rem;
+  display: block;
+  line-height: 1.7rem;
+  color: rgba(255,255,255,0.6);
+}
+
+form[role="dialog"][data-type="confirm"] p img {
+  margin-inline-end: 2rem;
+}
+html[dir="ltr"] form[role="dialog"][data-type="confirm"] p img { float: left; }
+html[dir="rtl"] form[role="dialog"][data-type="confirm"] p img { float: right; }
+
+form[role="dialog"][data-type="confirm"] p strong {
+  display: block;
+  margin-top: 0.2rem;
+  font-weight: 300;
+}
+
+form[role="dialog"][data-type="confirm"] p small {
+  font-size: 1.4rem;
+  font-weight: normal;
+  color: #cbcbcb;
+  display: block;
+}
+
+form[role="dialog"][data-type="confirm"] dl {
+  border-top: 0.1rem solid #686868;
+  margin: 1rem 0 0;
+  overflow: hidden;
+  padding-top: 1rem;
+  font-size: 1.6rem;
+  line-height: 2.2rem;
+}
+
+form[role="dialog"][data-type="confirm"] dl > dt {
+  clear: both;
+  width: 7rem;
+  padding-inline-start: 1.5rem;
+  font-weight: 500;
+  text-align: left;
+}
+html[dir="ltr"] form[role="dialog"][data-type="confirm"] dl > dt { float: left; }
+html[dir="rtl"] form[role="dialog"][data-type="confirm"] dl > dt { float: right; text-align: right; }
+
+form[role="dialog"][data-type="confirm"] dl > dd {
+  padding-inline-end: 1.5rem;
+  font-weight: 300;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  overflow: hidden;
+}
+
+form[role="dialog"][data-type="confirm"] dl > dd > div {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+form[role="dialog"][data-type="confirm"] figure {
+  margin: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+
+form[role="dialog"][data-type="confirm"] figure img {
+  padding-inline-end: 1.5rem;
+  flex-shrink: 0;
+}
+
+form[role="dialog"][data-type="confirm"] figure figcaption {
+  font-size: 2.1rem;
+  font-weight: 300;
+}
+
+form[role="dialog"][data-type="confirm"] ul {
+  margin: 0;
+  padding: 2rem 1.5rem;
+  border-top: 0.1rem solid #686868;
+  list-style: none;
+  font-size: 1.6rem;
+  font-weight: normal;
+}
+
+form[role="dialog"][data-type="confirm"] ul li {
+  word-wrap: break-word;
+  line-height: 2rem;
+  padding-bottom: 1.5rem;
+}
+
+form[role="dialog"][data-type="confirm"] ul li:last-child {
+  padding-bottom: 0;
+}
+
+form[role="dialog"][data-type="confirm"] ul li ul {
+  border: none;
+  margin: 0;
+  padding: 0;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/style/confirm/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+
+  <title>Confirm</title>
+  <meta name="description" content="Prompts user to take action">
+
+  <link rel="stylesheet" href="../confirm.css">
+
+  <!--
+    - These <style> and <script> elements are only used for the example code;
+    - they are not required for the real use case.
+    -->
+  <style type="text/css">
+    html, body {
+      font-family: sans-serif;
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+    body {
+      background: none;
+    }
+    #dir {
+      position: relative;
+      z-index: 999;
+      display: block;
+      direction: ltr;
+      background-color: white;
+    }
+    #dir input {
+      vertical-align: middle;
+    }
+  </style>
+  <script>
+    window.onload = function(){
+      var input = document.querySelector('#dir input');
+      input.checked = false;
+      input.onchange = function() {
+        document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
+      };
+    };
+  </script>
+</head>
+
+<body role="application">
+  <label id="dir">
+    <input type="checkbox"> RTL mode
+  </label>
+
+  <form role="dialog" data-type="confirm">
+    <section>
+      <h1>Confirmation</h1>
+      <p>Are you sure you want to delete this contact?</p>
+    </section>
+    <menu>
+      <button>Cancel</button>
+      <button class="danger">Delete</button>
+    </menu>
+  </form>
+
+</body>
+</html>

assets/webapps/costcontrol.gaiamobile.org/shared/style/confirm/long_content.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+
+  <title>Confirm</title>
+  <meta name="description" content="Prompts user to take action">
+
+  <link rel="stylesheet" href="../confirm.css">
+
+  <!--
+    - These <style> and <script> elements are only used for the example code;
+    - they are not required for the real use case.
+    -->
+  <style type="text/css">
+    html, body {
+      font-family: sans-serif;
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+    body {
+      background: none;
+    }
+    #dir {
+      position: relative;
+      z-index: 999;
+      display: block;
+      direction: ltr;
+      background-color: white;
+    }
+    #dir input {
+      vertical-align: middle;
+    }
+  </style>
+  <script>
+    window.onload = function(){
+      var input = document.querySelector('#dir input');
+      input.checked = false;
+      input.onchange = function() {
+        document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
+      };
+    };
+  </script>
+</head>
+
+<body role="application">
+  <label id="dir">
+    <input type="checkbox"> RTL mode
+  </label>
+
+  <form role="dialog" data-type="confirm">
+    <section>
+      <h1>Confirmation</h1>
+      <p dir="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+    </section>
+    <menu>
+      <button>Cancel</button>
+      <button class="danger">Delete</button>
+    </menu>
+  </form>
+
+</body>
+</html>

assets/webapps/costcontrol.gaiamobile.org/shared/style/confirm/no_title.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+
+  <title>Confirm, w/o title</title>
+  <meta name="description" content="Prompts user to take action">
+
+  <link rel="stylesheet" href="../confirm.css">
+
+  <!--
+    - These <style> and <script> elements are only used for the example code;
+    - they are not required for the real use case.
+    -->
+  <style type="text/css">
+    html, body {
+      font-family: sans-serif;
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+    body {
+      background: none;
+    }
+    #dir {
+      position: relative;
+      z-index: 999;
+      display: block;
+      direction: ltr;
+      background-color: white;
+    }
+    #dir input {
+      vertical-align: middle;
+    }
+  </style>
+  <script>
+    window.onload = function(){
+      var input = document.querySelector('#dir input');
+      input.checked = false;
+      input.onchange = function() {
+        document.documentElement.dir = this.checked ? 'rtl' : 'ltr';
+      };
+    };
+  </script>
+</head>
+
+<body role="application">
+  <label id="dir">
+    <input type="checkbox"> RTL mode
+  </label>
+
+  <form role="dialog" data-type="confirm">
+    <section>
+      <p dir="auto">Are you sure you want to delete this contact?</p>
+    </section>
+    <menu>
+      <button>Cancel</button>
+      <button class="danger">Delete</button>
+    </menu>
+  </form>
+
+</body>
+</html>

assets/webapps/costcontrol.gaiamobile.org/shared/style/headers.css

@@ -0,0 +1,378 @@
+/* -------------------------------------------------------------------
+  HEADERS: layout
+  Form factor or Skin dependent styles should NOT be defined here.
+------------------------------------------------------------------- */
+
+section[role="region"] > header:first-child {
+  position: relative;
+  display: block;
+  z-index: 10;
+  padding: 0;
+  height: 5rem;
+  border: none;
+}
+
+section[role="region"] > header:first-child h1 {
+  font-size: 2.3rem;
+  line-height: 5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  padding: 0 1rem;
+  height: 100%;
+  font-weight: 300;
+  font-style: italic;
+  text-align: center;
+}
+
+section[role="region"] > header:first-child h1 em {
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1em;
+  font-style: normal;
+}
+
+section[role="region"] > header:first-child menu {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+html[dir="ltr"] section[role="region"] > header:first-child menu {
+  float: right;
+}
+html[dir="rtl"] section[role="region"] > header:first-child menu {
+  float: left;
+}
+
+/* ----------------------------------
+  Buttons
+---------------------------------- */
+
+section[role="region"] > header:first-child a,
+section[role="region"] > header:first-child button {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  min-width: 5rem;
+  width: auto;
+  height: 5rem;
+  border: none;
+  background: none;
+  padding: 0 1rem;
+  margin: 0;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 5rem;
+  border-radius: 0;
+  text-decoration: none;
+  text-align: center;
+  text-shadow: none;
+  font-style: italic;
+}
+html[dir="ltr"] section[role="region"] > header:first-child a,
+html[dir="ltr"] section[role="region"] > header:first-child button {
+  float: left;
+}
+html[dir="rtl"] section[role="region"] > header:first-child a,
+html[dir="rtl"] section[role="region"] > header:first-child button {
+  float: right;
+}
+
+/* Pressed state */
+section[role="region"] > header:first-child a:focus {
+  outline: none;
+}
+
+section[role="region"] > header:first-child button::-moz-focus-inner {
+  outline: none;
+  border: none;
+  margin-top: -0.2rem; /* To fix line-height bug (697451) */
+  padding: 0;
+}
+
+/* Disabled state */
+section[role="region"] > header:first-child a[aria-disabled="true"],
+section[role="region"] > header:first-child button[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/* ----------------------------------
+  Icons
+---------------------------------- */
+
+section[role="region"] > header:first-child .icon {
+  display: block;
+  width: 3rem;
+  height: 5rem;
+  background: transparent no-repeat center / 3rem auto;
+  font-size: 0;
+}
+
+/* ----------------------------------
+  Subheader
+---------------------------------- */
+
+section[role="region"] > header {
+  z-index: 0;
+  height: auto;
+}
+
+section[role="region"] header h2 {
+  margin: 0;
+  padding: 0.8rem 3rem;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.8rem;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: default
+  Default values in case we are not overriding them using
+  class="skin-*"
+----------------------------------------------------------------- */
+
+section[role="region"] > header:first-child {
+  color: #fff;
+  background-color: #f97c17;
+}
+
+section[role="region"] > header:first-child h1 {
+  color: #fff;
+}
+
+section[role="region"] > header:first-child a,
+section[role="region"] > header:first-child button {
+  color: rgba(0,0,0,0.6);
+}
+
+section[role="region"] > header:first-child a:active,
+section[role="region"] > header:first-child button:active,
+section[role="region"] > header:first-child a:hover,
+section[role="region"] > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.07);
+}
+
+section[role="region"] > header:first-child a:focus,
+section[role="region"] > header:first-child button:focus {
+  background-color: transparent;
+}
+
+/* ----------------------------------
+  Icons
+---------------------------------- */
+
+section[role="region"] > header:first-child .icon-add {
+  background-image: url(headers/images/icons/add.png);
+}
+
+section[role="region"] > header:first-child .icon-compose {
+  background-image: url(headers/images/icons/compose.png);
+}
+
+html[dir="ltr"] section[role="region"] > header:first-child .icon-edit {
+  background-image: url(headers/images/icons/edit.png);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-edit {
+  background-image: url(headers/images/icons/edit-rtl.png);
+}
+
+html[dir="ltr"] section[role="region"] > header:first-child .icon-send {
+  background-image: url(headers/images/icons/send.png);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-send {
+  background-image: url(headers/images/icons/send_rtl.png);
+}
+
+section[role="region"] > header:first-child .icon-close {
+  background-image: url(headers/images/icons/close.png);
+}
+
+html[dir="ltr"] section[role="region"] > header:first-child .icon-back {
+  background-image: url(headers/images/icons/left.png);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-back {
+  background-image: url(headers/images/icons/right.png);
+}
+
+section[role="region"] > header:first-child .icon-menu {
+  background-image: url(headers/images/icons/menu.png);
+}
+
+section[role="region"] > header:first-child .icon-user {
+  background-image: url(headers/images/icons/user.png);
+}
+
+section[role="region"] > header:first-child .icon-up {
+  background-image: url(headers/images/icons/up.png);
+}
+
+section[role="region"] > header:first-child .icon-down {
+  background-image: url(headers/images/icons/down.png);
+}
+
+section[role="region"] > header:first-child .icon-options {
+  background-image: url(headers/images/icons/options.png);
+}
+
+/* ----------------------------------
+  Subheader
+---------------------------------- */
+
+section[role="region"] header h2 {
+  color: #424242;
+  border-bottom: solid 0.1rem #e6e6e6;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: comms
+  .skin-comms will override default values
+----------------------------------------------------------------- */
+
+.skin-comms section[role="region"] > header:first-child,
+section[role="region"].skin-comms > header:first-child {
+  background-color: #00adad;
+}
+
+.skin-comms section[role="region"] > header:first-child a,
+.skin-comms section[role="region"] > header:first-child button,
+section[role="region"].skin-comms > header:first-child a,
+section[role="region"].skin-comms > header:first-child button {
+  color: rgba(0,0,0,0.5);
+}
+
+.skin-comms section[role="region"] > header:first-child a:active,
+.skin-comms section[role="region"] > header:first-child button:active,
+.skin-comms section[role="region"] > header:first-child a:hover,
+.skin-comms section[role="region"] > header:first-child button:hover,
+section[role="region"].skin-comms > header:first-child a:active,
+section[role="region"].skin-comms > header:first-child button:active,
+section[role="region"].skin-comms > header:first-child a:hover,
+section[role="region"].skin-comms > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.skin-comms section[role="region"] > header:first-child a:focus,
+.skin-comms section[role="region"] > header:first-child button:focus,
+section[role="region"].skin-comms > header:first-child a:focus,
+section[role="region"].skin-comms > header:first-child button:focus {
+  background-color: transparent;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: dark
+  .skin-dark will override default values
+----------------------------------------------------------------- */
+
+section[role="region"].skin-dark > header:first-child,
+.skin-dark > section[role="region"] > header:first-child {
+  background-color: #242d33;
+}
+
+.skin-dark section[role="region"] > header:first-child a,
+.skin-dark section[role="region"] > header:first-child button,
+section[role="region"].skin-dark > header:first-child a,
+section[role="region"].skin-dark > header:first-child button {
+  color: #00aac5;
+}
+
+.skin-dark section[role="region"] > header:first-child a:active,
+.skin-dark section[role="region"] > header:first-child button:active,
+.skin-dark section[role="region"] > header:first-child a:hover,
+.skin-dark section[role="region"] > header:first-child button:hover,
+section[role="region"].skin-dark > header:first-child a:active,
+section[role="region"].skin-dark > header:first-child button:active,
+section[role="region"].skin-dark > header:first-child a:hover,
+section[role="region"].skin-dark > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.4);
+}
+
+.skin-dark section[role="region"] > header:first-child a:focus,
+.skin-dark section[role="region"] > header:first-child button:focus,
+section[role="region"].skin-dark > header:first-child a:focus,
+section[role="region"].skin-dark > header:first-child button:focus {
+  background-color: transparent;
+}
+
+section[role="region"].skin-dark header h2,
+.skin-dark > section[role="region"] header h2 {
+  background-color: #2c353b;
+  color: #fff;
+  border: none;
+}
+
+/* -----------------------------------------------------------------
+  HEADER SKIN: organic
+  .skin-organic will override default values
+----------------------------------------------------------------- */
+
+section[role="region"].skin-organic > header:first-child,
+.skin-organic section[role="region"] > header:first-child {
+  color: #868692;
+  background-color: #f4f4f4;
+}
+
+section[role="region"].skin-organic > header:first-child h1,
+.skin-organic section[role="region"] > header:first-child h1 {
+  color: #868692;
+}
+
+section[role="region"].skin-organic > header:first-child a,
+section[role="region"].skin-organic > header:first-child button,
+.skin-organic section[role="region"] > header:first-child a,
+.skin-organic section[role="region"] > header:first-child button {
+  color: #00aac5;
+}
+
+section[role="region"].skin-organic > header:first-child a:focus,
+section[role="region"].skin-organic > header:first-child button:focus,
+.skin-organic section[role="region"] > header:first-child a:focus,
+.skin-organic section[role="region"] > header:first-child button:focus {
+  background-color: transparent;
+}
+
+/* ----------------------------------
+  Icons
+---------------------------------- */
+
+html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-back,
+html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-back {
+  background-image: url(headers/images/icons/organic/left.png);
+}
+html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-back,
+html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-back {
+  background-image: url(headers/images/icons/organic/right.png);
+}
+
+section[role="region"].skin-organic > header:first-child .icon-close,
+.skin-organic section[role="region"] > header:first-child .icon-close {
+  background-image: url(headers/images/icons/organic/close.png);
+}
+
+section[role="region"].skin-organic > header:first-child .icon-add,
+.skin-organic section[role="region"] > header:first-child .icon-add {
+  background-image: url(headers/images/icons/organic/add.png);
+}
+
+html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-edit,
+html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-edit {
+  background-image: url(headers/images/icons/organic/edit.png);
+}
+html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-edit,
+html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-edit {
+  background-image: url(headers/images/icons/organic/edit-rtl.png);
+}
+
+/* ----------------------------------
+  Subheader
+---------------------------------- */
+
+section[role="region"].skin-organic header h2,
+.skin-organic section[role="region"] header h2 {
+  background-color: #e7e7e7;
+  color: #4d4d4d;
+  border: none;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/style/headers/index.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Headers</title>
+  <meta name="description" content="Providing top-level navigation and inputs for the active view">
+  <!--
+    - This <style> and <link> is only used for the example preview,
+    - it isn't needed for the real use case.
+    -->
+  <link rel="stylesheet" href="../headers.css">
+  <style type="text/css">
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+    body {
+      background: none;
+    }
+
+    h2.bb-docs {
+      font-size: 1.8rem;
+      font-weight: 300;
+      color: #666;
+      margin: -0.1rem 0 0;
+      background-color: #f5f5f5;
+      padding: 0.4rem;
+      padding-inline-start: 3rem;
+      border: solid 0.1rem #e8e8e8;
+      margin: 3rem 0 1rem;
+    }
+
+    section[role="region"] {
+      margin-bottom: 1.5rem;
+      position: relative;
+    }
+  </style>
+  <script>
+    window.onload = function() {
+      document.getElementById('dir').checked = false;
+    };
+  </script>
+</head>
+<body role="application">
+  <p dir="ltr">
+    <label>
+      <input type="checkbox" id="dir"
+        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
+      RTL mode
+    </label>
+  </p>
+
+  <section role="region">
+    <header>
+      <a href="#"><span class="icon icon-close">close</span></a>
+      <menu type="toolbar">
+        <button>done</button>
+      </menu>
+      <h1>Email</h1>
+    </header>
+  </section>
+
+  <section role="region">
+    <header>
+      <a href="#"></a>
+      <menu type="toolbar">
+        <button><span class="icon icon-send">send</span></button>
+      </menu>
+      <h1>Send message to X</h1>
+    </header>
+  </section>
+
+  <section role="region">
+    <header>
+      <a href="#"><span class="icon icon-back">back</span></a>
+      <menu type="toolbar">
+        <button><span class="icon icon-edit">edit</span></button>
+        <button><span class="icon icon-add">add</span></button>
+      </menu>
+      <h1>Email</h1>
+    </header>
+    <header>
+      <h2>Subheader text</h2>
+    </header>
+  </section>
+
+  <section role="region">
+    <header>
+      <button><span class="icon icon-menu">menu</span></button>
+      <menu type="toolbar">
+        <button><span class="icon icon-edit">edit</span></button>
+        <button><span class="icon icon-add">add</span></button>
+      </menu>
+      <h1>Inbox <em>(2)</em></h1>
+    </header>
+  </section>
+
+  <h2 class="bb-docs">Skin: Dark</h2>
+  <section role="region" class="skin-dark">
+    <header>
+      <a href="#"><span class="icon icon-close">close</span></a>
+      <menu type="toolbar">
+        <button>done</button>
+      </menu>
+      <h1>Music</h1>
+    </header>
+  </section>
+
+  <section role="region" class="skin-dark">
+    <header>
+      <a href="#"><span class="icon icon-back">back</span></a>
+      <menu type="toolbar">
+        <button><span class="icon icon-edit">edit</span></button>
+        <button><span class="icon icon-add">add</span></button>
+      </menu>
+      <h1>Music</h1>
+    </header>
+    <header>
+      <h2>Subheader text</h2>
+    </header>
+  </section>
+
+  <h2 class="bb-docs">Skin: Organic</h2>
+  <section role="region" class="skin-organic">
+    <header>
+      <a href="#"><span class="icon icon-close">close</span></a>
+      <menu type="toolbar">
+        <button>done</button>
+      </menu>
+      <h1>Settings</h1>
+    </header>
+  </section>
+
+  <div class="skin-organic">
+    <section role="region">
+      <header>
+        <a href="#"><span class="icon icon-back">back</span></a>
+        <menu type="toolbar">
+          <button><span class="icon icon-edit">edit</span></button>
+          <button><span class="icon icon-add">add</span></button>
+        </menu>
+        <h1>Settings</h1>
+      </header>
+      <header>
+        <h2>Subheader text</h2>
+      </header>
+    </section>
+  </div>
+
+  <h2 class="bb-docs">Skin: Comms</h2>
+  <div class="skin-comms">
+    <section role="region">
+      <header>
+        <a href="#"><span class="icon icon-close">close</span></a>
+        <menu type="toolbar">
+          <button>done</button>
+        </menu>
+        <h1>Contacts</h1>
+      </header>
+    </section>
+
+    <section role="region">
+      <header>
+        <a href="#"><span class="icon icon-back">back</span></a>
+        <menu type="toolbar">
+          <button><span class="icon icon-edit">edit</span></button>
+          <button><span class="icon icon-add">add</span></button>
+        </menu>
+        <h1>Contacts</h1>
+      </header>
+      <header>
+        <h2>Subheader text</h2>
+      </header>
+    </section>
+  </div>
+
+</body>
+</html>

assets/webapps/costcontrol.gaiamobile.org/shared/style/input_areas.css

@@ -0,0 +1,575 @@
+/* ----------------------------------
+ * Input areas
+ * ---------------------------------- */
+
+/**
+ * BiDi notes:
+ *
+ *  - as the <input>, <textarea> and [contentEditable] elements are filled by
+ *    the user, they need a `unicode-bidi: -moz-plaintext` attribute for their
+ *    content to be displayed properly (e.g. LTR content in an RTL document,
+ *    or vice-versa);
+ *
+ *  - consequence: *-inline-start/end properties can still be used on such
+ *    elements content direction doesn't impact element's direction
+ *
+ *  - however, the one-line inputs must still be aligned along with the
+ *    *document* direction: to the left in LTR, to the right in RTL
+ *    -- no matter what the *content* direction is.
+ */
+
+html[dir="ltr"] input { text-align: left; }
+html[dir="rtl"] input { text-align: right; }
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+input[type="number"],
+textarea {
+  font-family: sans-serif;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 4rem;
+  line-height: 4rem;
+  resize: none;
+  padding: 0 1.5rem;
+  font-size: 1.6rem;
+  border: 0.1rem solid #c7c7c7;
+  border-radius: 0;
+  box-shadow: none; /* override the box-shadow from the system (performance issue) */
+  color: #333;
+  background: #fff;
+  margin: 0 0 1rem;
+  unicode-bidi: -moz-plaintext;
+}
+
+label:active {
+  background-color: transparent;
+}
+
+textarea {
+  height: 10rem;
+  max-height: 10rem;
+  line-height: 2rem;
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #a9a9a9;
+  opacity: 1;
+  font-style: italic;
+  font-weight: 400;
+}
+
+input[disabled],
+textarea[disabled] {
+  opacity: 0.5;
+}
+
+.skin-dark input[type="text"],
+.skin-dark input[type="password"],
+.skin-dark input[type="email"],
+.skin-dark input[type="tel"],
+.skin-dark input[type="search"],
+.skin-dark input[type="url"],
+.skin-dark input[type="number"],
+.skin-dark textarea  {
+  color: #fff;
+  background-color: transparent;
+  border-color: #454545;
+}
+
+form p {
+  position: relative;
+  margin: 0;
+}
+
+form p input + button[type="reset"],
+form p textarea + button[type="reset"] {
+  position: absolute;
+  top: 0;
+  width: 4rem;
+  height: 4rem;
+  padding: 0;
+  border: none;
+  font-size: 0;
+  opacity: 0;
+  pointer-events: none;
+  background: url(input_areas/images/clear.png) no-repeat 50% 50% / 2.4rem auto;
+}
+html[dir="ltr"] form p input + button[type="reset"],
+html[dir="ltr"] form p textarea + button[type="reset"] {
+  right: -0.3rem;
+}
+html[dir="rtl"] form p input + button[type="reset"],
+html[dir="rtl"] form p textarea + button[type="reset"] {
+  left: -0.3rem;
+}
+
+.skin-dark p input + button[type="reset"],
+.skin-dark p textarea + button[type="reset"] {
+  background-image: url(input_areas/images/clear_dark.png);
+}
+
+/* To avoid colission with BB butons */
+li input + button[type="reset"]:after,
+li textarea + button[type="reset"]:after {
+  background: none;
+}
+
+textarea {
+  padding: 1.2rem;
+}
+
+html[dir="ltr"] form p input:focus { padding-right: 3rem; }
+html[dir="rtl"] form p input:focus { padding-left: 3rem; }
+
+form p input:focus + button[type="reset"],
+form p textarea:focus + button[type="reset"] {
+  opacity: 1;
+  pointer-events: all;
+}
+
+/* Fieldset */
+fieldset {
+  position: relative;
+  overflow: hidden;
+  margin: 1.5rem 0 0;
+  padding: 0;
+  font-size: 2rem;
+  line-height: 1em;
+  background: none;
+  border: 0;
+}
+
+fieldset legend,
+input[type="date"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"] {
+  border: 0.1rem solid #c7c7c7;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: sans-serif;
+  font-style: italic;
+  font-size: 1.6rem;
+  margin: 0 0 1.5rem;
+  padding: 0 1.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 4rem;
+  color: #333;
+  border-radius: 0;
+  background-color: #fff;
+  background-repeat: no-repeat;
+}
+html[dir="ltr"] fieldset legend,
+html[dir="ltr"] input[type="date"],
+html[dir="ltr"] input[type="time"],
+html[dir="ltr"] input[type="datetime"],
+html[dir="ltr"] input[type="datetime-local"] {
+  background-image: url(input_areas/images/dialog.svg);
+  background-position: right 1rem bottom 1rem;
+}
+html[dir="rtl"] fieldset legend,
+html[dir="rtl"] input[type="date"],
+html[dir="rtl"] input[type="time"],
+html[dir="rtl"] input[type="datetime"],
+html[dir="rtl"] input[type="datetime-local"] {
+  background-image: url(input_areas/images/dialog_rtl.svg);
+  background-position: left 1rem bottom 1rem;
+}
+
+fieldset legend {
+  margin: 0 0 1rem;
+  padding: 1rem 1.5rem 0;
+  background-color: rgba(0,0,0,0.05);
+}
+
+fieldset[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.skin-dark fieldset legend,
+.skin-dark input[type="date"],
+.skin-dark input[type="time"],
+.skin-dark input[type="datetime"],
+.skin-dark input[type="datetime-local"] {
+  color: #fff;
+  background-color: transparent;
+  border-color: #454545;
+}
+
+fieldset[disabled] legend,
+input[type="date"][disabled],
+input[type="time"][disabled],
+input[type="datetime"][disabled],
+input[type="datetime-local"][disabled] {
+  background-color: transparent;
+}
+html[dir="ltr"] fieldset[disabled] legend,
+html[dir="ltr"] input[type="date"][disabled],
+html[dir="ltr"] input[type="time"][disabled],
+html[dir="ltr"] input[type="datetime"][disabled],
+html[dir="ltr"] input[type="datetime-local"][disabled] {
+  background-image: url(input_areas/images/dialog_disabled.svg);
+}
+html[dir="rtl"] fieldset[disabled] legend,
+html[dir="rtl"] input[type="date"][disabled],
+html[dir="rtl"] input[type="time"][disabled],
+html[dir="rtl"] input[type="datetime"][disabled],
+html[dir="rtl"] input[type="datetime-local"][disabled] {
+  background-image: url(input_areas/images/dialog_disabled_rtl.svg);
+}
+
+input[type="date"]:focus,
+input[type="time"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus {
+  box-shadow: none;
+  border-bottom-color: #c7c7c7;
+}
+
+.skin-dark input[type="date"]:focus,
+.skin-dark input[type="time"]:focus,
+.skin-dark input[type="datetime"]:focus,
+.skin-dark input[type="datetime-local"]:focus {
+  box-shadow: none;
+  border-bottom-color: #454545;
+}
+
+input[type="date"]:active,
+input[type="time"]:active,
+input[type="datetime"]:active,
+input[type="datetime-local"]:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+.skin-dark input[type="date"]:active,
+.skin-dark input[type="time"]:active,
+.skin-dark input[type="datetime"]:active,
+.skin-dark input[type="datetime-local"]:active {
+  background-color: #00aacc;
+  background-image: url(input_areas/images/dialog_active.svg);
+}
+
+/* fix for required inputs with wrong or empty value e.g. [type=email] */
+input:invalid,
+textarea:invalid,
+.skin-dark input:invalid,
+.skin-dark textarea:invalid {
+  color: #b90000;
+}
+
+input:focus,
+textarea:focus,
+.skin-dark input:focus,
+.skin-dark textarea:focus {
+  box-shadow: inset 0 -0.1rem 0 #00caf2;
+  border-bottom-color: #00caf2;
+}
+
+input:invalid:focus,
+textarea:invalid:focus,
+.skin-dark input:invalid:focus,
+.skin-dark textarea:invalid:focus {
+  box-shadow: inset 0 -0.1rem 0 #820000;
+  border-bottom-color: #820000;
+}
+
+input[type="range"]:focus,
+.skin-dark input[type="range"]:focus {
+  box-shadow: none;
+  border-bottom: 0;
+}
+
+/* Tidy (search/submit) */
+form[role="search"] {
+  position: relative;
+  height: 3.7rem;
+  background: #f4f4f4;
+}
+
+form[role="search"].skin-dark {
+  background: #202020;
+}
+
+form[role="search"] p {
+  padding: 0 1.5rem;
+  padding-inline-start: 3rem;
+  overflow: hidden;
+  position: relative;
+}
+
+form[role="search"] p input,
+form[role="search"] p textarea {
+  height: 3.7rem;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+}
+
+form[role="search"] p textarea {
+  padding: 1rem 0 0;
+}
+
+form[role="search"] p input::-moz-placeholder {
+  background-image: url(input_areas/images/search.svg);
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] form[role="search"] p input::-moz-placeholder {
+  background-position: right -0.5rem center;
+}
+html[dir="rtl"] form[role="search"] p input::-moz-placeholder {
+  background-position: left -0.5rem center;
+}
+
+form[role="search"].skin-dark p input::-moz-placeholder {
+  background-image: url(input_areas/images/search_dark.svg);
+}
+
+form[role="search"] p input:focus::-moz-placeholder {
+  background: none;
+}
+
+form[role="search"] p input:invalid,
+form[role="search"] p textarea:invalid,
+form[role="search"] p input:focus,
+form[role="search"] p textarea:focus {
+  border: none;
+  box-shadow: none;
+}
+
+form[role="search"].skin-dark p input,
+form[role="search"].skin-dark p textarea {
+  color: #fff;
+  background: none;
+  box-shadow: none;
+}
+
+form[role="search"] button[type="submit"] {
+  min-width: 6rem;
+  height: 3.7rem;
+  padding: 0 1.5rem;
+  border: none;
+  color: #00aac5;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 3.7rem;
+  width: auto;
+  border-radius: 0;
+  margin: 0;
+  position: relative;
+  background-image: none;
+  background-color: unset;
+  font-style: italic;
+  overflow: visible;
+}
+html[dir="ltr"] form[role="search"] button[type="submit"] { float: right; }
+html[dir="rtl"] form[role="search"] button[type="submit"] { float: left; }
+
+form[role="search"] button[type="submit"]:after {
+  content: "";
+  position: absolute;
+  offset-inline-start: -0.1rem;
+  top: 0.7rem;
+  bottom: 0.7rem;
+  width: 0.1rem;
+  background: #c7c7c7;
+}
+
+form[role="search"] button[type="submit"].icon {
+  font-size: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 3rem;
+}
+
+form[role="search"] p input + button[type="reset"]{
+  height: 3.7rem;
+  offset-inline-end: 0.5rem;
+}
+
+form[role="search"].skin-dark button[type="submit"]:after {
+  background-color: #575757;
+}
+
+form[role="search"] button[type="submit"] + p > textarea {
+  height: 3.7rem;
+  line-height: 2rem;
+}
+
+form[role="search"] button[type="submit"] + p button {
+  height: 3.7rem;
+}
+
+form[role="search"].full button[type="submit"] {
+  display: none;
+}
+
+form[role="search"] button.icon:active,
+form[role="search"] button[type="submit"]:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+
+form[role="search"].skin-dark button.icon:active,
+form[role="search"].skin-dark button[type="submit"]:active {
+  background: #00aacc;
+}
+
+form[role="search"] button[type="submit"][disabled] {
+  color: #adadad;
+  pointer-events: none;
+}
+
+form button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+/* .bb-editable - e.g email & SMS recipients */
+.bb-editable [contenteditable] {
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  max-width: calc(100% - 1.4rem);
+  overflow: hidden;
+  padding: 0 1.5rem;
+  margin: 0 0 0.6rem;
+  line-height: 2.8rem;
+  border-radius: 1.4rem;
+  text-overflow: ellipsis;
+  font-size: 1.6rem;
+  font-style: italic;
+  white-space: nowrap;
+  color: #333;
+  background: #fff;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].icon {
+  padding-right: 3.7rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon {
+  padding-left: 3.7rem;
+}
+
+.bb-editable [contenteditable="false"].invalid {
+  background-color: #fedcdc;
+  padding: 0 1.5rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable="false"].invalid { padding-left: 3.3rem; }
+html[dir="rtl"] .bb-editable [contenteditable="false"].invalid { padding-right: 3.3rem; }
+
+.bb-editable [contenteditable="false"].invalid:before {
+    content: "!";
+    position: absolute;
+    top: 0.6rem;
+    display: block;
+    width: 1.7rem;
+    height: 1.6rem;
+    padding: 0;
+    border-radius: 50%;
+    line-height: 1.6rem;
+    font-size: 1.2rem;
+    text-align: center;
+    text-indent: -0.1rem;
+    font-style: normal;
+    font-weight: 600;
+    color: #fff;
+    background-color: #b80404;
+}
+html[dir="ltr"] .bb-editable [contenteditable="false"].invalid:before { left: 0.8rem; }
+html[dir="rtl"] .bb-editable [contenteditable="false"].invalid:before { right: 0.8rem; }
+
+.bb-editable [contenteditable="false"].invalid:hover:before,
+.bb-editable [contenteditable="false"].invalid:active:before {
+  color: #b2f2ff;
+  background-color: #fff;
+}
+
+.bb-editable [contenteditable]:hover,
+.bb-editable [contenteditable]:active,
+.bb-editable [contenteditable].invalid:hover,
+.bb-editable [contenteditable].invalid:active {
+  color: #fff;
+  background-color: #b2f2ff;
+}
+
+.bb-editable [contenteditable].icon:after {
+  content: "";
+  position: absolute;
+  top: 0.7rem;
+  width: 3rem;
+  height: 3rem;
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable].icon:after {
+  right: 0;
+  background-position: -0.7rem -3.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon:after {
+  left: 0;
+  background-position: 0.7rem -3.8rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].icon:hover:after,
+html[dir="ltr"] .bb-editable [contenteditable].icon:active:after {
+  background-position: -0.7rem -0.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon:hover:after,
+html[dir="rtl"] .bb-editable [contenteditable].icon:active:after {
+  background-position: 0.7rem -0.8rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon {
+  padding-right: 3.7rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon {
+  padding-left: 3.7rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:after {
+  background-position: -0.7rem -6.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:after {
+  background-position: 0.7rem -6.8rem;
+}
+
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:hover:after,
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:active:after {
+  background-position: -0.7rem -0.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:hover:after,
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:active:after {
+  background-position: 0.7rem -0.8rem;
+}
+
+.bb-editable [contenteditable="true"],
+.bb-editable [contenteditable="true"]:hover,
+.skin-comms .bb-editable [contenteditable="true"]:hover {
+    padding: 0 0.2rem;
+    white-space: normal;
+    font-size: 1.8rem;
+    font-style: normal;
+    color: #000;
+    background: none repeat scroll 0 0 transparent;
+}
+
+.skin-comms .bb-editable [contenteditable]:hover,
+.skin-comms .bb-editable [contenteditable]:active {
+  color: #fff;
+  background-color: #29bbb5;
+}
+

assets/webapps/costcontrol.gaiamobile.org/shared/style/input_areas/images/dialog.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#00AAC5" enable-background="new" d="M9 0L9 9 0 9"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/style/input_areas/images/dialog_active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#B2F2FF" d="M9 0v9h-9"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/style/input_areas/images/dialog_disabled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path opacity=".5" fill="#A9A9A9" d="M9 0L9 9 0 9"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/style/input_areas/images/dialog_disabled_rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path opacity=".5" fill="#A9A9A9" enable-background="new" d="M0 0L0 9 9 9"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/style/input_areas/images/dialog_rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#00AAC5" enable-background="new" d="M0 0L0 9 9 9"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/style/input_areas/images/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" fill="#424242" d="M23.385 21.494c.266.266.057.903-.465 1.426s-1.16.729-1.426.465l-4.041-4.039c-1.01.656-2.21 1.047-3.505 1.047-3.561 0-6.448-2.885-6.448-6.446 0-3.56 2.887-6.446 6.448-6.446 3.562 0 6.449 2.887 6.449 6.446 0 1.297-.393 2.499-1.051 3.509l4.041 4.039h-.002zm-9.437-12.459c-2.712 0-4.914 2.198-4.914 4.912s2.202 4.913 4.914 4.913c2.714 0 4.914-2.199 4.914-4.913-.001-2.714-2.2-4.912-4.914-4.912z"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/style/input_areas/images/search_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" fill="#8F9091" d="M23.385 21.494c.266.266.057.903-.465 1.426s-1.16.729-1.426.465l-4.041-4.039c-1.01.656-2.21 1.047-3.505 1.047-3.561 0-6.448-2.885-6.448-6.446 0-3.56 2.887-6.446 6.448-6.446 3.562 0 6.449 2.887 6.449 6.446 0 1.297-.393 2.499-1.051 3.509l4.041 4.039h-.002zm-9.437-12.459c-2.712 0-4.914 2.198-4.914 4.912s2.202 4.913 4.914 4.913c2.714 0 4.914-2.199 4.914-4.913-.001-2.714-2.2-4.912-4.914-4.912z"/></svg>

assets/webapps/costcontrol.gaiamobile.org/shared/style/input_areas/index.html

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+
+  <title>Input areas</title>
+  <link rel="stylesheet" href="../input_areas.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
+
+  <!--
+    - These <style> and <script> elements are only used for the example code,
+    - they are not needed for the real use case.
+    -->
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #f4f4f4;
+    }
+
+    label.bb-docs {
+      font-family: sans-serif;
+      font-size: 1.2rem;
+      margin-left: 1.5rem;
+    }
+
+    h2.bb-docs {
+      font-family: sans-serif;
+      padding: 0.4rem 3rem;
+      margin: -0.1rem 0 0;
+      border: solid 0.1rem #e8e8e8;
+      color: #666;
+      font-size: 1.8rem;
+      font-weight: 300;
+      background-color: #fff;
+    }
+
+    form { margin: 1rem 1.5rem; }
+
+    form[role="search"] { margin: 1rem 0; }
+
+    div.skin-dark {
+      background: #000;
+    }
+
+    div.skin-dark.margins {
+      margin: 1rem -1.5rem;
+      padding: 1.5rem 1.5rem 0.5rem;
+    }
+
+    /**
+     *  .bb-editable
+     *  Added properties for this example, don't add on app.
+     */
+    .bb-editable {
+      padding: 1.5rem 1rem 0.5rem;
+      background: #bbb;
+    }
+
+    /**
+     *  .icon-email:before
+     *  Define the background-image with custom icon for App.
+     *  Attention, the pseudo-element is required for compatibility with Building Blocks.
+     *
+     *  Example:
+     *  .icon-mms:before { background-image: url(...); }
+     */
+    .icon-email:after {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABaCAYAAACv+ebYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASRJREFUeNrsl8ENgjAUhqlhAEfxQDyzgXdOjoCT0ClYg54Nu+gGtcRiAlJ5fQ9CDP+XFJOW+hlo6/uTBADw76hfg9ba0n0cBd//VErp6FlO3FgZDevn9pO50u4iEXPkn/ul4hj54L4lxBT51/hS4odrVUA62b+UOCSvfP+q4rE8KF1DTF5w3JPLio9Gx1T/Yauzen/idGb8Jv13QgEAAAAAyNJi27bitJhlmeYUAhfXcoHYuKY5pU/uJ3OluaTm4sjN3JOiFnsxckN5PTFVJkVuqGsitrw9hRaL7ycvxFhxt7WuE3Lt+1ct6MfyXhq131PmVukkpX+n5RYRhn24IC0iLQIAAABIi2/uRSFOi+e6RlpEWkRaRFpEWkRaRFoEYG+8BBgAvaeWTjgXDaoAAAAASUVORK5CYII=);
+    }
+
+  </style>
+  <script>
+    window.onload = function() {
+      document.getElementById('dir').checked = false;
+    };
+  </script>
+</head>
+
+<body role="application">
+  <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>
+  <h2 class="bb-docs">Default inputs</h2>
+  <form>
+    <p>
+      <input dir="auto" type="text" placeholder="Placeholder">
+      <button type="reset">Clear</button>
+    </p>
+
+    <p>
+      <textarea placeholder="Placeholder in textarea"></textarea>
+    </p>
+
+    <p>
+      <input dir="auto" type="text" placeholder="Placeholder" value="Some written text" required>
+      <button type="reset">Clear</button>
+    </p>
+
+    <p>
+      <input dir="auto" type="text" placeholder="Disabled" disabled required>
+      <button type="reset">Clear</button>
+    </p>
+
+    <div class="skin-dark margins">
+      <p>
+        <input dir="auto" type="text" placeholder="Placeholder" value="Some written text">
+        <button type="reset">Clear</button>
+      </p>
+    </div>
+  </form>
+
+  <h2 class="bb-docs">Required inputs</h2>
+  <form>
+    <p>
+      <input dir="auto" type="text" placeholder="Placeholder" required>
+      <button type="reset">Clear</button>
+    </p>
+
+    <p>
+      <textarea placeholder="Placeholder in textarea" required></textarea>
+    </p>
+  </form>
+
+  <h2 class="bb-docs">Date/time inputs</h2>
+  <form>
+    <p>
+      <input dir="auto" disabled type="date" placeholder="YYYY-MM-DD">
+    </p>
+
+    <p>
+      <input dir="auto" type="time" placeholder="hh:mm:ss">
+    </p>
+  </form>
+
+  <h2 class="bb-docs">Fieldset</h2>
+  <form>
+    <fieldset>
+      <legend class="action">Mobile</legend>
+      <section>
+        <p>
+          <input dir="ltr" type="tel" placeholder="Phone number">
+          <button type="reset">Clear</button>
+        </p>
+        <p>
+          <input dir="auto" type="text" placeholder="Name" value="Jessy James">
+          <button type="reset">Clear</button>
+        </p>
+      </section>
+    </fieldset>
+
+    <fieldset disabled>
+      <legend>Work</legend>
+      <section>
+        <p>
+          <input dir="ltr" type="tel" placeholder="Email">
+          <button type="reset">Clear</button>
+        </p>
+      </section>
+    </fieldset>
+  </form>
+
+  <h2 class="bb-docs">Forms: Input text</h2>
+  <form role="search">
+    <p>
+      <input dir="auto" type="text" placeholder="Search…">
+      <button type="reset">Clear</button>
+    </p>
+  </form>
+
+  <form role="search">
+    <button type="submit">Cancel</button>
+    <p>
+      <input dir="auto" type="text" placeholder="Search…" value="Some text here">
+      <button type="reset">Clear</button>
+    </p>
+  </form>
+
+  <div class="skin-dark">
+  <h2 class="bb-docs">Skin dark</h2>
+    <form role="search" class="skin-dark">
+      <p>
+        <input dir="auto" type="text" placeholder="Search…">
+        <button type="reset">Clear</button>
+      </p>
+    </form>
+
+    <form role="search" class="skin-dark">
+      <button type="submit">Cancel</button>
+      <p>
+        <input dir="auto" type="text" placeholder="Search…" value="Some text here">
+        <button type="reset">Clear</button>
+      </p>
+    </form>
+  </div>
+
+  <h2 class="bb-docs">Forms: Text area</h2>
+  <form role="search" class="bottom">
+    <!-- this button should be enabled after start typing in the input field-->
+    <button type="submit" disabled>Send</button>
+    <p>
+      <textarea></textarea>
+    </p>
+  </form>
+
+  <form role="search" class="bottom">
+    <button type="submit">Send</button>
+    <p>
+      <textarea>Some text here</textarea>
+    </p>
+  </form>
+
+  <form role="search" class="bottom">
+    <button type="submit" class="icon" data-icon="send" aria-hidden="true">Send</button>
+    <p>
+      <textarea>Some text here</textarea>
+    </p>
+  </form>
+
+  <h2 class="bb-docs">Content Editable</h2>
+  <ul class="bb-editable">
+    <li dir="auto" contenteditable="false">Travis Gray Travis Gray</li>
+    <li dir="auto" contenteditable="false" class="invalid">Lucy B.</li>
+    <li dir="auto" contenteditable="false" class="icon icon-email">Mary</li>
+    <li dir="auto" contenteditable="false" class="invalid icon icon-email">Paul C.</li>
+    <li dir="auto" contenteditable="true">John</li>
+  </ul>
+
+</body>
+</html>

assets/webapps/costcontrol.gaiamobile.org/shared/style/layout.css

@@ -0,0 +1,330 @@
+/* ------------------------------------
+ * Layout.css will allow us creating
+ * easy structures using flexbox.
+ * This file will replace lists.css
+ * ------------------------------------ */
+
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
+  color: #333;
+  overflow: hidden;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+p {
+  margin: 0;
+  line-height: 22px
+}
+
+/* Horizontal layout */
+.hbox {
+  display: flex;
+  flex-direction: row;
+}
+
+.hbox.left { justify-content: flex-start; }
+.hbox.center { justify-content: center; }
+.hbox.right { justify-content: flex-end; }
+.hbox.top { align-items: flex-start; }
+.hbox.middle { align-items: center; }
+.hbox.bottom { align-items: flex-end; }
+
+.hbox > .self-top { align-self: flex-start; }
+.hbox > .self-middle { align-self: center; }
+.hbox > .self-bottom { align-self: flex-end; }
+
+/* Vertical layout */
+.vbox {
+  display: flex;
+  flex-direction: column;
+}
+
+.vbox.left { align-items: flex-start; }
+.vbox.center { align-items: center; }
+.vbox.right { align-items: flex-end; }
+.vbox.top { justify-content: flex-start; }
+.vbox.middle { justify-content: center; }
+.vbox.bottom { justify-content: flex-end; }
+
+.vbox > .self-left { align-self: flex-start; }
+.vbox > .self-center { align-self: center; }
+.vbox > .self-right { align-self: flex-end; }
+
+/*
+ * Layout properties
+ */
+
+.fit {
+  flex: 1;
+}
+
+.scroll {
+  overflow: auto;
+}
+
+.fit.two   { flex: 2; }
+.fit.three { flex: 3; }
+.fit.four  { flex: 4; }
+.fit.five  { flex: 5; }
+.fit.six   { flex: 6; }
+
+/*
+ * Elements
+ */
+
+/* Lists */
+.gaia-list {
+  font-size: 18px;
+}
+
+.gaia-list li {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 40px;
+  padding: 10px 15px;
+}
+
+.gaia-list li:after {
+  position: absolute;
+  content: "";
+  right: 15px;
+  top: 0;
+  bottom: 0;
+  left: 15px;
+  border-bottom: 1px solid #e7e7e7;
+  pointer-events: none;
+}
+
+.gaia-list li:last-of-type:after {
+  display: none;
+}
+
+.gaia-list.active li:active,
+.gaia-list li.active:active {
+  background-color: rgba(0, 213, 255, 0.3);
+}
+
+
+.gaia-list li.vbox {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+/* List header */
+.gaia-list header {
+  padding: 0 30px;
+  margin: 0;
+  font-size: 16px;
+  height: 30px;
+  line-height: 40px;
+  font-weight: normal;
+  color: #ff4e00;
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: #fff;
+}
+
+.gaia-list.sticky header {
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+}
+
+/* List elements */
+.gaia-list li p,
+.gaia-list li label {
+  -moz-margin-start: 15px;
+}
+
+.gaia-list li p:not(:first-of-type) {
+  color: #858585;
+  font-size: 15px;
+  line-height: 20px;
+}
+
+.gaia-list li p em {
+  font-size: 15px;
+  font-style: normal;
+}
+
+.gaia-list li p time {
+  margin-right: 3px;
+  text-transform: uppercase;
+}
+
+.gaia-list label.pack-checkbox,
+.gaia-list label.pack-switch {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: auto;
+  min-height: 40px;
+  padding: 10px 0;
+  margin: -10px 0;
+  -moz-margin-start: 15px;
+}
+
+.gaia-list label.vbox.pack-checkbox,
+.gaia-list label.vbox.pack-switch {
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.gaia-list label.pack-checkbox:not(.reverse) {
+  -moz-padding-start: 30px;
+  -moz-margin-start: 0;
+}
+
+.gaia-list label.pack-checkbox span:after {
+  left: 10px;
+}
+
+.gaia-list label.pack-checkbox.reverse span:after,
+.gaia-list label.pack-switch span:after {
+  left: auto;
+  right: 0;
+}
+
+.gaia-list label.pack-checkbox span,
+.gaia-list label.pack-switch span,
+.gaia-list label p {
+  word-wrap: break-word;
+  width: 100%;
+}
+
+.gaia-list label.pack-checkbox.reverse span,
+.gaia-list label.pack-checkbox.reverse p {
+  width: calc(100% - 30px);
+}
+
+.gaia-list label.pack-switch span,
+.gaia-list label.pack-switch p {
+  width: calc(100% - 70px);
+}
+
+.gaia-list label p {
+  color: #858585;
+  font-size: 15px;
+  line-height: 20px;
+  -moz-margin-start: 0;
+}
+
+.gaia-list li.icon {
+  -moz-padding-start: 40px;
+  background-position: left 15px center;
+  background-repeat: no-repeat;
+  background-size: 30px;
+}
+
+.gaia-list [data-type=img],
+.gaia-list li img {
+  display: block;
+  overflow: hidden;
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  margin-top: 5px;
+  box-sizing: border-box;
+  box-shadow: 0 0 0 1px #dedede;
+  background: transparent center center / cover;
+  position: relative;
+}
+
+.gaia-list li button,
+.gaia-list li .button {
+  margin: 0;
+}
+
+.gaia-list li button + button,
+.gaia-list li p + button,
+.gaia-list li p + .button,
+.gaia-list li button + p,
+.gaia-list li .button + p,
+.gaia-list li label + button,
+.gaia-list li label + .button {
+  margin-top: 10px;
+}
+
+/* Footer */
+.gaia-footer {
+  border-top: 1px solid #e7e7e7;
+  background-color: #fff;
+  padding: 10px 15px;
+  display: flex;
+}
+
+.gaia-footer p {
+  margin: 0 15px 10px;
+  word-break: break-all;
+  text-align: center;
+  color: #858585;
+  font-size: 15px;
+  line-height: 20px;
+}
+
+.gaia-footer button,
+.gaia-footer .button {
+  margin: 0 0 0 15px;
+}
+
+.gaia-footer button:first-of-type,
+.gaia-footer .button:first-of-type {
+  margin-left: 0;
+}
+
+/*
+ * Skins
+ */
+
+.skin-comms .gaia-list header {
+  color: #4997a7;
+}
+
+.skin-organic .gaia-list header {
+  background-color: #e7e7e7;
+  color: #4d4d4d;
+  font-size: 15px;
+  line-height: 34px;
+  text-transform: none;
+}
+
+
+/**
+ * Right-to-Left layout
+ */
+.gaia-list:-moz-dir(rtl) label.pack-checkbox span:after {
+  left: unset;
+  right: 10px;
+}
+
+.gaia-list:-moz-dir(rtl) label.pack-checkbox.reverse span:after,
+.gaia-list:-moz-dir(rtl) label.pack-switch span:after {
+  left: 0;
+  right: unset;
+}
+
+.gaia-list:-moz-dir(rtl) li.icon {
+  background-position: right 15px center;
+}
+

assets/webapps/costcontrol.gaiamobile.org/shared/style/layout/index.html

@@ -0,0 +1,342 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Layout</title>
+  <meta name="description" content="Displaying an enumeration of a set of items ">
+
+  <link rel="stylesheet" href="../layout.css">
+
+  <!--
+    This <style> and <link> is only used for the example code, is no needed for the real case use
+  -->
+  <link rel="stylesheet" href="../../style/headers.css">
+  <link rel="stylesheet" href="../../style/switches.css">
+  <link rel="stylesheet" href="../../style/buttons.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
+  <style>
+    html {
+      font-size: 10px;
+    }
+    .gaia-list li img[alt="placeholder"] {
+      background: #ccc url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iNTAiLz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNTAiIHkxPSIwIiB4Mj0iMC4wODIiIHkyPSI0OS45MTkiLz4NCjwvc3ZnPg0K);
+      background-size: 100% 100%;
+      font-size: 0;
+    }
+
+    .gaia-list .icon-call-incoming {
+      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4KPGc+Cgk8bGluZSBzdHJva2Utd2lkdGg9IjEiIHgxPSIiIHkxPSIiIHgyPSIiIHkyPSIiIHN0cm9rZT0iIzQ0OUZEQiIgb3BhY2l0eT0iIj48L2xpbmU+CjwvZz4KCTxwYXRoIGQ9Ik0xNy43MTQgOS44MzN2Mi42NTZjLTAuMzE3IDAuMDY1LTAuNjU3LTAuMDA3LTAuOTA2LTAuMjUzbC0zLjAyMS0zLjAyMWMtMC4zODktMC4zOTItMC4zODktMS4wMjUgMC0xLjQxNGwzLjAyMS0zLjAyMWMwLjI0OS0wLjI0NiAwLjU4OS0wLjMyIDAuOTA2LTAuMjU1djIuNjcxaDcuMDM1YzAuMTc3IDAuODcxIDAuMTc3IDEuNzY4LTAuMDAzIDIuNjM2aC03LjAzMnpNMTguMzU2IDIxLjY0N2wwLjAyMiAwLjAyMmMwLjYwOC0wLjMzNiAxLjIwOC0wLjczOCAxLjgwMy0xLjE3bDUuNjg0IDUuMDM0Yy0xLjE5OSAxLjAzNi0yLjQ5NyAxLjg4NC0zLjg2NiAyLjUyMy0zLjYzOS0wLjY3MS04LjI5OS0zLjM3Ni0xMi40ODUtNy41NjItNC4xODItNC4xODItNi44ODctOC44MzgtNy41NjEtMTIuNDc0IDAuNjQtMS4zNzIgMS40OS0yLjY3NCAyLjUyNi0zLjg3NWw1LjAzOSA1LjY5Yy0wLjQzMyAwLjU5My0wLjgzNSAxLjE5NS0xLjE3MSAxLjgwMWwwLjAyMSAwLjAyMmMtMC41ODkgMS4yOTMgMC43NzQgNC4xMSAzLjMyNyA2LjY2M3M1LjM2NyAzLjkxNyA2LjY2MSAzLjMyNnoiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD4KPC9zdmc+Cg==);
+    }
+
+    .fb-example > div {
+      border-bottom: 1px solid #e7e7e7;
+      overflow: hidden;
+      padding: 10px 15px;
+      margin: 0 15px;
+    }
+
+    .fb-example > div > div {
+      position: relative;
+      text-indent: 10px;
+    }
+
+    .fb-example > div > div:before {
+      content: "";
+      top: 5px;
+      left: 0;
+      height: 6px;
+      width: 6px;
+      background-color: #333;
+      border-radius: 50%;
+      position: absolute;
+    }
+
+    .fb-example .vbox {
+      height: 100px;
+    }
+
+    .fb-example .hbox {
+      height: 70px;
+    }
+
+    .fb-example .hbox > div {
+      margin-left: 10px;
+    }
+
+    .fb-example .hbox > div:first-child {
+      margin-left: 0;
+    }
+  </style>
+</head>
+
+<body class="skin-comms">
+
+  <section role="region" class="vbox fit scroll">
+    <header>
+      <h1>App name</h1>
+    </header>
+    <section class="gaia-list fit scroll sticky">
+      <article>
+        <header>Paragraphs</header>
+        <ul>
+          <li>
+            <p>Only one paragraph</p>
+          </li>
+          <li class="vbox">
+            <p></p>
+            <p>Paragraph 2 (Paragraph 1 is empty)</p>
+          </li>
+          <li class="vbox">
+            <p>Paragraph 1</p>
+            <p>Paragraph 2</p>
+            <p>Paragraph 3</p>
+          </li>
+        </ul>
+      </article>
+      <article>
+        <header>Active state</header>
+        <ul>
+          <li class="active">
+            <p>This row has active state</p>
+          </li>
+        </ul>
+      </article>
+      <article>
+        <header>Text + image</header>
+        <ul>
+          <li>
+            <p class="fit">Contact name</p>
+            <img src="noimage" alt="placeholder">
+          </li>
+          <li class="icon icon-call-incoming">
+            <p class="fit">Contact name</p>
+            <img src="noimage" alt="placeholder">
+          </li>
+        </ul>
+      </article>
+      <article>
+        <header>Buttons</header>
+        <ul>
+          <li>
+            <button>Default button</button>
+          </li>
+          <li>
+            <button class="icon icon-view">View button</button>
+          </li>
+          <li>
+            <button class="icon icon-dialog">Dialog button</button>
+          </li>
+          <li class="vbox">
+            <button>Button</button>
+            <p>Paragraph</p>
+          </li>
+          <li class="vbox">
+            <p>Paragraph</p>
+            <button>Button</button>
+          </li>
+          <li class="vbox">
+            <label>Label</label>
+            <button>Button</button>
+          </li>
+          <li class="vbox">
+            <button>Button 1</button>
+            <button>Button 2</button>
+          </li>
+          <li>
+            <div class="fit">
+              <p>Text (fit)</p>
+            </div>
+            <div>
+              <button class="icon icon-dialog">Select</button>
+            </div>
+          </li>
+          <li>
+            <div class="fit">
+              <p>text (1/2)</p>
+            </div>
+            <div class="fit">
+              <button class="icon icon-dialog">Select</button>
+            </div>
+          </li>
+          <li>
+            <div class="fit">
+              <p>text (1/3)</p>
+            </div>
+            <div class="fit two">
+              <button class="icon icon-dialog">Select</button>
+            </div>
+          </li>
+          <li>
+            <div class="fit">
+              <p>text (1/4)</p>
+            </div>
+            <div class="fit three">
+              <button class="icon icon-dialog">Select</button>
+            </div>
+          </li>
+          <li>
+            <div class="fit">
+              <p>text (1/5)</p>
+            </div>
+            <div class="fit four">
+              <button class="icon icon-dialog">Select</button>
+            </div>
+          </li>
+          <li>
+            <div class="fit">
+              <p>text (1/6)</p>
+            </div>
+            <div class="fit five">
+              <button class="icon icon-dialog">Select</button>
+            </div>
+          </li>
+          <li>
+            <div class="fit">
+              <p>text (1/7)</p>
+            </div>
+            <div class="fit six">
+              <button class="icon icon-dialog">Select</button>
+            </div>
+          </li>
+        </ul>
+      </article>
+      <article>
+        <header>Checkboxes</header>
+        <ul>
+          <li class="active">
+            <label class="pack-checkbox">
+              <input type="checkbox" checked>
+              <span>Default checkbox</span>
+            </label>
+          </li>
+          <li class="active">
+            <label class="pack-checkbox danger">
+              <input type="checkbox" checked>
+              <span>Danger checkbox</span>
+            </label>
+          </li>
+          <li class="active">
+            <label class="pack-checkbox reverse">
+              <input type="checkbox">
+              <span>Reverse checkbox</span>
+            </label>
+          </li>
+          <li class="active">
+            <label class="pack-checkbox reverse danger">
+              <input type="checkbox">
+              <span>Reverse danger checkbox</span>
+            </label>
+          </li>
+        </ul>
+      </article>
+      <article>
+        <header>Switches</header>
+        <ul>
+          <li class="active">
+            <label class="pack-switch">
+              <input type="checkbox">
+              <span>Default switch</span>
+            </label>
+          </li>
+          <li class="active">
+            <label class="pack-switch">
+              <input type="checkbox" checked>
+              <span>Checked switch</span>
+            </label>
+          </li>
+        </ul>
+      </article>
+
+      <!-- flexbox properties -->
+      <article class="fb-example">
+        <header>vbox: left</header>
+        <div class="vbox left">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>vbox: center</header>
+        <div class="vbox center">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>vbox: right</header>
+        <div class="vbox right">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>vbox: top</header>
+        <div class="vbox top">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>vbox: middle</header>
+        <div class="vbox middle">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>vbox: bottom</header>
+        <div class="vbox bottom">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>vbox: children positioning</header>
+        <div class="vbox">
+          <div class="self-left">Item 1: left</div>
+          <div class="self-center">Item 2: center</div>
+          <div class="self-right">Item 3: right</div>
+        </div>
+      </article>
+      <article class="fb-example">
+        <header>hbox: left</header>
+        <div class="hbox">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>hbox: center</header>
+        <div class="hbox center">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>hbox: right</header>
+        <div class="hbox right">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>hbox: top</header>
+        <div class="hbox top">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>hbox: middle</header>
+        <div class="hbox middle">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>hbox: bottom</header>
+        <div class="hbox bottom">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </div>
+        <header>hbox: children positioning</header>
+        <div class="hbox">
+          <div class="self-top">Item 1: top</div>
+          <div class="self-middle">Item 2: middle</div>
+          <div class="self-bottom">Item 3: bottom</div>
+        </div>
+      </article>
+    </section>
+  </section>
+</body>
+</html>

assets/webapps/costcontrol.gaiamobile.org/shared/style/lists.css

@@ -0,0 +1,242 @@
+/* ----------------------------------
+ * Lists
+ * ---------------------------------- */
+[data-type="list"] {
+  font-weight: 400;
+  padding: 0 1.5rem;
+}
+
+[data-type="list"] ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+[data-type="list"] strong {
+  font-weight: 500;
+}
+
+/* Title divisors */
+[data-type="list"] header {
+  padding: 0 1.5rem;
+  margin: 0;
+  font-size: 1.6rem;
+  height: 3rem;
+  line-height: 4rem;
+  font-weight: normal;
+  color: #ff4e00;
+  text-transform: uppercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+html[dir="ltr"] [data-type="list"] header { text-align: left; }
+html[dir="rtl"] [data-type="list"] header { text-align: right; }
+
+/* List items */
+[data-type="list"] li {
+  width: 100%;
+  height: 6rem;
+  box-sizing: border-box;
+  border-bottom: solid 0.1rem #e7e7e7;
+  color: #333;
+  margin: 0;
+  display: block;
+  position: relative;
+}
+
+[data-type="list"] li:last-child {
+  border: none;
+}
+
+/* Pressed State */
+li a:active {
+  background-color: transparent; /* remove default color for active state */
+}
+
+[data-type="list"] li > a {
+  text-decoration: none;
+  color: #333;
+  display: block;
+  height: 6rem;
+  position: relative;
+  border: none;
+  outline: none;
+}
+
+[data-type="list"].active li:after,
+[data-type="list"] li > a:after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  left: -1.5rem;
+  top: 0;
+  right: -1.5rem;
+  bottom: 0;
+}
+
+[data-type="list"].active li:active:after,
+[data-type="list"] li > a:active:after {
+  background-color: rgba(0,213,255,0.3);
+}
+
+/* Disabled */
+[data-type="list"] li[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.2;
+  border-color: #888;
+}
+
+/* Graphic content */
+[data-type="list"] aside {
+  margin: 0;
+  margin-inline-end: 0.5rem;
+  height: 100%;
+  position: relative;
+}
+html[dir="ltr"] [data-type="list"] aside { float: left; }
+html[dir="rtl"] [data-type="list"] aside { float: right; }
+
+[data-type="list"] li > a aside,
+[data-type="list"] li > a aside.icon {
+  background-color: transparent;
+}
+
+[data-type="list"] aside.pack-end {
+  margin: 0;
+  margin-inline-start: 0.5rem;
+  text-align: end;
+}
+html[dir="ltr"] [data-type="list"] aside.pack-end { float: right; }
+html[dir="rtl"] [data-type="list"] aside.pack-end { float: left; }
+
+[data-type="list"] aside.icon {
+  width: 3rem;
+  height: 6rem;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-size:  100% auto;
+  font-size: 0;
+  display: block;
+  overflow: hidden;
+}
+html[dir="ltr"] [data-type="list"] aside.icon {
+  background-position: left center;
+}
+html[dir="rtl"] [data-type="list"] aside.icon {
+  background-position: right center;
+}
+
+[data-type="list"] aside span[data-type=img],
+[data-type="list"] aside img {
+  display: block;
+  overflow: hidden;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 2.5rem;
+  margin-top: 0.5rem;
+  box-sizing: border-box;
+  background: transparent center center / cover;
+  position: relative;
+}
+
+[data-type="list"] [data-icon] {
+  font-size: 0;
+}
+
+[data-type="list"] [data-icon]:before {
+  line-height: 6rem;
+  text-align: center;
+  width: 3rem;
+  color: #333;
+}
+
+/* Text content */
+[data-type="list"] li p {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: none;
+  display: block;
+  margin: 0;
+  color: #858585;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+[data-type="list"] li p:first-of-type {
+  font-size: 1.8rem;
+  line-height: 2.2rem;
+  color: #333;
+  padding: 1rem 0 0;
+}
+
+[data-type="list"] li p:only-child,
+[data-type="list"] li p:first-of-type:last-of-type {
+  line-height: 4rem;
+}
+
+[data-type="list"] li p em {
+  font-size: 1.5rem;
+  font-style: normal;
+}
+
+[data-type="list"] li p time {
+  margin-inline-end: 0.3rem;
+  text-transform: uppercase;
+}
+
+/* Checkable content */
+[data-type="list"] li > .pack-checkbox,
+[data-type="list"] li > .pack-switch {
+  pointer-events: none;
+  position: absolute;
+  top: -0.1rem;
+  bottom: 0;
+  /* Intentionally adding a conflict between right/left here: this will be
+   * resolved differently whether we're in LTR or RTL mode. */
+  right: -4rem;
+  left: -4rem;
+  width: calc(100% + 4rem);
+  height: auto;
+}
+
+[data-type="list"] li > .pack-checkbox input ~ span:after,
+[data-type="list"] li > .pack-switch input ~ span:after {
+  /* because width is set in switches.css, the conflict between left/right will
+   * be resolved in favor of "left" in LTR and "right" in RTL */
+  left: 0;
+  right: 0;
+  margin-inline-start: 0;
+}
+
+/* Edit mode */
+[data-type="list"] [data-type="edit"] li {
+  padding-inline-start: 4rem;
+}
+
+[data-type="list"] [data-type="edit"] li > .pack-checkbox,
+[data-type="list"] [data-type="edit"] li > .pack-switch {
+  pointer-events: auto;
+  left: 0;
+  right: 0;
+}
+
+[data-type="list"] [data-type="edit"] li > a {
+  pointer-events: none;
+}
+
+[data-type="list"] [data-type="edit"] li > a:active:after,
+[data-type="list"] [data-type="edit"] li > a:hover:after {
+  display: none;
+}
+
+[data-type="list"] [data-type="edit"] aside.pack-end {
+  display: none;
+}
+
+/* Themes */
+.skin-comms [data-type="list"] header {
+  color: #4997a7;
+}

assets/webapps/costcontrol.gaiamobile.org/shared/style/lists/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Lists</title>
+  <meta name="description" content="Displaying an enumeration of a set of items ">
+
+  <link rel="stylesheet" href="../lists.css">
+
+  <!--
+    - These <style>, <script> and <link> elements are only used for the example
+    - code, they are not needed for the real case.
+    -->
+  <link rel="stylesheet" href="../../style/headers.css">
+  <link rel="stylesheet" href="../../style/switches.css">
+  <link rel="stylesheet" href="../../style/buttons.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-size: 10px;
+      background-color: #fff;
+    }
+
+    body {
+      background: none;
+    }
+
+    h2.pack-docs {
+      font-size: 1.8rem;
+      font-weight: 300;
+      color: #666;
+      margin: -1px 0 0;
+      background-color: #f5f5f5;
+      padding: 0.4rem 0.4rem 0.4rem 3rem;
+      border: solid 1px #e8e8e8;
+    }
+
+    h2.pack-docs:first-child {
+      margin-top: 0;
+    }
+
+    [data-type="list"] li img[alt="placeholder"] {
+      background: #ccc url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMCIgeDI9IjUwIiB5Mj0iNTAiLz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNTAiIHkxPSIwIiB4Mj0iMC4wODIiIHkyPSI0OS45MTkiLz4NCjwvc3ZnPg0K);
+      background-size: 100% 100%;
+      font-size: 0;
+    }
+
+    [data-icon]:before {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    [data-type="list"] [data-icon="forward"]:before {
+      color: #686f72;
+    }
+
+    #settings-list { background-color: #eff0eb; }
+    #settings-list li { border-color: #dcdcdc; }
+    #settings-list button { max-width: 8rem; margin: 1rem 1rem 0 0; }
+    #settings-list aside label { margin: 0 1rem 0 0; height: 100%; }
+    #settings-list > header h2 { margin: 0 1.5rem; }
+  </style>
+  <script>
+    window.onload = function() {
+      var dirInput = document.getElementById('dir');
+      dirInput.checked = false;
+      dirInput.onchange = function() {
+        document.documentElement.dir = this.checked ? "rtl" : "ltr";
+      };
+    };
+  </script>
+</head>
+
+<body role="application">
+  <p dir="ltr">
+    <label class="bb-docs">
+      <input id="dir" type="checkbox"> RTL mode
+    </label>
+  </p>
+  <section data-type="list">
+    <header>Title</header>
+    <ul>
+      <li>
+        <p>Margherita <strong>Gomez</strong></p>
+      </li>
+      <li>
+        <a href="#">
+          <aside class="pack-end" data-icon="forward" data-l10n-id="" aria-label="forward"></aside>
+          <p>Margherita Clickable <strong>Gomez</strong></p>
+        </a>
+      </li>
+      <li>
+        <aside class="pack-end">
+          <img alt="placeholder" src="myimage.jpg">
+        </aside>
+        <a href="#">
+          <p>Margherita <strong>Gomez</strong></p>
+          <p>Family</p>
+        </a>
+      </li>
+    </ul>
+
+    <header>Another title</header>
+    <ul>
+      <li aria-disabled="true">
+        <aside class="pack-end">
+          <img alt="placeholder" src="myimage.jpg">
+        </aside>
+        <a href="#">
+          <p>Margherita <strong>Gomez</strong></p>
+          <p>Family</p>
+        </a>
+      </li>
+      <li>
+        <aside class="pack-end icon icon-nopic"></aside>
+        <a href="#">
+          <aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call">
+            asidecall
+          </aside>
+          <p dir="auto">
+            Margherita <strong>Gomez</strong>
+            <em>(2)</em>
+          </p>
+          <p>
+            <time datetime="17:43">5:43PM</time>
+            Mobile, Vivo
+          </p>
+        </a>
+      </li>
+    </ul>
+  </section>
+
+  <section data-type="list">
+    <header>Edit mode</header>
+    <ul data-type="edit">
+      <li>
+        <label class="pack-checkbox danger">
+          <input type="checkbox">
+          <span></span>
+        </label>
+        <aside class="pack-end">
+          <img alt="placeholder" src="myimage.jpg">
+        </aside>
+        <a href="#">
+          <p>Margherita <strong>Gomez</strong></p>
+          <p>Family</p>
+        </a>
+      </li>
+      <li>
+        <label class="pack-checkbox danger">
+          <input type="checkbox">
+          <span></span>
+        </label>
+        <a href="#">
+          <aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call"></aside>
+          <p dir="auto">
+            Margherita <strong>Gomez</strong>
+            <em>(2)</em>
+          </p>
+          <p>
+            <time datetime="17:43">5:43PM</time>
+            Mobile, Vivo
+          </p>
+        </a>
+      </li>
+    </ul>
+  </section>
+
+  <section id="settings-list" role="region" class="skin-organic">
+    <section data-type="list">
+      <ul>
+      <li>
+        <a href="#">
+          <aside data-icon="call-outgoing" data-l10n-id="" aria-label="outgoing call"></aside>
+          <p>Phone lock</p>
+        </a>
+      </li>
+      </ul>
+    </section>
+    <header>
+      <h2>Settings style</h2>
+    </header>
+    <section data-type="list">
+      <ul>
+        <li>
+          <aside class="pack-end">
+            <button class="icon icon-dialog">Spain</button>
+          </aside>
+          <p>Time zone</p>
+          <p>Choose your country</p>
+        </li>
+        <li>
+          <aside class="pack-end">
+            <label class="pack-switch">
+              <input type="checkbox" checked>
+              <span></span>
+            </label>
+          </aside>
+          <p>Phone lock</p>
+        </li>
+      </ul>
+    </section>
+  </section>
+
+</body>
+</html>

assets/webapps/costcontrol.gaiamobile.org/shared/style/progress_activity.css

@@ -0,0 +1,121 @@
+/* ----------------------------------
+ * Progress + activities
+ * ---------------------------------- */
+
+/* Spinner */
+progress:not([value]) {
+  background: url(progress_activity/images/ui/default.png) no-repeat center center / 100% auto;
+  animation: 0.9s rotate infinite steps(30);
+  width: 2.9rem;
+  height: 2.9rem;
+  border: none;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+progress:not([value]).light {
+  background-image: url(progress_activity/images/ui/light.png);
+}
+
+progress:not([value])::-moz-progress-bar {
+ background: none;
+}
+
+/* Progress bar */
+progress[value] {
+  width: 100%;
+  background: #333;
+  border: none;
+  border-radius: 0;
+  height: 0.4rem;
+  display: block;
+}
+
+progress[value]::-moz-progress-bar {
+  background: #01c5ed;
+  border-radius: 0;
+}
+
+/* Progress bar */
+progress[value].pack-activity {
+  background-size: 15rem;
+}
+html[dir="ltr"] progress[value].pack-activity {
+  animation: 1.5s move-right steps(15) infinite;
+  background-image: repeating-linear-gradient(135deg, #92F4FE, #92F4FE 5rem, #00CDF0 5rem, #00CDF0 10rem);
+}
+html[dir="rtl"] progress[value].pack-activity {
+  animation: 1.5s move-left steps(15) infinite;
+  background-image: repeating-linear-gradient(-135deg, #92F4FE, #92F4FE 5rem, #00CDF0 5rem, #00CDF0 10rem);
+}
+
+/* Labels */
+p[role="status"] {
+  padding: 0.5rem;
+  font-weight: 300;
+  font-size: 2.25rem;
+  line-height: 1.4em;
+  color: #fff;
+}
+
+p[role="status"] progress:not([value]) {
+  margin-inline-end: 0.5rem;
+}
+
+p[role="status"] progress:not([value]) + span {
+  margin-bottom: 0;
+}
+
+p[role="status"] span {
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 0.5rem;
+}
+
+/* Progress steps */
+.bb-steps {
+  position: relative;
+  height: 0.3rem;
+}
+html[dir="ltr"] .bb-steps { transform: scaleX(1); }
+html[dir="rtl"] .bb-steps { transform: scaleX(-1); }
+
+.bb-steps:before {
+  position: absolute;
+  content: "";
+  height: 0;
+  left: 0;
+  top: 0.1rem;
+  right: 0;
+  border-top: 0.1rem solid #b7b7b7;
+  border-bottom: 0.1rem solid #fff;
+}
+
+.bb-steps progress[value] {
+  position: absolute;
+  height: 0.3rem;
+  left: 0;
+  top: 0;
+  background: #858585;
+  transition: transform 0.35s cubic-bezier(0, 1, 0.5, 1.1);
+}
+
+.bb-steps progress[value]::-moz-progress-bar {
+  background: none;
+}
+
+/* Animations */
+@keyframes rotate {
+  from { transform: rotate(1deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes move-right {
+  from { background-position: -15rem 0; }
+  to   { background-position: 0 0; }
+}
+
+@keyframes move-left {
+  from { background-position: 0 0; }
+  to   { background-position: -15rem 0; }
+}