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.
This commit is contained in:
OverSu 2026-09-30 23:13:03 +02:00
commit b38dea0597
25901 changed files with 9982925 additions and 369 deletions

View file

@ -0,0 +1,10 @@
;(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));;'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);

View file

@ -0,0 +1,279 @@
;var running=false;var watchId=undefined;var sep="<br />************<br />";var _=undefined;var locations=undefined;function successWatch(position){var debug=document.getElementById('geoloc-debug').checked;var s=document.querySelector('#log');if(!debug){s.innerHTML="";}
if(keep()){locations.push(position);}
s.innerHTML=sep+s.innerHTML;for(var i in position.coords){var e=position.coords[i];if(typeof e=='number'){s.innerHTML=i+":"+position.coords[i]+"<br />"+s.innerHTML;}}
var link='<a href="http://www.openstreetmap.org/?mlat='+position.coords.latitude+'&mlon='+position.coords.longitude+'&zoom=16">Show on map</a><br />';s.innerHTML=link+s.innerHTML;var nbfixes=document.getElementById('nbr-gps-fixes');nbfixes.value=parseInt(nbfixes.value)+1;var datefix=document.getElementById('date-last-fix');var cdate=new Date();var localeFormat=cdate.toLocaleString(navigator.languages,{month:'numeric',day:'numeric',year:'numeric'});datefix.value=localeFormat;}
function errorWatch(msg){var s=document.querySelector('#log');if(typeof msg=="object"){if(msg.code==1){msg="Permission denied";}
if(msg.code==2){msg="Position unavailable";}
if(msg.code==3){msg="Timed out";}}
s.innerHTML=sep+msg+sep+s.innerHTML;}
function successGet(position){successWatch(position);enable('btnGet');enable('btnStart');enable('btnClear');enable('btnSave');}
function errorGet(msg){errorWatch(msg);enable('btnGet');enable('btnStart');enable('btnClear');}
function getOptions(){if(navigator.geolocation){locations=new Array();document.getElementById('nbr-gps-fixes').value="0";document.getElementById('date-last-fix').value="";show('status');if(document.getElementById('geoloc-debug').checked){show('debuglog');}
running=true;return{enableHighAccuracy:document.getElementById('geoloc-highaccuracy').checked?true:false,timeout:parseInt(document.getElementById('geoloc-timeout').value),maximumAge:parseInt(document.getElementById('geoloc-maxage').value)};}
errorWatch('not supported');return null;}
function getGeoloc(){errorWatch("getting current position");options=getOptions();if(options){navigator.geolocation.getCurrentPosition(successGet,errorGet,options);disable('btnGet');disable('btnStart');disable('btnStop');disable('btnClear');disable('btnSave');}}
function startGeoloc(){errorWatch("Starting watchPosition");options=getOptions();if(options){watchId=navigator.geolocation.watchPosition(successWatch,errorWatch,options);enable('btnStop');enable('btnClear');disable('btnGet');disable('btnStart');disable('btnSave');}}
function stopGeoloc(){if(watchId!=undefined){errorWatch("Stopping watchPosition");navigator.geolocation.clearWatch(watchId);disable('btnStop');enable('btnGet');enable('btnClear');enable('btnStart');if(keep()){enable('btnSave');}
running=false;}}
function clearGeoloc(){var s=document.querySelector('#log');s.innerHTML="";}
function locationsToGPX(){var xmldoc=document.implementation.createDocument("","",null);var doc=xmldoc.createElementNS('http://www.topografix.com/GPX/1/1','gpx');doc.setAttribute('creator','FirefoxOS geotracker');doc.setAttribute('version','1.1');xmldoc.appendChild(doc);var time=xmldoc.createElement('time');var dtf=Intl.DateTimeFormat(navigator.languages,{year:'numeric',moth:'numeric',day:'numeric',hour:'numeric',minute:'numeric',second:'numeric',timeZoneName:'short'});var ts=xmldoc.createTextNode(dtf.format(new Date()));time.appendChild(ts);doc.appendChild(time);var createSimpleNode=function(name,value){var e=xmldoc.createElement(name);e.appendChild(xmldoc.createTextNode(value));return e;};for(var ei in locations){var e=locations[ei];var x=xmldoc.createElement('wpt');x.setAttribute('lat',e.coords.latitude);x.setAttribute('lon',e.coords.longitude);var ele=createSimpleNode('ele',e.coords.altitude);x.appendChild(ele);var time=createSimpleNode('time',dtf.format(new Date(e.timestamp)));x.appendChild(time);var ext=xmldoc.createElement('extensions');x.appendChild(ext);var accuracy=createSimpleNode('accuracy',e.coords.accuracy);ext.appendChild(accuracy);var altitudeAccuracy=createSimpleNode('altitudeAccuracy',e.coords.altitudeAccuracy);ext.appendChild(altitudeAccuracy);if(!isNaN(e.coords.speed)){var speed=createSimpleNode('speed',e.coords.speed);ext.appendChild(speed);}
if(!isNaN(e.coords.heading)){var heading=createSimpleNode('heading',e.coords.heading);ext.appendChild(heading);}
doc.appendChild(x);}
return xmldoc;}
function locationsToFile(format){var xmldoc=undefined;if(format=="gpx"){xmldoc=locationsToGPX();}
var oSerializer=new XMLSerializer();return'<?xml version="1.0" ?>'
+oSerializer.serializeToString(xmldoc);}
function saveGeoloc(){var date=(new Date()).toLocaleFormat("%Y%m%d%H%M%S");var file=locationsToFile("gpx");var blob=new Blob([file],{type:'application/gpx+xml'});var fname="geoloc/geoloc-"+date+".gpx";var storage=navigator.getDeviceStorage('sdcard');if(!storage){console.log("No storage available!");console.log(file);return;}
var save=storage.addNamed(blob,fname);save.onsuccess=function(){alert("Successfully saved "+fname);};save.onerror=function(){alert("Error while saving to "+fname+": "+this.error.name);};}
function enable(id){var e=document.getElementById(id);if(e){e.disabled=false;}}
function disable(id){var e=document.getElementById(id);if(e){e.disabled=true;}}
function show(id){var e=document.getElementById(id);if(e){e.style.display="block";}}
function hide(id){var e=document.getElementById(id);if(e){e.style.display="none";}}
function keep(){var e=document.getElementById('geoloc-keep');if(e){return e.checked;}
return false;}
window.addEventListener('DOMContentLoaded',function(){_=navigator.mozL10n.get;disable('btnStop');disable('btnClear');disable('btnSave');hide('parameters');hide('status');hide('debuglog');var keep=document.getElementById('geoloc-keep');keep.addEventListener('change',function(ev){if(running){return;}
if(ev.target.checked){enable('btnSave');}else{disable('btnSave');}});document.getElementById('geoloc-debug').addEventListener('change',function(ev){if(ev.target.checked){show('debuglog');}else{hide('debuglog');}});var showHideDiv=function(ev,tgt){var clicktarget=document.getElementById(tgt);clicktarget.addEventListener(ev,function(ev){var target=ev.target.dataset['hide'];var el=document.getElementById(target);if(el){if(el.style.display==""||el.style.display=="block"){hide(target);}else{show(target);}}});};showHideDiv('click','h1-parameters');showHideDiv('click','h1-status');showHideDiv('click','h1-debuglog');document.getElementById('btnGet').addEventListener('click',getGeoloc);document.getElementById('btnStart').addEventListener('click',startGeoloc);document.getElementById('btnStop').addEventListener('click',stopGeoloc);document.getElementById('btnClear').addEventListener('click',clearGeoloc);document.getElementById('btnSave').addEventListener('click',saveGeoloc);});;(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);

