Pontoon: Update Russian (ru) localization of Firefox Send

Co-authored-by: Victor Ibragimov <victor.ibragimov@gmail.com>

.circleci/config.yml

@@ -1,70 +1,48 @@
 version: 2.0
 jobs:
-  build:
-    docker:
-      - image: circleci/node:10
-    steps:
-      - checkout
-      - restore_cache:
-          key: send-{{ checksum "package-lock.json" }}
-      - run: npm install
-      - save_cache:
-          key: send-{{ checksum "package-lock.json" }}
-          paths:
-            - node_modules
-      - run: npm run build
-      - persist_to_workspace:
-          root: .
-          paths:
-            - ./dist
   test:
     docker:
-      - image: circleci/node:10-browsers
+      - image: circleci/node:12-browsers
     steps:
       - checkout
-      - restore_cache:
-          key: send-{{ checksum "package-lock.json" }}
-      - run: npm install
-      - save_cache:
-          key: send-{{ checksum "package-lock.json" }}
-          paths:
-            - node_modules
-      - run: npm run check
+      - run: npm ci
       - run: npm run lint
-      - run: npm run test
+      - run: npm test
       - store_artifacts:
           path: coverage
   integration_tests:
-    machine: true
+    docker:
+      - image: circleci/node:12-browsers
     steps:
       - checkout
-      - attach_workspace:
-          at: .
+      - run: npm ci
       - run:
-          name: Install Docker Compose
-          command: |
-            set -x
-            pip install docker-compose>=1.18
-            docker-compose --version
-      - run:
-          command: npm run test-integration
-      - store_artifacts:
-          path: coverage/send-test.html
+          name: Run integration test
+          command: ./scripts/bin/run-integration-test-circleci.sh
   deploy_dev:
-    machine: true
+    docker:
+      - image: circleci/node:12
     steps:
       - checkout
-      - attach_workspace:
-          at: .
+      - setup_remote_docker
       - run: docker login -u $DOCKER_USER -p $DOCKER_PASS
       - run: docker build -t mozilla/send:latest .
       - run: docker push mozilla/send:latest
-  deploy_stage:
-    machine: true
+  deploy_vnext:
+    docker:
+      - image: circleci/node:12
     steps:
       - checkout
-      - attach_workspace:
-          at: .
+      - setup_remote_docker
+      - run: docker login -u $DOCKER_USER -p $DOCKER_PASS
+      - run: docker build -t mozilla/send:vnext .
+      - run: docker push mozilla/send:vnext
+  deploy_stage:
+    docker:
+      - image: circleci/node:12
+    steps:
+      - checkout
+      - setup_remote_docker
       - run: docker login -u $DOCKER_USER -p $DOCKER_PASS
       - run: docker build -t mozilla/send:$CIRCLE_TAG .
       - run: docker push mozilla/send:$CIRCLE_TAG
@@ -72,44 +50,32 @@ workflows:
   version: 2
   test_pr:
     jobs:
-      - build:
-          filters:
-            branches:
-              ignore: master
       - test:
           filters:
             branches:
-              ignore: master
+              ignore:
+                - master
+                - vnext
       - integration_tests:
           filters:
             branches:
               ignore: master
-          requires:
-            - build
   build_and_deploy_dev:
     jobs:
-      - build:
+      - deploy_dev:
           filters:
             branches:
               only: master
             tags:
               ignore: /^v.*/
-      - deploy_dev:
-          requires:
-            - build
+      - deploy_vnext:
           filters:
             branches:
-              only: master
+              only: vnext
             tags:
               ignore: /^v.*/
   build_and_deploy_stage:
     jobs:
-      - build:
-          filters:
-            branches:
-              ignore: /.*/
-            tags:
-              only: /^v.*/
       - test:
           filters:
             branches:
@@ -117,8 +83,6 @@ workflows:
             tags:
               only: /^v.*/
       - integration_tests:
-          requires:
-            - build
           filters:
             branches:
               ignore: /.*/
@@ -126,7 +90,6 @@ workflows:
               only: /^v.*/
       - deploy_stage:
           requires:
-            - build
             - test
             - integration_tests
           filters:

.dockerignore

@@ -1,11 +1,8 @@
-node_modules
-.git
-.tox
-.DS_Store
-firefox
-assets
-docs
-public
-test
-coverage
+.circleci
 .nyc_output
+.vscode
+.DS_Store
+coverage
+docs
+firefox
+node_modules

.eslintignore

@@ -2,3 +2,6 @@ dist
 assets
 firefox
 coverage
+android/app/build
+app/locale.js
+app/capabilities.js

.eslintrc.yml

@@ -4,6 +4,7 @@ env:
 
 extends:
   - eslint:recommended
+  - prettier
   - plugin:node/recommended
   - plugin:security/recommended
 
@@ -14,18 +15,14 @@ plugins:
 root: true
 
 rules:
+  node/no-deprecated-api: off
+  node/no-unsupported-features/es-syntax: off
+  node/no-unsupported-features/node-builtins: off
   node/no-unpublished-require: off
+  node/no-unpublished-import: off
 
   security/detect-non-literal-fs-filename: off
   security/detect-object-injection: off
 
-  eol-last: [error, always]
-  eqeqeq: error
-  no-alert: warn
-  no-console: warn
-  no-path-concat: error
   no-unused-vars: [error, {argsIgnorePattern: "^_|err|event|next|reject"}]
-  no-var: error
-  one-var: [error, never]
-  prefer-const: error
-  quotes: [error, single, {avoidEscape: true}]
+  require-atomic-updates: warn

.gitignore

@@ -6,3 +6,10 @@ dist
 .nyc_output
 .tox
 .pytest_cache
+*.iml
+android/app/src/main/assets
+ios/send-ios/assets/ios.js
+ios/send-ios/assets/vendor.js
+ios/send-ios.xcodeproj/project.xcworkspace/xcuserdata/*
+ios/send-ios.xcodeproj/xcuserdata/*
+test/integration/downloads

.prettierignore

@@ -1,3 +1,4 @@
 dist
-assets/*.js
+android/app/src/main/assets
+android/app/build
 coverage

.pyup.yml

@@ -1,7 +0,0 @@
-# autogenerated pyup.io config file
-# see https://pyup.io/docs/configuration/ for all available options
-
-schedule: every week
-requirements:
-- test/integration/Pipfile
-- test/integration/pipenv.txt

.stylelintrc

@@ -10,3 +10,4 @@ rules:
   declaration-colon-newline-after: null
   selector-list-comma-newline-after: null
   value-list-comma-newline-after: null
+  at-rule-no-unknown: null

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,15 @@
+# Community Participation Guidelines
+
+This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
+For more details, please read the
+[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
+
+## How to Report
+For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
+
+<!--
+## Project Specific Etiquette
+
+In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
+Please update for your project.
+-->

CONTRIBUTORS

@@ -1,72 +1,121 @@
 Abdalrahman Hwoij
 Abhinav Adduri
 Adnan Kičin
+Adolfo Jayme Barrientos
 Alberto Castro
 Alexander Slovesnik
 Alfredos-Panagiotis Damkalis
+Aman Alam
 Amin Mahmudian
+Ander Elortondo
 Andreas Pettersson
+Anesu Chiodza
+Anika Dorn
+Anish Sheela
 Arash Mousavi
 Artem Polivanchuk
 Ashikur Rahman
+Ashok kumar
+Balasankar C
 Balázs Meskó
 Belayet Hossain
+Benjamin Forehand Jr
 Besnik Bleta
+Björn I
 Bjørn I
 Boopesh Mahendran
+Brahim Essaidi
+Brainlulz
 Breana Gonzales
+Christian Elbrianno
+Christoph Kührer
+Christopher Ramírez
 Chuck Harmston
+Cloney 173741
 Cláudio Esperança
 Cristian Silaghi
 Cynthia Pereira
 Daniel Thorn
 Daniela Arcese
 Danny Coates
+Davide
 Derek Tamsen
+Dhyey Thakore
+Donovan Preston
+Edi Santoso
 Edmund Huggett
 Elisa X
+Emily
+Emily Hou
 Emin Mastizada
 Enol
 Erica
 Erica Wright
+Fauzan Alfi
 Filip Hruška
 Fjoerfoks
 Francesco Lodolo
 Francesco Lodolo [:flod]
 Frederick Villaluna
+G12r
 Gabriela
 Gautam krishna.R
+George Raptis
 Georgianizator
 Gonçalo Matos
+Gwenn
+Hampus
+Hugo
+Hugo Abreu
 Hyeonseok Shin
 Håvar Henriksen
+Ian Neal
+ItielMaN
 Jae Hyeon Park
+Jakob Kappel
 Jakub Rychlý
 Jamie
+Jarmo
 Jim Spentzos
+Jiri Grönroos
 Jobava
+Joe Becher
+Joe ST
+Joergen
 Johann-S
 John Gruen
+Jon Buckley
 Jon Vadillo
 Jonathan Claudius
 Jordi Cuevas
 Jordi Serratosa
 Juan Esteban Ajsivinac Sián
+Juan Sián
 Juraj Cigáň
 Kerim Kalamujić
 Khaled Hosny
+Kim Ludvigsen
+Kim Younggeon
 Kohei Yoshino
 Lan Glad
+Lasse Liehu
 Laurent Jouanneau
 Lobodzets
 LuFlo
+Luis A. Sánchez
 Luiz Carlos de Morais
+Luiz Felipe F M Costa
 Luna Jernberg
+Mahay Alam Khan
+Marcelo Ghelman
 Marcelo Poli
 Marco Aurélio
 Mark Heijl
 Mark Liang
+Mark Liang (You-Wen)
 Marko Andrejić
+Martijn Dekker
+Marwan Mohamad
 Matjaž Horvat
 Maykon Chagas
 Melo46
@@ -75,24 +124,43 @@ Michael Köhler
 Michael Wolf
 Michal Stanke
 Michal Vašíček
+Mikeyy
+Miro Rauhala
 Mozilla Pontoon
+Mozilla-GitHub-Standards
+Mozinet
 Moḥend Belqasem
+Muhend Belkacem
 Muḥend Belqasem
+Myungjae Won
 Nicholas Skinsacos
 Nihad
 Nihad Suljić
+Niksend Mizuhara
 Oscar
+Paulius
+Pedro Burlamaqui Bendahan
 Peter deHaan
 Pierre Neter
 Pin-guang Chen
+Piotr Drąg
+Quentí
+Quế Tùng
+Rachel Tublitz
 Radu Popescu
 Rhoslyn Prys
 RickieES
+Rimas Kudelis
 Rizky Ariestiyansyah
+Rob Powell
+Robert
 Roberto Alvarado
 Rodrigo
 Rodrigo Guerra
 Rok Žerdin
+Romi Hardiyanto
+Rongjian Zhang
+Ruba
 Sahithi
 Sairam Raavi
 Sander Lepik
@@ -101,57 +169,104 @@ Sara Todaro
 Sav22999
 Schieck :)
 Selim Şumlu
+Selyan Sliman Amiri
+Sidak Singh Aulakh
 Slimane Amiri
+Slimane Selyan AMIRI
 Soumya Himanish Mohapatra
 Staś Małolepszy
+Suriyaa ✌️️
 Tema
 Thomas Dalichow
 Théo Chevalier
 Tiago Morais Morgado
+Tim Visée
+Tomer Cohen
 Tomáš Zelina
 Ton
+Top
 Tymur Faradzhev
 Uccen Marzuq
 Varghese Thomas
 Victor Bychek
+Vimal Raghubir
 Vitaliy Krutko
 Weihang Lo
+Wiktor Furman
 Wil Clouser
 YFdyh000
+Yassine Aït-El-Mouden
+Yongmin H
 You-Wen Liang (Mark)
+aaaaalbert
 aefgh39622
+alamanda
 albertdcastro
 alex_mayorga
 ariestiyansyah
 avelper
+chilledfrogs
+clouserw-mozilla-owner
 dgadelha
+dskmori
 ehuggett
 eljuno
+emily-hou1
 erdem cobanoglu
 gautamkrishnar
 gmontagu
 goofy
 hello
 hi
+ivan.pompa
 jesferman1993
 jlG
 josotrix
 jspam
+julen
+julenx
 kenrick95
+kumincir
+leo.toneff
+m4hdi.pdroid
+mail
 manxmensch
+marigalicer
+marsf
+merianosnikos
 mirzet.omerovic.1992
+mujeebcpy
+p.sanroman.bengoetxea
+passionforlife
+paul.trevor
+pyup.io bot
 ravmn
 rcmainak
 reza.habibi2008
+rgpublic
+risger
+robbp
+ruikunai
 savemore99.sm
+sergio
 shikhar-scs
 siparon
 skystar-p
+stripTM
+tatalmondmush
 tiagomoraismorgado
 timvisee
+victor.gonzalezro
 xcffl
 ybouhamam
+yoshimitsu002
+yusup.ramdani
 Μιχάλης
 Марко Костић (Marko Kostić)
+Ратко Вујановић
 صفا الفليج
 వీవెన్
+ജോയ്സ്
+张无忌
+新垣结衣松冈茉优长泽雅美门胁麦上野树里石原里美
+莫非前世那一眼

Dockerfile

@@ -1,17 +1,59 @@
-FROM node:10 AS builder
-RUN addgroup --gid 10001 app && adduser --disabled-password --gecos '' --gid 10001 --home /app --uid 10001 app
-COPY package*.json /app/
-WORKDIR /app
-RUN npm install --production
+##
+# Firefox Send - Mozilla
+#
+# License https://github.com/mozilla/send/blob/master/LICENSE
+##
 
-FROM node:10-slim
-RUN addgroup --gid 10001 app && adduser --disabled-password --gecos '' --gid 10001 --home /app --uid 10001 app
+
+# Build project
+FROM node:12 AS builder
+RUN set -x \
+    # Add user
+    && addgroup --gid 10001 app \
+    && adduser --disabled-password \
+        --gecos '' \
+        --gid 10001 \
+        --home /app \
+        --uid 10001 \
+        app
+COPY --chown=app:app . /app
 USER app
 WORKDIR /app
-COPY --chown=app:app --from=builder /app .
-COPY --chown=app:app . .
+RUN set -x \
+    # Build
+    && PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm ci \
+    && npm run build
+
+
+# Main image
+FROM node:12-slim
+RUN set -x \
+    # Add user
+    && addgroup --gid 10001 app \
+    && adduser --disabled-password \
+        --gecos '' \
+        --gid 10001 \
+        --home /app \
+        --uid 10001 \
+        app
+RUN apt-get update && apt-get -y install \
+    git-core \
+    && rm -rf /var/lib/apt/lists/*
+USER app
+WORKDIR /app
+COPY --chown=app:app package*.json ./
+COPY --chown=app:app app app
+COPY --chown=app:app common common
+COPY --chown=app:app public/locales public/locales
+COPY --chown=app:app server server
+COPY --chown=app:app --from=builder /app/dist dist
+
+RUN npm ci --production && npm cache clean --force
+RUN mkdir -p /app/.config/configstore
+RUN ln -s dist/version.json version.json
 
 ENV PORT=1443
-EXPOSE $PORT
 
-CMD ["node", "server/prod.js"]
+EXPOSE ${PORT}
+
+CMD ["node", "server/bin/prod.js"]

README.md

@@ -1,8 +1,6 @@
-# Firefox Send
+# [![Firefox Send](./assets/icon.svg)](https://send.firefox.com/) Firefox Send
 
-[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=aFFIMHNEWFcrNHJaMU1LRkJnUDhOQkNHMmh2WHBscjJsZHcwK1h0dkhwdz0tLXRpN1RXcysybUtxTFFTVGRtWjVGeHc9PQ==--c56129be8c75941b115c5b5e5d3ed10b3c7dca6b)](https://www.browserstack.com/automate/public-build/aFFIMHNEWFcrNHJaMU1LRkJnUDhOQkNHMmh2WHBscjJsZHcwK1h0dkhwdz0tLXRpN1RXcysybUtxTFFTVGRtWjVGeHc9PQ==--c56129be8c75941b115c5b5e5d3ed10b3c7dca6b)
 [![CircleCI](https://img.shields.io/circleci/project/github/mozilla/send.svg)](https://circleci.com/gh/mozilla/send)
-[![Available on Test Pilot](https://img.shields.io/badge/available_on-Test_Pilot-0996F8.svg)](https://testpilot.firefox.com/experiments/send)
 
 **Docs:** [FAQ](docs/faq.md), [Encryption](docs/encryption.md), [Build](docs/build.md), [Docker](docs/docker.md), [Metrics](docs/metrics.md), [More](docs/)
 
@@ -18,6 +16,8 @@
 * [Localization](#localization)
 * [Contributing](#contributing)
 * [Testing](#testing)
+* [Deployment](#deployment)
+* [Android](#android)
 * [License](#license)
 
 ---
@@ -30,22 +30,22 @@ A file sharing experiment which allows you to send encrypted files to other user
 
 ## Requirements
 
-- [Node.js 8.2+](https://nodejs.org/)
+- [Node.js 12.x](https://nodejs.org/)
 - [Redis server](https://redis.io/) (optional for development)
-- [AWS S3](https://aws.amazon.com/s3/) or compatible service. (optional)
+- [AWS S3](https://aws.amazon.com/s3/) or compatible service (optional)
 
 ---
 
 ## Development
 
-To start an ephemeral development server run:
+To start an ephemeral development server, run:
 
 ```sh
 npm install
 npm start
 ```
 
-Then browse to http://localhost:8080
+Then, browse to http://localhost:8080
 
 ---
 
@@ -87,8 +87,20 @@ Pull requests are always welcome! Feel free to check out the list of ["good firs
 | ENVIRONMENT | URL
 |-------------|-----
 | Production  | <https://send.firefox.com/>
-| Stage       | <https://send.stage.mozaws.net/>
-| Development | <https://send.dev.mozaws.net/>
+| Stage       | <https://stage.send.nonprod.cloudops.mozgcp.net/>
+| Development | <https://send2.dev.lcip.org/>
+
+---
+
+## Deployment
+
+see also [docs/deployment.md](docs/deployment.md)
+
+---
+
+## Android
+
+The android implementation is contained in the `android` directory, and can be viewed locally for easy testing and editing by running `ANDROID=1 npm start` and then visiting <http://localhost:8080>. CSS and image files are located in the `android/app/src/main/assets` directory.
 
 ---
 

android/.eslintrc.yaml

@@ -0,0 +1,6 @@
+env:
+  browser: true
+
+parserOptions:
+  sourceType: module
+

android/.gitignore

@@ -0,0 +1,4 @@
+local.properties
+.gradle
+build
+

android/README.md

@@ -0,0 +1,9 @@
+Readme
+=====
+
+The Send Android app allows you to choose any file from your android device, encrypt it with a password, and get a URL which will allow secure download of the file. By default, this URL will expire after one download or 24 hours.
+
+Building the Send Android app.
+=====
+
+First, install Android Studio. Open the `android` directory in Android Studio, plug in your android phone, and press the run button.

android/SendAndroid.iml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module external.linked.project.id="SendAndroid" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" type="JAVA_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="java-gradle" name="Java-Gradle">
+      <configuration>
+        <option name="BUILD_FOLDER_PATH" value="$MODULE_DIR$/build" />
+        <option name="BUILDABLE" value="false" />
+      </configuration>
+    </facet>
+  </component>
+  <component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_1_7" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.gradle" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

android/android.js

@@ -0,0 +1,96 @@
+import 'intl-pluralrules';
+import choo from 'choo';
+import html from 'choo/html';
+import * as Sentry from '@sentry/browser';
+
+import { setApiUrlPrefix, getConstants } from '../app/api';
+import metrics from '../app/metrics';
+//import assets from '../common/assets';
+import Archive from '../app/archive';
+import Header from '../app/ui/header';
+import storage from '../app/storage';
+import controller from '../app/controller';
+import User from './user';
+import intents from './stores/intents';
+import home from './pages/home';
+import upload from './pages/upload';
+import share from './pages/share';
+import preferences from './pages/preferences';
+import error from './pages/error';
+import { getTranslator } from '../app/locale';
+import { setTranslate } from '../app/utils';
+
+import { delay } from '../app/utils';
+
+if (navigator.userAgent === 'Send Android') {
+  setApiUrlPrefix('https://send.firefox.com');
+}
+
+const app = choo();
+//app.use(state);
+app.use(controller);
+app.use(intents);
+
+window.finishLogin = async function(accountInfo) {
+  while (!(app.state && app.state.user)) {
+    await delay();
+  }
+  await app.state.user.finishLogin(accountInfo);
+  await app.state.user.syncFileList();
+  app.emitter.emit('replaceState', '/');
+};
+
+function body(main) {
+  return function(state, emit) {
+    /*
+      Disable the preferences menu for now since it is ugly and isn't
+      relevant to the beta
+    function clickPreferences(event) {
+      event.preventDefault();
+      emit('pushState', '/preferences');
+    }
+
+    const menu = html`<a
+        id="hamburger"
+        class="absolute top-0 right-0 z-50"
+        href="#"
+        onclick="${clickPreferences}"
+      >
+        <img src="${assets.get('preferences.png')}" />
+      </a>`;
+    */
+    return html`
+      <body class="flex flex-col items-center font-sans bg-grey-10 h-screen">
+        ${state.cache(Header, 'header').render()} ${main(state, emit)}
+      </body>
+    `;
+  };
+}
+(async function start() {
+  const translate = await getTranslator('en-US');
+  setTranslate(translate);
+  const { LIMITS, DEFAULTS } = await getConstants();
+  app.use(state => {
+    state.LIMITS = LIMITS;
+    state.DEFAULTS = DEFAULTS;
+    state.translate = translate;
+    state.capabilities = {
+      account: true
+    }; //TODO
+    state.archive = new Archive([], DEFAULTS.EXPIRE_SECONDS);
+    state.storage = storage;
+    state.user = new User(storage, LIMITS);
+    state.sentry = Sentry;
+  });
+  app.use(metrics);
+  app.route('/', body(home));
+  app.route('/upload', upload);
+  app.route('/share/:id', share);
+  app.route('/preferences', preferences);
+  app.route('/error', error);
+  //app.route('/debugging', require('./pages/debugging').default);
+  // add /api/filelist
+  app.mount('body');
+})();
+
+window.app = app;

android/app/.gitignore

@@ -0,0 +1 @@
+/build

android/app/build.gradle

