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.

overrides/search.gaiamobile.org/home-bridge.js

@@ -0,0 +1,25 @@
+// The local page follows Gaia's language, independently of Gecko's locale.
+let welcomeLanguage=navigator.language;
+function sendWelcomeLanguage() {
+  document.getElementById('vulpes-local-home')?.contentWindow.postMessage({
+    type:'vulpes-welcome-language',language:welcomeLanguage
+  },location.origin);
+}
+if(navigator.mozSettings) {
+  const request=navigator.mozSettings.createLock().get('language.current');
+  request.onsuccess=()=>{welcomeLanguage=request.result['language.current'] || navigator.language;sendWelcomeLanguage();};
+  navigator.mozSettings.addObserver('language.current',event=>{
+    welcomeLanguage=event.settingValue || navigator.language;sendWelcomeLanguage();
+  });
+}
+// Only the bundled welcome frame may request browser navigation.
+addEventListener('message', event => {
+  const frame=document.getElementById('vulpes-local-home');
+  if(event.source!==frame?.contentWindow || event.origin!==location.origin) return;
+  if(event.data?.type==='vulpes-welcome-ready'){sendWelcomeLanguage();return;}
+  if(event.data?.type!=='vulpes-welcome-open') return;
+  let url;
+  try { url=new URL(event.data.url); } catch (_) { return; }
+  if(!['http:','https:'].includes(url.protocol)) return;
+  new MozActivity({name:'view',data:{type:'url',url:url.href}});
+});

overrides/search.gaiamobile.org/home/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="fr">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="theme-color" content="#06152d">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' file:; style-src 'self'; script-src 'self'; form-action https://duckduckgo.com; base-uri 'none'; object-src 'none'">
+<title>Accueil | Vulpes</title><link rel="icon" href="assets/logo.png"><link rel="stylesheet" href="welcome.css"><script src="welcome.js" defer></script>
+</head>
+<body>
+<header><a class="brand" href="index.html" aria-label="Vulpes"><img src="assets/logo.png" width="32" height="32" alt="">Vulpes</a><nav aria-label="Language"><button type="button" data-lang="fr" lang="fr" aria-pressed="true">FR</button><span aria-hidden="true">/</span><button type="button" data-lang="en" lang="en" aria-pressed="false">EN</button></nav></header>
+<main>
+<img class="nivi" src="assets/nivi.png" width="240" height="240" alt="Nivi">
+<h1 data-i18n="heading">Le Web vous attend.</h1><p class="intro" data-i18n="intro">Un nouvel onglet. À vous la suite.</p>
+<form action="https://duckduckgo.com/" method="get" id="search" role="search">
+<label for="query" data-i18n="label">Rechercher sur le Web</label>
+<div class="search"><input type="search" id="query" name="q" autocomplete="off" autocapitalize="none" spellcheck="false" placeholder="Une recherche ou une adresse…" required><button type="submit" aria-label="Rechercher"><span aria-hidden="true">→</span></button></div>
+<p class="hint" data-i18n="provider">Les recherches s’ouvrent avec DuckDuckGo.</p>
+</form>
+<nav class="shortcuts" aria-label="Raccourcis" id="shortcuts">
+<a href="https://vulpes-os.org/" data-site="/"><span aria-hidden="true">⌂</span><strong data-i18n="project">Vulpes OS</strong></a>
+<a href="https://vulpes-os.org/marketplace/" data-site="/marketplace/"><span aria-hidden="true">▦</span><strong>Marketplace</strong></a>
+<a href="https://vulpes-os.org/changelog.php" data-site="/changelog.php"><span aria-hidden="true">↗</span><strong data-i18n="news">Nouveautés</strong></a>
+</nav>
+<p class="offline" hidden data-i18n="offline">Vous êtes hors ligne. Cette page reste disponible ; les recherches et les liens nécessitent une connexion.</p>
+<noscript><p class="hint">FR / EN : activez JavaScript pour changer la langue. Enable JavaScript to switch languages. Web search works without it.</p></noscript>
+</main><footer><span data-i18n="footer">Libre, curieux, ouvert sur le Web.</span><small data-i18n="local">Page locale · Aucun suivi</small></footer>
+</body></html>

overrides/search.gaiamobile.org/home/welcome.css