View file

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Geolocation Debug</title>
<link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
<link rel="stylesheet" type="text/css" href="shared/style/headers.css">
<link rel="stylesheet" type="text/css" href="shared/style/input_areas.css">
<link rel="stylesheet" type="text/css" href="shared/elements/gaia-theme/gaia-theme.css /">
<link rel="stylesheet" type="text/css" href="style/geoloc.css">
<!-- <script type="application/javascript" src="js/geoloc.js"></script> -->
<!-- localization -->
<meta name="defaultLanguage" content="en-US">
<meta name="availableLanguages" content="ar:201601260729, bg:201601260729, bn-BD:201601260729, ca:201601260729, cs:201601260729, da:201601260729, de:201601260729, el:201601260729, en-US:201601260729, es:201601260729, eu:201601260729, fr:201601260729, gl:201601260729, hr:201601260729, hu:201601260729, it:201601260729, ja:201601260729, km:201601260729, ko:201601260729, lt:201601260729, mk:201601260729, ms:201601260729, ne-NP:201601260729, nl:201601260729, pa:201601260729, pl:201601260729, pt-BR:201601260729, ro:201601260729, ru:201601260729, sk:201601260729, sq:201601260729, sr-Cyrl:201601260729, sr-Latn:201601260729, sv-SE:201601260729, tr:201601260729, zh-CN:201601260729, zh-TW:201601260729">
<link rel="localization" href="/locales-obj/index.{locale}.json">
<!-- <script src="shared/js/l10n.js" type="text/javascript" charset="utf-8"></script> --><script src="./gaia_build_index.js" type="text/javascript"></script>
<!-- <script defer="" src="shared/js/component_utils.js"></script> -->
<!-- <script defer="" src="shared/elements/gaia_switch/script.js"></script> --><script src="./gaia_build_defer_index.js" defer="" type="text/javascript"></script>
<meta content="2.5" name="appVersion"></head>
<body role="application">
<section role="region">
<header>
<h1 data-l10n-id="geolocation-tracker">Geolocation tracker</h1>
</header>
</section>
<section role="region">
<div class="bb-docs">
<button id="btnGet" data-l10n-id="geoloc-get">Get current</button>
<button id="btnStart" data-l10n-id="geoloc-start">Start</button>
<button id="btnStop" data-l10n-id="geoloc-stop">Stop</button>
<button id="btnClear" data-l10n-id="geoloc-clear">Clear</button>
<button id="btnSave" data-l10n-id="geoloc-save">Save as a file</button>
</div>
</section>
<section role="region">
<header>
<h1 data-l10n-id="geoloc-parameters" id="h1-parameters" data-hide="parameters" class="bb-docs">Parameters</h1>
</header>
<div class="bb-docs" id="parameters">
<fieldset>
<legend data-l10n-id="geoloc-timeout">Timeout</legend>
<section>
<input id="geoloc-timeout" value="0" type="number">
</section>
</fieldset>
<fieldset>
<legend data-l10n-id="geoloc-maxage">Max. age</legend>
<section>
<input id="geoloc-maxage" value="0" type="number">
</section>
</fieldset>
<span class="desc" data-l10n-id="geoloc-msecs">Timeout and max. age are specified in milliseconds.</span>
<ul>
<li>
<gaia-switch id="geoloc-highaccuracy" checked="">
<label data-l10n-id="geoloc-highaccuracy">High accuracy</label>
</gaia-switch>
</li>
<li>
<gaia-switch id="geoloc-debug" checked="">
<label data-l10n-id="geoloc-debug">Show debug traces</label>
</gaia-switch>
</li>
<li>
<gaia-switch id="geoloc-keep" checked="">
<label data-l10n-id="geoloc-keep">Keep locations</label>
</gaia-switch>
</li>
</ul>
</div>
</section>
<section role="region">
<header>
<h1 data-l10n-id="geoloc-status" id="h1-status" data-hide="status">Status</h1>
</header>
<div class="bb-docs" id="status">
<fieldset>
<legend data-l10n-id="gps-fixes">Fixes</legend>
<section>
<input disabled="disabled" id="nbr-gps-fixes" placeholder="0" type="text">
</section>
</fieldset>
<fieldset>
<legend data-l10n-id="last-fix">Last</legend>
<section>
<input disabled="disabled" data-l10n-id="date-last-fix" id="date-last-fix" placeholder="None" type="text">
</section>
</fieldset>
</div>
</section>
<section role="region">
<header>
<h1 data-l10n-id="geoloc-debug-log" id="h1-debuglog" data-hide="debuglog">Debug log</h1>
</header>
<div class="bb-docs" id="debuglog">
<span id="log"></span>
</div>
</section>
</body>
</html>