@@ -0,0 +1,41 @@
+apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android-extensions'
+
+android {
+    compileSdkVersion 27
+    defaultConfig {
+        applicationId "org.mozilla.firefoxsend"
+        minSdkVersion 26
+        targetSdkVersion 27
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar'])
+    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation 'com.android.support:appcompat-v7:27.1.1'
+    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
+    testImplementation 'junit:junit:4.12'
+    androidTestImplementation 'com.android.support.test:runner:1.0.2'
+    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
+    implementation 'com.github.delight-im:Android-AdvancedWebView:v3.0.0'
+    implementation "org.mozilla.components:service-firefox-accounts:$android_components_version"
+}
+
+task generateAndLinkBundle(type: Exec, description: 'Generate the android.js bundle and link it into the assets directory') {
+    commandLine './buildAssets.sh'
+}
+
+tasks.withType(JavaCompile) {
+    compileTask -> compileTask.dependsOn generateAndLinkBundle
+}

android/app/buildAssets.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+if [ -d "../../node_modules" ]
+then
+  echo "node_modules already present."
+else
+  echo "node_modules not present, running npm install."
+  npm install
+fi
+npm run build
+rm -rf src/main/assets
+mkdir -p src/main/assets
+cp -R ../../dist/* src/main/assets

android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="org.mozilla.firefoxsend">
+
+    <uses-permission android:name="android.permission.INTERNET"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+        <meta-data android:name="android.webkit.WebView.EnableSafeBrowsing" android:value="false" />
+        <activity android:name="org.mozilla.firefoxsend.MainActivity" android:screenOrientation="portrait">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+            <intent-filter>
+                <action android:name="android.intent.action.SEND" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="image/*" />
+            </intent-filter>
+            <intent-filter>
+                <action android:name="android.intent.action.SEND" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="text/plain" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

android/app/src/main/java/org/mozilla/firefoxsend/MainActivity.kt

@@ -0,0 +1,226 @@
+package org.mozilla.firefoxsend
+
+import android.annotation.SuppressLint
+import android.content.ComponentName
+import android.content.Intent
+import android.graphics.Bitmap
+import android.net.Uri
+import android.os.Bundle
+import android.support.v7.app.AppCompatActivity
+import android.util.Base64
+import android.util.Log
+import android.view.View
+import android.webkit.*
+import im.delight.android.webview.AdvancedWebView
+import kotlinx.android.synthetic.main.activity_main.*
+import mozilla.components.service.fxa.Config
+import mozilla.components.service.fxa.FirefoxAccount
+import mozilla.components.service.fxa.FxaResult
+import org.json.JSONObject
+
+internal class LoggingWebChromeClient : WebChromeClient() {
+    override fun onConsoleMessage(cm: ConsoleMessage): Boolean {
+        Log.d(TAG, String.format("%s @ %d: %s",
+                cm.message(), cm.lineNumber(), cm.sourceId()))
+        return true
+    }
+
+    companion object {
+        private const val TAG = "CONTENT"
+    }
+}
+
+class WebAppInterface(private val mContext: MainActivity) {
+    @JavascriptInterface
+    fun beginOAuthFlow() {
+        mContext.beginOAuthFlow()
+    }
+
+    @JavascriptInterface
+    fun shareUrl(url: String) {
+        mContext.shareUrl(url)
+    }
+}
+
+class MainActivity : AppCompatActivity(), AdvancedWebView.Listener {
+
+    private var mToShare: String? = null
+    private var mToCall: String? = null
+    private var mAccount: FirefoxAccount? = null
+
+    @SuppressLint("SetJavaScriptEnabled")
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+
+        WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG)
+        webView.apply {
+            setListener(this@MainActivity, this@MainActivity)
+            addJavascriptInterface(WebAppInterface(this@MainActivity), JS_INTERFACE_NAME)
+            setLayerType(View.LAYER_TYPE_HARDWARE, null)
+            webChromeClient = LoggingWebChromeClient()
+
+            settings.apply {
+                userAgentString = "Send Android"
+                allowUniversalAccessFromFileURLs = true
+                javaScriptEnabled = true
+            }
+        }
+
+        val type = intent.type
+        if (Intent.ACTION_SEND == intent.action && type != null) {
+            if (type == "text/plain") {
+                val sharedText = intent.getStringExtra(Intent.EXTRA_TEXT)
+                // Log.d(TAG_INTENT, "text/plain $sharedText")
+                mToShare = "data:text/plain;base64," + Base64.encodeToString(sharedText.toByteArray(), 16).trim()
+            } else if (type.startsWith("image/")) {
+                val imageUri = intent.getParcelableExtra(Intent.EXTRA_STREAM) as Uri
+                // Log.d(TAG_INTENT, "image/ $imageUri")
+                mToShare = "data:text/plain;base64," + Base64.encodeToString(imageUri.path.toByteArray(), 16).trim()
+            }
+        }
+        webView.loadUrl("file:///android_asset/android.html")
+    }
+
+    fun beginOAuthFlow() {
+        Config.release().then { value ->
+            mAccount = FirefoxAccount(value, "20f7931c9054d833", "https://send.firefox.com/fxa/android-redirect.html")
+            mAccount?.beginOAuthFlow(arrayOf("profile", "https://identity.mozilla.com/apps/send"), true)
+                    ?.then { url ->
+                        // Log.d(TAG_CONFIG, "GOT A URL $url")
+                        this@MainActivity.runOnUiThread {
+                            webView.loadUrl(url)
+                        }
+                        FxaResult.fromValue(Unit)
+                    }
+            // Log.d(TAG_CONFIG, "CREATED FIREFOXACCOUNT")
+            FxaResult.fromValue(Unit)
+        }
+    }
+
+    fun shareUrl(url: String) {
+        val shareIntent = Intent().apply {
+            action = Intent.ACTION_SEND
+            type = "text/plain"
+            putExtra(Intent.EXTRA_TEXT, url)
+        }
+
+        val components = arrayOf(ComponentName(applicationContext, MainActivity::class.java))
+        val chooser = Intent.createChooser(shareIntent, "")
+                .putExtra(Intent.EXTRA_EXCLUDE_COMPONENTS, components)
+
+        startActivity(chooser)
+    }
+
+    override fun onResume() {
+        super.onResume()
+        webView.onResume()
+    }
+
+    override fun onPause() {
+        webView.onPause()
+        super.onPause()
+    }
+
+    override fun onDestroy() {
+        webView.onDestroy()
+        super.onDestroy()
+    }
+
+    override fun onActivityResult(requestCode: Int, resultCode: Int, intent: Intent?) {
+        super.onActivityResult(requestCode, resultCode, intent)
+        webView.onActivityResult(requestCode, resultCode, intent)
+    }
+
+    override fun onBackPressed() {
+        if (!webView.onBackPressed()) {
+            return
+        }
+        super.onBackPressed()
+    }
+
+    override fun onPageStarted(url: String, favicon: Bitmap?) {
+        if (url.startsWith("https://send.firefox.com/fxa/android-redirect.html")) {
+            // We load this here so the user doesn't see the android-redirect.html page
+            webView.loadUrl("file:///android_asset/android.html")
+
+            val uri = Uri.parse(url)
+            uri.getQueryParameter("code")?.let { code ->
+                uri.getQueryParameter("state")?.let { state ->
+                    mAccount?.completeOAuthFlow(code, state)?.whenComplete { info ->
+                        mAccount?.getProfile(false)?.then { profile ->
+                            val profileJsonPayload = JSONObject()
+                                    .put("accessToken", info.accessToken)
+                                    .put("keys", info.keys)
+                                    .put("avatar", profile.avatar)
+                                    .put("displayName", profile.displayName)
+                                    .put("email", profile.email)
+                                    .put("uid", profile.uid).toString()
+                            mToCall = "finishLogin($profileJsonPayload)"
+                            this@MainActivity.runOnUiThread {
+                                // Clear the history so that the user can't use the back button to see broken pages
+                                // that were inserted into the history by the login process.
+                                webView.clearHistory()
+
+                                // We also reload this here because we need to make sure onPageFinished runs after mToCall has been set.
+                                // We can't guarantee that onPageFinished wasn't already called at this point.
+                                webView.loadUrl("file:///android_asset/android.html")
+                            }
+                            FxaResult.fromValue(Unit)
+                        }
+                    }
+                }
+            }
+        }
+        if (!url.startsWith("file:///android_asset/") && !url.startsWith("https://accounts.firefox.com/")) {
+            // Don't allow loading anything other than the app in our webview
+            // It should be possible to do this with shouldOverrideUrlLoading
+            // but it didn't seem to be working, so this works as a hack.
+            webView.loadUrl("file:///android_asset/android.html")
+            Log.d(TAG_MAIN, "BAD URL " + url)
+        } else {
+            // Log.d(TAG_MAIN, "onPageStarted " + url)
+        }
+    }
+
+    override fun onPageFinished(url: String) {
+        // Log.d(TAG_MAIN, "onPageFinished")
+        if (mToShare != null) {
+            // Log.d(TAG_INTENT, mToShare)
+
+            webView.postWebMessage(WebMessage(mToShare), Uri.EMPTY)
+            mToShare = null
+        }
+        if (mToCall != null) {
+            this@MainActivity.runOnUiThread {
+                webView.evaluateJavascript(mToCall) {
+                    mToCall = null
+                }
+            }
+        }
+    }
+
+    override fun onPageError(errorCode: Int, description: String, failingUrl: String) {
+        Log.d(TAG_MAIN, "onPageError($errorCode, $description, $failingUrl)")
+    }
+
+    override fun onDownloadRequested(url: String,
+                                     suggestedFilename: String,
+                                     mimeType: String,
+                                     contentLength: Long,
+                                     contentDisposition: String,
+                                     userAgent: String) {
+        // Log.d(TAG_MAIN, "onDownloadRequested")
+    }
+
+    override fun onExternalPageRequest(url: String) {
+        // Log.d(TAG_MAIN, "onExternalPageRequest($url)")
+    }
+
+    companion object {
+        private const val TAG_MAIN = "MAIN"
+        private const val TAG_INTENT = "INTENT"
+        private const val TAG_CONFIG = "CONFIG"
+        private const val JS_INTERFACE_NAME = "Android"
+    }
+}

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -0,0 +1,97 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:aapt="http://schemas.android.com/aapt"
+        android:width="108dp"
+        android:height="108dp"
+        android:viewportWidth="92.5"
+        android:viewportHeight="92.5">
+    <group android:translateX="27.75"
+            android:translateY="28.25">
+      <path
+          android:pathData="M18.1313,0.0003C8.1363,0.0003 0.0003,7.9743 0.0003,17.7673C0.0003,18.8133 0.8523,19.6643 1.8983,19.6643L16.2333,19.6643L16.2333,29.1093L11.7773,24.6963C11.0413,23.9613 9.8403,23.9613 9.0653,24.6963C8.3293,25.4323 8.3293,26.6323 9.0653,27.4063L16.7753,35.1093C16.8143,35.1483 16.8533,35.1873 16.9303,35.2253L16.9693,35.2253C17.0083,35.2643 17.0463,35.3033 17.0853,35.3033L17.1243,35.3033C17.1633,35.3423 17.2013,35.3423 17.2403,35.3803L17.2793,35.3803C17.3183,35.4193 17.3953,35.4193 17.4343,35.4583C17.4733,35.4963 17.5503,35.4963 17.5893,35.4963C17.6283,35.4963 17.7053,35.5353 17.7443,35.5353L17.7823,35.5353C17.8213,35.5353 17.8603,35.5353 17.9373,35.5743L18.3253,35.5743C18.3643,35.5743 18.4023,35.5743 18.4803,35.5353L18.5193,35.5353C18.5573,35.5353 18.6353,35.4963 18.6743,35.4963C18.7123,35.4963 18.7903,35.4583 18.8293,35.4193C18.8673,35.3803 18.9453,35.3803 18.9843,35.3423C19.0223,35.3033 19.0613,35.3033 19.1003,35.2643L19.1383,35.2643C19.1773,35.2253 19.2163,35.1873 19.2553,35.1873L19.2933,35.1873C19.3323,35.1483 19.3713,35.1093 19.4483,35.0713L27.1583,27.3673C27.8943,26.6323 27.8943,25.4323 27.1583,24.6583C26.4223,23.9223 25.2213,23.9223 24.4463,24.6583L20.0303,29.1093L20.0303,19.7033L34.3643,19.7033C35.4103,19.7033 36.2633,18.8513 36.2633,17.8063C36.2633,7.9743 28.1273,0.0003 18.1313,0.0003ZM3.9133,15.8713C4.8813,9.0963 10.8863,3.8323 18.1313,3.8323C25.3763,3.8323 31.3423,9.0963 32.3113,15.8713L3.9133,15.8713Z"
+          android:fillType="nonZero">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="2.9809632"
+              android:startX="25.805717"
+              android:endY="31.687763"
+              android:endX="8.569217"
+              android:type="linear">
+            <item android:offset="0" android:color="#FFFF980E"/>
+            <item android:offset="0.21" android:color="#FFFF7139"/>
+            <item android:offset="0.36" android:color="#FFFF5854"/>
+            <item android:offset="0.46" android:color="#FFFF4F5E"/>
+            <item android:offset="0.69" android:color="#FFFF3750"/>
+            <item android:offset="0.86" android:color="#FFF92261"/>
+            <item android:offset="1" android:color="#FFF5156C"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+      <path
+          android:pathData="M18.1313,0.0003C8.1363,0.0003 0.0003,7.9743 0.0003,17.7673C0.0003,18.8133 0.8523,19.6643 1.8983,19.6643L16.2333,19.6643L16.2333,29.1093L11.7773,24.6963C11.0413,23.9613 9.8403,23.9613 9.0653,24.6963C8.3293,25.4323 8.3293,26.6323 9.0653,27.4063L16.7753,35.1093C16.8143,35.1483 16.8533,35.1873 16.9303,35.2253L16.9693,35.2253C17.0083,35.2643 17.0463,35.3033 17.0853,35.3033L17.1243,35.3033C17.1633,35.3423 17.2013,35.3423 17.2403,35.3803L17.2793,35.3803C17.3183,35.4193 17.3953,35.4193 17.4343,35.4583C17.4733,35.4963 17.5503,35.4963 17.5893,35.4963C17.6283,35.4963 17.7053,35.5353 17.7443,35.5353L17.7823,35.5353C17.8213,35.5353 17.8603,35.5353 17.9373,35.5743L18.3253,35.5743C18.3643,35.5743 18.4023,35.5743 18.4803,35.5353L18.5193,35.5353C18.5573,35.5353 18.6353,35.4963 18.6743,35.4963C18.7123,35.4963 18.7903,35.4583 18.8293,35.4193C18.8673,35.3803 18.9453,35.3803 18.9843,35.3423C19.0223,35.3033 19.0613,35.3033 19.1003,35.2643L19.1383,35.2643C19.1773,35.2253 19.2163,35.1873 19.2553,35.1873L19.2933,35.1873C19.3323,35.1483 19.3713,35.1093 19.4483,35.0713L27.1583,27.3673C27.8943,26.6323 27.8943,25.4323 27.1583,24.6583C26.4223,23.9223 25.2213,23.9223 24.4463,24.6583L20.0303,29.1093L20.0303,19.7033L34.3643,19.7033C35.4103,19.7033 36.2633,18.8513 36.2633,17.8063C36.2633,7.9743 28.1273,0.0003 18.1313,0.0003ZM3.9133,15.8713C4.8813,9.0963 10.8863,3.8323 18.1313,3.8323C25.3763,3.8323 31.3423,9.0963 32.3113,15.8713L3.9133,15.8713Z"
+          android:fillType="nonZero">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="2.9809632"
+              android:startX="25.805717"
+              android:endY="31.687763"
+              android:endX="8.569217"
+              android:type="linear">
+            <item android:offset="0" android:color="#CCFFF44F"/>
+            <item android:offset="0.75" android:color="#00FFF44F"/>
+            <item android:offset="1" android:color="#00FFF44F"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+      <path
+          android:pathData="M20.0303,3.9483C26.3833,4.8003 31.4203,9.6773 32.3113,15.8713L23.8653,15.8713C21.7733,15.8713 20.0683,17.5743 20.0683,19.6643L34.3643,19.6643C35.4103,19.6643 36.2633,18.8133 36.2633,17.7673C36.2633,10.9933 31.4593,7.6643 27.3913,5.7673C23.6333,4.0253 20.0303,3.9483 20.0303,3.9483Z">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="20.534323"
+              android:startX="22.366518"
+              android:endY="7.772023"
+              android:endX="30.234228"
+              android:type="linear">
+            <item android:offset="0" android:color="#FF3A8EE6"/>
+            <item android:offset="0.24" android:color="#FF5C79F0"/>
+            <item android:offset="0.63" android:color="#FF9059FF"/>
+            <item android:offset="1" android:color="#FFC139E6"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+      <path
+          android:pathData="M32.2333,15.4453C33.5123,16.4903 34.8293,17.4963 36.0693,18.5803C36.1853,18.3483 36.2633,18.0773 36.2633,17.7673C36.2633,10.9933 31.4593,7.6643 27.3913,5.7673C23.6333,4.0253 20.0303,3.9483 20.0303,3.9483C26.2283,4.7613 31.1873,9.4843 32.2333,15.4453Z">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="8.195093"
+              android:startX="30.235817"
+              android:endY="12.836453"
+              android:endX="26.934916"
+              android:type="linear">
+            <item android:offset="0" android:color="#7E6E008B"/>
+            <item android:offset="0.5" android:color="#00C846CB"/>
+            <item android:offset="1" android:color="#00C846CB"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+      <path
+          android:pathData="M32.0013,15.8713L23.8653,15.8713C21.7733,15.8713 20.0683,17.5743 20.0683,19.6643L34.3643,19.6643C34.9453,19.6643 35.4883,19.3933 35.8373,18.9673C34.5583,17.9223 33.2793,16.9163 32.0013,15.8713Z">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="18.076923"
+              android:startX="31.69962"
+              android:endY="17.594997"
+              android:endX="23.366179"
+              android:type="linear">
+            <item android:offset="0" android:color="#006A2BEA"/>
+            <item android:offset="0.14" android:color="#006A2BEA"/>
+            <item android:offset="0.3" android:color="#15662CE6"/>
+            <item android:offset="0.47" android:color="#2C592FDB"/>
+            <item android:offset="0.64" android:color="#424534C9"/>
+            <item android:offset="0.82" android:color="#59283BAF"/>
+            <item android:offset="0.99" android:color="#7003448D"/>
+            <item android:offset="1" android:color="#7200458B"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+    </group>
+</vector>

android/app/src/main/res/drawable/ic_launcher_foreground.xml

@@ -0,0 +1,97 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="92.5"
+    android:viewportHeight="92.5">
+  <group android:translateX="27.75"
+      android:translateY="28.25">
+    <path
+        android:pathData="M18.1313,0.0003C8.1363,0.0003 0.0003,7.9743 0.0003,17.7673C0.0003,18.8133 0.8523,19.6643 1.8983,19.6643L16.2333,19.6643L16.2333,29.1093L11.7773,24.6963C11.0413,23.9613 9.8403,23.9613 9.0653,24.6963C8.3293,25.4323 8.3293,26.6323 9.0653,27.4063L16.7753,35.1093C16.8143,35.1483 16.8533,35.1873 16.9303,35.2253L16.9693,35.2253C17.0083,35.2643 17.0463,35.3033 17.0853,35.3033L17.1243,35.3033C17.1633,35.3423 17.2013,35.3423 17.2403,35.3803L17.2793,35.3803C17.3183,35.4193 17.3953,35.4193 17.4343,35.4583C17.4733,35.4963 17.5503,35.4963 17.5893,35.4963C17.6283,35.4963 17.7053,35.5353 17.7443,35.5353L17.7823,35.5353C17.8213,35.5353 17.8603,35.5353 17.9373,35.5743L18.3253,35.5743C18.3643,35.5743 18.4023,35.5743 18.4803,35.5353L18.5193,35.5353C18.5573,35.5353 18.6353,35.4963 18.6743,35.4963C18.7123,35.4963 18.7903,35.4583 18.8293,35.4193C18.8673,35.3803 18.9453,35.3803 18.9843,35.3423C19.0223,35.3033 19.0613,35.3033 19.1003,35.2643L19.1383,35.2643C19.1773,35.2253 19.2163,35.1873 19.2553,35.1873L19.2933,35.1873C19.3323,35.1483 19.3713,35.1093 19.4483,35.0713L27.1583,27.3673C27.8943,26.6323 27.8943,25.4323 27.1583,24.6583C26.4223,23.9223 25.2213,23.9223 24.4463,24.6583L20.0303,29.1093L20.0303,19.7033L34.3643,19.7033C35.4103,19.7033 36.2633,18.8513 36.2633,17.8063C36.2633,7.9743 28.1273,0.0003 18.1313,0.0003ZM3.9133,15.8713C4.8813,9.0963 10.8863,3.8323 18.1313,3.8323C25.3763,3.8323 31.3423,9.0963 32.3113,15.8713L3.9133,15.8713Z"
+        android:fillType="nonZero">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="2.9809632"
+            android:startX="25.805717"
+            android:endY="31.687763"
+            android:endX="8.569217"
+            android:type="linear">
+          <item android:offset="0" android:color="#FFFF980E"/>
+          <item android:offset="0.21" android:color="#FFFF7139"/>
+          <item android:offset="0.36" android:color="#FFFF5854"/>
+          <item android:offset="0.46" android:color="#FFFF4F5E"/>
+          <item android:offset="0.69" android:color="#FFFF3750"/>
+          <item android:offset="0.86" android:color="#FFF92261"/>
+          <item android:offset="1" android:color="#FFF5156C"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M18.1313,0.0003C8.1363,0.0003 0.0003,7.9743 0.0003,17.7673C0.0003,18.8133 0.8523,19.6643 1.8983,19.6643L16.2333,19.6643L16.2333,29.1093L11.7773,24.6963C11.0413,23.9613 9.8403,23.9613 9.0653,24.6963C8.3293,25.4323 8.3293,26.6323 9.0653,27.4063L16.7753,35.1093C16.8143,35.1483 16.8533,35.1873 16.9303,35.2253L16.9693,35.2253C17.0083,35.2643 17.0463,35.3033 17.0853,35.3033L17.1243,35.3033C17.1633,35.3423 17.2013,35.3423 17.2403,35.3803L17.2793,35.3803C17.3183,35.4193 17.3953,35.4193 17.4343,35.4583C17.4733,35.4963 17.5503,35.4963 17.5893,35.4963C17.6283,35.4963 17.7053,35.5353 17.7443,35.5353L17.7823,35.5353C17.8213,35.5353 17.8603,35.5353 17.9373,35.5743L18.3253,35.5743C18.3643,35.5743 18.4023,35.5743 18.4803,35.5353L18.5193,35.5353C18.5573,35.5353 18.6353,35.4963 18.6743,35.4963C18.7123,35.4963 18.7903,35.4583 18.8293,35.4193C18.8673,35.3803 18.9453,35.3803 18.9843,35.3423C19.0223,35.3033 19.0613,35.3033 19.1003,35.2643L19.1383,35.2643C19.1773,35.2253 19.2163,35.1873 19.2553,35.1873L19.2933,35.1873C19.3323,35.1483 19.3713,35.1093 19.4483,35.0713L27.1583,27.3673C27.8943,26.6323 27.8943,25.4323 27.1583,24.6583C26.4223,23.9223 25.2213,23.9223 24.4463,24.6583L20.0303,29.1093L20.0303,19.7033L34.3643,19.7033C35.4103,19.7033 36.2633,18.8513 36.2633,17.8063C36.2633,7.9743 28.1273,0.0003 18.1313,0.0003ZM3.9133,15.8713C4.8813,9.0963 10.8863,3.8323 18.1313,3.8323C25.3763,3.8323 31.3423,9.0963 32.3113,15.8713L3.9133,15.8713Z"
+        android:fillType="nonZero">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="2.9809632"
+            android:startX="25.805717"
+            android:endY="31.687763"
+            android:endX="8.569217"
+            android:type="linear">
+          <item android:offset="0" android:color="#CCFFF44F"/>
+          <item android:offset="0.75" android:color="#00FFF44F"/>
+          <item android:offset="1" android:color="#00FFF44F"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M20.0303,3.9483C26.3833,4.8003 31.4203,9.6773 32.3113,15.8713L23.8653,15.8713C21.7733,15.8713 20.0683,17.5743 20.0683,19.6643L34.3643,19.6643C35.4103,19.6643 36.2633,18.8133 36.2633,17.7673C36.2633,10.9933 31.4593,7.6643 27.3913,5.7673C23.6333,4.0253 20.0303,3.9483 20.0303,3.9483Z">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="20.534323"
+            android:startX="22.366518"
+            android:endY="7.772023"
+            android:endX="30.234228"
+            android:type="linear">
+          <item android:offset="0" android:color="#FF3A8EE6"/>
+          <item android:offset="0.24" android:color="#FF5C79F0"/>
+          <item android:offset="0.63" android:color="#FF9059FF"/>
+          <item android:offset="1" android:color="#FFC139E6"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M32.2333,15.4453C33.5123,16.4903 34.8293,17.4963 36.0693,18.5803C36.1853,18.3483 36.2633,18.0773 36.2633,17.7673C36.2633,10.9933 31.4593,7.6643 27.3913,5.7673C23.6333,4.0253 20.0303,3.9483 20.0303,3.9483C26.2283,4.7613 31.1873,9.4843 32.2333,15.4453Z">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="8.195093"
+            android:startX="30.235817"
+            android:endY="12.836453"
+            android:endX="26.934916"
+            android:type="linear">
+          <item android:offset="0" android:color="#7E6E008B"/>
+          <item android:offset="0.5" android:color="#00C846CB"/>
+          <item android:offset="1" android:color="#00C846CB"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M32.0013,15.8713L23.8653,15.8713C21.7733,15.8713 20.0683,17.5743 20.0683,19.6643L34.3643,19.6643C34.9453,19.6643 35.4883,19.3933 35.8373,18.9673C34.5583,17.9223 33.2793,16.9163 32.0013,15.8713Z">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="18.076923"
+            android:startX="31.69962"
+            android:endY="17.594997"
+            android:endX="23.366179"
+            android:type="linear">
+          <item android:offset="0" android:color="#006A2BEA"/>
+          <item android:offset="0.14" android:color="#006A2BEA"/>
+          <item android:offset="0.3" android:color="#15662CE6"/>
+          <item android:offset="0.47" android:color="#2C592FDB"/>
+          <item android:offset="0.64" android:color="#424534C9"/>
+          <item android:offset="0.82" android:color="#59283BAF"/>
+          <item android:offset="0.99" android:color="#7003448D"/>
+          <item android:offset="1" android:color="#7200458B"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+  </group>
+</vector>

android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<im.delight.android.webview.AdvancedWebView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/webView"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity" />

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="colorPrimary">#3F51B5</color>
+    <color name="colorPrimaryDark">#303F9F</color>
+    <color name="colorAccent">#FF4081</color>
+</resources>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#220033</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">Send</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,11 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+</resources>

android/build.gradle

@@ -0,0 +1,27 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    ext.kotlin_version = '1.3.21'
+    ext.android_components_version = '0.26.0'
+    repositories {
+        google()
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:3.3.2'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.21"
+    }
+}
+
+allprojects {
+    repositories {
+        google()
+        maven { url "https://maven.mozilla.org/maven2" }
+        jcenter()
+        maven { url "https://jitpack.io" }
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

android/gradle.properties

@@ -0,0 +1,13 @@
+# Project-wide Gradle settings.
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,6 @@
+#Tue Feb 19 08:34:25 EST 2019
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

android/gradlew

@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,84 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/pages/.eslintrc.yaml

@@ -0,0 +1,6 @@
+env:
+  browser: true
+
+parserOptions:
+  sourceType: module
+

android/pages/error.js

@@ -0,0 +1,12 @@
+const html = require('choo/html');
+
+export default function error(_state, _emit) {
+  return html`
+    <body>
+      <div id="white">
+        <h1>Error</h1>
+        <p>Sorry, an error occurred.</p>
+      </div>
+    </body>
+  `;
+}

android/pages/home.js

@@ -0,0 +1,69 @@
+const html = require('choo/html');
+const { list } = require('../../app/utils');
+const archiveTile = require('../../app/ui/archiveTile');
+const modal = require('../../app/ui/modal');
+const intro = require('../../app/ui/intro');
+const assets = require('../../common/assets');
+
+module.exports = function(state, emit) {
+  function onchange(event) {
+    event.preventDefault();
+    const newFiles = Array.from(event.target.files);
+
+    emit('addFiles', { files: newFiles });
+  }
+
+  function onclick() {
+    document.getElementById('file-upload').click();
+  }
+
+  const archives = state.storage.files
+    .filter(archive => !archive.expired)
+    .map(archive => archiveTile(state, emit, archive))
+    .reverse();
+
+  let content = '';
+  let button = html`
+    <div
+      class="bg-blue-50 rounded-full m-4 flex items-center justify-center shadow-lg"
+      style="width: 56px; height: 56px"
+      onclick="${onclick}"
+    >
+      <img src="${assets.get('add.svg')}" />
+    </div>
+  `;
+  if (state.uploading) {
+    content = archiveTile.uploading(state, emit);
+    button = '';
+  } else if (state.archive.numFiles > 0) {
+    content = archiveTile.wip(state, emit);
+    button = '';
+  } else {
+    content =
+      archives.length < 1
+        ? intro(state)
+        : list(archives, 'h-full overflow-y-auto w-full', 'mb-3 w-full');
+  }
+
+  return html`
+    <main class="main">
+      ${state.modal && modal(state, emit)}
+      <section
+        class="h-full w-full p-6 z-10 overflow-hidden md:flex md:flex-row md:rounded-lg md:shadow-big"
+      >
+        ${content}
+      </section>
+      <div class="fixed right-0 bottom-0 z-20">
+        ${button}
+        <input
+          id="file-upload"
+          class="hidden"
+          type="file"
+          multiple
+          onchange="${onchange}"
+          onclick="${e => e.stopPropagation()}"
+        />
+      </div>
+    </main>
+  `;
+};

android/pages/preferences.js

@@ -0,0 +1,34 @@
+const html = require('choo/html');
+
+import { setFileProtocolWssUrl, getFileProtocolWssUrl } from '../../app/api';
+
+export default function preferences(state, emit) {
+  const wssURL = getFileProtocolWssUrl();
+
+  function updateWssUrl(event) {
+    state.wssURL = event.target.value;
+    setFileProtocolWssUrl(state.wssURL);
+    emit('render');
+  }
+
+  function clickDone(event) {
+    event.preventDefault();
+    emit('pushState', '/');
+  }
+
+  return html`
+    <body>
+      <div id="white">
+        <div id="preferences">
+          <a onclick="${clickDone}" href="#"> done </a>
+          <dl>
+            <dt>wss url:</dt>
+            <dd>
+              <input type="text" onchange="${updateWssUrl}" value="${wssURL}" />
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </body>
+  `;
+}

android/pages/share.js

@@ -0,0 +1,51 @@
+const html = require('choo/html');
+
+export default function uploadComplete(state, emit) {
+  const file = state.storage.files[state.storage.files.length - 1];
+  function onclick(e) {
+    e.preventDefault();
+    input.select();
+    document.execCommand('copy');
+    input.selectionEnd = input.selectionStart;
+    copyText.textContent = 'Copied!';
+    setTimeout(function() {
+      copyText.textContent = 'Copy link';
+    }, 2000);
+  }
+
+  function uploadFile(event) {
+    event.preventDefault();
+    const target = event.target;
+    const file = target.files[0];
+    if (file.size === 0) {
+      return;
+    }
+
+    emit('pushState', '/upload');
+    emit('addFiles', { files: [file] });
+    emit('upload', {});
+  }
+
+  const input = html`
+    <input id="url" value="${file.url}" readonly="true" />
+  `;
+  const copyText = html`
+    <span>Copy link</span>
+  `;
+  return html`<body>
+  <div id="white">
+    <div class="card">
+      <div>The card contents will be here.</div>
+      <div>Expires after: <span class="expires-after">exp</span></div>
+      ${input}
+      <div id="copy-link" onclick=${onclick}>
+        <img id="copy-image" src=${state.getAsset('copy-link.png')} />
+        ${copyText}
+      </div>
+      <label id="label" for="input">
+        <img src=${state.getAsset('cloud-upload.png')} />
+      </label>
+      <input id="input" name="input" type="file" onchange=${uploadFile} />
+  </div>
+</body>`;
+}

android/pages/upload.js

@@ -0,0 +1,26 @@
+const html = require('choo/html');
+
+export default function progressBar(state, emit) {
+  let percent = 0;
+  if (state.transfer && state.transfer.progress) {
+    percent = Math.floor(state.transfer.progressRatio * 100);
+  }
+  function onclick(e) {
+    e.preventDefault();
+    if (state.uploading) {
+      emit('cancel');
+    }
+    emit('pushState', '/');
+  }
+  return html`
+    <body>
+      <div id="white">
+        <div class="card">
+          <div>${percent}%</div>
+          <span class="progress" style="width: ${percent}%">.</span>
+          <div class="cancel" onclick="${onclick}">CANCEL</div>
+        </div>
+      </div>
+    </body>
+  `;
+}

android/settings.gradle

@@ -0,0 +1 @@
+include ':app'

android/stores/intents.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-console */
+
+export default function intentHandler(state, emitter) {
+  window.addEventListener(
+    'message',
+    event => {
+      if (typeof event.data !== 'string' || !event.data.startsWith('data:')) {
+        return;
+      }
+      fetch(event.data)
+        .then(res => res.blob())
+        .then(blob => {
+          emitter.emit('addFiles', { files: [blob] });
+          emitter.emit('upload', {});
+        })
+        .catch(e => console.error('ERROR ' + e + ' ' + e.stack));
+    },
+    false
+  );
+}

android/stores/state.js

@@ -0,0 +1,41 @@
+/* eslint-disable no-console */
+
+import User from '../user';
+import storage from '../../app/storage';
+
+export default function initialState(state, emitter) {
+  const files = [];
+
+  Object.assign(state, {
+    prefix: '/android_asset',
+    user: new User(storage),
+    getAsset(name) {
+      return `${state.prefix}/${name}`;
+    },
+    sentry: {
+      captureException: e => {
+        console.error('ERROR ' + e + ' ' + e.stack);
+      }
+    },
+    storage: {
+      files,
+      remove: function(fileId) {
+        console.log('REMOVE FILEID', fileId);
+      },
+      writeFile: function(file) {
+        console.log('WRITEFILE', file);
+      },
+      addFile: function(file) {
+        console.log('addfile' + JSON.stringify(file));
+        files.push(file);
+        emitter.emit('pushState', `/share/${file.id}`);
+      },
+      totalUploads: 0
+    },
+    transfer: null,
+    uploading: false,
+    settingPassword: false,
+    passwordSetError: null,
+    route: '/'
+  });
+}

android/user.js

@@ -0,0 +1,30 @@
+/* global Android */
+import User from '../app/user';
+import { deriveFileListKey } from '../app/fxa';
+
+export default class AndroidUser extends User {
+  constructor(storage, limits) {
+    super(storage, limits);
+  }
+
+  async login() {
+    Android.beginOAuthFlow();
+  }
+
+  startAuthFlow() {
+    return Promise.resolve();
+  }
+
+  async finishLogin(accountInfo) {
+    const jwks = JSON.parse(accountInfo.keys);
+    const ikm = jwks['https://identity.mozilla.com/apps/send'].k;
+    const profile = {
+      displayName: accountInfo.displayName,
+      email: accountInfo.email,
+      avatar: accountInfo.avatar,
+      access_token: accountInfo.accessToken
+    };
+    profile.fileListKey = await deriveFileListKey(ikm);
+    this.info = profile;
+  }
+}

app/api.js

@@ -1,16 +1,58 @@
-import { arrayToB64, b64ToArray } from './utils';
+import { arrayToB64, b64ToArray, delay } from './utils';
+import { ECE_RECORD_SIZE } from './ece';
 
-function post(obj) {
+let fileProtocolWssUrl = null;
+try {
+  fileProtocolWssUrl = localStorage.getItem('wssURL');
+} catch (e) {
+  // NOOP
+}
+if (!fileProtocolWssUrl) {
+  fileProtocolWssUrl = 'wss://send.firefox.com/api/ws';
+}
+
+export class ConnectionError extends Error {
+  constructor(cancelled, duration, size) {
+    super(cancelled ? '0' : 'connection closed');
+    this.cancelled = cancelled;
+    this.duration = duration;
+    this.size = size;
+  }
+}
+
+export function setFileProtocolWssUrl(url) {
+  localStorage && localStorage.setItem('wssURL', url);
+  fileProtocolWssUrl = url;
+}
+
+export function getFileProtocolWssUrl() {
+  return fileProtocolWssUrl;
+}
+
+let apiUrlPrefix = '';
+export function getApiUrl(path) {
+  return apiUrlPrefix + path;
+}
+
+export function setApiUrlPrefix(prefix) {
+  apiUrlPrefix = prefix;
+}
+
+function post(obj, bearerToken) {
+  const h = {
+    'Content-Type': 'application/json'
+  };
+  if (bearerToken) {
+    h['Authentication'] = `Bearer ${bearerToken}`;
+  }
   return {
     method: 'POST',
-    headers: new Headers({
-      'Content-Type': 'application/json'
-    }),
+    headers: new Headers(h),
     body: JSON.stringify(obj)
   };
 }
 
-function parseNonce(header) {
+export function parseNonce(header) {
   header = header || '';
   return header.split(' ')[1];
 }
@@ -19,7 +61,10 @@ async function fetchWithAuth(url, params, keychain) {
   const result = {};
   params = params || {};
   const h = await keychain.authHeader();
-  params.headers = new Headers({ Authorization: h });
+  params.headers = new Headers({
+    Authorization: h,
+    'Content-Type': 'application/json'
+  });
   const response = await fetch(url, params);
   result.response = response;
   result.ok = response.ok;
@@ -38,33 +83,44 @@ async function fetchWithAuthAndRetry(url, params, keychain) {
 }
 
 export async function del(id, owner_token) {
-  const response = await fetch(`/api/delete/${id}`, post({ owner_token }));
+  const response = await fetch(
+    getApiUrl(`/api/delete/${id}`),
+    post({ owner_token })
+  );
   return response.ok;
 }
 
-export async function setParams(id, owner_token, params) {
+export async function setParams(id, owner_token, bearerToken, params) {
   const response = await fetch(
-    `/api/params/${id}`,
-    post({
-      owner_token,
-      dlimit: params.dlimit
-    })
+    getApiUrl(`/api/params/${id}`),
+    post(
+      {
+        owner_token,
+        dlimit: params.dlimit
+      },
+      bearerToken
+    )
   );
   return response.ok;
 }
 
 export async function fileInfo(id, owner_token) {
-  const response = await fetch(`/api/info/${id}`, post({ owner_token }));
+  const response = await fetch(
+    getApiUrl(`/api/info/${id}`),
+    post({ owner_token })
+  );
+
   if (response.ok) {
     const obj = await response.json();
     return obj;
   }
+
   throw new Error(response.status);
 }
 
 export async function metadata(id, keychain) {
   const result = await fetchWithAuthAndRetry(
-    `/api/metadata/${id}`,
+    getApiUrl(`/api/metadata/${id}`),
     { method: 'GET' },
     keychain
   );
@@ -72,11 +128,12 @@ export async function metadata(id, keychain) {
     const data = await result.response.json();
     const meta = await keychain.decryptMetadata(b64ToArray(data.metadata));
     return {
-      size: data.size,
+      size: meta.size,
       ttl: data.ttl,
-      iv: meta.iv,
       name: meta.name,
-      type: meta.type
+      type: meta.type,
+      manifest: meta.manifest,
+      flagged: data.flagged
     };
   }
   throw new Error(result.response.status);
@@ -85,80 +142,212 @@ export async function metadata(id, keychain) {
 export async function setPassword(id, owner_token, keychain) {
   const auth = await keychain.authKeyB64();
   const response = await fetch(
-    `/api/password/${id}`,
+    getApiUrl(`/api/password/${id}`),
     post({ owner_token, auth })
   );
   return response.ok;
 }
 
-export function uploadFile(
+function asyncInitWebSocket(server) {
+  return new Promise((resolve, reject) => {
+    try {
+      const ws = new WebSocket(server);
+      ws.addEventListener('open', () => resolve(ws), { once: true });
+    } catch (e) {
+      reject(new ConnectionError(false));
+    }
+  });
+}
+
+function listenForResponse(ws, canceller) {
+  return new Promise((resolve, reject) => {
+    function handleClose(event) {
+      // a 'close' event before a 'message' event means the request failed
+      ws.removeEventListener('message', handleMessage);
+      reject(new ConnectionError(canceller.cancelled));
+    }
+    function handleMessage(msg) {
+      ws.removeEventListener('close', handleClose);
+      try {
+        const response = JSON.parse(msg.data);
+        if (response.error) {
+          throw new Error(response.error);
+        } else {
+          resolve(response);
+        }
+      } catch (e) {
+        reject(e);
+      }
+    }
+    ws.addEventListener('message', handleMessage, { once: true });
+    ws.addEventListener('close', handleClose, { once: true });
+  });
+}
+
+async function upload(
+  stream,
+  metadata,
+  verifierB64,
+  timeLimit,
+  dlimit,
+  bearerToken,
+  onprogress,
+  canceller
+) {
+  let size = 0;
+  const start = Date.now();
+  const host = window.location.hostname;
+  const port = window.location.port;
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const endpoint =
+    window.location.protocol === 'file:'
+      ? fileProtocolWssUrl
+      : `${protocol}//${host}${port ? ':' : ''}${port}/api/ws`;
+
+  const ws = await asyncInitWebSocket(endpoint);
+
+  try {
+    const metadataHeader = arrayToB64(new Uint8Array(metadata));
+    const fileMeta = {
+      fileMetadata: metadataHeader,
+      authorization: `send-v1 ${verifierB64}`,
+      bearer: bearerToken,
+      timeLimit,
+      dlimit
+    };
+    const uploadInfoResponse = listenForResponse(ws, canceller);
+    ws.send(JSON.stringify(fileMeta));
+    const uploadInfo = await uploadInfoResponse;
+
+    const completedResponse = listenForResponse(ws, canceller);
+
+    const reader = stream.getReader();
+    let state = await reader.read();
+    while (!state.done) {
+      if (canceller.cancelled) {
+        ws.close();
+      }
+      if (ws.readyState !== WebSocket.OPEN) {
+        break;
+      }
+      const buf = state.value;
+      ws.send(buf);
+      onprogress(size);
+      size += buf.length;
+      state = await reader.read();
+      while (
+        ws.bufferedAmount > ECE_RECORD_SIZE * 2 &&
+        ws.readyState === WebSocket.OPEN &&
+        !canceller.cancelled
+      ) {
+        await delay();
+      }
+    }
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(new Uint8Array([0])); //EOF
+    }
+
+    await completedResponse;
+    uploadInfo.duration = Date.now() - start;
+    return uploadInfo;
+  } catch (e) {
+    e.size = size;
+    e.duration = Date.now() - start;
+    throw e;
+  } finally {
+    if (![WebSocket.CLOSED, WebSocket.CLOSING].includes(ws.readyState)) {
+      ws.close();
+    }
+  }
+}
+
+export function uploadWs(
   encrypted,
   metadata,
   verifierB64,
-  keychain,
+  timeLimit,
+  dlimit,
+  bearerToken,
   onprogress
 ) {
-  const xhr = new XMLHttpRequest();
-  const upload = {
+  const canceller = { cancelled: false };
+
+  return {
     cancel: function() {
-      xhr.abort();
+      canceller.cancelled = true;
     },
-    result: new Promise(function(resolve, reject) {
-      xhr.addEventListener('loadend', function() {
-        const authHeader = xhr.getResponseHeader('WWW-Authenticate');
-        if (authHeader) {
-          keychain.nonce = parseNonce(authHeader);
-        }
-        if (xhr.status === 200) {
-          const responseObj = JSON.parse(xhr.responseText);
-          return resolve({
-            url: responseObj.url,
-            id: responseObj.id,
-            ownerToken: responseObj.owner
-          });
-        }
-        reject(new Error(xhr.status));
-      });
-    })
+
+    result: upload(
+      encrypted,
+      metadata,
+      verifierB64,
+      timeLimit,
+      dlimit,
+      bearerToken,
+      onprogress,
+      canceller
+    )
   };
-  const dataView = new DataView(encrypted);
-  const blob = new Blob([dataView], { type: 'application/octet-stream' });
-  const fd = new FormData();
-  fd.append('data', blob);
-  xhr.upload.addEventListener('progress', function(event) {
-    if (event.lengthComputable) {
-      onprogress([event.loaded, event.total]);
-    }
-  });
-  xhr.open('post', '/api/upload', true);
-  xhr.setRequestHeader('X-File-Metadata', arrayToB64(new Uint8Array(metadata)));
-  xhr.setRequestHeader('Authorization', `send-v1 ${verifierB64}`);
-  xhr.send(fd);
-  return upload;
 }
 
-function download(id, keychain, onprogress, canceller) {
+////////////////////////
+
+async function _downloadStream(id, dlToken, signal) {
+  const response = await fetch(getApiUrl(`/api/download/${id}`), {
+    signal: signal,
+    method: 'GET',
+    headers: { Authorization: `Bearer ${dlToken}` }
+  });
+
+  if (response.status !== 200) {
+    throw new Error(response.status);
+  }
+
+  return response.body;
+}
+
+async function tryDownloadStream(id, dlToken, signal, tries = 2) {
+  try {
+    const result = await _downloadStream(id, dlToken, signal);
+    return result;
+  } catch (e) {
+    if (e.message === '401' && --tries > 0) {
+      return tryDownloadStream(id, dlToken, signal, tries);
+    }
+    if (e.name === 'AbortError') {
+      throw new Error('0');
+    }
+    throw e;
+  }
+}
+
+export function downloadStream(id, dlToken) {
+  const controller = new AbortController();
+  function cancel() {
+    controller.abort();
+  }
+  return {
+    cancel,
+    result: tryDownloadStream(id, dlToken, controller.signal)
+  };
+}
+
+//////////////////
+
+async function download(id, dlToken, onprogress, canceller) {
   const xhr = new XMLHttpRequest();
   canceller.oncancel = function() {
     xhr.abort();
   };
-  return new Promise(async function(resolve, reject) {
+  return new Promise(function(resolve, reject) {
     xhr.addEventListener('loadend', function() {
       canceller.oncancel = function() {};
-      const authHeader = xhr.getResponseHeader('WWW-Authenticate');
-      if (authHeader) {
-        keychain.nonce = parseNonce(authHeader);
-      }
       if (xhr.status !== 200) {
         return reject(new Error(xhr.status));
       }
 
       const blob = new Blob([xhr.response]);
-      const fileReader = new FileReader();
-      fileReader.readAsArrayBuffer(blob);
-      fileReader.onload = function() {
-        resolve(this.result);
-      };
+      resolve(blob);
     });
 
     xhr.addEventListener('progress', function(event) {
@@ -166,28 +355,27 @@ function download(id, keychain, onprogress, canceller) {
         onprogress(event.loaded);
       }
     });
-    const auth = await keychain.authHeader();
-    xhr.open('get', `/api/download/${id}`);
-    xhr.setRequestHeader('Authorization', auth);
+    xhr.open('get', getApiUrl(`/api/download/blob/${id}`));
+    xhr.setRequestHeader('Authorization', `Bearer ${dlToken}`);
     xhr.responseType = 'blob';
     xhr.send();
     onprogress(0);
   });
 }
 
-async function tryDownload(id, keychain, onprogress, canceller, tries = 1) {
+async function tryDownload(id, dlToken, onprogress, canceller, tries = 2) {
   try {
-    const result = await download(id, keychain, onprogress, canceller);
+    const result = await download(id, dlToken, onprogress, canceller);
     return result;
   } catch (e) {
     if (e.message === '401' && --tries > 0) {
-      return tryDownload(id, keychain, onprogress, canceller, tries);
+      return tryDownload(id, dlToken, onprogress, canceller, tries);
     }
     throw e;
   }
 }
 
-export function downloadFile(id, keychain, onprogress) {
+export function downloadFile(id, dlToken, onprogress) {
   const canceller = {
     oncancel: function() {} // download() sets this
   };
@@ -196,6 +384,89 @@ export function downloadFile(id, keychain, onprogress) {
   }
   return {
     cancel,
-    result: tryDownload(id, keychain, onprogress, canceller, 2)
+    result: tryDownload(id, dlToken, onprogress, canceller)
   };
 }
+
+export async function getFileList(bearerToken, kid) {
+  const headers = new Headers({ Authorization: `Bearer ${bearerToken}` });
+  const response = await fetch(getApiUrl(`/api/filelist/${kid}`), { headers });
+  if (response.ok) {
+    const encrypted = await response.blob();
+    return encrypted;
+  }
+  throw new Error(response.status);
+}
+
+export async function setFileList(bearerToken, kid, data) {
+  const headers = new Headers({ Authorization: `Bearer ${bearerToken}` });
+  const response = await fetch(getApiUrl(`/api/filelist/${kid}`), {
+    headers,
+    method: 'POST',
+    body: data
+  });
+  return response.ok;
+}
+
+export function sendMetrics(blob) {
+  if (!navigator.sendBeacon) {
+    return;
+  }
+  try {
+    navigator.sendBeacon(getApiUrl('/api/metrics'), blob);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export async function getConstants() {
+  const response = await fetch(getApiUrl('/config'));
+
+  if (response.ok) {
+    const obj = await response.json();
+    return obj;
+  }
+
+  throw new Error(response.status);
+}
+
+export async function reportLink(id, keychain, reason) {
+  const result = await fetchWithAuthAndRetry(
+    getApiUrl(`/api/report/${id}`),
+    {
+      method: 'POST',
+      body: JSON.stringify({ reason })
+    },
+    keychain
+  );
+
+  if (result.ok) {
+    return;
+  }
+
+  throw new Error(result.response.status);
+}
+
+export async function getDownloadToken(id, keychain) {
+  const result = await fetchWithAuthAndRetry(
+    getApiUrl(`/api/download/token/${id}`),
+    {
+      method: 'GET'
+    },
+    keychain
+  );
+
+  if (result.ok) {
+    return (await result.response.json()).token;
+  }
+  throw new Error(result.response.status);
+}
+
+export async function downloadDone(id, dlToken) {
+  const headers = new Headers({ Authorization: `Bearer ${dlToken}` });
+  const response = await fetch(getApiUrl(`/api/download/done/${id}`), {
+    headers,
+    method: 'POST'
+  });
+  return response.ok;
+}

app/archive.js

@@ -0,0 +1,83 @@
+import { blobStream, concatStream } from './streams';
+
+function isDupe(newFile, array) {
+  for (const file of array) {
+    if (
+      newFile.name === file.name &&
+      newFile.size === file.size &&
+      newFile.lastModified === file.lastModified
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export default class Archive {
+  constructor(files = [], defaultTimeLimit = 86400) {
+    this.files = Array.from(files);
+    this.defaultTimeLimit = defaultTimeLimit;
+    this.timeLimit = defaultTimeLimit;
+    this.dlimit = 1;
+    this.password = null;
+  }
+
+  get name() {
+    return this.files.length > 1 ? 'Send-Archive.zip' : this.files[0].name;
+  }
+
+  get type() {
+    return this.files.length > 1 ? 'send-archive' : this.files[0].type;
+  }
+
+  get size() {
+    return this.files.reduce((total, file) => total + file.size, 0);
+  }
+
+  get numFiles() {
+    return this.files.length;
+  }
+
+  get manifest() {
+    return {
+      files: this.files.map(file => ({
+        name: file.name,
+        size: file.size,
+        type: file.type
+      }))
+    };
+  }
+
+  get stream() {
+    return concatStream(this.files.map(file => blobStream(file)));
+  }
+
+  addFiles(files, maxSize, maxFiles) {
+    if (this.files.length + files.length > maxFiles) {
+      throw new Error('tooManyFiles');
+    }
+    const newFiles = files.filter(
+      file => file.size > 0 && !isDupe(file, this.files)
+    );
+    const newSize = newFiles.reduce((total, file) => total + file.size, 0);
+    if (this.size + newSize > maxSize) {
+      throw new Error('fileTooBig');
+    }
+    this.files = this.files.concat(newFiles);
+    return true;
+  }
+
+  remove(file) {
+    const index = this.files.indexOf(file);
+    if (index > -1) {
+      this.files.splice(index, 1);
+    }
+  }
+
+  clear() {
+    this.files = [];
+    this.dlimit = 1;
+    this.timeLimit = this.defaultTimeLimit;
+    this.password = null;
+  }
+}

app/base.css

@@ -1,268 +0,0 @@
-:root {
-  --pageBGColor: #fff;
-  --primaryControlBGColor: #0297f8;
-  --primaryControlFGColor: #fff;
-  --primaryControlHoverColor: #0287e8;
-  --inputTextColor: #737373;
-  --errorColor: #d70022;
-  --linkColor: #0094fb;
-  --textColor: #0c0c0d;
-  --lightTextColor: #737373;
-  --successControlBGColor: #05a700;
-  --successControlFGColor: #fff;
-}
-
-html {
-  background: url('../assets/send_bg.svg');
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
-    'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
-  font-weight: 200;
-  background-size: 110%;
-  background-repeat: no-repeat;
-  background-position: center top;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
-    'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  min-height: 100vh;
-}
-
-input,
-select,
-textarea,
-button {
-  font-family: inherit;
-  margin: 0;
-}
-
-a {
-  text-decoration: none;
-}
-
-.main {
-  flex: auto;
-  max-width: 650px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box;
-  width: 96%;
-}
-
-.noscript {
-  text-align: center;
-  border: 3px solid var(--errorColor);
-  border-radius: 6px;
-}
-
-.btn {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--primaryControlFGColor);
-  cursor: pointer;
-  text-align: center;
-  background: var(--primaryControlBGColor);
-  border: 1px solid var(--primaryControlBGColor);
-  border-radius: 5px;
-}
-
-.btn:hover {
-  background-color: var(--primaryControlHoverColor);
-}
-
-.btn--cancel {
-  color: var(--errorColor);
-  background: var(--pageBGColor);
-  font-size: 15px;
-  border: 0;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.btn--cancel:disabled {
-  text-decoration: none;
-  cursor: auto;
-}
-
-.btn--cancel:hover {
-  background-color: var(--pageBGColor);
-}
-
-.input {
-  flex: 2 0 auto;
-  border: 1px solid var(--primaryControlBGColor);
-  border-radius: 6px 0 0 6px;
-  font-size: 20px;
-  color: var(--inputTextColor);
-  font-family: 'SF Pro Text', sans-serif;
-  letter-spacing: 0;
-  line-height: 23px;
-  font-weight: 300;
-  height: 46px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.input--error {
-  border-color: var(--errorColor);
-}
-
-.input--noBtn {
-  border-radius: 6px;
-}
-
-.inputBtn {
-  flex: auto;
-  background: var(--primaryControlBGColor);
-  border-radius: 0 6px 6px 0;
-  border: 1px solid var(--primaryControlBGColor);
-  color: var(--primaryControlFGColor);
-  cursor: pointer;
-
-  /* Force flat button look */
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  appearance: none;
-  font-size: 15px;
-  padding-bottom: 3px;
-  padding-left: 10px;
-  padding-right: 10px;
-  white-space: nowrap;
-}
-
-.inputBtn:disabled {
-  cursor: auto;
-}
-
-.inputBtn:hover {
-  background-color: var(--primaryControlHoverColor);
-}
-
-.inputBtn--hidden {
-  display: none;
-}
-
-.cursor--pointer {
-  cursor: pointer;
-}
-
-.link {
-  color: var(--linkColor);
-  text-decoration: none;
-}
-
-.link:focus,
-.link:active,
-.link:hover {
-  color: var(--primaryControlHoverColor);
-}
-
-.link--action {
-  text-decoration: underline;
-  text-align: center;
-}
-
-.page {
-  margin: 0 auto 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-}
-
-.progressSection {
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-  font-size: 15px;
-}
-
-.progressSection__text {
-  color: var(--lightTextColor);
-  letter-spacing: -0.4px;
-  margin-top: 24px;
-  margin-bottom: 74px;
-}
-
-.effect--fadeOut {
-  opacity: 0;
-  animation: fadeout 200ms linear;
-}
-
-@keyframes fadeout {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.effect--fadeIn {
-  opacity: 1;
-  animation: fadein 200ms linear;
-}
-
-@keyframes fadein {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.error {
-  color: var(--errorColor);
-}
-
-.title {
-  font-size: 33px;
-  line-height: 40px;
-  margin: 20px auto;
-  text-align: center;
-  max-width: 520px;
-  font-family: 'SF Pro Text', sans-serif;
-  word-wrap: break-word;
-}
-
-.description {
-  font-size: 15px;
-  line-height: 23px;
-  max-width: 630px;
-  text-align: center;
-  margin: 0 auto 60px;
-  color: var(--textColor);
-  width: 92%;
-}
-
-@media (max-device-width: 768px), (max-width: 768px) {
-  .description {
-    margin: 0 auto 25px;
-  }
-}
-
-@media (max-device-width: 520px), (max-width: 520px) {
-  .input {
-    font-size: 22px;
-    padding: 10px 10px;
-    border-radius: 6px 6px 0 0;
-  }
-
-  .inputBtn {
-    border-radius: 0 0 6px 6px;
-    flex: 0 1 65px;
-  }
-
-  .input--noBtn {
-    border-radius: 6px;
-  }
-}

app/capabilities.js

@@ -0,0 +1,116 @@
+/* global AUTH_CONFIG */
+import { browserName, locale } from './utils';
+
+async function checkCrypto() {
+  try {
+    const key = await crypto.subtle.generateKey(
+      {
+        name: 'AES-GCM',
+        length: 128
+      },
+      true,
+      ['encrypt', 'decrypt']
+    );
+    await crypto.subtle.exportKey('raw', key);
+    await crypto.subtle.encrypt(
+      {
+        name: 'AES-GCM',
+        iv: crypto.getRandomValues(new Uint8Array(12)),
+        tagLength: 128
+      },
+      key,
+      new ArrayBuffer(8)
+    );
+    await crypto.subtle.importKey(
+      'raw',
+      crypto.getRandomValues(new Uint8Array(16)),
+      'PBKDF2',
+      false,
+      ['deriveKey']
+    );
+    await crypto.subtle.importKey(
+      'raw',
+      crypto.getRandomValues(new Uint8Array(16)),
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+    await crypto.subtle.generateKey(
+      {
+        name: 'ECDH',
+        namedCurve: 'P-256'
+      },
+      true,
+      ['deriveBits']
+    );
+    return true;
+  } catch (err) {
+    try {
+      window.asmCrypto = await import('asmcrypto.js');
+      await import('@dannycoates/webcrypto-liner/build/shim');
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+}
+
+function checkStreams() {
+  try {
+    new ReadableStream({
+      pull() {}
+    });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+async function polyfillStreams() {
+  try {
+    await import('@mattiasbuelens/web-streams-polyfill');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export default async function getCapabilities() {
+  const browser = browserName();
+  const isMobile = /mobi|android/i.test(navigator.userAgent);
+  const serviceWorker = 'serviceWorker' in navigator && browser !== 'edge';
+  let crypto = await checkCrypto();
+  const nativeStreams = checkStreams();
+  let polyStreams = false;
+  if (!nativeStreams) {
+    polyStreams = await polyfillStreams();
+  }
+  let account = typeof AUTH_CONFIG !== 'undefined';
+  try {
+    account = account && !!localStorage;
+  } catch (e) {
+    account = false;
+  }
+  const share =
+    isMobile &&
+    typeof navigator.share === 'function' &&
+    locale().startsWith('en'); // en until strings merge
+
+  const standalone =
+    window.matchMedia('(display-mode: standalone)').matches ||
+    navigator.standalone;
+
+  const mobileFirefox = browser === 'firefox' && isMobile;
+
+  return {
+    account,
+    crypto,
+    serviceWorker,
+    streamUpload: nativeStreams || polyStreams,
+    streamDownload:
+      nativeStreams && serviceWorker && browser !== 'safari' && !mobileFirefox,
+    multifile: nativeStreams || polyStreams,
+    share,
+    standalone
+  };
+}

app/controller.js

@@ -0,0 +1,352 @@
+import FileSender from './fileSender';
+import FileReceiver from './fileReceiver';
+import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
+import * as metrics from './metrics';
+import { bytes, locale } from './utils';
+import okDialog from './ui/okDialog';
+import copyDialog from './ui/copyDialog';
+import shareDialog from './ui/shareDialog';
+import signupDialog from './ui/signupDialog';
+import surveyDialog from './ui/surveyDialog';
+
+export default function(state, emitter) {
+  let lastRender = 0;
+  let updateTitle = false;
+
+  function render() {
+    emitter.emit('render');
+  }
+
+  async function checkFiles() {
+    const changes = await state.user.syncFileList();
+    const rerender = changes.incoming || changes.downloadCount;
+    if (rerender) {
+      render();
+    }
+  }
+
+  function updateProgress() {
+    if (updateTitle) {
+      emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
+    }
+    render();
+  }
+
+  emitter.on('DOMContentLoaded', () => {
+    document.addEventListener('blur', () => (updateTitle = true));
+    document.addEventListener('focus', () => {
+      updateTitle = false;
+      emitter.emit('DOMTitleChange', 'Firefox Send');
+    });
+    checkFiles();
+  });
+
+  emitter.on('render', () => {
+    lastRender = Date.now();
+  });
+
+  emitter.on('login', email => {
+    state.user.login(email);
+  });
+
+  emitter.on('logout', async () => {
+    await state.user.logout();
+    metrics.loggedOut({ trigger: 'button' });
+    emitter.emit('pushState', '/');
+  });
+
+  emitter.on('removeUpload', file => {
+    state.archive.remove(file);
+    if (state.archive.numFiles === 0) {
+      state.archive.clear();
+    }
+    render();
+  });
+
+  emitter.on('delete', async ownedFile => {
+    try {
+      metrics.deletedUpload({
+        size: ownedFile.size,
+        time: ownedFile.time,
+        speed: ownedFile.speed,
+        type: ownedFile.type,
+        ttl: ownedFile.expiresAt - Date.now(),
+        location
+      });
+      state.storage.remove(ownedFile.id);
+      await ownedFile.del();
+    } catch (e) {
+      state.sentry.captureException(e);
+    }
+    render();
+  });
+
+  emitter.on('cancel', () => {
+    state.transfer.cancel();
+  });
+
+  emitter.on('addFiles', async ({ files }) => {
+    if (files.length < 1) {
+      return;
+    }
+    const maxSize = state.user.maxSize;
+    try {
+      state.archive.addFiles(
+        files,
+        maxSize,
+        state.LIMITS.MAX_FILES_PER_ARCHIVE
+      );
+    } catch (e) {
+      if (e.message === 'fileTooBig' && maxSize < state.LIMITS.MAX_FILE_SIZE) {
+        return emitter.emit('signup-cta', 'size');
+      }
+      state.modal = okDialog(
+        state.translate(e.message, {
+          size: bytes(maxSize),
+          count: state.LIMITS.MAX_FILES_PER_ARCHIVE
+        })
+      );
+    }
+    render();
+  });
+
+  emitter.on('signup-cta', source => {
+    const query = state.query;
+    state.user.startAuthFlow(source, {
+      campaign: query.utm_campaign,
+      content: query.utm_content,
+      medium: query.utm_medium,
+      source: query.utm_source,
+      term: query.utm_term
+    });
+    state.modal = signupDialog(source);
+    render();
+  });
+
+  emitter.on('authenticate', async (code, oauthState) => {
+    try {
+      await state.user.finishLogin(code, oauthState);
+      await state.user.syncFileList();
+      emitter.emit('replaceState', '/');
+    } catch (e) {
+      emitter.emit('replaceState', '/error');
+      setTimeout(render);
+    }
+  });
+
+  emitter.on('upload', async () => {
+    if (state.storage.files.length >= state.LIMITS.MAX_ARCHIVES_PER_USER) {
+      state.modal = okDialog(
+        state.translate('tooManyArchives', {
+          count: state.LIMITS.MAX_ARCHIVES_PER_USER
+        })
+      );
+      return render();
+    }
+    const archive = state.archive;
+    const sender = new FileSender();
+
+    sender.on('progress', updateProgress);
+    sender.on('encrypting', render);
+    sender.on('complete', render);
+    state.transfer = sender;
+    state.uploading = true;
+    render();
+
+    const links = openLinksInNewTab();
+    await delay(200);
+    const start = Date.now();
+    try {
+      const ownedFile = await sender.upload(archive, state.user.bearerToken);
+      state.storage.totalUploads += 1;
+      const duration = Date.now() - start;
+      metrics.completedUpload(archive, duration);
+
+      state.storage.addFile(ownedFile);
+      // TODO integrate password into /upload request
+      if (archive.password) {
+        emitter.emit('password', {
+          password: archive.password,
+          file: ownedFile
+        });
+      }
+      state.modal = state.capabilities.share
+        ? shareDialog(ownedFile.name, ownedFile.url)
+        : copyDialog(ownedFile.name, ownedFile.url);
+    } catch (err) {
+      if (err.message === '0') {
+        //cancelled. do nothing
+        metrics.cancelledUpload(archive, err.duration);
+        render();
+      } else if (err.message === '401') {
+        const refreshed = await state.user.refresh();
+        if (refreshed) {
+          return emitter.emit('upload');
+        }
+        emitter.emit('pushState', '/error');
+      } else {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        state.sentry.withScope(scope => {
+          scope.setExtra('duration', err.duration);
+          scope.setExtra('size', err.size);
+          state.sentry.captureException(err);
+        });
+        metrics.stoppedUpload(archive, err.duration);
+        emitter.emit('pushState', '/error');
+      }
+    } finally {
+      openLinksInNewTab(links, false);
+      archive.clear();
+      state.uploading = false;
+      state.transfer = null;
+      await state.user.syncFileList();
+      render();
+    }
+  });
+
+  emitter.on('password', async ({ password, file }) => {
+    try {
+      state.settingPassword = true;
+      render();
+      await file.setPassword(password);
+      state.storage.writeFile(file);
+      await delay(1000);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      state.passwordSetError = err;
+    } finally {
+      state.settingPassword = false;
+    }
+    render();
+  });
+
+  emitter.on('getMetadata', async () => {
+    const file = state.fileInfo;
+
+    const receiver = new FileReceiver(file);
+    try {
+      await receiver.getMetadata();
+      state.transfer = receiver;
+    } catch (e) {
+      if (e.message === '401' || e.message === '404') {
+        file.password = null;
+        file.dead = e.message === '404';
+      } else {
+        console.error(e);
+        return emitter.emit('pushState', '/error');
+      }
+    }
+
+    render();
+  });
+
+  emitter.on('download', async file => {
+    state.transfer.on('progress', updateProgress);
+    state.transfer.on('decrypting', render);
+    state.transfer.on('complete', render);
+    const links = openLinksInNewTab();
+    const size = file.size;
+    const start = Date.now();
+    try {
+      const dl = state.transfer.download({
+        stream: state.capabilities.streamDownload,
+        storage: state.storage
+      });
+      render();
+      await dl;
+      state.storage.totalDownloads += 1;
+      const duration = Date.now() - start;
+      metrics.completedDownload({
+        size,
+        duration,
+        password_protected: file.requiresPassword
+      });
+    } catch (err) {
+      if (err.message === '0') {
+        // download cancelled
+        state.transfer.reset();
+        render();
+      } else {
+        // eslint-disable-next-line no-console
+        state.transfer = null;
+        const location = ['404', '403'].includes(err.message)
+          ? '/404'
+          : '/error';
+        if (location === '/error') {
+          state.sentry.withScope(scope => {
+            scope.setExtra('duration', err.duration);
+            scope.setExtra('size', err.size);
+            scope.setExtra('progress', err.progress);
+            state.sentry.captureException(err);
+          });
+          const duration = Date.now() - start;
+          metrics.stoppedDownload({
+            size,
+            duration,
+            password_protected: file.requiresPassword
+          });
+        }
+        emitter.emit('pushState', location);
+      }
+    } finally {
+      openLinksInNewTab(links, false);
+    }
+  });
+
+  emitter.on('copy', ({ url }) => {
+    copyToClipboard(url);
+    // metrics.copiedLink({ location });
+  });
+
+  emitter.on('closeModal', () => {
+    if (
+      state.PREFS.surveyUrl &&
+      ['copy', 'share'].includes(state.modal.type) &&
+      locale().startsWith('en') &&
+      (state.storage.totalUploads > 1 || state.storage.totalDownloads > 0) &&
+      !state.user.surveyed
+    ) {
+      state.user.surveyed = true;
+      state.modal = surveyDialog();
+    } else {
+      state.modal = null;
+    }
+    render();
+  });
+
+  emitter.on('report', async ({ reason }) => {
+    try {
+      const receiver = state.transfer || new FileReceiver(state.fileInfo);
+      await receiver.reportLink(reason);
+      render();
+    } catch (err) {
+      console.error(err);
+      if (err.message === '404') {
+        state.fileInfo = { reported: true };
+        return render();
+      }
+      emitter.emit('pushState', '/error');
+    }
+  });
+
+  setInterval(() => {
+    // poll for updates of the upload list
+    if (!state.modal && state.route === '/') {
+      checkFiles();
+    }
+  }, 2 * 60 * 1000);
+
+  setInterval(() => {
+    // poll for rerendering the file list countdown timers
+    if (
+      !state.modal &&
+      state.route === '/' &&
+      state.storage.files.length > 0 &&
+      Date.now() - lastRender > 30000
+    ) {
+      render();
+    }
+  }, 60000);
+}

app/crc32.js

@@ -0,0 +1,266 @@
+const LOOKUP = Int32Array.from([
+  0x00000000,
+  0x77073096,
+  0xee0e612c,
+  0x990951ba,
+  0x076dc419,
+  0x706af48f,
+  0xe963a535,
+  0x9e6495a3,
+  0x0edb8832,
+  0x79dcb8a4,
+  0xe0d5e91e,
+  0x97d2d988,
+  0x09b64c2b,
+  0x7eb17cbd,
+  0xe7b82d07,
+  0x90bf1d91,
+  0x1db71064,
+  0x6ab020f2,
+  0xf3b97148,
+  0x84be41de,
+  0x1adad47d,
+  0x6ddde4eb,
+  0xf4d4b551,
+  0x83d385c7,
+  0x136c9856,
+  0x646ba8c0,
+  0xfd62f97a,
+  0x8a65c9ec,
+  0x14015c4f,
+  0x63066cd9,
+  0xfa0f3d63,
+  0x8d080df5,
+  0x3b6e20c8,
+  0x4c69105e,
+  0xd56041e4,
+  0xa2677172,
+  0x3c03e4d1,
+  0x4b04d447,
+  0xd20d85fd,
+  0xa50ab56b,
+  0x35b5a8fa,
+  0x42b2986c,
+  0xdbbbc9d6,
+  0xacbcf940,
+  0x32d86ce3,
+  0x45df5c75,
+  0xdcd60dcf,
+  0xabd13d59,
+  0x26d930ac,
+  0x51de003a,
+  0xc8d75180,
+  0xbfd06116,
+  0x21b4f4b5,
+  0x56b3c423,
+  0xcfba9599,
+  0xb8bda50f,
+  0x2802b89e,
+  0x5f058808,
+  0xc60cd9b2,
+  0xb10be924,
+  0x2f6f7c87,
+  0x58684c11,
+  0xc1611dab,
+  0xb6662d3d,
+  0x76dc4190,
+  0x01db7106,
+  0x98d220bc,
+  0xefd5102a,
+  0x71b18589,
+  0x06b6b51f,
+  0x9fbfe4a5,
+  0xe8b8d433,
+  0x7807c9a2,
+  0x0f00f934,
+  0x9609a88e,
+  0xe10e9818,
+  0x7f6a0dbb,
+  0x086d3d2d,
+  0x91646c97,
+  0xe6635c01,
+  0x6b6b51f4,
+  0x1c6c6162,
+  0x856530d8,
+  0xf262004e,
+  0x6c0695ed,
+  0x1b01a57b,
+  0x8208f4c1,
+  0xf50fc457,
+  0x65b0d9c6,
+  0x12b7e950,
+  0x8bbeb8ea,
+  0xfcb9887c,
+  0x62dd1ddf,
+  0x15da2d49,
+  0x8cd37cf3,
+  0xfbd44c65,
+  0x4db26158,
+  0x3ab551ce,
+  0xa3bc0074,
+  0xd4bb30e2,
+  0x4adfa541,
+  0x3dd895d7,
+  0xa4d1c46d,
+  0xd3d6f4fb,
+  0x4369e96a,
+  0x346ed9fc,
+  0xad678846,
+  0xda60b8d0,
+  0x44042d73,
+  0x33031de5,
+  0xaa0a4c5f,
+  0xdd0d7cc9,
+  0x5005713c,
+  0x270241aa,
+  0xbe0b1010,
+  0xc90c2086,
+  0x5768b525,
+  0x206f85b3,
+  0xb966d409,
+  0xce61e49f,
+  0x5edef90e,
+  0x29d9c998,
+  0xb0d09822,
+  0xc7d7a8b4,
+  0x59b33d17,
+  0x2eb40d81,
+  0xb7bd5c3b,
+  0xc0ba6cad,
+  0xedb88320,
+  0x9abfb3b6,
+  0x03b6e20c,
+  0x74b1d29a,
+  0xead54739,
+  0x9dd277af,
+  0x04db2615,
+  0x73dc1683,
+  0xe3630b12,
+  0x94643b84,
+  0x0d6d6a3e,
+  0x7a6a5aa8,
+  0xe40ecf0b,
+  0x9309ff9d,
+  0x0a00ae27,
+  0x7d079eb1,
+  0xf00f9344,
+  0x8708a3d2,
+  0x1e01f268,
+  0x6906c2fe,
+  0xf762575d,
+  0x806567cb,
+  0x196c3671,
+  0x6e6b06e7,
+  0xfed41b76,
+  0x89d32be0,
+  0x10da7a5a,
+  0x67dd4acc,
+  0xf9b9df6f,
+  0x8ebeeff9,
+  0x17b7be43,
+  0x60b08ed5,
+  0xd6d6a3e8,
+  0xa1d1937e,
+  0x38d8c2c4,
+  0x4fdff252,
+  0xd1bb67f1,
+  0xa6bc5767,
+  0x3fb506dd,
+  0x48b2364b,
+  0xd80d2bda,
+  0xaf0a1b4c,
+  0x36034af6,
+  0x41047a60,
+  0xdf60efc3,
+  0xa867df55,
+  0x316e8eef,
+  0x4669be79,
+  0xcb61b38c,
+  0xbc66831a,
+  0x256fd2a0,
+  0x5268e236,
+  0xcc0c7795,
+  0xbb0b4703,
+  0x220216b9,
+  0x5505262f,
+  0xc5ba3bbe,
+  0xb2bd0b28,
+  0x2bb45a92,
+  0x5cb36a04,
+  0xc2d7ffa7,
+  0xb5d0cf31,
+  0x2cd99e8b,
+  0x5bdeae1d,
+  0x9b64c2b0,
+  0xec63f226,
+  0x756aa39c,
+  0x026d930a,
+  0x9c0906a9,
+  0xeb0e363f,
+  0x72076785,
+  0x05005713,
+  0x95bf4a82,
+  0xe2b87a14,
+  0x7bb12bae,
+  0x0cb61b38,
+  0x92d28e9b,
+  0xe5d5be0d,
+  0x7cdcefb7,
+  0x0bdbdf21,
+  0x86d3d2d4,
+  0xf1d4e242,
+  0x68ddb3f8,
+  0x1fda836e,
+  0x81be16cd,
+  0xf6b9265b,
+  0x6fb077e1,
+  0x18b74777,
+  0x88085ae6,
+  0xff0f6a70,
+  0x66063bca,
+  0x11010b5c,
+  0x8f659eff,
+  0xf862ae69,
+  0x616bffd3,
+  0x166ccf45,
+  0xa00ae278,
+  0xd70dd2ee,
+  0x4e048354,
+  0x3903b3c2,
+  0xa7672661,
+  0xd06016f7,
+  0x4969474d,
+  0x3e6e77db,
+  0xaed16a4a,
+  0xd9d65adc,
+  0x40df0b66,
+  0x37d83bf0,
+  0xa9bcae53,
+  0xdebb9ec5,
+  0x47b2cf7f,
+  0x30b5ffe9,
+  0xbdbdf21c,
+  0xcabac28a,
+  0x53b39330,
+  0x24b4a3a6,
+  0xbad03605,
+  0xcdd70693,
+  0x54de5729,
+  0x23d967bf,
+  0xb3667a2e,
+  0xc4614ab8,
+  0x5d681b02,
+  0x2a6f2b94,
+  0xb40bbe37,
+  0xc30c8ea1,
+  0x5a05df1b,
+  0x2d02ef8d
+]);
+
+module.exports = function crc32(uint8Array, previous) {
+  let crc = previous === 0 ? 0 : ~~previous ^ -1;
+  for (let i = 0; i < uint8Array.byteLength; i++) {
+    crc = LOOKUP[(crc ^ uint8Array[i]) & 0xff] ^ (crc >>> 8);
+  }
+  return (crc ^ -1) >>> 0;
+};

app/dragManager.js

@@ -1,6 +1,3 @@
-/* global MAXFILESIZE */
-const { bytes } = require('./utils');
-
 export default function(state, emitter) {
   emitter.on('DOMContentLoaded', () => {
     document.body.addEventListener('dragover', event => {
@@ -9,29 +6,16 @@ export default function(state, emitter) {
       }
     });
     document.body.addEventListener('drop', event => {
-      if (state.route === '/' && !state.uploading) {
+      if (
+        state.route === '/' &&
+        !state.uploading &&
+        event.dataTransfer &&
+        event.dataTransfer.files
+      ) {
         event.preventDefault();
-        document
-          .querySelector('.uploadArea')
-          .classList.remove('uploadArea--dragging');
-        const target = event.dataTransfer;
-        if (target.files.length === 0) {
-          return;
-        }
-        if (target.files.length > 1) {
-          // eslint-disable-next-line no-alert
-          return alert(state.translate('uploadPageMultipleFilesAlert'));
-        }
-        const file = target.files[0];
-        if (file.size === 0) {
-          return;
-        }
-        if (file.size > MAXFILESIZE) {
-          // eslint-disable-next-line no-alert
-          alert(state.translate('fileTooBig', { size: bytes(MAXFILESIZE) }));
-          return;
-        }
-        emitter.emit('upload', { file, type: 'drop' });
+        emitter.emit('addFiles', {
+          files: Array.from(event.dataTransfer.files)
+        });
       }
     });
   });

app/ece.js

@@ -0,0 +1,306 @@
+import { transformStream } from './streams';
+import { concat } from './utils';
+
+const NONCE_LENGTH = 12;
+const TAG_LENGTH = 16;
+const KEY_LENGTH = 16;
+const MODE_ENCRYPT = 'encrypt';
+const MODE_DECRYPT = 'decrypt';
+export const ECE_RECORD_SIZE = 1024 * 64;
+
+const encoder = new TextEncoder();
+
+function generateSalt(len) {
+  const randSalt = new Uint8Array(len);
+  crypto.getRandomValues(randSalt);
+  return randSalt.buffer;
+}
+
+class ECETransformer {
+  constructor(mode, ikm, rs, salt) {
+    this.mode = mode;
+    this.prevChunk;
+    this.seq = 0;
+    this.firstchunk = true;
+    this.rs = rs;
+    this.ikm = ikm.buffer;
+    this.salt = salt;
+  }
+
+  async generateKey() {
+    const inputKey = await crypto.subtle.importKey(
+      'raw',
+      this.ikm,
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+
+    return crypto.subtle.deriveKey(
+      {
+        name: 'HKDF',
+        salt: this.salt,
+        info: encoder.encode('Content-Encoding: aes128gcm\0'),
+        hash: 'SHA-256'
+      },
+      inputKey,
+      {
+        name: 'AES-GCM',
+        length: 128
+      },
+      true, // Edge polyfill requires key to be extractable to encrypt :/
+      ['encrypt', 'decrypt']
+    );
+  }
+
+  async generateNonceBase() {
+    const inputKey = await crypto.subtle.importKey(
+      'raw',
+      this.ikm,
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+
+    const base = await crypto.subtle.exportKey(
+      'raw',
+      await crypto.subtle.deriveKey(
+        {
+          name: 'HKDF',
+          salt: this.salt,
+          info: encoder.encode('Content-Encoding: nonce\0'),
+          hash: 'SHA-256'
+        },
+        inputKey,
+        {
+          name: 'AES-GCM',
+          length: 128
+        },
+        true,
+        ['encrypt', 'decrypt']
+      )
+    );
+
+    return base.slice(0, NONCE_LENGTH);
+  }
+
+  generateNonce(seq) {
+    if (seq > 0xffffffff) {
+      throw new Error('record sequence number exceeds limit');
+    }
+    const nonce = new DataView(this.nonceBase.slice());
+    const m = nonce.getUint32(nonce.byteLength - 4);
+    const xor = (m ^ seq) >>> 0; //forces unsigned int xor
+    nonce.setUint32(nonce.byteLength - 4, xor);
+    return new Uint8Array(nonce.buffer);
+  }
+
+  pad(data, isLast) {
+    const len = data.length;
+    if (len + TAG_LENGTH >= this.rs) {
+      throw new Error('data too large for record size');
+    }
+
+    if (isLast) {
+      return concat(data, Uint8Array.of(2));
+    } else {
+      const padding = new Uint8Array(this.rs - len - TAG_LENGTH);
+      padding[0] = 1;
+      return concat(data, padding);
+    }
+  }
+
+  unpad(data, isLast) {
+    for (let i = data.length - 1; i >= 0; i--) {
+      if (data[i]) {
+        if (isLast) {
+          if (data[i] !== 2) {
+            throw new Error('delimiter of final record is not 2');
+          }
+        } else {
+          if (data[i] !== 1) {
+            throw new Error('delimiter of not final record is not 1');
+          }
+        }
+        return data.slice(0, i);
+      }
+    }
+    throw new Error('no delimiter found');
+  }
+
+  createHeader() {
+    const nums = new DataView(new ArrayBuffer(5));
+    nums.setUint32(0, this.rs);
+    return concat(new Uint8Array(this.salt), new Uint8Array(nums.buffer));
+  }
+
+  readHeader(buffer) {
+    if (buffer.length < 21) {
+      throw new Error('chunk too small for reading header');
+    }
+    const header = {};
+    const dv = new DataView(buffer.buffer);
+    header.salt = buffer.slice(0, KEY_LENGTH);
+    header.rs = dv.getUint32(KEY_LENGTH);
+    const idlen = dv.getUint8(KEY_LENGTH + 4);
+    header.length = idlen + KEY_LENGTH + 5;
+    return header;
+  }
+
+  async encryptRecord(buffer, seq, isLast) {
+    const nonce = this.generateNonce(seq);
+    const encrypted = await crypto.subtle.encrypt(
+      { name: 'AES-GCM', iv: nonce },
+      this.key,
+      this.pad(buffer, isLast)
+    );
+    return new Uint8Array(encrypted);
+  }
+
+  async decryptRecord(buffer, seq, isLast) {
+    const nonce = this.generateNonce(seq);
+    const data = await crypto.subtle.decrypt(
+      {
+        name: 'AES-GCM',
+        iv: nonce,
+        tagLength: 128
+      },
+      this.key,
+      buffer
+    );
+
+    return this.unpad(new Uint8Array(data), isLast);
+  }
+
+  async start(controller) {
+    if (this.mode === MODE_ENCRYPT) {
+      this.key = await this.generateKey();
+      this.nonceBase = await this.generateNonceBase();
+      controller.enqueue(this.createHeader());
+    } else if (this.mode !== MODE_DECRYPT) {
+      throw new Error('mode must be either encrypt or decrypt');
+    }
+  }
+
+  async transformPrevChunk(isLast, controller) {
+    if (this.mode === MODE_ENCRYPT) {
+      controller.enqueue(
+        await this.encryptRecord(this.prevChunk, this.seq, isLast)
+      );
+      this.seq++;
+    } else {
+      if (this.seq === 0) {
+        //the first chunk during decryption contains only the header
+        const header = this.readHeader(this.prevChunk);
+        this.salt = header.salt;
+        this.rs = header.rs;
+        this.key = await this.generateKey();
+        this.nonceBase = await this.generateNonceBase();
+      } else {
+        controller.enqueue(
+          await this.decryptRecord(this.prevChunk, this.seq - 1, isLast)
+        );
+      }
+      this.seq++;
+    }
+  }
+
+  async transform(chunk, controller) {
+    if (!this.firstchunk) {
+      await this.transformPrevChunk(false, controller);
+    }
+    this.firstchunk = false;
+    this.prevChunk = new Uint8Array(chunk.buffer);
+  }
+
+  async flush(controller) {
+    //console.log('ece stream ends')
+    if (this.prevChunk) {
+      await this.transformPrevChunk(true, controller);
+    }
+  }
+}
+
+class StreamSlicer {
+  constructor(rs, mode) {
+    this.mode = mode;
+    this.rs = rs;
+    this.chunkSize = mode === MODE_ENCRYPT ? rs - 17 : 21;
+    this.partialChunk = new Uint8Array(this.chunkSize); //where partial chunks are saved
+    this.offset = 0;
+  }
+
+  send(buf, controller) {
+    controller.enqueue(buf);
+    if (this.chunkSize === 21 && this.mode === MODE_DECRYPT) {
+      this.chunkSize = this.rs;
+    }
+    this.partialChunk = new Uint8Array(this.chunkSize);
+    this.offset = 0;
+  }
+
+  //reslice input into record sized chunks
+  transform(chunk, controller) {
+    //console.log('Received chunk with %d bytes.', chunk.byteLength)
+    let i = 0;
+
+    if (this.offset > 0) {
+      const len = Math.min(chunk.byteLength, this.chunkSize - this.offset);
+      this.partialChunk.set(chunk.slice(0, len), this.offset);
+      this.offset += len;
+      i += len;
+
+      if (this.offset === this.chunkSize) {
+        this.send(this.partialChunk, controller);
+      }
+    }
+
+    while (i < chunk.byteLength) {
+      const remainingBytes = chunk.byteLength - i;
+      if (remainingBytes >= this.chunkSize) {
+        const record = chunk.slice(i, i + this.chunkSize);
+        i += this.chunkSize;
+        this.send(record, controller);
+      } else {
+        const end = chunk.slice(i, i + remainingBytes);
+        i += end.byteLength;
+        this.partialChunk.set(end);
+        this.offset = end.byteLength;
+      }
+    }
+  }
+
+  flush(controller) {
+    if (this.offset > 0) {
+      controller.enqueue(this.partialChunk.slice(0, this.offset));
+    }
+  }
+}
+
+/*
+input: a ReadableStream containing data to be transformed
+key:  Uint8Array containing key of size KEY_LENGTH
+rs:   int containing record size, optional
+salt: ArrayBuffer containing salt of KEY_LENGTH length, optional
+*/
+export function encryptStream(
+  input,
+  key,
+  rs = ECE_RECORD_SIZE,
+  salt = generateSalt(KEY_LENGTH)
+) {
+  const mode = 'encrypt';
+  const inputStream = transformStream(input, new StreamSlicer(rs, mode));
+  return transformStream(inputStream, new ECETransformer(mode, key, rs, salt));
+}
+
+/*
+input: a ReadableStream containing data to be transformed
+key:  Uint8Array containing key of size KEY_LENGTH
+rs:   int containing record size, optional
+*/
+export function decryptStream(input, key, rs = ECE_RECORD_SIZE) {
+  const mode = 'decrypt';
+  const inputStream = transformStream(input, new StreamSlicer(rs, mode));
+  return transformStream(inputStream, new ECETransformer(mode, key, rs));
+}

app/experiments.js

@@ -1,38 +1,19 @@
 import hash from 'string-hash';
+import Account from './ui/account';
 
 const experiments = {
-  S9wqVl2SQ4ab2yZtqDI3Dw: {
-    id: 'S9wqVl2SQ4ab2yZtqDI3Dw',
-    run: function(variant, state, emitter) {
-      switch (variant) {
-        case 1:
-          state.promo = 'blue';
-          break;
-        case 2:
-          state.promo = 'pink';
-          break;
-        default:
-          state.promo = 'grey';
-      }
-      emitter.emit('render');
-    },
+  signin_button_color: {
     eligible: function() {
-      return (
-        !/firefox|fxios/i.test(navigator.userAgent) &&
-        document.querySelector('html').lang === 'en-US'
-      );
+      return true;
     },
-    variant: function(state) {
-      const n = this.luckyNumber(state);
-      if (n < 0.33) {
-        return 0;
-      }
-      return n < 0.66 ? 1 : 2;
+    variant: function() {
+      return ['white-blue', 'blue', 'white-violet', 'violet'][
+        Math.floor(Math.random() * 4)
+      ];
     },
-    luckyNumber: function(state) {
-      return luckyNumber(
-        `${this.id}:${state.storage.get('testpilot_ga__cid')}`
-      );
+    run: function(variant, state) {
+      const account = state.cache(Account, 'account');
+      account.buttonClass = variant;
     }
   }
 };
@@ -60,23 +41,12 @@ export default function initialize(state, emitter) {
       xp.run(+state.query.v, state, emitter);
     }
   });
-
-  if (!state.storage.get('testpilot_ga__cid')) {
-    // first ever visit. check again after cid is assigned.
-    emitter.on('DOMContentLoaded', () => {
-      checkExperiments(state, emitter);
-    });
+  const enrolled = state.storage.enrolled;
+  // single experiment per session for now
+  const id = Object.keys(enrolled)[0];
+  if (Object.keys(experiments).includes(id)) {
+    experiments[id].run(enrolled[id], state, emitter);
   } else {
-    const enrolled = state.storage.enrolled.filter(([id, variant]) => {
-      const xp = experiments[id];
-      if (xp) {
-        xp.run(variant, state, emitter);
-      }
-      return !!xp;
-    });
-    // single experiment per session for now
-    if (enrolled.length === 0) {
-      checkExperiments(state, emitter);
-    }
+    checkExperiments(state, emitter);
   }
 }

app/fileManager.js

@@ -1,231 +0,0 @@
-import FileSender from './fileSender';
-import FileReceiver from './fileReceiver';
-import {
-  copyToClipboard,
-  delay,
-  fadeOut,
-  openLinksInNewTab,
-  percent
-} from './utils';
-import * as metrics from './metrics';
-
-export default function(state, emitter) {
-  let lastRender = 0;
-  let updateTitle = false;
-
-  function render() {
-    emitter.emit('render');
-  }
-
-  async function checkFiles() {
-    const files = state.storage.files.slice();
-    let rerender = false;
-    for (const file of files) {
-      const oldLimit = file.dlimit;
-      const oldTotal = file.dtotal;
-      await file.updateDownloadCount();
-      if (file.dtotal === file.dlimit) {
-        state.storage.remove(file.id);
-        rerender = true;
-      } else if (oldLimit !== file.dlimit || oldTotal !== file.dtotal) {
-        rerender = true;
-      }
-    }
-    if (rerender) {
-      render();
-    }
-  }
-
-  function updateProgress() {
-    if (updateTitle) {
-      emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
-    }
-    render();
-  }
-
-  emitter.on('DOMContentLoaded', () => {
-    document.addEventListener('blur', () => (updateTitle = true));
-    document.addEventListener('focus', () => {
-      updateTitle = false;
-      emitter.emit('DOMTitleChange', 'Firefox Send');
-    });
-    checkFiles();
-  });
-
-  emitter.on('navigate', checkFiles);
-
-  emitter.on('render', () => {
-    lastRender = Date.now();
-  });
-
-  emitter.on('changeLimit', async ({ file, value }) => {
-    await file.changeLimit(value);
-    state.storage.writeFile(file);
-    metrics.changedDownloadLimit(file);
-  });
-
-  emitter.on('delete', async ({ file, location }) => {
-    try {
-      metrics.deletedUpload({
-        size: file.size,
-        time: file.time,
-        speed: file.speed,
-        type: file.type,
-        ttl: file.expiresAt - Date.now(),
-        location
-      });
-      state.storage.remove(file.id);
-      await file.del();
-    } catch (e) {
-      state.raven.captureException(e);
-    }
-  });
-
-  emitter.on('cancel', () => {
-    state.transfer.cancel();
-  });
-
-  emitter.on('upload', async ({ file, type }) => {
-    const size = file.size;
-    const sender = new FileSender(file);
-    sender.on('progress', updateProgress);
-    sender.on('encrypting', render);
-    state.transfer = sender;
-    state.uploading = true;
-    render();
-
-    const links = openLinksInNewTab();
-    await delay(200);
-    try {
-      metrics.startedUpload({ size, type });
-      const ownedFile = await sender.upload();
-      ownedFile.type = type;
-      state.storage.totalUploads += 1;
-      metrics.completedUpload(ownedFile);
-
-      state.storage.addFile(ownedFile);
-      const cancelBtn = document.getElementById('cancel-upload');
-      if (cancelBtn) {
-        cancelBtn.hidden = 'hidden';
-      }
-      await delay(1000);
-      await fadeOut('.page');
-      emitter.emit('pushState', `/share/${ownedFile.id}`);
-    } catch (err) {
-      if (err.message === '0') {
-        //cancelled. do nothing
-        metrics.cancelledUpload({ size, type });
-        render();
-      } else {
-        // eslint-disable-next-line no-console
-        console.error(err);
-        state.raven.captureException(err);
-        metrics.stoppedUpload({ size, type, err });
-        emitter.emit('pushState', '/error');
-      }
-    } finally {
-      openLinksInNewTab(links, false);
-      state.uploading = false;
-      state.transfer = null;
-    }
-  });
-
-  emitter.on('password', async ({ password, file }) => {
-    try {
-      state.settingPassword = true;
-      render();
-      await file.setPassword(password);
-      state.storage.writeFile(file);
-      metrics.addedPassword({ size: file.size });
-      await delay(1000);
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      state.passwordSetError = err;
-    } finally {
-      state.settingPassword = false;
-    }
-    render();
-  });
-
-  emitter.on('getMetadata', async () => {
-    const file = state.fileInfo;
-    const receiver = new FileReceiver(file);
-    try {
-      await receiver.getMetadata();
-      state.transfer = receiver;
-    } catch (e) {
-      if (e.message === '401') {
-        file.password = null;
-        if (!file.requiresPassword) {
-          return emitter.emit('pushState', '/404');
-        }
-      }
-    }
-    render();
-  });
-
-  emitter.on('download', async file => {
-    state.transfer.on('progress', updateProgress);
-    state.transfer.on('decrypting', render);
-    const links = openLinksInNewTab();
-    const size = file.size;
-    try {
-      const start = Date.now();
-      metrics.startedDownload({ size: file.size, ttl: file.ttl });
-      const dl = state.transfer.download();
-      render();
-      await dl;
-      const time = Date.now() - start;
-      const speed = size / (time / 1000);
-      await delay(1000);
-      await fadeOut('.page');
-      state.storage.totalDownloads += 1;
-      state.transfer.reset();
-      metrics.completedDownload({ size, time, speed });
-      emitter.emit('pushState', '/completed');
-    } catch (err) {
-      if (err.message === '0') {
-        // download cancelled
-        state.transfer.reset();
-        render();
-      } else {
-        // eslint-disable-next-line no-console
-        console.error(err);
-        state.transfer = null;
-        const location = err.message === '404' ? '/404' : '/error';
-        if (location === '/error') {
-          state.raven.captureException(err);
-          metrics.stoppedDownload({ size, err });
-        }
-        emitter.emit('pushState', location);
-      }
-    } finally {
-      openLinksInNewTab(links, false);
-    }
-  });
-
-  emitter.on('copy', ({ url, location }) => {
-    copyToClipboard(url);
-    metrics.copiedLink({ location });
-  });
-
-  setInterval(() => {
-    // poll for updates of the download counts
-    // TODO something for the share page: || state.route === '/share/:id'
-    if (state.route === '/') {
-      checkFiles();
-    }
-  }, 2 * 60 * 1000);
-
-  setInterval(() => {
-    // poll for rerendering the file list countdown timers
-    if (
-      state.route === '/' &&
-      state.storage.files.length > 0 &&
-      Date.now() - lastRender > 30000
-    ) {
-      render();
-    }
-  }, 60000);
-}

app/fileReceiver.js

@@ -1,7 +1,16 @@
 import Nanobus from 'nanobus';
 import Keychain from './keychain';
-import { bytes } from './utils';
-import { metadata, downloadFile } from './api';
+import { delay, bytes, streamToArrayBuffer } from './utils';
+import {
+  downloadFile,
+  downloadDone,
+  metadata,
+  getApiUrl,
+  reportLink,
+  getDownloadToken
+} from './api';
+import { blobStream } from './streams';
+import Zip from './zip';
 
 export default class FileReceiver extends Nanobus {
   constructor(fileInfo) {
@@ -11,9 +20,14 @@ export default class FileReceiver extends Nanobus {
       this.keychain.setPassword(fileInfo.password, fileInfo.url);
     }
     this.fileInfo = fileInfo;
+    this.dlToken = null;
     this.reset();
   }
 
+  get id() {
+    return this.fileInfo.id;
+  }
+
   get progressRatio() {
     return this.progress[0] / this.progress[1];
   }
@@ -43,19 +57,41 @@ export default class FileReceiver extends Nanobus {
 
   async getMetadata() {
     const meta = await metadata(this.fileInfo.id, this.keychain);
-    this.keychain.setIV(meta.iv);
     this.fileInfo.name = meta.name;
     this.fileInfo.type = meta.type;
-    this.fileInfo.iv = meta.iv;
     this.fileInfo.size = +meta.size;
+    this.fileInfo.manifest = meta.manifest;
+    this.fileInfo.flagged = meta.flagged;
     this.state = 'ready';
   }
 
-  async download(noSave = false) {
+  async reportLink(reason) {
+    await reportLink(this.fileInfo.id, this.keychain, reason);
+  }
+
+  sendMessageToSw(msg) {
+    return new Promise((resolve, reject) => {
+      const channel = new MessageChannel();
+
+      channel.port1.onmessage = function(event) {
+        if (event.data === undefined) {
+          reject('bad response from serviceWorker');
+        } else if (event.data.error !== undefined) {
+          reject(event.data.error);
+        } else {
+          resolve(event.data);
+        }
+      };
+
+      navigator.serviceWorker.controller.postMessage(msg, [channel.port2]);
+    });
+  }
+
+  async downloadBlob(noSave = false) {
     this.state = 'downloading';
     this.downloadRequest = await downloadFile(
       this.fileInfo.id,
-      this.keychain,
+      this.dlToken,
       p => {
         this.progress = [p, this.fileInfo.size];
         this.emit('progress');
@@ -67,7 +103,14 @@ export default class FileReceiver extends Nanobus {
       this.msg = 'decryptingFile';
       this.state = 'decrypting';
       this.emit('decrypting');
-      const plaintext = await this.keychain.decryptFile(ciphertext);
+      let size = this.fileInfo.size;
+      let plainStream = this.keychain.decryptStream(blobStream(ciphertext));
+      if (this.fileInfo.type === 'send-archive') {
+        const zip = new Zip(this.fileInfo.manifest, plainStream);
+        plainStream = zip.stream;
+        size = zip.size;
+      }
+      const plaintext = await streamToArrayBuffer(plainStream, size);
       if (!noSave) {
         await saveFile({
           plaintext,
@@ -76,12 +119,122 @@ export default class FileReceiver extends Nanobus {
         });
       }
       this.msg = 'downloadFinish';
+      this.emit('complete');
       this.state = 'complete';
     } catch (e) {
       this.downloadRequest = null;
       throw e;
     }
   }
+
+  async downloadStream(noSave = false) {
+    const start = Date.now();
+    const onprogress = p => {
+      this.progress = [p, this.fileInfo.size];
+      this.emit('progress');
+    };
+
+    this.downloadRequest = {
+      cancel: () => {
+        this.sendMessageToSw({ request: 'cancel', id: this.fileInfo.id });
+      }
+    };
+
+    try {
+      this.state = 'downloading';
+
+      const info = {
+        request: 'init',
+        id: this.fileInfo.id,
+        filename: this.fileInfo.name,
+        type: this.fileInfo.type,
+        manifest: this.fileInfo.manifest,
+        key: this.fileInfo.secretKey,
+        requiresPassword: this.fileInfo.requiresPassword,
+        password: this.fileInfo.password,
+        url: this.fileInfo.url,
+        size: this.fileInfo.size,
+        nonce: this.keychain.nonce,
+        dlToken: this.dlToken,
+        noSave
+      };
+      await this.sendMessageToSw(info);
+
+      onprogress(0);
+
+      if (noSave) {
+        const res = await fetch(getApiUrl(`/api/download/${this.fileInfo.id}`));
+        if (res.status !== 200) {
+          throw new Error(res.status);
+        }
+      } else {
+        const downloadPath = `/api/download/${this.fileInfo.id}`;
+        let downloadUrl = getApiUrl(downloadPath);
+        if (downloadUrl === downloadPath) {
+          downloadUrl = `${location.protocol}//${location.host}${downloadPath}`;
+        }
+        const a = document.createElement('a');
+        a.href = downloadUrl;
+        document.body.appendChild(a);
+        a.click();
+      }
+
+      let prog = 0;
+      let hangs = 0;
+      while (prog < this.fileInfo.size) {
+        const msg = await this.sendMessageToSw({
+          request: 'progress',
+          id: this.fileInfo.id
+        });
+        if (msg.progress === prog) {
+          hangs++;
+        } else {
+          hangs = 0;
+        }
+        if (hangs > 30) {
+          // TODO: On Chrome we don't get a cancel
+          // signal so one is indistinguishable from
+          // a hang. We may be able to detect
+          // which end is hung in the service worker
+          // to improve on this.
+          const e = new Error('hung download');
+          e.duration = Date.now() - start;
+          e.size = this.fileInfo.size;
+          e.progress = prog;
+          throw e;
+        }
+        prog = msg.progress;
+        onprogress(prog);
+        await delay(1000);
+      }
+
+      this.downloadRequest = null;
+      this.msg = 'downloadFinish';
+      this.emit('complete');
+      this.state = 'complete';
+    } catch (e) {
+      this.downloadRequest = null;
+      if (e === 'cancelled' || e.message === '400') {
+        throw new Error(0);
+      }
+      throw e;
+    }
+  }
+
+  async download({ stream, storage, noSave }) {
+    this.dlToken = storage.getDownloadToken(this.id);
+    if (!this.dlToken) {
+      this.dlToken = await getDownloadToken(this.id, this.keychain);
+      storage.setDownloadToken(this.id, this.dlToken);
+    }
+    if (stream) {
+      await this.downloadStream(noSave);
+    } else {
+      await this.downloadBlob(noSave);
+    }
+    await downloadDone(this.id, this.dlToken);
+    storage.setDownloadToken(this.id);
+  }
 }
 
 async function saveFile(file) {

app/fileSender.js

@@ -1,14 +1,13 @@
-/* global EXPIRE_SECONDS */
 import Nanobus from 'nanobus';
 import OwnedFile from './ownedFile';
 import Keychain from './keychain';
 import { arrayToB64, bytes } from './utils';
-import { uploadFile } from './api';
+import { uploadWs } from './api';
+import { encryptedSize } from './utils';
 
 export default class FileSender extends Nanobus {
-  constructor(file) {
+  constructor() {
     super('FileSender');
-    this.file = file;
     this.keychain = new Keychain();
     this.reset();
   }
@@ -18,7 +17,9 @@ export default class FileSender extends Nanobus {
   }
 
   get progressIndefinite() {
-    return ['fileSizeProgress', 'notifyUploadDone'].indexOf(this.msg) === -1;
+    return (
+      ['fileSizeProgress', 'notifyUploadEncryptDone'].indexOf(this.msg) === -1
+    );
   }
 
   get sizes() {
@@ -42,67 +43,59 @@ export default class FileSender extends Nanobus {
     }
   }
 
-  readFile() {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsArrayBuffer(this.file);
-      // TODO: progress?
-      reader.onload = function(event) {
-        const plaintext = new Uint8Array(this.result);
-        resolve(plaintext);
-      };
-      reader.onerror = function(err) {
-        reject(err);
-      };
-    });
-  }
-
-  async upload() {
-    const start = Date.now();
-    const plaintext = await this.readFile();
+  async upload(archive, bearerToken) {
     if (this.cancelled) {
       throw new Error(0);
     }
     this.msg = 'encryptingFile';
     this.emit('encrypting');
-    const encrypted = await this.keychain.encryptFile(plaintext);
-    const metadata = await this.keychain.encryptMetadata(this.file);
+    const totalSize = encryptedSize(archive.size);
+    const encStream = await this.keychain.encryptStream(archive.stream);
+    const metadata = await this.keychain.encryptMetadata(archive);
     const authKeyB64 = await this.keychain.authKeyB64();
-    if (this.cancelled) {
-      throw new Error(0);
-    }
-    this.uploadRequest = uploadFile(
-      encrypted,
+
+    this.uploadRequest = uploadWs(
+      encStream,
       metadata,
       authKeyB64,
-      this.keychain,
+      archive.timeLimit,
+      archive.dlimit,
+      bearerToken,
       p => {
-        this.progress = p;
+        this.progress = [p, totalSize];
         this.emit('progress');
       }
     );
+
+    if (this.cancelled) {
+      throw new Error(0);
+    }
+
     this.msg = 'fileSizeProgress';
     this.emit('progress'); // HACK to kick MS Edge
     try {
       const result = await this.uploadRequest.result;
-      const time = Date.now() - start;
-      this.msg = 'notifyUploadDone';
+      this.msg = 'notifyUploadEncryptDone';
       this.uploadRequest = null;
       this.progress = [1, 1];
       const secretKey = arrayToB64(this.keychain.rawSecret);
       const ownedFile = new OwnedFile({
         id: result.id,
         url: `${result.url}#${secretKey}`,
-        name: this.file.name,
-        size: this.file.size,
-        time: time,
-        speed: this.file.size / (time / 1000),
+        name: archive.name,
+        size: archive.size,
+        manifest: archive.manifest,
+        time: result.duration,
+        speed: archive.size / (result.duration / 1000),
         createdAt: Date.now(),
-        expiresAt: Date.now() + EXPIRE_SECONDS * 1000,
+        expiresAt: Date.now() + archive.timeLimit * 1000,
         secretKey: secretKey,
         nonce: this.keychain.nonce,
-        ownerToken: result.ownerToken
+        ownerToken: result.ownerToken,
+        dlimit: archive.dlimit,
+        timeLimit: archive.timeLimit
       });
+
       return ownedFile;
     } catch (e) {
       this.msg = 'errorPageHeader';

app/fxa.js

@@ -0,0 +1,174 @@
+/* global AUTH_CONFIG */
+import { arrayToB64, b64ToArray, concat } from './utils';
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+function getOtherInfo(enc) {
+  const name = encoder.encode(enc);
+  const length = 256;
+  const buffer = new ArrayBuffer(name.length + 16);
+  const dv = new DataView(buffer);
+  const result = new Uint8Array(buffer);
+  let i = 0;
+  dv.setUint32(i, name.length);
+  i += 4;
+  result.set(name, i);
+  i += name.length;
+  dv.setUint32(i, 0);
+  i += 4;
+  dv.setUint32(i, 0);
+  i += 4;
+  dv.setUint32(i, length);
+  return result;
+}
+
+async function concatKdf(key, enc) {
+  if (key.length !== 32) {
+    throw new Error('unsupported key length');
+  }
+  const otherInfo = getOtherInfo(enc);
+  const buffer = new ArrayBuffer(4 + key.length + otherInfo.length);
+  const dv = new DataView(buffer);
+  const concat = new Uint8Array(buffer);
+  dv.setUint32(0, 1);
+  concat.set(key, 4);
+  concat.set(otherInfo, key.length + 4);
+  const result = await crypto.subtle.digest('SHA-256', concat);
+  return new Uint8Array(result);
+}
+
+export async function prepareScopedBundleKey(storage) {
+  const keys = await crypto.subtle.generateKey(
+    {
+      name: 'ECDH',
+      namedCurve: 'P-256'
+    },
+    true,
+    ['deriveBits']
+  );
+  const privateJwk = await crypto.subtle.exportKey('jwk', keys.privateKey);
+  const publicJwk = await crypto.subtle.exportKey('jwk', keys.publicKey);
+  const kid = await crypto.subtle.digest(
+    'SHA-256',
+    encoder.encode(JSON.stringify(publicJwk))
+  );
+  privateJwk.kid = kid;
+  publicJwk.kid = kid;
+  storage.set('scopedBundlePrivateKey', JSON.stringify(privateJwk));
+  return arrayToB64(encoder.encode(JSON.stringify(publicJwk)));
+}
+
+export async function decryptBundle(storage, bundle) {
+  const privateJwk = JSON.parse(storage.get('scopedBundlePrivateKey'));
+  storage.remove('scopedBundlePrivateKey');
+  const privateKey = await crypto.subtle.importKey(
+    'jwk',
+    privateJwk,
+    {
+      name: 'ECDH',
+      namedCurve: 'P-256'
+    },
+    false,
+    ['deriveBits']
+  );
+  const jweParts = bundle.split('.');
+  if (jweParts.length !== 5) {
+    throw new Error('invalid jwe');
+  }
+  const header = JSON.parse(decoder.decode(b64ToArray(jweParts[0])));
+  const additionalData = encoder.encode(jweParts[0]);
+  const iv = b64ToArray(jweParts[2]);
+  const ciphertext = b64ToArray(jweParts[3]);
+  const tag = b64ToArray(jweParts[4]);
+
+  if (header.alg !== 'ECDH-ES' || header.enc !== 'A256GCM') {
+    throw new Error('unsupported jwe type');
+  }
+
+  const publicKey = await crypto.subtle.importKey(
+    'jwk',
+    header.epk,
+    {
+      name: 'ECDH',
+      namedCurve: 'P-256'
+    },
+    false,
+    []
+  );
+  const sharedBits = await crypto.subtle.deriveBits(
+    {
+      name: 'ECDH',
+      public: publicKey
+    },
+    privateKey,
+    256
+  );
+
+  const rawSharedKey = await concatKdf(new Uint8Array(sharedBits), header.enc);
+  const sharedKey = await crypto.subtle.importKey(
+    'raw',
+    rawSharedKey,
+    {
+      name: 'AES-GCM'
+    },
+    false,
+    ['decrypt']
+  );
+
+  const plaintext = await crypto.subtle.decrypt(
+    {
+      name: 'AES-GCM',
+      iv: iv,
+      additionalData: additionalData,
+      tagLength: tag.length * 8
+    },
+    sharedKey,
+    concat(ciphertext, tag)
+  );
+
+  return JSON.parse(decoder.decode(plaintext));
+}
+
+export async function preparePkce(storage) {
+  const verifier = arrayToB64(crypto.getRandomValues(new Uint8Array(64)));
+  storage.set('pkceVerifier', verifier);
+  const challenge = await crypto.subtle.digest(
+    'SHA-256',
+    encoder.encode(verifier)
+  );
+  return arrayToB64(new Uint8Array(challenge));
+}
+
+export async function deriveFileListKey(ikm) {
+  const baseKey = await crypto.subtle.importKey(
+    'raw',
+    b64ToArray(ikm),
+    { name: 'HKDF' },
+    false,
+    ['deriveKey']
+  );
+  const fileListKey = await crypto.subtle.deriveKey(
+    {
+      name: 'HKDF',
+      salt: new Uint8Array(),
+      info: encoder.encode('fileList'),
+      hash: 'SHA-256'
+    },
+    baseKey,
+    {
+      name: 'AES-GCM',
+      length: 128
+    },
+    true,
+    ['encrypt', 'decrypt']
+  );
+  const rawFileListKey = await crypto.subtle.exportKey('raw', fileListKey);
+  return arrayToB64(new Uint8Array(rawFileListKey));
+}
+
+export async function getFileListKey(storage, bundle) {
+  const jwks = await decryptBundle(storage, bundle);
+  const jwk = jwks[AUTH_CONFIG.key_scope];
+  return deriveFileListKey(jwk.k);
+}

app/keychain.js

@@ -1,47 +1,25 @@
 import { arrayToB64, b64ToArray } from './utils';
-
+import { decryptStream, encryptStream } from './ece.js';
 const encoder = new TextEncoder();
 const decoder = new TextDecoder();
 
 export default class Keychain {
-  constructor(secretKeyB64, nonce, ivB64) {
+  constructor(secretKeyB64, nonce) {
     this._nonce = nonce || 'yRCdyQ1EMSA3mo4rqSkuNQ==';
-    if (ivB64) {
-      this.iv = b64ToArray(ivB64);
-    } else {
-      this.iv = window.crypto.getRandomValues(new Uint8Array(12));
-    }
     if (secretKeyB64) {
       this.rawSecret = b64ToArray(secretKeyB64);
     } else {
-      this.rawSecret = window.crypto.getRandomValues(new Uint8Array(16));
+      this.rawSecret = crypto.getRandomValues(new Uint8Array(16));
     }
-    this.secretKeyPromise = window.crypto.subtle.importKey(
+    this.secretKeyPromise = crypto.subtle.importKey(
       'raw',
       this.rawSecret,
       'HKDF',
       false,
       ['deriveKey']
     );
-    this.encryptKeyPromise = this.secretKeyPromise.then(function(secretKey) {
-      return window.crypto.subtle.deriveKey(
-        {
-          name: 'HKDF',
-          salt: new Uint8Array(),
-          info: encoder.encode('encryption'),
-          hash: 'SHA-256'
-        },
-        secretKey,
-        {
-          name: 'AES-GCM',
-          length: 128
-        },
-        false,
-        ['encrypt', 'decrypt']
-      );
-    });
     this.metaKeyPromise = this.secretKeyPromise.then(function(secretKey) {
-      return window.crypto.subtle.deriveKey(
+      return crypto.subtle.deriveKey(
         {
           name: 'HKDF',
           salt: new Uint8Array(),
@@ -58,7 +36,7 @@ export default class Keychain {
       );
     });
     this.authKeyPromise = this.secretKeyPromise.then(function(secretKey) {
-      return window.crypto.subtle.deriveKey(
+      return crypto.subtle.deriveKey(
         {
           name: 'HKDF',
           salt: new Uint8Array(),
@@ -86,17 +64,13 @@ export default class Keychain {
     }
   }
 
-  setIV(ivB64) {
-    this.iv = b64ToArray(ivB64);
-  }
-
   setPassword(password, shareUrl) {
-    this.authKeyPromise = window.crypto.subtle
+    this.authKeyPromise = crypto.subtle
       .importKey('raw', encoder.encode(password), { name: 'PBKDF2' }, false, [
         'deriveKey'
       ])
       .then(passwordKey =>
-        window.crypto.subtle.deriveKey(
+        crypto.subtle.deriveKey(
           {
             name: 'PBKDF2',
             salt: encoder.encode(shareUrl),
@@ -115,7 +89,7 @@ export default class Keychain {
   }
 
   setAuthKey(authKeyB64) {
-    this.authKeyPromise = window.crypto.subtle.importKey(
+    this.authKeyPromise = crypto.subtle.importKey(
       'raw',
       b64ToArray(authKeyB64),
       {
@@ -129,13 +103,13 @@ export default class Keychain {
 
   async authKeyB64() {
     const authKey = await this.authKeyPromise;
-    const rawAuth = await window.crypto.subtle.exportKey('raw', authKey);
+    const rawAuth = await crypto.subtle.exportKey('raw', authKey);
     return arrayToB64(new Uint8Array(rawAuth));
   }
 
   async authHeader() {
     const authKey = await this.authKeyPromise;
-    const sig = await window.crypto.subtle.sign(
+    const sig = await crypto.subtle.sign(
       {
         name: 'HMAC'
       },
@@ -145,23 +119,9 @@ export default class Keychain {
     return `send-v1 ${arrayToB64(new Uint8Array(sig))}`;
   }
 
-  async encryptFile(plaintext) {
-    const encryptKey = await this.encryptKeyPromise;
-    const ciphertext = await window.crypto.subtle.encrypt(
-      {
-        name: 'AES-GCM',
-        iv: this.iv,
-        tagLength: 128
-      },
-      encryptKey,
-      plaintext
-    );
-    return ciphertext;
-  }
-
   async encryptMetadata(metadata) {
     const metaKey = await this.metaKeyPromise;
-    const ciphertext = await window.crypto.subtle.encrypt(
+    const ciphertext = await crypto.subtle.encrypt(
       {
         name: 'AES-GCM',
         iv: new Uint8Array(12),
@@ -170,32 +130,27 @@ export default class Keychain {
       metaKey,
       encoder.encode(
         JSON.stringify({
-          iv: arrayToB64(this.iv),
           name: metadata.name,
-          type: metadata.type || 'application/octet-stream'
+          size: metadata.size,
+          type: metadata.type || 'application/octet-stream',
+          manifest: metadata.manifest || {}
         })
       )
     );
     return ciphertext;
   }
 
-  async decryptFile(ciphertext) {
-    const encryptKey = await this.encryptKeyPromise;
-    const plaintext = await window.crypto.subtle.decrypt(
-      {
-        name: 'AES-GCM',
-        iv: this.iv,
-        tagLength: 128
-      },
-      encryptKey,
-      ciphertext
-    );
-    return plaintext;
+  encryptStream(plainStream) {
+    return encryptStream(plainStream, this.rawSecret);
+  }
+
+  decryptStream(cryptotext) {
+    return decryptStream(cryptotext, this.rawSecret);
   }
 
   async decryptMetadata(ciphertext) {
     const metaKey = await this.metaKeyPromise;
-    const plaintext = await window.crypto.subtle.decrypt(
+    const plaintext = await crypto.subtle.decrypt(
       {
         name: 'AES-GCM',
         iv: new Uint8Array(12),

app/locale.js

@@ -0,0 +1,26 @@
+import { FluentBundle } from '@fluent/bundle';
+
+function makeBundle(locale, ftl) {
+  const bundle = new FluentBundle(locale, { useIsolating: false });
+  bundle.addMessages(ftl);
+  return bundle;
+}
+
+export async function getTranslator(locale) {
+  const bundles = [];
+  const { default: en } = await import('../public/locales/en-US/send.ftl');
+  if (locale !== 'en-US') {
+    const { default: ftl } = await import(
+      `../public/locales/${locale}/send.ftl`
+    );
+    bundles.push(makeBundle(locale, ftl));
+  }
+  bundles.push(makeBundle('en-US', en));
+  return function(id, data) {
+    for (let bundle of bundles) {
+      if (bundle.hasMessage(id)) {
+        return bundle.format(bundle.getMessage(id), data);
+      }
+    }
+  };
+}

app/main.css

@@ -1,16 +1,393 @@
-@import './base.css';
-@import './templates/header/header.css';
-@import './templates/downloadButton/downloadButton.css';
-@import './templates/progress/progress.css';
-@import './templates/passwordInput/passwordInput.css';
-@import './templates/downloadPassword/downloadPassword.css';
-@import './templates/setPasswordSection/setPasswordSection.css';
-@import './templates/footer/footer.css';
-@import './templates/fxPromo/fxPromo.css';
-@import './templates/selectbox/selectbox.css';
-@import './templates/fileList/fileList.css';
-@import './templates/file/file.css';
-@import './templates/popup/popup.css';
-@import './pages/welcome/welcome.css';
-@import './pages/share/share.css';
-@import './pages/unsupported/unsupported.css';
+@tailwind base;
+
+html {
+  line-height: 1.15;
+}
+
+@tailwind components;
+
+:not(input) {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+:root {
+  --violet-gradient: linear-gradient(
+    -180deg,
+    rgba(144, 89, 255, 0.8) 0%,
+    rgba(144, 89, 255, 0.4) 100%
+  );
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:focus {
+  outline: 1px dotted grey;
+}
+
+body {
+  background-image: url('../assets/bg.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  overflow-x: hidden;
+}
+
+.btn {
+  @apply bg-blue-60;
+  @apply text-white;
+  @apply cursor-pointer;
+  @apply py-4;
+  @apply px-6;
+  @apply font-semibold;
+}
+
+.btn:hover {
+  @apply bg-blue-70;
+}
+
+.btn:focus {
+  @apply bg-blue-70;
+}
+
+.btn:disabled {
+  @apply bg-grey-transparent;
+
+  cursor: not-allowed;
+}
+
+.checkbox {
+  @apply leading-normal;
+  @apply select-none;
+}
+
+.checkbox > input[type='checkbox'] {
+  @apply absolute;
+  @apply opacity-0;
+}
+
+.checkbox > label {
+  @apply cursor-pointer;
+}
+
+.checkbox > label::before {
+  /* @apply bg-grey-10; */
+  @apply border;
+  @apply rounded-sm;
+
+  content: '';
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-right: 0.5rem;
+  float: left;
+}
+
+.checkbox > label:hover::before {
+  @apply border-blue-50;
+}
+
+.checkbox > input:focus + label::before {
+  @apply border-blue-50;
+}
+
+.checkbox > input:checked + label::before {
+  @apply bg-blue-50;
+  @apply border-blue-50;
+
+  background-image: url('../assets/lock.svg');
+  background-position: center;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+}
+
+.checkbox > input:disabled + label {
+  cursor: auto;
+}
+
+.checkbox > input:disabled + label::before {
+  @apply bg-blue-50;
+  @apply border-blue-50;
+
+  background-image: url('../assets/lock.svg');
+  background-position: center;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+  cursor: auto;
+}
+
+details {
+  overflow: hidden;
+}
+
+details > summary::-webkit-details-marker {
+  display: none;
+}
+
+details > summary > svg {
+  transition: all 0.25s cubic-bezier(0.07, 0.95, 0, 1);
+}
+
+details[open] {
+  overflow-y: auto;
+}
+
+details[open] > summary > svg {
+  transform: rotate(90deg);
+}
+
+footer li:hover {
+  text-decoration: underline;
+}
+
+.link-blue {
+  @apply text-blue-60;
+}
+
+.link-blue:hover {
+  @apply text-blue-70;
+}
+
+.link-blue:focus {
+  @apply text-blue-70;
+}
+
+.main-header img {
+  height: 32px;
+  width: auto;
+}
+
+.intro {
+  max-width: 100%;
+  height: unset;
+}
+
+.dl-bg {
+  filter: grayscale(1) opacity(0.15);
+}
+
+.main {
+  display: flex;
+  position: relative;
+  max-width: 64rem;
+  width: 100%;
+  height: 100%;
+}
+
+.main > section {
+  @apply bg-white;
+}
+
+.mozilla-logo {
+  background-image: url('../assets/mozilla-logo.svg');
+  background-repeat: no-repeat;
+  background-size: 100px, 48px;
+  overflow: hidden;
+  text-indent: 120%;
+  white-space: nowrap;
+  display: inline-block;
+  height: 32px;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+#password-msg::after {
+  content: '\200b';
+}
+
+progress {
+  @apply bg-grey-30;
+  @apply rounded-sm;
+  @apply w-full;
+  @apply h-1;
+}
+
+progress::-webkit-progress-bar {
+  @apply bg-grey-30;
+  @apply rounded-sm;
+  @apply w-full;
+  @apply h-1;
+}
+
+progress::-webkit-progress-value {
+  /* stylelint-disable */
+  background-image: -webkit-linear-gradient(
+      -45deg,
+      transparent 20%,
+      rgba(255, 255, 255, 0.4) 20%,
+      rgba(255, 255, 255, 0.4) 40%,
+      transparent 40%,
+      transparent 60%,
+      rgba(255, 255, 255, 0.4) 60%,
+      rgba(255, 255, 255, 0.4) 80%,
+      transparent 80%
+    ),
+    -webkit-linear-gradient(left, #0a84ff, #0a84ff);
+  /* stylelint-enable */
+  border-radius: 2px;
+  background-size: 21px 20px, 100% 100%, 100% 100%;
+  -webkit-animation: animate-stripes 1s linear infinite;
+}
+
+progress::-moz-progress-bar {
+  /* stylelint-disable */
+  background-image: -moz-linear-gradient(
+      135deg,
+      transparent 20%,
+      rgba(255, 255, 255, 0.4) 20%,
+      rgba(255, 255, 255, 0.4) 40%,
+      transparent 40%,
+      transparent 60%,
+      rgba(255, 255, 255, 0.4) 60%,
+      rgba(255, 255, 255, 0.4) 80%,
+      transparent 80%
+    ),
+    -moz-linear-gradient(left, #0a84ff, #0a84ff);
+  /* stylelint-enable */
+  border-radius: 2px;
+  background-size: 21px 20px, 100% 100%, 100% 100%;
+  animation: animate-stripes 1s linear infinite;
+}
+
+@-webkit-keyframes animate-stripes {
+  100% {
+    background-position: -21px 0;
+  }
+}
+
+@keyframes animate-stripes {
+  100% {
+    background-position: -21px 0;
+  }
+}
+
+select {
+  background-image: url('../assets/select-arrow.svg');
+  background-position: calc(100% - 0.75rem);
+  background-repeat: no-repeat;
+}
+
+@screen md {
+  .main-header img {
+    height: 48px;
+    width: auto;
+  }
+
+  .intro {
+    max-width: unset;
+    height: unset;
+    margin-bottom: -3rem;
+    margin-right: -7rem;
+  }
+
+  .main {
+    @apply flex-1;
+    @apply self-center;
+    @apply items-center;
+    @apply m-auto;
+    @apply py-8;
+
+    min-height: 42rem;
+    max-height: 42rem;
+    width: calc(100% - 3rem);
+  }
+}
+
+@screen dark {
+  body {
+    @apply text-grey-10;
+
+    background-image: unset;
+  }
+
+  .btn {
+    @apply bg-blue-40;
+    @apply text-white;
+  }
+
+  .btn:hover {
+    @apply bg-blue-50;
+  }
+
+  .btn:focus {
+    @apply bg-blue-50;
+  }
+
+  .btn:disabled {
+    @apply bg-grey-80;
+  }
+
+  .link-blue {
+    @apply text-blue-40;
+  }
+
+  .link-blue:hover {
+    @apply text-blue-50;
+  }
+
+  .link-blue:focus {
+    @apply text-blue-50;
+  }
+
+  .main > section {
+    @apply bg-grey-90;
+  }
+
+  .mozilla-logo {
+    background-color: white;
+    border: 1px solid white;
+  }
+
+  @screen md {
+    .main > section {
+      @apply border;
+      @apply border-grey-80;
+    }
+  }
+}
+
+@tailwind utilities;
+
+@responsive {
+  .shadow-light {
+    box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1);
+  }
+
+  .shadow-big {
+    box-shadow: 0 12px 18px 2px rgba(34, 0, 51, 0.04),
+      0 6px 22px 4px rgba(7, 48, 114, 0.12),
+      0 6px 10px -4px rgba(14, 13, 26, 0.12);
+  }
+}
+
+@variants focus {
+  .outline {
+    outline: 1px dotted grey;
+  }
+}
+
+.word-break-all {
+  word-break: break-all;
+  line-break: anywhere;
+}
+
+.signin {
+  backface-visibility: hidden;
+  border-radius: 6px;
+  transition-property: transform, background-color;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0.07, 0.95, 0, 1);
+}
+
+.signin:hover,
+.signin:focus {
+  transform: scale(1.0625);
+}
+
+.signin:hover:active {
+  transform: scale(0.9375);
+}

app/main.js

@@ -1,54 +1,75 @@
+/* global DEFAULTS LIMITS PREFS */
+import 'core-js';
 import 'fast-text-encoding'; // MS Edge support
-import 'fluent-intl-polyfill';
-import app from './routes';
-import locale from '../common/locales';
-import fileManager from './fileManager';
+import 'intl-pluralrules';
+import choo from 'choo';
+import nanotiming from 'nanotiming';
+import routes from './routes';
+import getCapabilities from './capabilities';
+import controller from './controller';
 import dragManager from './dragManager';
 import pasteManager from './pasteManager';
-import { canHasSend } from './utils';
 import storage from './storage';
 import metrics from './metrics';
 import experiments from './experiments';
-import Raven from 'raven-js';
+import * as Sentry from '@sentry/browser';
+import './main.css';
+import User from './user';
+import { getTranslator } from './locale';
+import Archive from './archive';
+import { setTranslate, locale } from './utils';
 
-if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) {
-  Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();
+if (navigator.doNotTrack !== '1' && window.SENTRY_CONFIG) {
+  Sentry.init(window.SENTRY_CONFIG);
 }
 
-app.use((state, emitter) => {
-  state.transfer = null;
-  state.fileInfo = null;
-  state.translate = locale.getTranslator();
-  state.storage = storage;
-  state.raven = Raven;
-  window.appState = state;
-  emitter.on('DOMContentLoaded', async function checkSupport() {
-    let unsupportedReason = null;
-    if (
-      // Firefox < 50
-      /firefox/i.test(navigator.userAgent) &&
-      parseInt(navigator.userAgent.match(/firefox\/*([^\n\r]*)\./i)[1], 10) < 50
-    ) {
-      unsupportedReason = 'outdated';
-    }
-    const ok = await canHasSend();
-    if (!ok) {
-      unsupportedReason = /firefox/i.test(navigator.userAgent)
-        ? 'outdated'
-        : 'gcm';
-    }
-    if (unsupportedReason) {
-      setTimeout(() =>
-        emitter.emit('replaceState', `/unsupported/${unsupportedReason}`)
-      );
-    }
-  });
-});
+if (process.env.NODE_ENV === 'production') {
+  nanotiming.disabled = true;
+}
 
-app.use(metrics);
-app.use(fileManager);
-app.use(dragManager);
-app.use(experiments);
-app.use(pasteManager);
+(async function start() {
+  const capabilities = await getCapabilities();
+  if (
+    !capabilities.crypto &&
+    window.location.pathname !== '/unsupported/crypto'
+  ) {
+    return window.location.assign('/unsupported/crypto');
+  }
+  if (capabilities.serviceWorker) {
+    try {
+      await navigator.serviceWorker.register('/serviceWorker.js');
+      await navigator.serviceWorker.ready;
+    } catch (e) {
+      // continue but disable streaming downloads
+      capabilities.streamDownload = false;
+    }
+  }
 
-app.mount('body');
+  const translate = await getTranslator(locale());
+  setTranslate(translate);
+  // eslint-disable-next-line require-atomic-updates
+  window.initialState = {
+    LIMITS,
+    DEFAULTS,
+    PREFS,
+    archive: new Archive([], DEFAULTS.EXPIRE_SECONDS),
+    capabilities,
+    translate,
+    storage,
+    sentry: Sentry,
+    user: new User(storage, LIMITS, window.AUTH_CONFIG),
+    transfer: null,
+    fileInfo: null,
+    locale: locale()
+  };
+
+  const app = routes(choo({ hash: true }));
+  // eslint-disable-next-line require-atomic-updates
+  window.app = app;
+  app.use(experiments);
+  app.use(metrics);
+  app.use(controller);
+  app.use(dragManager);
+  app.use(pasteManager);
+  app.mount('body');
+})();

app/metrics.js

@@ -1,297 +1,186 @@
-import testPilotGA from 'testpilot-ga/src/TestPilotGA';
 import storage from './storage';
-
-let hasLocalStorage = false;
-try {
-  hasLocalStorage = typeof localStorage !== 'undefined';
-} catch (e) {
-  // when disabled, any mention of localStorage throws an error
-}
-
-const analytics = new testPilotGA({
-  an: 'Firefox Send',
-  ds: 'web',
-  tid: window.GOOGLE_ANALYTICS_ID
-});
+import { platform, locale } from './utils';
+import { sendMetrics } from './api';
 
 let appState = null;
 let experiment = null;
+const HOUR = 1000 * 60 * 60;
+const events = [];
+let session_id = Date.now();
+const lang = locale();
 
 export default function initialize(state, emitter) {
   appState = state;
+
   emitter.on('DOMContentLoaded', () => {
-    addExitHandlers();
-    experiment = storage.enrolled[0];
-    sendEvent(category(), 'visit', {
-      cm5: storage.totalUploads,
-      cm6: storage.files.length,
-      cm7: storage.totalDownloads
+    experiment = storage.enrolled;
+    if (!appState.user.firstAction) {
+      appState.user.firstAction =
+        appState.route === '/' ? 'upload' : 'download';
+    }
+    const query = appState.query;
+    addEvent('client_visit', {
+      entrypoint: appState.route === '/' ? 'upload' : 'download',
+      referrer: document.referrer,
+      utm_campaign: query.utm_campaign,
+      utm_content: query.utm_content,
+      utm_medium: query.utm_medium,
+      utm_source: query.utm_source,
+      utm_term: query.utm_term
     });
-    //TODO restart handlers... somewhere
   });
-  emitter.on('exit', exitEvent);
   emitter.on('experiment', experimentEvent);
+  window.addEventListener('unload', submitEvents);
 }
 
-function category() {
-  switch (appState.route) {
-    case '/':
-    case '/share/:id':
-      return 'sender';
-    case '/download/:id/:key':
-    case '/download/:id':
-    case '/completed':
-      return 'recipient';
-    default:
-      return 'other';
-  }
+function sizeOrder(n) {
+  return Math.floor(Math.log10(n));
 }
 
-function sendEvent() {
-  const args = Array.from(arguments);
-  if (experiment && args[2]) {
-    args[2].xid = experiment[0];
-    args[2].xvar = experiment[1];
+function submitEvents() {
+  if (navigator.doNotTrack === '1') {
+    return;
   }
-  return (
-    hasLocalStorage && analytics.sendEvent.apply(analytics, args).catch(() => 0)
+  sendMetrics(
+    new Blob(
+      [
+        JSON.stringify({
+          now: Date.now(),
+          session_id,
+          lang,
+          platform: platform(),
+          events
+        })
+      ],
+      { type: 'text/plain' } // see http://crbug.com/490015
+    )
   );
+  events.splice(0);
 }
 
-function urlToMetric(url) {
-  switch (url) {
-    case 'https://www.mozilla.org/':
-      return 'mozilla';
-    case 'https://www.mozilla.org/about/legal':
-      return 'legal';
-    case 'https://testpilot.firefox.com/about':
-      return 'about';
-    case 'https://testpilot.firefox.com/privacy':
-      return 'privacy';
-    case 'https://testpilot.firefox.com/terms':
-      return 'terms';
-    case 'https://www.mozilla.org/privacy/websites/#cookies':
-      return 'cookies';
-    case 'https://github.com/mozilla/send':
-      return 'github';
-    case 'https://twitter.com/FxTestPilot':
-      return 'twitter';
-    case 'https://www.mozilla.org/firefox/new/?scene=2':
-      return 'download-firefox';
-    case 'https://qsurvey.mozilla.com/s3/txp-firefox-send':
-      return 'survey';
-    case 'https://testpilot.firefox.com/':
-    case 'https://testpilot.firefox.com/experiments/send':
-      return 'testpilot';
-    case 'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com':
-      return 'promo';
-    default:
-      return 'other';
+async function addEvent(event_type, event_properties) {
+  const user_id = await appState.user.metricId();
+  const device_id = await appState.user.deviceId();
+  const ab_id = Object.keys(experiment)[0];
+  if (ab_id) {
+    event_properties.experiment = ab_id;
+    event_properties.variant = experiment[ab_id];
   }
-}
-
-function setReferrer(state) {
-  if (category() === 'sender') {
-    if (state) {
-      storage.referrer = `${state}-upload`;
-    }
-  } else if (category() === 'recipient') {
-    if (state) {
-      storage.referrer = `${state}-download`;
+  events.push({
+    device_id,
+    event_properties,
+    event_type,
+    time: Date.now(),
+    user_id,
+    user_properties: {
+      anonymous: !appState.user.loggedIn,
+      first_action: appState.user.firstAction,
+      active_count: storage.files.length
     }
+  });
+  if (events.length === 25) {
+    submitEvents();
   }
 }
 
-function externalReferrer() {
-  if (/^https:\/\/testpilot\.firefox\.com/.test(document.referrer)) {
-    return 'testpilot';
-  }
-  return 'external';
-}
-
-function takeReferrer() {
-  const referrer = storage.referrer || externalReferrer();
-  storage.referrer = null;
-  return referrer;
-}
-
-function startedUpload(params) {
-  return sendEvent('sender', 'upload-started', {
-    cm1: params.size,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length + 1,
-    cm7: storage.totalDownloads,
-    cd1: params.type,
-    cd5: takeReferrer()
+function cancelledUpload(archive, duration) {
+  return addEvent('client_upload', {
+    download_limit: archive.dlimit,
+    duration: sizeOrder(duration),
+    file_count: archive.numFiles,
+    password_protected: !!archive.password,
+    size: sizeOrder(archive.size),
+    status: 'cancel',
+    time_limit: archive.timeLimit
   });
 }
 
-function cancelledUpload(params) {
-  setReferrer('cancelled');
-  return sendEvent('sender', 'upload-stopped', {
-    cm1: params.size,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads,
-    cd1: params.type,
-    cd2: 'cancelled'
+function completedUpload(archive, duration) {
+  return addEvent('client_upload', {
+    download_limit: archive.dlimit,
+    duration: sizeOrder(duration),
+    file_count: archive.numFiles,
+    password_protected: !!archive.password,
+    size: sizeOrder(archive.size),
+    status: 'ok',
+    time_limit: archive.timeLimit
   });
 }
 
-function completedUpload(params) {
-  return sendEvent('sender', 'upload-stopped', {
-    cm1: params.size,
-    cm2: params.time,
-    cm3: params.speed,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads,
-    cd1: params.type,
-    cd2: 'completed'
-  });
-}
-
-function addedPassword(params) {
-  return sendEvent('sender', 'password-added', {
-    cm1: params.size,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads
-  });
-}
-
-function startedDownload(params) {
-  return sendEvent('recipient', 'download-started', {
-    cm1: params.size,
-    cm4: params.ttl,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads
+function stoppedUpload(archive, duration = 0) {
+  return addEvent('client_upload', {
+    download_limit: archive.dlimit,
+    duration: sizeOrder(duration),
+    file_count: archive.numFiles,
+    password_protected: !!archive.password,
+    size: sizeOrder(archive.size),
+    status: 'error',
+    time_limit: archive.timeLimit
   });
 }
 
 function stoppedDownload(params) {
-  return sendEvent('recipient', 'download-stopped', {
-    cm1: params.size,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads,
-    cd2: 'errored',
-    cd6: params.err
-  });
-}
-
-function cancelledDownload(params) {
-  setReferrer('cancelled');
-  return sendEvent('recipient', 'download-stopped', {
-    cm1: params.size,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads,
-    cd2: 'cancelled'
-  });
-}
-
-function stoppedUpload(params) {
-  return sendEvent('sender', 'upload-stopped', {
-    cm1: params.size,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads,
-    cd1: params.type,
-    cd2: 'errored',
-    cd6: params.err
-  });
-}
-
-function changedDownloadLimit(params) {
-  return sendEvent('sender', 'download-limit-changed', {
-    cm1: params.size,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads,
-    cm8: params.dlimit
+  return addEvent('client_download', {
+    duration: sizeOrder(params.duration),
+    password_protected: params.password_protected,
+    size: sizeOrder(params.size),
+    status: 'error'
   });
 }
 
 function completedDownload(params) {
-  return sendEvent('recipient', 'download-stopped', {
-    cm1: params.size,
-    cm2: params.time,
-    cm3: params.speed,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads,
-    cd2: 'completed'
+  return addEvent('client_download', {
+    duration: sizeOrder(params.duration),
+    password_protected: params.password_protected,
+    size: sizeOrder(params.size),
+    status: 'ok'
   });
 }
 
-function deletedUpload(params) {
-  return sendEvent(category(), 'upload-deleted', {
-    cm1: params.size,
-    cm2: params.time,
-    cm3: params.speed,
-    cm4: params.ttl,
-    cm5: storage.totalUploads,
-    cm6: storage.files.length,
-    cm7: storage.totalDownloads,
-    cd1: params.type,
-    cd4: params.location
-  });
-}
-
-function unsupported(params) {
-  return sendEvent(category(), 'unsupported', {
-    cd6: params.err
-  });
-}
-
-function copiedLink(params) {
-  return sendEvent('sender', 'copied', {
-    cd4: params.location
-  });
-}
-
-function exitEvent(target) {
-  return sendEvent(category(), 'exited', {
-    cd3: urlToMetric(target.currentTarget.href)
+function deletedUpload(ownedFile) {
+  return addEvent('client_delete', {
+    age: Math.floor((Date.now() - ownedFile.createdAt) / HOUR),
+    downloaded: ownedFile.dtotal > 0,
+    status: 'ok'
   });
 }
 
 function experimentEvent(params) {
-  return sendEvent(category(), 'experiment', params);
+  return addEvent('client_experiment', params);
 }
 
-// eslint-disable-next-line no-unused-vars
-function addExitHandlers() {
-  const links = Array.from(document.querySelectorAll('a'));
-  links.forEach(l => {
-    if (/^http/.test(l.getAttribute('href'))) {
-      l.addEventListener('click', exitEvent);
-    }
+function submittedSignup(params) {
+  return addEvent('client_login', {
+    status: 'ok',
+    trigger: params.trigger
   });
 }
 
-function restart(state) {
-  setReferrer(state);
-  return sendEvent(category(), 'restarted', {
-    cd2: state
+function canceledSignup(params) {
+  return addEvent('client_login', {
+    status: 'cancel',
+    trigger: params.trigger
   });
 }
 
+function loggedOut(params) {
+  addEvent('client_logout', {
+    status: 'ok',
+    trigger: params.trigger
+  });
+  // flush events and start new anon session
+  submitEvents();
+  session_id = Date.now();
+}
+
 export {
-  copiedLink,
-  startedUpload,
   cancelledUpload,
   stoppedUpload,
   completedUpload,
-  changedDownloadLimit,
   deletedUpload,
-  startedDownload,
-  cancelledDownload,
   stoppedDownload,
   completedDownload,
-  addedPassword,
-  restart,
-  unsupported
+  submittedSignup,
+  canceledSignup,
+  loggedOut
 };

app/ownedFile.js

@@ -4,11 +4,14 @@ import { del, fileInfo, setParams, setPassword } from './api';
 
 export default class OwnedFile {
   constructor(obj) {
+    if (!obj.manifest) {
+      throw new Error('invalid file object');
+    }
     this.id = obj.id;
     this.url = obj.url;
     this.name = obj.name;
     this.size = obj.size;
-    this.type = obj.type;
+    this.manifest = obj.manifest;
     this.time = obj.time;
     this.speed = obj.speed;
     this.createdAt = obj.createdAt;
@@ -18,6 +21,15 @@ export default class OwnedFile {
     this.dtotal = obj.dtotal || 0;
     this.keychain = new Keychain(obj.secretKey, obj.nonce);
     this._hasPassword = !!obj.hasPassword;
+    this.timeLimit = obj.timeLimit;
+  }
+
+  get hasPassword() {
+    return !!this._hasPassword;
+  }
+
+  get expired() {
+    return this.dlimit === this.dtotal || Date.now() > this.expiresAt;
   }
 
   async setPassword(password) {
@@ -38,19 +50,17 @@ export default class OwnedFile {
     return del(this.id, this.ownerToken);
   }
 
-  changeLimit(dlimit) {
+  changeLimit(dlimit, user = {}) {
     if (this.dlimit !== dlimit) {
       this.dlimit = dlimit;
-      return setParams(this.id, this.ownerToken, { dlimit });
+      return setParams(this.id, this.ownerToken, user.bearerToken, { dlimit });
     }
     return Promise.resolve(true);
   }
 
-  get hasPassword() {
-    return !!this._hasPassword;
-  }
-
   async updateDownloadCount() {
+    const oldTotal = this.dtotal;
+    const oldLimit = this.dlimit;
     try {
       const result = await fileInfo(this.id, this.ownerToken);
       this.dtotal = result.dtotal;
@@ -61,6 +71,7 @@ export default class OwnedFile {
       }
       // ignore other errors
     }
+    return oldTotal !== this.dtotal || oldLimit !== this.dlimit;
   }
 
   toJSON() {
@@ -69,7 +80,7 @@ export default class OwnedFile {
       url: this.url,
       name: this.name,
       size: this.size,
-      type: this.type,
+      manifest: this.manifest,
       time: this.time,
       speed: this.speed,
       createdAt: this.createdAt,
@@ -78,7 +89,8 @@ export default class OwnedFile {
       ownerToken: this.ownerToken,
       dlimit: this.dlimit,
       dtotal: this.dtotal,
-      hasPassword: this.hasPassword
+      hasPassword: this.hasPassword,
+      timeLimit: this.timeLimit
     };
   }
 }

app/pages/blank.js

@@ -1,5 +0,0 @@
-const html = require('choo/html');
-
-module.exports = function() {
-  return html`<div></div>`;
-};

app/pages/completed/index.js

@@ -1,26 +0,0 @@
-const html = require('choo/html');
-const progress = require('../../templates/progress');
-const { fadeOut } = require('../../utils');
-
-module.exports = function(state, emit) {
-  return html`
-    <div class="page effect--fadeIn">
-      <div class="title">
-        ${state.translate('downloadFinish')}
-      </div>
-      <div class="description"></div>
-      ${progress(1)}
-      <div class="progressSection">
-        <div class="progressSection__text"></div>
-      </div>
-      <a class="link link--action"
-        href="/"
-        onclick=${sendNew}>${state.translate('sendYourFilesLink')}</a>
-    </div>`;
-
-  async function sendNew(e) {
-    e.preventDefault();
-    await fadeOut('.page');
-    emit('pushState', '/');
-  }
-};

app/pages/download/index.js

@@ -1,42 +0,0 @@
-const html = require('choo/html');
-const progress = require('../../templates/progress');
-const { bytes } = require('../../utils');
-
-module.exports = function(state, emit) {
-  const transfer = state.transfer;
-  const cancelBtn = html`
-  <button
-    id="cancel"
-    class="btn btn--cancel"
-    title="${state.translate('deletePopupCancel')}"
-    onclick=${cancel}>
-    ${state.translate('deletePopupCancel')}
-  </button>`;
-
-  return html`
-    <div class="page effect--fadeIn">
-      <div class="title">
-        ${state.translate('downloadingPageProgress', {
-          filename: state.fileInfo.name,
-          size: bytes(state.fileInfo.size)
-        })}
-      </div>
-      <div class="description">
-        ${state.translate('downloadingPageMessage')}
-      </div>
-      ${progress(transfer.progressRatio, transfer.progressIndefinite)}
-      <div class="progressSection">
-        <div class="progressSection__text">
-          ${state.translate(transfer.msg, transfer.sizes)}
-        </div>
-        ${transfer.state === 'downloading' ? cancelBtn : null}
-      </div>
-    </div>
-  `;
-
-  function cancel() {
-    const btn = document.getElementById('cancel');
-    btn.remove();
-    emit('cancel');
-  }
-};

app/pages/error/index.js

@@ -1,10 +0,0 @@
-const html = require('choo/html');
-const assets = require('../../../common/assets');
-
-module.exports = function(state) {
-  return html`
-  <div class="page">
-    <div class="title">${state.translate('errorPageHeader')}</div>
-    <img src="${assets.get('illustration_error.svg')}"/>
-  </div>`;
-};

app/pages/legal.js

@@ -1,32 +0,0 @@
-const html = require('choo/html');
-const raw = require('choo/html/raw');
-
-module.exports = function(state) {
-  return html`
-    <div>
-      <div class="title">${state.translate('legalHeader')}</div>
-        ${raw(
-          replaceLinks(state.translate('legalNoticeTestPilot'), [
-            'https://testpilot.firefox.com/terms',
-            'https://testpilot.firefox.com/privacy',
-            'https://testpilot.firefox.com/experiments/send'
-          ])
-        )}
-        ${raw(
-          replaceLinks(state.translate('legalNoticeMozilla'), [
-            'https://www.mozilla.org/privacy/websites/',
-            'https://www.mozilla.org/about/legal/terms/mozilla/'
-          ])
-        )}
-    </div>
-  `;
-};
-
-function replaceLinks(str, urls) {
-  let i = 0;
-  const s = str.replace(
-    /<a>([^<]+)<\/a>/g,
-    (m, v) => `<a href="${urls[i++]}">${v}</a>`
-  );
-  return `<div class="description">${s}</div>`;
-}

app/pages/notFound/index.js

@@ -1,16 +0,0 @@
-const html = require('choo/html');
-const assets = require('../../../common/assets');
-
-module.exports = function(state) {
-  return html`
-    <div class="page">
-      <div class="title">${state.translate('expiredPageHeader')}</div>
-      <img src="${assets.get('illustration_expired.svg')}" id="expired-img">
-      <div class="description">
-        ${state.translate('uploadPageExplainer')}
-      </div>
-      <a class="link link--action" href="/">
-        ${state.translate('sendYourFilesLink')}
-      </a>
-    </div>`;
-};

app/pages/preview/index.js

@@ -1,40 +0,0 @@
-const html = require('choo/html');
-const assets = require('../../../common/assets');
-const { bytes } = require('../../utils');
-
-module.exports = function(state, pageAction) {
-  const fileInfo = state.fileInfo;
-
-  const size = fileInfo.size
-    ? state.translate('downloadFileSize', { size: bytes(fileInfo.size) })
-    : '';
-
-  const title = fileInfo.name
-    ? state.translate('downloadFileName', { filename: fileInfo.name })
-    : state.translate('downloadFileTitle');
-
-  const info = html`
-    <div id="dl-file"
-      data-nonce="${fileInfo.nonce}"
-      data-requires-password="${fileInfo.requiresPassword}"></div>`;
-  if (!pageAction) {
-    return info;
-  }
-  return html`
-    <div class="page">
-      <div class="title">
-        <span>${title}</span>
-        <span>${' ' + size}</span>
-      </div>
-      <div class="description">${state.translate('downloadMessage')}</div>
-      <img
-        src="${assets.get('illustration_download.svg')}"
-        title="${state.translate('downloadAltText')}"/>
-      ${pageAction}
-      <a class="link link--action" href="/">
-        ${state.translate('sendYourFilesLink')}
-      </a>
-      ${info}
-    </div>
-  `;
-};

app/pages/share/index.js

@@ -1,112 +0,0 @@
-/* global EXPIRE_SECONDS */
-const html = require('choo/html');
-const raw = require('choo/html/raw');
-const assets = require('../../../common/assets');
-const notFound = require('../notFound');
-const setPasswordSection = require('../../templates/setPasswordSection');
-const selectbox = require('../../templates/selectbox');
-const deletePopup = require('../../templates/popup');
-const { allowedCopy, delay, fadeOut } = require('../../utils');
-
-module.exports = function(state, emit) {
-  const file = state.storage.getFileById(state.params.id);
-  if (!file) {
-    return notFound(state, emit);
-  }
-
-  return html`
-  <div id="shareWrapper" class="effect--fadeIn">
-    ${expireInfo(file, state.translate, emit)}
-    <div class="sharePage">
-      <div class="sharePage__copyText">
-        ${state.translate('copyUrlFormLabelWithName', { filename: file.name })}
-      </div>
-      <div class="copySection">
-        <input
-          id="fileUrl"
-          class="copySection__url"
-          type="url"
-          value="${file.url}"
-          readonly="true"/>
-        <button id="copyBtn"
-          class="inputBtn inputBtn--copy"
-          title="${state.translate('copyUrlFormButton')}"
-          onclick=${copyLink}>${state.translate('copyUrlFormButton')}</button>
-      </div>
-      ${setPasswordSection(state, emit)}
-      <button
-        class="btn btn--delete"
-        title="${state.translate('deleteFileButton')}"
-        onclick=${showPopup}>${state.translate('deleteFileButton')}
-      </button>
-      <div class="sharePage__deletePopup">
-        ${deletePopup(
-          state.translate('deletePopupText'),
-          state.translate('deletePopupYes'),
-          state.translate('deletePopupCancel'),
-          deleteFile
-        )}
-      </div>
-      <a class="link link--action"
-        href="/"
-        onclick=${sendNew}>${state.translate('sendAnotherFileLink')}</a>
-    </div>
-  </div>
-  `;
-
-  function showPopup() {
-    const popup = document.querySelector('.popup');
-    popup.classList.add('popup--show');
-    popup.focus();
-  }
-
-  async function sendNew(e) {
-    e.preventDefault();
-    await fadeOut('#shareWrapper');
-    emit('pushState', '/');
-  }
-
-  async function copyLink() {
-    if (allowedCopy()) {
-      emit('copy', { url: file.url, location: 'success-screen' });
-      const input = document.getElementById('fileUrl');
-      input.disabled = true;
-      input.classList.add('input--copied');
-      const copyBtn = document.getElementById('copyBtn');
-      copyBtn.disabled = true;
-      copyBtn.classList.add('inputBtn--copied');
-      copyBtn.replaceChild(
-        html`<img src="${assets.get('check-16.svg')}" class="cursor--pointer">`,
-        copyBtn.firstChild
-      );
-      await delay(2000);
-      input.disabled = false;
-      input.classList.remove('input--copied');
-      copyBtn.disabled = false;
-      copyBtn.classList.remove('inputBtn--copied');
-      copyBtn.textContent = state.translate('copyUrlFormButton');
-    }
-  }
-
-  async function deleteFile() {
-    emit('delete', { file, location: 'success-screen' });
-    await fadeOut('#shareWrapper');
-    emit('pushState', '/');
-  }
-};
-
-function expireInfo(file, translate, emit) {
-  const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
-  const el = html`<div class="title">${raw(
-    translate('expireInfo', {
-      downloadCount: '<select></select>',
-      timespan: translate('timespanHours', { num: hours })
-    })
-  )}</div>`;
-  const select = el.querySelector('select');
-  const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
-  const t = num => translate('downloadCount', { num });
-  const changed = value => emit('changeLimit', { file, value });
-  el.replaceChild(selectbox(file.dlimit || 1, options, t, changed), select);
-  return el;
-}

app/pages/share/share.css

@@ -1,112 +0,0 @@
-.sharePage {
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  max-width: 640px;
-}
-
-.sharePage__copyText {
-  align-self: flex-start;
-  margin-top: 60px;
-  margin-bottom: 10px;
-  color: var(--textColor);
-  max-width: 614px;
-  word-wrap: break-word;
-}
-
-.sharePage__deletePopup {
-  position: relative;
-  align-self: center;
-  bottom: 50px;
-}
-
-.copySection {
-  display: flex;
-  flex-wrap: nowrap;
-  width: 100%;
-}
-
-.copySection__url {
-  flex: 1;
-  height: 56px;
-  border: 1px solid var(--primaryControlBGColor);
-  border-radius: 6px 0 0 6px;
-  font-size: 20px;
-  color: var(--inputTextColor);
-  font-family: 'SF Pro Text', sans-serif;
-  letter-spacing: 0;
-  line-height: 23px;
-  font-weight: 300;
-  padding-left: 10px;
-}
-
-.copySection__url:disabled {
-  border: 1px solid var(--successControlBGColor);
-  background: var(--successControlFGColor);
-}
-
-.inputBtn--copy {
-  flex: 0 1 165px;
-  padding-bottom: 4px;
-}
-
-.input--copied {
-  border-color: var(--successControlBGColor);
-}
-
-.inputBtn--copied,
-.inputBtn--copied:hover {
-  background: var(--successControlBGColor);
-  border: 1px solid var(--successControlBGColor);
-  color: var(--successControlFGColor);
-}
-
-.btn--delete {
-  align-self: center;
-  width: 176px;
-  height: 44px;
-  background: #fff;
-  border-color: rgba(12, 12, 13, 0.3);
-  margin-top: 50px;
-  margin-bottom: 12px;
-  color: #313131;
-}
-
-.btn--delete:hover {
-  background: #efeff1;
-}
-
-@media (max-device-width: 768px), (max-width: 768px) {
-  .copySection {
-    width: 100%;
-  }
-
-  .copySection__url {
-    font-size: 18px;
-  }
-}
-
-@media (max-device-width: 520px), (max-width: 520px) {
-  .copySection {
-    width: 100%;
-    flex-direction: column;
-    padding-left: 0;
-  }
-
-  .copySection__url {
-    font-size: 22px;
-    padding: 15px 10px;
-    border-radius: 6px 6px 0 0;
-  }
-
-  .sharePage__copyText {
-    text-align: center;
-  }
-
-  .inputBtn--copy {
-    border-radius: 0 0 6px 6px;
-    flex: 0 1 65px;
-  }
-}

app/pages/unsupported/index.js

@@ -1,67 +0,0 @@
-const html = require('choo/html');
-const assets = require('../../../common/assets');
-
-module.exports = function(state) {
-  let strings = {};
-  let why = '';
-  let url = '';
-  let buttonAction = '';
-  if (state.params.reason !== 'outdated') {
-    strings = unsupportedStrings(state);
-    why = html`
-      <div class="description">
-        <a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported">
-          ${state.translate('notSupportedLink')}
-        </a>
-      </div>`;
-    url =
-      'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com';
-    buttonAction = html`
-      <div class="firefoxDownload__action">
-        Firefox<br><span class="firefoxDownload__text">${strings.button}</span>
-      </div>`;
-  } else {
-    strings = outdatedStrings(state);
-    url = 'https://support.mozilla.org/kb/update-firefox-latest-version';
-    buttonAction = html`
-      <div class="firefoxDownload__action">
-        ${strings.button}
-      </div>`;
-  }
-  return html`
-    <div class="unsupportedPage">
-      <div class="title">${strings.title}</div>
-      <div class="description">
-        ${strings.description}
-      </div>
-      ${why}
-      <a href="${url}" class="firefoxDownload">
-        <img
-          src="${assets.get('firefox_logo-only.svg')}"
-          class="firefoxDownload__logo"
-          alt="Firefox"/>
-        ${buttonAction}
-      </a>
-      <div class="unsupportedPage__info">
-        ${strings.explainer}
-      </div>
-    </div>`;
-};
-
-function outdatedStrings(state) {
-  return {
-    title: state.translate('notSupportedHeader'),
-    description: state.translate('notSupportedOutdatedDetail'),
-    button: state.translate('updateFirefox'),
-    explainer: state.translate('uploadPageExplainer')
-  };
-}
-
-function unsupportedStrings(state) {
-  return {
-    title: state.translate('notSupportedHeader'),
-    description: state.translate('notSupportedDetail'),
-    button: state.translate('downloadFirefoxButtonSub'),
-    explainer: state.translate('uploadPageExplainer')
-  };
-}

app/pages/unsupported/unsupported.css

@@ -1,49 +0,0 @@
-.unsupportedPage {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.unsupportedPage__info {
-  font-size: 13px;
-  line-height: 23px;
-  text-align: center;
-  color: var(--lightTextColor);
-  margin: 0 auto 23px;
-}
-
-.firefoxDownload {
-  margin-bottom: 181px;
-  height: 80px;
-  background: #98e02b;
-  border-radius: 3px;
-  cursor: pointer;
-  border: 0;
-  box-shadow: 0 5px 3px rgb(234, 234, 234);
-  font-family: 'Fira Sans', 'segoe ui', sans-serif;
-  font-weight: 500;
-  color: var(--primaryControlFGColor);
-  font-size: 26px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 1;
-  padding: 0 25px;
-}
-
-.firefoxDownload__logo {
-  width: 70px;
-}
-
-.firefoxDownload__action {
-  text-align: left;
-  margin-left: 20.4px;
-}
-
-.firefoxDownload__text {
-  font-family: 'Fira Sans', 'segoe ui', sans-serif;
-  font-weight: 300;
-  font-size: 18px;
-  letter-spacing: -0.69px;
-}

app/pages/upload/index.js

@@ -1,39 +0,0 @@
-const html = require('choo/html');
-const progress = require('../../templates/progress');
-const { bytes } = require('../../utils');
-
-module.exports = function(state, emit) {
-  const transfer = state.transfer;
-
-  return html`
-  <div class="page effect--fadeIn">
-    <div class="title">
-      ${state.translate('uploadingPageProgress', {
-        filename: transfer.file.name,
-        size: bytes(transfer.file.size)
-      })}
-    </div>
-    <div class="description"></div>
-    ${progress(transfer.progressRatio, transfer.progressIndefinite)}
-    <div class="progressSection">
-      <div class="progressSection__text">
-        ${state.translate(transfer.msg, transfer.sizes)}
-      </div>
-      <button
-        id="cancel-upload"
-        class="btn btn--cancel"
-        title="${state.translate('uploadingPageCancel')}"
-        onclick=${cancel}>
-        ${state.translate('uploadingPageCancel')}
-      </button>
-    </div>
-  </div>
-  `;
-
-  function cancel() {
-    const btn = document.getElementById('cancel-upload');
-    btn.disabled = true;
-    btn.textContent = state.translate('uploadCancelNotification');
-    emit('cancel');
-  }
-};

app/pages/welcome/index.js

@@ -1,84 +0,0 @@
-/* global MAXFILESIZE */
-const html = require('choo/html');
-const assets = require('../../../common/assets');
-const fileList = require('../../templates/fileList');
-const { bytes, fadeOut } = require('../../utils');
-
-module.exports = function(state, emit) {
-  // the page flickers if both the server and browser set 'effect--fadeIn'
-  const fade = state.layout ? '' : 'effect--fadeIn';
-  return html`
-  <div id="page-one" class="${fade}">
-    <div class="title">${state.translate('uploadPageHeader')}</div>
-    <div class="description">
-      <div>${state.translate('uploadPageExplainer')}</div>
-      <a
-        href="https://testpilot.firefox.com/experiments/send"
-        class="link">
-        ${state.translate('uploadPageLearnMore')}
-      </a>
-    </div>
-    <div class="uploadArea"
-      ondragover=${dragover}
-      ondragleave=${dragleave}>
-      <img
-        src="${assets.get('upload.svg')}"
-        title="${state.translate('uploadSvgAlt')}"/>
-      <div class="uploadArea__msg">
-        ${state.translate('uploadPageDropMessage')}
-      </div>
-      <span class="uploadArea__sizeMsg">
-        ${state.translate('uploadPageSizeMessage')}
-      </span>
-      <input id="file-upload"
-        class="inputFile"
-        type="file"
-        name="fileUploaded"
-        onfocus=${onfocus}
-        onblur=${onblur}
-        onchange=${upload} />
-      <label for="file-upload"
-        class="btn btn--file"
-        title="${state.translate('uploadPageBrowseButton1')}">
-        ${state.translate('uploadPageBrowseButton1')}
-      </label>
-    </div>
-    ${fileList(state, emit)}
-  </div>
-  `;
-
-  function dragover(event) {
-    const div = document.querySelector('.uploadArea');
-    div.classList.add('uploadArea--dragging');
-  }
-
-  function dragleave(event) {
-    const div = document.querySelector('.uploadArea');
-    div.classList.remove('uploadArea--dragging');
-  }
-
-  function onfocus(event) {
-    event.target.classList.add('inputFile--focused');
-  }
-
-  function onblur(event) {
-    event.target.classList.remove('inputFile--focused');
-  }
-
-  async function upload(event) {
-    event.preventDefault();
-    const target = event.target;
-    const file = target.files[0];
-    if (file.size === 0) {
-      return;
-    }
-    if (file.size > MAXFILESIZE) {
-      // eslint-disable-next-line no-alert
-      alert(state.translate('fileTooBig', { size: bytes(MAXFILESIZE) }));
-      return;
-    }
-
-    await fadeOut('#page-one');
-    emit('upload', { file, type: 'click' });
-  }
-};

app/pages/welcome/welcome.css

@@ -1,65 +0,0 @@
-.uploadArea {
-  border: 3px dashed rgba(0, 148, 251, 0.5);
-  margin: 0 auto 10px;
-  height: 255px;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-  transition: transform 150ms;
-  padding: 15px;
-}
-
-.uploadArea__msg {
-  font-size: 22px;
-  color: var(--lightTextColor);
-  margin: 20px 0 10px;
-  font-family: 'SF Pro Text', sans-serif;
-}
-
-.uploadArea__sizeMsg {
-  font-style: italic;
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--lightTextColor);
-  margin-bottom: 22px;
-}
-
-.uploadArea--dragging {
-  border: 5px dashed rgba(0, 148, 251, 0.5);
-  height: 251px;
-  transform: scale(1.04);
-  border-radius: 4.2px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-}
-
-.uploadArea--dragging * {
-  pointer-events: none;
-}
-
-.btn--file {
-  font-size: 20px;
-  min-width: 240px;
-  height: 60px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 10px;
-}
-
-.inputFile {
-  opacity: 0;
-  position: absolute;
-}
-
-.inputFile--focused + .btn--file {
-  background-color: var(--primaryControlHoverColor);
-  outline: 1px dotted #000;
-  outline: -webkit-focus-ring-color auto 5px;
-}

app/pasteManager.js

@@ -1,25 +1,36 @@
-/* global MAXFILESIZE */
-import { bytes } from './utils';
+function getString(item) {
+  return new Promise(resolve => {
+    item.getAsString(resolve);
+  });
+}
 
 export default function(state, emitter) {
-  window.addEventListener('paste', event => {
+  window.addEventListener('paste', async event => {
     if (state.route !== '/' || state.uploading) return;
+    if (['password', 'text', 'email'].includes(event.target.type)) return;
 
-    for (const item of event.clipboardData.items) {
-      if (!item.type.includes('image')) continue;
-
-      const file = item.getAsFile();
-
-      if (!file) continue; // Sometimes null
-
-      if (file.size > MAXFILESIZE) {
-        // eslint-disable-next-line no-alert
-        alert(state.translate('fileTooBig', { size: bytes(MAXFILESIZE) }));
-        continue;
+    const items = Array.from(event.clipboardData.items);
+    const transferFiles = items.filter(item => item.kind === 'file');
+    const strings = items.filter(item => item.kind === 'string');
+    if (transferFiles.length) {
+      const promises = transferFiles.map(async (f, i) => {
+        const blob = f.getAsFile();
+        if (!blob) {
+          return null;
+        }
+        const name = await getString(strings[i]);
+        const file = new File([blob], name, { type: blob.type });
+        return file;
+      });
+      const files = (await Promise.all(promises)).filter(f => !!f);
+      if (files.length) {
+        emitter.emit('addFiles', { files });
       }
-
-      emitter.emit('upload', { file, type: 'paste' });
-      return; // return here since only one file is allowed to be uploaded at a time
+    } else if (strings.length) {
+      strings[0].getAsString(s => {
+        const file = new File([s], 'pasted.txt', { type: 'text/plain' });
+        emitter.emit('addFiles', { files: [file] });
+      });
     }
   });
 }

app/readme.md

@@ -2,7 +2,7 @@
 
 `app/` contains the browser code that gets bundled into `app.[hash].js`. It's got all the logic, crypto, and UI. All of it gets used in the browser, and some of it by the server for server side rendering.
 
-The main entrypoint for the browser is [main.js](./main.js) and on the server [routes/index.js](./routes/index.js) gets imported by [/server/routes/pages.js](../server/routes/pages.js)
+The main entrypoint for the browser is [main.js](./main.js) and on the server [routes.js](./routes.js) is imported by [/server/routes/pages.js](../server/routes/pages.js)
 
 - `pages` contains display logic an markup for pages
 - `routes` contains route definitions and logic

app/routes.js

@@ -0,0 +1,23 @@
+const choo = require('choo');
+const download = require('./ui/download');
+const body = require('./ui/body');
+
+module.exports = function(app = choo({ hash: true })) {
+  app.route('/', body(require('./ui/home')));
+  app.route('/download/:id', body(download));
+  app.route('/download/:id/:key', body(download));
+  app.route('/unsupported/:reason', body(require('./ui/unsupported')));
+  app.route('/legal', body(require('./ui/legal')));
+  app.route('/error', body(require('./ui/error')));
+  app.route('/blank', body(require('./ui/blank')));
+  app.route('/oauth', function(state, emit) {
+    emit('authenticate', state.query.code, state.query.state);
+  });
+  app.route('/login', function(state, emit) {
+    emit('replaceState', '/');
+    setTimeout(() => emit('render'));
+  });
+  app.route('/report', body(require('./ui/report')));
+  app.route('*', body(require('./ui/notFound')));
+  return app;
+};

app/routes/download.js

@@ -1,60 +0,0 @@
-const preview = require('../pages/preview');
-const download = require('../pages/download');
-const notFound = require('../pages/notFound');
-const downloadPassword = require('../templates/downloadPassword');
-const downloadButton = require('../templates/downloadButton');
-
-function hasFileInfo() {
-  return !!document.getElementById('dl-file');
-}
-
-function getFileInfoFromDOM() {
-  const el = document.getElementById('dl-file');
-  if (!el) {
-    return null;
-  }
-  return {
-    nonce: el.getAttribute('data-nonce'),
-    requiresPassword: !!+el.getAttribute('data-requires-password')
-  };
-}
-
-function createFileInfo(state) {
-  const metadata = getFileInfoFromDOM();
-  return {
-    id: state.params.id,
-    secretKey: state.params.key,
-    nonce: metadata.nonce,
-    requiresPassword: metadata.requiresPassword
-  };
-}
-
-module.exports = function(state, emit) {
-  if (!state.fileInfo) {
-    // This is a fresh page load
-    // We need to parse the file info from the server's html
-    if (!hasFileInfo()) {
-      return notFound(state, emit);
-    }
-    state.fileInfo = createFileInfo(state);
-
-    if (!state.fileInfo.requiresPassword) {
-      emit('getMetadata');
-    }
-  }
-
-  let pageAction = null; //default state: we don't have file metadata
-  if (state.transfer) {
-    const s = state.transfer.state;
-    if (['downloading', 'decrypting', 'complete'].indexOf(s) > -1) {
-      // Downloading is in progress
-      return download(state, emit);
-    }
-    // we have file metadata
-    pageAction = downloadButton(state, emit);
-  } else if (state.fileInfo.requiresPassword && !state.fileInfo.password) {
-    // we're waiting on the user for a valid password
-    pageAction = downloadPassword(state, emit);
-  }
-  return preview(state, pageAction);
-};

app/routes/home.js

@@ -1,9 +0,0 @@
-const welcome = require('../pages/welcome');
-const upload = require('../pages/upload');
-
-module.exports = function(state, emit) {
-  if (state.uploading) {
-    return upload(state, emit);
-  }
-  return welcome(state, emit);
-};

app/routes/index.js

@@ -1,58 +0,0 @@
-const choo = require('choo');
-const html = require('choo/html');
-const nanotiming = require('nanotiming');
-const download = require('./download');
-const header = require('../templates/header');
-const footer = require('../templates/footer');
-const fxPromo = require('../templates/fxPromo');
-
-nanotiming.disabled = true;
-const app = choo();
-
-function banner(state, emit) {
-  if (state.promo && !state.route.startsWith('/unsupported/')) {
-    return fxPromo(state, emit);
-  }
-}
-
-function body(template) {
-  return function(state, emit) {
-    const b = html`<body>
-      ${banner(state, emit)}
-      ${header(state)}
-      <main class="main">
-        <noscript>
-          <div class="noscript">
-            <h2>${state.translate('javascriptRequired')}</h2>
-            <p>
-              <a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
-              ${state.translate('whyJavascript')}
-              </a>
-            </p>
-            <p>${state.translate('enableJavascript')}</p>
-          </div>
-        </noscript>
-        ${template(state, emit)}
-      </main>
-      ${footer(state)}
-    </body>`;
-    if (state.layout) {
-      // server side only
-      return state.layout(state, b);
-    }
-    return b;
-  };
-}
-
-app.route('/', body(require('./home')));
-app.route('/share/:id', body(require('../pages/share')));
-app.route('/download/:id', body(download));
-app.route('/download/:id/:key', body(download));
-app.route('/completed', body(require('../pages/completed')));
-app.route('/unsupported/:reason', body(require('../pages/unsupported')));
-app.route('/legal', body(require('../pages/legal')));
-app.route('/error', body(require('../pages/error')));
-app.route('/blank', body(require('../pages/blank')));
-app.route('*', body(require('../pages/notFound')));
-
-module.exports = app;

app/serviceWorker.js

@@ -0,0 +1,175 @@
+import assets from '../common/assets';
+import { version } from '../package.json';
+import Keychain from './keychain';
+import { downloadStream } from './api';
+import { transformStream } from './streams';
+import Zip from './zip';
+import contentDisposition from 'content-disposition';
+
+let noSave = false;
+const map = new Map();
+const IMAGES = /.*\.(png|svg|jpg)$/;
+const VERSIONED_ASSET = /\.[A-Fa-f0-9]{8}\.(js|css|png|svg|jpg)(#\w+)?$/;
+const DOWNLOAD_URL = /\/api\/download\/([A-Fa-f0-9]{4,})/;
+const FONT = /\.woff2?$/;
+
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', event => {
+  event.waitUntil(self.clients.claim().then(precache));
+});
+
+async function decryptStream(id) {
+  const file = map.get(id);
+  if (!file) {
+    return new Response(null, { status: 400 });
+  }
+  try {
+    let size = file.size;
+    let type = file.type;
+    const keychain = new Keychain(file.key, file.nonce);
+    if (file.requiresPassword) {
+      keychain.setPassword(file.password, file.url);
+    }
+
+    file.download = downloadStream(id, file.dlToken);
+
+    const body = await file.download.result;
+
+    const decrypted = keychain.decryptStream(body);
+
+    let zipStream = null;
+    if (file.type === 'send-archive') {
+      const zip = new Zip(file.manifest, decrypted);
+      zipStream = zip.stream;
+      type = 'application/zip';
+      size = zip.size;
+    }
+    const responseStream = transformStream(
+      zipStream || decrypted,
+      {
+        transform(chunk, controller) {
+          file.progress += chunk.length;
+          controller.enqueue(chunk);
+        }
+      },
+      function oncancel() {
+        // NOTE: cancel doesn't currently fire on chrome
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=638494
+        file.download.cancel();
+        map.delete(id);
+      }
+    );
+
+    const headers = {
+      'Content-Disposition': contentDisposition(file.filename),
+      'Content-Type': type,
+      'Content-Length': size
+    };
+    return new Response(responseStream, { headers });
+  } catch (e) {
+    if (noSave) {
+      return new Response(null, { status: e.message });
+    }
+
+    return new Response(null, {
+      status: 302,
+      headers: {
+        Location: `/download/${id}/#${file.key}`
+      }
+    });
+  }
+}
+
+async function precache() {
+  try {
+    await cleanCache();
+    const cache = await caches.open(version);
+    const images = assets.match(IMAGES);
+    await cache.addAll(images);
+  } catch (e) {
+    console.error(e);
+    // cache will get populated on demand
+  }
+}
+
+async function cleanCache() {
+  const oldCaches = await caches.keys();
+  for (const c of oldCaches) {
+    if (c !== version) {
+      await caches.delete(c);
+    }
+  }
+}
+
+function cacheable(url) {
+  return VERSIONED_ASSET.test(url) || FONT.test(url);
+}
+
+async function cachedOrFetched(req) {
+  const cache = await caches.open(version);
+  const cached = await cache.match(req);
+  if (cached) {
+    return cached;
+  }
+  const fetched = await fetch(req);
+  if (fetched.ok && cacheable(req.url)) {
+    cache.put(req, fetched.clone());
+  }
+  return fetched;
+}
+
+self.onfetch = event => {
+  const req = event.request;
+  if (req.method !== 'GET') return;
+  const url = new URL(req.url);
+  const dlmatch = DOWNLOAD_URL.exec(url.pathname);
+  if (dlmatch) {
+    event.respondWith(decryptStream(dlmatch[1]));
+  } else if (cacheable(url.pathname)) {
+    event.respondWith(cachedOrFetched(req));
+  }
+};
+
+self.onmessage = event => {
+  if (event.data.request === 'init') {
+    noSave = event.data.noSave;
+    const info = {
+      key: event.data.key,
+      nonce: event.data.nonce,
+      filename: event.data.filename,
+      requiresPassword: event.data.requiresPassword,
+      password: event.data.password,
+      url: event.data.url,
+      type: event.data.type,
+      manifest: event.data.manifest,
+      size: event.data.size,
+      dlToken: event.data.dlToken,
+      progress: 0
+    };
+    map.set(event.data.id, info);
+
+    event.ports[0].postMessage('file info received');
+  } else if (event.data.request === 'progress') {
+    const file = map.get(event.data.id);
+    if (!file) {
+      event.ports[0].postMessage({ error: 'cancelled' });
+    } else {
+      if (file.progress === file.size) {
+        map.delete(event.data.id);
+      }
+      event.ports[0].postMessage({ progress: file.progress });
+    }
+  } else if (event.data.request === 'cancel') {
+    const file = map.get(event.data.id);
+    if (file) {
+      if (file.download) {
+        file.download.cancel();
+      }
+      map.delete(event.data.id);
+    }
+    event.ports[0].postMessage('download cancelled');
+  }
+};