@@ -0,0 +1 @@
+*{box-sizing:border-box}html{min-height:100%;background:#06152d}body{margin:0;background:radial-gradient(ellipse at 50% 25%,#103d68,transparent 65%);color:#f2f9ff;font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}button,input{font:inherit}header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;max-width:960px;margin:auto}.brand{display:flex;align-items:center;font-weight:700}.brand img{margin-right:8px}header nav{display:flex;align-items:center;color:#abc4d9}header button{background:none;border:0;border-bottom:2px solid transparent;color:#abc4d9;min-width:44px;min-height:44px;cursor:pointer}header button[aria-pressed=true]{border-color:#5ddaff;color:#5ddaff}main{max-width:620px;margin:20px auto 0;padding:0 20px;text-align:center}.nivi{width:150px;height:150px;object-fit:contain;display:block;margin:0 auto}h1{font-size:2rem;line-height:1.15;letter-spacing:-.04em;margin:12px 0}.intro{color:#c1d4e5;margin:0 0 26px}form label{display:block;text-align:left;font-size:.85rem;color:#c1d4e5;margin-bottom:6px}.search{display:flex;background:#fff;border-radius:12px;padding:4px;box-shadow:0 8px 30px #020c20}.search input{min-width:0;width:100%;border:0;background:transparent;color:#06152d;padding:12px;font-size:16px}.search button{flex-shrink:0;min-width:48px;min-height:48px;background:#126186;color:#fff;border:0;border-radius:9px;font-size:1.5rem;cursor:pointer}.hint{font-size:.75rem;color:#afc7dd;text-align:left}.shortcuts{display:flex;justify-content:center;flex-wrap:wrap;margin:30px 0}.shortcuts a{flex:1;min-width:80px;margin:4px;padding:12px 4px;border:1px solid #315577;border-radius:12px;background:#0b2544}.shortcuts a:hover{background:#16416b;border-color:#5ddaff}.shortcuts span{display:block;font-size:1.5rem;color:#73defe}.shortcuts strong{font-size:.8rem;font-weight:500}footer{text-align:center;padding:24px 12px;color:#c1d4e5;font-size:.8rem}footer small{display:block;color:#aac3da;margin-top:4px}a:focus,button:focus,input:focus{outline:2px solid #55cfee;outline-offset:3px}input:focus{outline-color:#126186}a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}[hidden]{display:none!important}.offline{font-size:.85rem;color:#ffe3a8;border:1px solid #705733;border-radius:8px;padding:12px}@media(max-height:650px){main{margin-top:0}.nivi{width:105px;height:105px}.shortcuts{margin:20px 0}footer{padding:12px}}@media(min-width:700px){main{margin-top:45px}.nivi{width:190px;height:190px}h1{font-size:2.5rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

overrides/search.gaiamobile.org/home/welcome.js

@@ -0,0 +1,47 @@
+(function () {
+  'use strict';
+  var copy = {
+    fr: {title:'Accueil | Vulpes',heading:'Le Web vous attend.',intro:'Un nouvel onglet. À vous la suite.',label:'Rechercher sur le Web',placeholder:'Une recherche ou une adresse…',provider:'Les recherches s’ouvrent avec DuckDuckGo.',project:'Vulpes OS',news:'Nouveautés',footer:'Libre, curieux, ouvert sur le Web.',local:'Page locale · Aucun suivi',search:'Rechercher',shortcuts:'Raccourcis',offline:'Vous êtes hors ligne. Cette page reste disponible ; les recherches et les liens nécessitent une connexion.'},
+    en: {title:'Home | Vulpes',heading:'The Web is yours.',intro:'A new tab. Where next?',label:'Search the Web',placeholder:'Search or enter an address…',provider:'Searches open with DuckDuckGo.',project:'Vulpes OS',news:'What’s new',footer:'Free, curious, open to the Web.',local:'Local page · No tracking',search:'Search',shortcuts:'Shortcuts',offline:'You’re offline. This page still works; searches and links need a connection.'}
+  };
+  var language = /^fr(?:-|$)/i.test(navigator.language || '') ? 'fr' : 'en';
+  var buttons=document.querySelectorAll('[data-lang]');
+  function translate(code) {
+    language=code;document.documentElement.lang=code;document.title=copy[code].title;
+    var nodes=document.querySelectorAll('[data-i18n]');
+    for(var i=0;i<nodes.length;i++) nodes[i].textContent=copy[code][nodes[i].getAttribute('data-i18n')];
+    for(var j=0;j<buttons.length;j++) buttons[j].setAttribute('aria-pressed',buttons[j].getAttribute('data-lang')===code?'true':'false');
+    document.getElementById('query').placeholder=copy[code].placeholder;
+    document.querySelector('[type=submit]').setAttribute('aria-label',copy[code].search);
+    document.getElementById('shortcuts').setAttribute('aria-label',copy[code].shortcuts);
+    var links=document.querySelectorAll('[data-site]');
+    for(var k=0;k<links.length;k++) links[k].href='https://vulpes-os.org'+links[k].getAttribute('data-site')+'?lang='+code;
+  }
+  for(var i=0;i<buttons.length;i++) buttons[i].addEventListener('click',function(){var code=this.getAttribute('data-lang');translate(code);});
+  function navigate(url) {
+    // Keep external pages in Gaia's browser rather than the nested home frame.
+    if (parent !== window) parent.postMessage({type:'vulpes-welcome-open',url:url}, location.origin);
+    else window.location.href=url;
+  }
+  document.addEventListener('click',function(e){
+    var link=e.target.closest('a[href]');
+    if(link && /^https?:/.test(link.href)){e.preventDefault();navigate(link.href);}
+  });
+  document.getElementById('search').addEventListener('submit',function(e){
+    e.preventDefault();
+    var value=document.getElementById('query').value.replace(/^\s+|\s+$/g,'');
+    if(!value){e.preventDefault();return;}
+    if(/^https?:\/\/[^\s]+$/i.test(value)){e.preventDefault();navigate(value);}
+    else if(/^(localhost(?::\d+)?|(?:[a-z0-9-]+\.)+[a-z]{2,})(?::\d+)?(?:[/?#][^\s]*)?$/i.test(value)){e.preventDefault();navigate('https://'+value);}
+    else navigate('https://duckduckgo.com/?q='+encodeURIComponent(value));
+  });
+  function network(){document.querySelector('.offline').hidden=navigator.onLine!==false;}
+  window.addEventListener('online',network);window.addEventListener('offline',network);
+  window.addEventListener('languagechange',function(){translate(/^fr(?:-|$)/i.test(navigator.language || '')?'fr':'en');});
+  window.addEventListener('message',function(event){
+    if(event.source!==parent || event.origin!==location.origin || !event.data || event.data.type!=='vulpes-welcome-language') return;
+    translate(/^fr(?:-|$)/i.test(event.data.language || '')?'fr':'en');
+  });
+  translate(language);network();
+  if(parent!==window) parent.postMessage({type:'vulpes-welcome-ready'},location.origin);
+}());

overrides/search.gaiamobile.org/newtab.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="theme-color" content="#fff">
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
+    <link rel="stylesheet" href="style/newtab.css">
+    <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/newtab.{locale}.json">
+    
+
+    <!-- <script defer="" src="shared/js/l10n.js"></script> -->
+    <!-- <script defer="" src="shared/js/lazy_loader.js"></script> -->
+    <!-- <script defer="" src="shared/js/async_storage.js"></script> -->
+    <!-- <script defer="" src="js/places_idb.js"></script> -->
+    <!-- <script defer="" src="shared/js/sync_datastore.js"></script> -->
+    <!-- <script defer="" src="shared/js/url_helper.js"></script> -->
+    <!-- <script defer="" src="shared/js/utilities.js"></script> -->
+    <!-- <script defer="" src="shared/js/settings_listener.js"></script> -->
+
+    <!-- <script src="shared/js/component_utils.js"></script> -->
+    <!-- <script src="shared/elements/gaia_buttons/script.js"></script> -->
+    <!-- <script src="shared/elements/gaia_checkbox/script.js"></script> --><script src="./gaia_build_newtab.js" type="text/javascript"></script>
+
+    <!-- <script defer="" src="js/newtab.js"></script> -->
+    <!-- <script defer="" src="shared/js/icons_helper.js"></script> -->
+    <!-- <script defer="" src="js/providers/provider.js"></script> -->
+    <!-- <script defer="" src="js/providers/grid_provider.js"></script> -->
+    <!-- <script defer="" src="js/providers/places.js"></script> --><script src="./gaia_build_defer_newtab.js" defer="" type="text/javascript"></script>
+  <script defer src="home-bridge.js"></script><meta content="2.5" name="appVersion"></head>
+  <body>
+    <div id="private-window-dialog" hidden="">
+      <h1 data-l10n-id="private-window-header">You’re browsing privately</h1>
+      <p data-l10n-id="private-window-info1">In private windows, ⁨Foxfood⁩ won’t keep any browser history, cookies, or temporary Internet files. However, files you download and bookmarks you make will be kept.</p>
+      <p data-l10n-id="private-window-info2">While this device won’t have a record of your browsing history, your Internet service provider can still track the pages you visit.</p>
+      <p>
+        <a id="private-learn-more" target="_blank" href="https://support.mozilla.org/kb/private-browsing-firefox-os" data-l10n-id="private-learn-more">Learn more</a>
+      </p>
+      <gaia-checkbox class="inline">
+        <label data-l10n-id="private-window-dont-tell">Don’t tell me again</label>
+      </gaia-checkbox>
+      <gaia-buttons class="inline">
+        <button type="submit" data-l10n-id="ok" id="private-window-hide-dialog" class="full">OK</button>
+      </gaia-buttons>
+    </div>
+    <iframe title="Vulpes" src="home/index.html" style="border:0;width:100%;height:100%;position:absolute;inset:0" id="vulpes-local-home"></iframe>
+    <style>body:not(.private) #top-sites-header, body:not(.private) #top-sites, body:not(.private) #history {display:none} body.private #vulpes-local-home {display:none}</style>
+    <h2 id="top-sites-header"><span data-l10n-id="top-sites">TOP SITES</span></h2>
+    <section id="top-sites" aria-labelledby="top-sites-header"></section>
+    <section id="history" class="local"></section>
+  </body>
+
+</html>

overrides/search.gaiamobile.org/shared/elements/gaia_checkbox/style.css

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

overrides/search.gaiamobile.org/shared/elements/gaia_grid/style.css

@@ -0,0 +1,409 @@
+.icon[data-app-state="loading"]:after {
+  content: "";
+  background: no-repeat top center image-set(url("images/app_install_spinner.png") 1x, url("images/app_install_spinner@1.5x.png") 1.5x, url("images/app_install_spinner@2x.png") 2x, url("images/app_install_spinner@2.25x.png") 2.25x);
+  background-size: contain;
+  height: 8.4rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  /**
+  Keyframe must be defined outside of the web component.
+  See bug 1018269
+  */
+
+  animation: rotate 2.25s linear infinite;
+}
+
+.icon[data-app-state="loading"] {
+  /**
+  We must align this value with the value of [data-app-state]:after height the background size
+  here is overridden at the element level elsewhere which causes the spinner to be aligned too
+  low.
+  */
+  background-size: 8.4rem !important;
+  background-image: image-set(url("images/app_installing.png") 1x, url("images/app_installing@1.5x.png") 1.5x, url("images/app_installing@2x.png") 2x, url("images/app_installing@2.25x.png") 2.25x) !important;
+}
+
+.icon[data-app-state="unrecoverable"] {
+  background-image: image-set(url("images/app_install_unrecoverable.png") 1x, url("images/app_install_unrecoverable@1.5x.png") 1.5x, url("images/app_install_unrecoverable@2x.png") 2x, url("images/app_install_unrecoverable@2.25x.png") 2.25x) !important;
+}
+
+.icon[data-app-state="error"] {
+  background-image: image-set(url("images/app_install_failed.png") 1x, url("images/app_install_failed@1.5x.png") 1.5x, url("images/app_install_failed@2x.png") 2x, url("images/app_install_failed@2.25x.png") 2.25x) !important;
+}
+
+.icon[data-app-state="paused"] {
+  background-image: image-set(url("images/app_install_canceled.png") 1x, url("images/app_install_canceled@1.5x.png") 1.5x, url("images/app_install_canceled@2x.png") 2x, url("images/app_install_canceled@2.25x.png") 2.25x) !important;
+}
+
+.icon {
+  position: absolute;
+  transform-origin: 0 0;
+  display: inline-block;
+  text-align: center;
+  background: no-repeat top center;
+  z-index: 3;
+  outline: 0;
+}
+
+.icon.launching {
+  opacity: .65;
+}
+
+/* XXX: Override the .remove element  */
+.edit-mode .collection.hovered .remove {
+  background: image-set(url("images/add.png") 1x, url("images/add@1.5x.png") 1.5x, url("images/add@2x.png") 2x, url("images/add@2.25x.png") 2.25x) no-repeat;
+  background-size: 2rem;
+}
+
+.icon p {
+  pointer-events: none;
+  height: 3.2rem;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.icon .title {
+  display: inline-block;
+  margin-top: 0.1rem;
+  /* We need this rule in order not to hide the drop shadow */
+  padding: 0 0.2rem 1rem;
+  text-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3),
+               0.2rem 0.4rem 1rem rgba(0, 0, 0, 0.4);
+  font-size: 1.4rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: calc(100% - 0.4rem);
+  box-sizing: border-box;
+  vertical-align: top;
+  transition: opacity var(--transition-duration);
+}
+
+/* We allow more space for text in the search app by hooking into the text-rows attribute on gaia-grid. */
+[text-rows="3"] .icon .title {
+  height: 5.8rem;
+}
+
+[cols="4"] .icon .title {
+  /* Font size is the same independent on grid configuration */
+  font-size: calc(1.2rem * 1.333);
+  margin-top: 0.5rem;
+  line-height: 1.94rem;
+}
+
+.edit-mode .icon.collapsed {
+  pointer-events: none;
+}
+
+.icon.collapsed .title {
+  opacity: 0;
+}
+
+.icon.hidden {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.divider {
+  position: absolute;
+  width: 100%;
+  padding-top: 2.3rem;
+  border-left: 0.6rem solid transparent;
+  border-right: 0.6rem solid transparent;
+  box-sizing: border-box;
+  z-index: 2;
+}
+
+[cols="4"] .divider {
+  padding-top: 1.6rem;
+}
+
+.divider span.spacer {
+  position: absolute;
+  bottom: 0;
+  display: block;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5));
+  margin: 0 25%;
+  width: 50%;
+  height: 0.2rem;
+  transition: opacity var(--transition-duration);
+}
+
+.dragging .icon.active:not(.hidden) {
+  z-index: 6;
+  opacity: 0.65;
+}
+
+.dragging .divider:not(.group),
+.icon:not(.active),
+.dropped {
+  transition: transform var(--transition-duration),
+              opacity var(--transition-duration);
+}
+
+.icon.active {
+  will-change: transform;
+}
+
+.edit-mode .icon .remove {
+  display: block;
+  position: absolute;
+  top: 0.1rem;
+  left: 0.5rem;
+  width: 2.6rem;
+  height: 2.6rem;
+  background: image-set(url("images/remove.png") 1x, url("images/remove@1.5x.png") 1.5x, url("images/remove@2x.png") 2x, url("images/remove@2.25x.png") 2.25x) no-repeat;
+  background-size: 2rem;
+  /*
+  Ensure that remove is on top of the icon and has some extra
+  padding so it is easy to click.
+  */
+  z-index: 200;
+  padding: 0.5rem;
+}
+
+.icon .remove,
+.icon.collapsed .remove,
+.edit-mode .icon.active .remove {
+  display: none;
+}
+
+.edit-mode .icon.editable .title {
+  background-color: rgba(132, 132, 132, 0.7);
+  border-radius: 2rem;
+  margin-top: .4rem;
+  padding: 0 1rem;
+  width: auto;
+  max-width: 100%;
+}
+
+/*
+Disable events for placeholders, so we don't trigger touch events in edit mode.
+We only do this in edit-mode, otherwise we might trigger entering edit mode
+instead of the context menu.
+*/
+.edit-mode .placeholder {
+  pointer-events: none;
+}
+
+#confirm-message {
+  z-index: 100;
+}
+
+.dragging .group.active {
+  z-index: 5;
+}
+
+.divider.group {
+  border: none;
+  padding: 0;
+}
+
+.group > span {
+  display: block;
+  position: absolute;
+  width: 100%;
+  transition: background-color var(--transition-duration),
+              opacity var(--transition-duration);
+}
+
+.group:not(.active):not(.newly-created) > span {
+  transition: background-color var(--transition-duration),
+              opacity var(--transition-duration),
+              transform var(--transition-duration);
+}
+
+.group.active > span {
+  will-change: transform;
+}
+
+.group .header {
+  height: 4rem;
+  z-index: 4;
+}
+
+.group .header span,
+.group .header button {
+  position: absolute;
+  height: 4rem;
+  top: 0;
+
+  background-position: center top;
+  background-repeat: no-repeat;
+  background-size: 100% 2rem;
+
+  transition: transform 0.25s, opacity 0.25s;
+}
+
+.group .header .gripper {
+  left: calc(50% - 4.2rem);
+  width: 8.4rem;
+  background-image: image-set(url("images/move_gripper.png") 1x, url("images/move_gripper@1.5x.png") 1.5x, url("images/move_gripper@2x.png") 2x, url("images/move_gripper@2.25x.png") 2.25x);
+  opacity: 0;
+  transform: translate(0, -100%);
+  pointer-events: none;
+}
+
+.edit-mode .group:not(.collapsed) .header .gripper {
+  opacity: 1;
+  transform: translate(0, 0);
+  pointer-events: auto;
+}
+
+.group .header .toggle {
+  width: 5.34rem;
+  right: 0;
+
+  border: none;
+  margin: 0;
+  padding: 0;
+
+  background-color: transparent;
+  background-image: image-set(url("images/collapse_arrow.png") 1x, url("images/collapse_arrow@1.5x.png") 1.5x, url("images/collapse_arrow@2x.png") 2x, url("images/collapse_arrow@2.25x.png") 2.25x);
+  transform-origin: 50% 1.6rem;
+  pointer-events: auto;
+}
+
+.group .header .toggle.toggling {
+  opacity: 0.5;
+  transition: transform 0.25s;
+}
+
+.group.collapsed .header .toggle {
+  transform: translateY(2rem) rotateZ(180deg);
+}
+
+.group.active .header .toggle {
+  opacity: 0.5;
+}
+
+.group .background {
+  background-color: rgba(255, 255, 255, 0.15);
+  opacity: 0;
+  pointer-events: none;
+  height: 0.1rem;
+  transform-origin: 0 0;
+}
+
+.group.odd:not(.newly-created) .background,
+.edit-mode .group:not(.newly-created) .background {
+  opacity: 1;
+}
+
+.group.active .background {
+  background-color: rgba(51, 51, 51, 0.9);
+}
+
+.group.hovering .background,
+.group.drop-target .background {
+  background-color: rgba(27, 185, 225, 0.5);
+}
+
+.group .shadow {
+  background-color: rgba(255, 255, 255, 0.15);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.edit-mode .group.active .shadow {
+  background-color: transparent;
+  box-shadow: 0 0.9rem 1.2rem rgba(0, 0, 0, 0.63);
+  opacity: 1;
+}
+
+.group .separator {
+  margin: 0;
+  height: 0.8rem;
+  pointer-events: none;
+}
+
+.group .separator > span {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.25s, opacity 0.25s;
+  opacity: 0;
+}
+
+.group.odd .separator {
+  opacity: 1;
+}
+
+.group.odd .separator > span {
+  background-color: rgba(255, 255, 255, 0.15);
+  opacity: 1;
+}
+
+.edit-mode .group .separator,
+.edit-mode .group .separator > span {
+  opacity: 0;
+}
+
+/* For preventing entering edit mode when long-pressing on a placeholder */
+.edit-mode .group .background,
+.edit-mode .group .shadow,
+
+.group.collapsed .header,
+.group.collapsed .background,
+.group.collapsed .shadow {
+  pointer-events: none;
+}
+
+.edit-mode .group.collapsed .background {
+  pointer-events: auto;
+}
+
+.dragging .group:not(.active) .separator {
+  opacity: 1;
+}
+
+.dragging .group:not(.active):not(.invalid-drop) .separator > span {
+  background-color: #0095dd;
+  transform: scaleY(0.325);
+  opacity: 0.4;
+}
+
+.dragging .group.hovered:not(.active) .separator > span {
+  transform: scaleY(1);
+  opacity: 1;
+}
+
+/* A hint element for dragging items to the top of the group */
+.edit-mode::after {
+  content: ' ';
+  display: block;
+  width: 100%;
+  height: 0.8rem;
+  z-index: 2;
+  opacity: 0;
+  background-color: #0095dd;
+
+  position: relative;
+  top: -0.8rem;
+  transition: opacity 0.25s;
+}
+
+.edit-mode.hover-over-top::after {
+  opacity: 1;
+}
+
+/* Shift container downwards when hovering over the top to reveal the group
+ * creation hint.
+ */
+.edit-mode {
+  transition: transform 0.25s;
+}
+
+.edit-mode.hover-over-top {
+  transform: translateY(0.8rem);
+}
+
+/* RTL View */
+:-moz-dir(rtl) .group .header .toggle {
+  left: 0;
+  right: unset;
+}

overrides/search.gaiamobile.org/shared/style/progress_activity.css

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

overrides/search.gaiamobile.org/style/newtab.css

@@ -0,0 +1,218 @@
+/*csslint empty-rules: false*/
+/* See bug 1053721 for csslint empty rule requirement. */
+:root {
+  --primary-background-color: #fff;
+  --results-header-color: #a6a6a6;
+  --divider-color: #e5e5e5;
+  --history-result-title-color: #4d4d4d;
+}
+
+body.private {
+  --primary-background-color: #392E54;
+  --results-header-color: #858585;
+  --divider-color: #454545;
+  --history-result-title-color: #9e9e9e;
+}
+
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  font-size: 10px;
+  box-sizing: border-box;
+  background: #fff;
+  overflow-x: hidden;
+}
+
+body {
+  padding: 0.5rem 1rem;
+}
+
+html[dir="ltr"] { text-align: left; }
+html[dir="rtl"] { text-align: right; }
+
+h2,
+#history h3:first-child {
+  text-align: center;
+  border-top: 0.2rem solid var(--divider-color);
+  font-size: 1.4rem;
+  margin-top: 0.9rem;
+  margin-bottom: -0.9rem;
+  color: var(--results-header-color);
+  font-style: normal;
+  -moz-user-select: none;
+}
+
+h2 span,
+#history h3:first-child span {
+  position: relative;
+  top: -0.9rem;
+  background: var(--primary-background-color);
+  padding: 0.5rem;
+  margin-bottom: 0;
+  font-weight: 500;
+}
+
+#top-sites {
+  overflow: auto;
+  margin-top: 1rem;
+  -moz-user-select: none;
+}
+
+#top-sites .top-site:nth-child(2n) {
+  margin-inline-start: 1rem;
+}
+
+.top-site {
+  display: block;
+  width: calc(50% - 0.5rem);
+  height: 9rem;
+  background-color: rgba(255, 255, 255, 0.3);
+  background-size: cover;
+  position: relative;
+  margin-bottom: 1rem;
+  border: 0.1rem solid rgba(133,133,133, 0.8);
+  box-sizing: border-box;
+}
+html[dir="ltr"] .top-site { float: left; }
+html[dir="rtl"] .top-site { float: right; }
+
+.top-site span {
+  box-sizing: border-box;
+  font-size: 1.3rem;
+  font-style: italic;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: rgba(0, 0, 0, 0.7);
+  position: absolute;
+  bottom: 0;
+  padding: 0.2rem;
+  pointer-events: none;
+  color: #fff;
+}
+
+#history {
+  margin-top: 2.1rem;
+}
+
+#history .result {
+  font-size: 1.6rem;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
+  padding: 1rem 0.7rem;
+  overflow: hidden;
+  color: var(--history-result-title-color);
+}
+
+#history .result * {
+  pointer-events: none;
+}
+
+#history .result .description {
+  width: calc(100% - 1.8rem);
+}
+
+#history .icon {
+  margin-top: 0.3rem;
+  margin-bottom: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0.8rem;
+  display: block;
+  flex: 0 0 1.6rem;
+  width: 1.6rem;
+  height: 1.6rem;
+}
+
+#history .icon img {
+  display: none;
+  width: 100%;
+  height: 100%;
+}
+
+#history .icon.empty {
+  border: 0.1rem dashed #5A5A5A;
+  border-radius: 0.2rem;
+}
+
+#history .meta {
+  font-size: 1.2rem;
+  color: #5f5f5f;
+  direction: ltr;
+}
+
+#history .title, #history .meta {
+  display: block;
+  white-space:nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+section h3 {
+  text-align: center;
+  font-size: 1.4rem;
+  font-style: italic;
+  color: #858585;
+  font-weight: normal;
+  margin-top: 1rem;
+  -moz-user-select: none;
+}
+
+/* Pseudo-private view */
+body.private {
+  background: var(--primary-background-color);
+}
+
+/* Private browser dialog */
+#private-window-dialog {
+  min-height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  padding: 15rem 2rem 0;
+  -moz-box-sizing: border-box;
+  background: var(--primary-background-color) image-set(url("images/pb_dialog.png") 1x, url("images/pb_dialog@1.5x.png") 1.5x, url("images/pb_dialog@2x.png") 2x, url("images/pb_dialog@2.25x.png") 2.25x) no-repeat center 2rem / 10.2rem 11.6rem;
+}
+
+#private-window-dialog[hidden] {
+  display: none;
+}
+
+#private-window-dialog h1 {
+  font-size: 2rem;
+  color: #fff;
+  text-align: center;
+  font-weight: 300;
+  font-style: italic;
+  margin-bottom: 1.5rem;
+}
+
+#private-window-dialog a,
+#private-window-dialog p {
+  color: #fff;
+  font-size: 1.3rem;
+  line-height: 1.8rem;
+  margin-bottom: 1.2rem;
+}
+
+#private-window-dialog a {
+  color: #00caf2;
+}
+
+#private-window-dialog gaia-checkbox {
+  margin: 10px 0;
+}
+
+#private-window-dialog gaia-checkbox label {
+  color: #fff;
+  font-size: 1.3rem;
+}

overrides/search.gaiamobile.org/style/search.css

@@ -0,0 +1,321 @@
+/* Only include gaia-theme to get CSS variables, the transition-duration one
+   in particular. Other parts of gaia-theme are not used. */
+@import url('../shared/elements/gaia-theme/gaia-theme.css');
+
+/**
+ * Disable selection by default except for elements with
+ * "contenteditable".
+ */
+* {
+  margin: 0;
+  padding: 0;
+  -moz-user-select: none;
+}
+
+html[dir="ltr"] { text-align: left; }
+html[dir="rtl"] { text-align: right; }
+
+[contenteditable="true"] {
+  -moz-user-select: text;
+}
+
+html, body {
+  height: 100%;
+  font-size: 10px;
+}
+
+body, a {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+#offline-message {
+  font-size: 1.4rem;
+  font-style: italic;
+  margin: 0;
+  margin-inline-end: 1rem;
+  height: 4.2rem;
+  padding-bottom: 1.3rem;
+  text-align: center;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+
+#settings-connectivity {
+  background: image-set(url("/style/icons/settings.png") 1x, url("/style/icons/settings@1.5x.png") 1.5x, url("/style/icons/settings@2x.png") 2x, url("/style/icons/settings@2.25x.png") 2.25x) no-repeat 50% 50% / 1.4rem;
+  width: 1.4rem;
+  height: 1.4rem;
+  margin-top: -0.1rem;
+  padding-inline-end: 0.8rem;
+}
+
+#search-results {
+  padding-top: 1.3rem;
+}
+
+#search-results.offline #suggestions {
+  display: none;
+}
+
+#search-results.offline #offline-message {
+  display: flex;
+}
+
+#suggestions-provider {
+  color: #00aac5;
+  position: relative;
+  padding: 0;
+  padding-inline-end: 2rem;
+  padding-inline-start: 1rem;
+}
+
+#suggestions-provider-dropdown {
+  content: ' ';
+  position: absolute;
+  top: -.4rem;
+  margin-inline-start: -1.4rem;
+  width: 0;
+  height: 0;
+  background: none;
+  padding: 0;
+  border-style: solid;
+  border-color: transparent transparent #00aac5 transparent;
+}
+html[dir="ltr"] #suggestions-provider-dropdown {
+  border-width: 0 0 .8rem .8rem;
+}
+html[dir="rtl"] #suggestions-provider-dropdown {
+  border-width: 0 .8rem .8rem 0;
+}
+
+
+#suggestions {
+  font-size: 1.6rem;
+  overflow-x: hidden;
+  margin-inline-end: 1.6rem;
+}
+
+#suggestions ul {
+  list-style: none;
+  white-space: nowrap;
+  padding-inline-start: 0;
+}
+
+#suggestions li {
+  height: 6rem;
+  line-height: 6rem;
+  margin: 0;
+  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.05);
+  background: image-set(url("/style/icons/search.png") 1x, url("/style/icons/search@1.5x.png") 1.5x, url("/style/icons/search@2x.png") 2x, url("/style/icons/search@2.25x.png") 2.25x) no-repeat;
+  background-size: 3rem;
+  padding-inline-start: 4.5rem;
+  width: 100%;
+  unicode-bidi: -moz-plaintext;
+}
+html[dir="ltr"] #suggestions li { background-position: left 0.8rem center; }
+html[dir="rtl"] #suggestions li { background-position: right 0.8rem center; }
+
+section .result * {
+  pointer-events: none;
+}
+
+h2 {
+  position: relative;
+  text-align: center;
+  border-top: 0.3rem solid #5f5f5f;
+  font-size: 1.4rem;
+  color: #858585;
+  margin-top: 0.9rem;
+  margin-bottom: -0.9rem;
+  margin-inline-start: 0.5rem;
+  margin-inline-end: 0.6rem;
+}
+
+/* The select box is hidden behind search provider label since we
+    only want to see the dialog prompt, not the actual select box  */
+#suggestions-select {
+  position: absolute;
+  top: 0;
+  opacity: 0;
+}
+
+h2 span, h2 label {
+  position: relative;
+  top: -0.9rem;
+  background: #333;
+  padding: 0 1rem;
+  margin-bottom: 0;
+  font-weight: 500;
+}
+
+#places-header {
+  margin-top: 0.9rem;
+}
+
+#places-header.hidden {
+  display: none;
+}
+
+.local .result {
+  display: flex;
+  flex-direction: row;
+  padding: 0.8rem 1.5rem;
+  position: relative;
+}
+
+.local .result:after {
+  position: absolute;
+  bottom: 0;
+  content: " ";
+  width: calc(100% - 1rem);
+  height: 0.1rem;
+  background: #535353;
+  left: 0.5rem;
+  right: 0.5rem;
+}
+
+.local .result:last-child:after {
+  display: none;
+}
+
+.local .result:active {
+  background-color: #3e666e;
+}
+
+.local .icon {
+  margin: 0;
+  margin-top: 0.4rem;
+  margin-inline-end: 1.6rem;
+  display: block;
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+}
+
+.local .icon img {
+  width: 32px;
+  height: 32px;
+}
+
+.local .icon.empty {
+  border: 1px dashed #5A5A5A;
+  border-radius: 2px;
+}
+
+.local .icon.empty img {
+  opacity: 0;
+}
+
+.local .title, .local .meta {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.local .description {
+  overflow: hidden;
+}
+
+.local .title {
+  color: #e7e7e7;
+  font-size: 1.5rem;
+}
+
+.local .meta {
+  color: #858585;
+  font-size: 1.4rem;
+}
+
+.local .highlight {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+/* web */
+section.apps {
+  /* Hide the whitespace between inline elements */
+  font-size: 0;
+  height: 10rem;
+  overflow: hidden;
+  padding-bottom: 1.5rem;
+}
+
+gaia-grid {
+  display: block;
+  height: 100%;
+  width: 100%;
+  text-align: left; /* workaround the fact gaia-grid has a direction: 'ltr' */
+}
+
+.hidden {
+  display: none;
+}
+
+#suggestions-notice-wrapper {
+  background: rgba(45, 45, 45, 0.94);
+  z-index: 100;
+  border-radius: 2px;
+  position: absolute;
+  margin: 1rem 1.5rem 0;
+}
+
+#suggestions-notice-wrapper p {
+  padding: 1.5rem;
+  font-size: 1.6rem;
+  font-style: italic;
+}
+
+#suggestions-notice-confirm {
+  display: block;
+  width: 100%;
+  color: #00AACC;
+  background: none;
+  border: none;
+  border-top: 0.1rem solid rgba(255, 255, 255, 0.05);
+  border-radius: 0;
+  padding: 1rem;
+  font-size: 16px;
+  font-style: italic;
+}
+
+#settings-link {
+  color: #00AACC;
+}
+
+#suggestions-notice-wrapper::before {
+  content: ' ';
+  height: 0;
+  width: 0;
+  position: absolute;
+  border-style: solid;
+  border-width: 0 1rem 1rem;
+  border-color: transparent transparent rgba(45, 45, 45, 0.94) transparent;
+  top: -1rem;
+  margin-inline-start: calc(50% - 1rem);
+  z-index: -1;
+}
+
+/* show up to 2-line labels in result icons */
+#search-results .icon .title {
+  text-shadow: none !important;
+  height: calc(3.88rem + 0.2rem);
+  white-space: normal !important;
+}
+
+.loading {
+  display: none;
+  padding: 2.5rem 0;
+  text-align: center;
+  width: 100%;
+}
+
+[data-loading=true] .loading {
+  display: block;
+}
+
+#places .meta {
+  direction: ltr;
+}
+html[dir="ltr"] #places .meta { text-align: left; }
+html[dir="rtl"] #places .meta { text-align: right; }