View file

@ -0,0 +1,35 @@
;var running=false;var watchId=undefined;var sep="<br />************<br />";var _=undefined;var locations=undefined;function successWatch(position){var debug=document.getElementById('geoloc-debug').checked;var s=document.querySelector('#log');if(!debug){s.innerHTML="";}
if(keep()){locations.push(position);}
s.innerHTML=sep+s.innerHTML;for(var i in position.coords){var e=position.coords[i];if(typeof e=='number'){s.innerHTML=i+":"+position.coords[i]+"<br />"+s.innerHTML;}}
var link='<a href="http://www.openstreetmap.org/?mlat='+position.coords.latitude+'&mlon='+position.coords.longitude+'&zoom=16">Show on map</a><br />';s.innerHTML=link+s.innerHTML;var nbfixes=document.getElementById('nbr-gps-fixes');nbfixes.value=parseInt(nbfixes.value)+1;var datefix=document.getElementById('date-last-fix');var cdate=new Date();var localeFormat=cdate.toLocaleString(navigator.languages,{month:'numeric',day:'numeric',year:'numeric'});datefix.value=localeFormat;}
function errorWatch(msg){var s=document.querySelector('#log');if(typeof msg=="object"){if(msg.code==1){msg="Permission denied";}
if(msg.code==2){msg="Position unavailable";}
if(msg.code==3){msg="Timed out";}}
s.innerHTML=sep+msg+sep+s.innerHTML;}
function successGet(position){successWatch(position);enable('btnGet');enable('btnStart');enable('btnClear');enable('btnSave');}
function errorGet(msg){errorWatch(msg);enable('btnGet');enable('btnStart');enable('btnClear');}
function getOptions(){if(navigator.geolocation){locations=new Array();document.getElementById('nbr-gps-fixes').value="0";document.getElementById('date-last-fix').value="";show('status');if(document.getElementById('geoloc-debug').checked){show('debuglog');}
running=true;return{enableHighAccuracy:document.getElementById('geoloc-highaccuracy').checked?true:false,timeout:parseInt(document.getElementById('geoloc-timeout').value),maximumAge:parseInt(document.getElementById('geoloc-maxage').value)};}
errorWatch('not supported');return null;}
function getGeoloc(){errorWatch("getting current position");options=getOptions();if(options){navigator.geolocation.getCurrentPosition(successGet,errorGet,options);disable('btnGet');disable('btnStart');disable('btnStop');disable('btnClear');disable('btnSave');}}
function startGeoloc(){errorWatch("Starting watchPosition");options=getOptions();if(options){watchId=navigator.geolocation.watchPosition(successWatch,errorWatch,options);enable('btnStop');enable('btnClear');disable('btnGet');disable('btnStart');disable('btnSave');}}
function stopGeoloc(){if(watchId!=undefined){errorWatch("Stopping watchPosition");navigator.geolocation.clearWatch(watchId);disable('btnStop');enable('btnGet');enable('btnClear');enable('btnStart');if(keep()){enable('btnSave');}
running=false;}}
function clearGeoloc(){var s=document.querySelector('#log');s.innerHTML="";}
function locationsToGPX(){var xmldoc=document.implementation.createDocument("","",null);var doc=xmldoc.createElementNS('http://www.topografix.com/GPX/1/1','gpx');doc.setAttribute('creator','FirefoxOS geotracker');doc.setAttribute('version','1.1');xmldoc.appendChild(doc);var time=xmldoc.createElement('time');var dtf=Intl.DateTimeFormat(navigator.languages,{year:'numeric',moth:'numeric',day:'numeric',hour:'numeric',minute:'numeric',second:'numeric',timeZoneName:'short'});var ts=xmldoc.createTextNode(dtf.format(new Date()));time.appendChild(ts);doc.appendChild(time);var createSimpleNode=function(name,value){var e=xmldoc.createElement(name);e.appendChild(xmldoc.createTextNode(value));return e;};for(var ei in locations){var e=locations[ei];var x=xmldoc.createElement('wpt');x.setAttribute('lat',e.coords.latitude);x.setAttribute('lon',e.coords.longitude);var ele=createSimpleNode('ele',e.coords.altitude);x.appendChild(ele);var time=createSimpleNode('time',dtf.format(new Date(e.timestamp)));x.appendChild(time);var ext=xmldoc.createElement('extensions');x.appendChild(ext);var accuracy=createSimpleNode('accuracy',e.coords.accuracy);ext.appendChild(accuracy);var altitudeAccuracy=createSimpleNode('altitudeAccuracy',e.coords.altitudeAccuracy);ext.appendChild(altitudeAccuracy);if(!isNaN(e.coords.speed)){var speed=createSimpleNode('speed',e.coords.speed);ext.appendChild(speed);}
if(!isNaN(e.coords.heading)){var heading=createSimpleNode('heading',e.coords.heading);ext.appendChild(heading);}
doc.appendChild(x);}
return xmldoc;}
function locationsToFile(format){var xmldoc=undefined;if(format=="gpx"){xmldoc=locationsToGPX();}
var oSerializer=new XMLSerializer();return'<?xml version="1.0" ?>'
+oSerializer.serializeToString(xmldoc);}
function saveGeoloc(){var date=(new Date()).toLocaleFormat("%Y%m%d%H%M%S");var file=locationsToFile("gpx");var blob=new Blob([file],{type:'application/gpx+xml'});var fname="geoloc/geoloc-"+date+".gpx";var storage=navigator.getDeviceStorage('sdcard');if(!storage){console.log("No storage available!");console.log(file);return;}
var save=storage.addNamed(blob,fname);save.onsuccess=function(){alert("Successfully saved "+fname);};save.onerror=function(){alert("Error while saving to "+fname+": "+this.error.name);};}
function enable(id){var e=document.getElementById(id);if(e){e.disabled=false;}}
function disable(id){var e=document.getElementById(id);if(e){e.disabled=true;}}
function show(id){var e=document.getElementById(id);if(e){e.style.display="block";}}
function hide(id){var e=document.getElementById(id);if(e){e.style.display="none";}}
function keep(){var e=document.getElementById('geoloc-keep');if(e){return e.checked;}
return false;}
window.addEventListener('DOMContentLoaded',function(){_=navigator.mozL10n.get;disable('btnStop');disable('btnClear');disable('btnSave');hide('parameters');hide('status');hide('debuglog');var keep=document.getElementById('geoloc-keep');keep.addEventListener('change',function(ev){if(running){return;}
if(ev.target.checked){enable('btnSave');}else{disable('btnSave');}});document.getElementById('geoloc-debug').addEventListener('change',function(ev){if(ev.target.checked){show('debuglog');}else{hide('debuglog');}});var showHideDiv=function(ev,tgt){var clicktarget=document.getElementById(tgt);clicktarget.addEventListener(ev,function(ev){var target=ev.target.dataset['hide'];var el=document.getElementById(target);if(el){if(el.style.display==""||el.style.display=="block"){hide(target);}else{show(target);}}});};showHideDiv('click','h1-parameters');showHideDiv('click','h1-status');showHideDiv('click','h1-debuglog');document.getElementById('btnGet').addEventListener('click',getGeoloc);document.getElementById('btnStart').addEventListener('click',startGeoloc);document.getElementById('btnStop').addEventListener('click',stopGeoloc);document.getElementById('btnClear').addEventListener('click',clearGeoloc);document.getElementById('btnSave').addEventListener('click',saveGeoloc);});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1 @@
{"name":"Geoloc","description":"Geolocation Tracker","type":"certified","launch_path":"/index.html","developer":{"name":"lissyx","url":"https://github.com/lissyx/gaia-geoloc"},"permissions":{"geolocation":{},"device-storage:sdcard":{"access":"readonly"}},"locales":{"ar":{"name":"Geoloc","description":"Geolocation Tracker"},"bg":{"name":"Geoloc","description":"Geolocation Tracker"},"bn-BD":{"name":"Geoloc","description":"Geolocation Tracker"},"ca":{"name":"Geoloc","description":"Geolocation Tracker"},"cs":{"name":"Geoloc","description":"Geolocation Tracker"},"da":{"name":"Geoloc","description":"Geolocation Tracker"},"de":{"name":"Geoloc","description":"Geolocation Tracker"},"el":{"name":"Geoloc","description":"Geolocation Tracker"},"en-US":{"name":"Geoloc","description":"Geolocation Tracker"},"es":{"name":"Geoloc","description":"Geolocation Tracker"},"eu":{"name":"Geoloc","description":"Geolocation Tracker"},"fr":{"name":"Geoloc","description":"Geolocation Tracker"},"gl":{"name":"Geoloc","description":"Geolocation Tracker"},"hr":{"name":"Geoloc","description":"Geolocation Tracker"},"hu":{"name":"Geoloc","description":"Geolocation Tracker"},"it":{"name":"Geoloc","description":"Geolocation Tracker"},"ja":{"name":"Geoloc","description":"Geolocation Tracker"},"km":{"name":"Geoloc","description":"Geolocation Tracker"},"ko":{"name":"Geoloc","description":"Geolocation Tracker"},"lt":{"name":"Geoloc","description":"Geolocation Tracker"},"mk":{"name":"Geoloc","description":"Geolocation Tracker"},"ms":{"name":"Geoloc","description":"Geolocation Tracker"},"ne-NP":{"name":"Geoloc","description":"Geolocation Tracker"},"nl":{"name":"Geoloc","description":"Geolocation Tracker"},"pa":{"name":"Geoloc","description":"Geolocation Tracker"},"pl":{"name":"Geoloc","description":"Geolocation Tracker"},"pt-BR":{"name":"Geoloc","description":"Geolocation Tracker"},"ro":{"name":"Geoloc","description":"Geolocation Tracker"},"ru":{"name":"Geoloc","description":"Geolocation Tracker"},"sk":{"name":"Geoloc","description":"Geolocation Tracker"},"sq":{"name":"Geoloc","description":"Geolocation Tracker"},"sr-Cyrl":{"name":"Geoloc","description":"Geolocation Tracker"},"sr-Latn":{"name":"Geoloc","description":"Geolocation Tracker"},"sv-SE":{"name":"Geoloc","description":"Geolocation Tracker"},"tr":{"name":"Geoloc","description":"Geolocation Tracker"},"zh-CN":{"name":"Geoloc","description":"Geolocation Tracker"},"zh-TW":{"name":"Geoloc","description":"Geolocation Tracker"}},"icons":{"84":"/style/icons/default_84.png","126":"/style/icons/default_126.png","142":"/style/icons/default_142.png","189":"/style/icons/default_189.png","284":"/style/icons/default_284.png"},"default_locale":"en-US","orientation":"portrait-primary","origin":"app://geoloc.gaiamobile.org","version":"2.5"}

Binary file not shown.

After

Width:  |  Height:  |  Size: 755 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 475 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 748 B

View file

@ -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);

View file

@ -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;
}

View file

@ -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));

View file

@ -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);

View file

@ -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;
}

View file

@ -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>

After

Width:  |  Height:  |  Size: 294 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 292 B

View file

@ -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>

View file

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 324 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 344 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 409 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 345 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 194 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 313 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 B

View file

@ -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>

View file

@ -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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 148 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 121 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 137 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 161 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 148 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 546 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 546 B

View file

@ -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>

View file

@ -0,0 +1,27 @@
html, body {
margin: 0;
padding: 0;
background-color: #fff;
}
body {
background: none;
}
li {
list-style: none;
margin-left: -2em;
text-align: right;
}
li span {
text-align: left;
}
fieldset legend {
text-transform: none;
}
span.desc {
padding: 1em;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB