Merge pull request #1006 from mozilla/update-android-ui

Update the android ui to work with the new desktop ui components.

android/android.js

@@ -19,18 +19,32 @@ window.DEFAULTS = {
   EXPIRE_SECONDS: 3600
 };
 
-const choo = require('choo');
+import choo from 'choo';
-const html = require('choo/html');
+import html from 'choo/html';
-const assets = require('../common/assets');
+import Raven from 'raven-js';
-const header = require('../app/ui/header');
+
-const locale = require('../common/locales');
+import assets from '../common/assets';
-const home = require('../app/ui/home');
+import header from '../app/ui/header';
-const app = choo();
+import locale from '../common/locales';
+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';
 
 if (navigator.userAgent === 'Send Android') {
   assets.setPrefix('/android_asset');
 }
 
+const app = choo();
+//app.use(state);
+app.use(controller);
+app.use(intents);
+
 function body(main) {
   return function(state, emit) {
     return html`
@@ -56,12 +70,14 @@ function body(main) {
   };
 }
 
-app.use(require('./stores/state').default);
 app.use((state, emitter) => {
   state.translate = locale.getTranslator();
   state.capabilities = {
     account: true
   }; //TODO
+  state.storage = storage;
+  state.user = new User(storage);
+  state.raven = Raven;
 
   window.finishLogin = async function(accountInfo) {
     await state.user.finishLogin(accountInfo);
@@ -72,14 +88,11 @@ app.use((state, emitter) => {
   window.appState = state;
   window.appEmit = emitter.emit.bind(emitter);
 });
-app.use(require('../app/controller').default);
-app.use(require('./stores/intents').default);
 app.route('/', body(home));
-app.route('/options', require('./pages/options').default);
+app.route('/upload', upload);
-app.route('/upload', require('./pages/upload').default);
+app.route('/share/:id', share);
-app.route('/share/:id', require('./pages/share').default);
+app.route('/preferences', preferences);
-app.route('/preferences', require('./pages/preferences').default);
+app.route('/error', error);
-app.route('/error', require('./pages/error').default);
 //app.route('/debugging', require('./pages/debugging').default);
 // add /api/filelist
 app.mount('body');

android/app/app.iml

@@ -131,9 +131,7 @@
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/instant_run_split_apk_resources" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/javac" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/jniLibs" />
-      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/lint_jar" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/manifest-checker" />
-      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/manifests" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/merged_assets" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/merged_manifests" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/prebuild" />
@@ -146,7 +144,6 @@
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/shaders" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/split-apk" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/split_list" />
-      <excludeFolder url="file://$MODULE_DIR$/build/intermediates/splits-support" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/symbols" />
       <excludeFolder url="file://$MODULE_DIR$/build/intermediates/transforms" />
       <excludeFolder url="file://$MODULE_DIR$/build/kotlin" />

android/app/src/main/java/com/mozilla/send/sendandroid/MainActivity.kt

@@ -47,6 +47,9 @@ class MainActivity : AppCompatActivity(), AdvancedWebView.Listener {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_main)
 
+        // https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews
+        WebView.setWebContentsDebuggingEnabled(true); // TODO only dev builds
+
         mWebView = findViewById<WebView>(R.id.webview) as AdvancedWebView
         mWebView!!.setListener(this, this)
         mWebView!!.setWebChromeClient(LoggingWebChromeClient())
@@ -149,7 +152,7 @@ class MainActivity : AppCompatActivity(), AdvancedWebView.Listener {
                             mToCall = "finishLogin(${toPass})"
                             this@MainActivity.runOnUiThread({
                                 // But then we also reload this here because we need to make sure onPageFinished runs after mToCall has been set.
-                                // We can't guarantee that onPageFinished has already been called at this point.
+                                // We can't guarantee that onPageFinished wasn't already called at this point.
                                 mWebView!!.loadUrl("file:///android_asset/android.html")
                             })
 
@@ -181,11 +184,9 @@ class MainActivity : AppCompatActivity(), AdvancedWebView.Listener {
         if (mToCall != null) {
             this@MainActivity.runOnUiThread({
                 mWebView?.evaluateJavascript(mToCall, fun (value: String) {
-                    // noop
-                })
-            })
-
                     mToCall = null
+                })
+            })
         }
     }
 

android/pages/home.js

@@ -1,42 +1,60 @@
 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');
 
-export default function mainPage(state, emit) {
+module.exports = function(state, emit) {
-  function clickPreferences(event) {
+  function onchange(event) {
     event.preventDefault();
-    emit('pushState', '/preferences');
+    const newFiles = Array.from(event.target.files);
+
+    emit('addFiles', { files: newFiles });
   }
 
-  function uploadFile(event) {
+  function onclick() {
-    event.preventDefault();
+    document.getElementById('file-upload').click();
-    const target = event.target;
-    const file = target.files[0];
-    if (file.size === 0) {
-      return;
   }
 
-    emit('pushState', '/options');
+  const archives = state.storage.files
-    emit('addFiles', { files: [file] });
+    .map(archive => archiveTile(state, emit, archive))
+    .reverse();
+
+  let content = '';
+  let button = html`
+    <img
+      onclick="${onclick}"
+      style="padding: 1em"
+      src="${assets.get('addfile.svg')}"
+    />
+  `;
+  if (state.uploading) {
+    content = archiveTile.uploading(state, emit);
+  } else if (state.archive) {
+    content = archiveTile.wip(state, emit);
+    button = '';
+  } else {
+    content =
+      archives.length < 1
+        ? intro(state)
+        : list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3');
   }
 
-  return html`<body>
+  return html`
-  <div id="white">
+    <main class="relative" style="display: flex">
-    <div id="centering">
+      ${state.modal && modal(state, emit)} ${content}
-      <img id="top-banner" src=${state.getAsset('top-banner.png')} />
+      <div class="fixed pin-r pin-b">
-      <a id="hamburger" href="#" onclick=${clickPreferences}>
+        ${button}
-        <img src=${state.getAsset('preferences.png')} />
+        <input
-      </a>
+          id="file-upload"
-      <img src=${state.getAsset('encrypted-envelope.png')} />
+          class="hidden"
-      <h4>Private, Encrypted File Sharing</h4>
+          type="file"
-      <div>
+          multiple
-        Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
+          onchange="${onchange}"
+          onclick="${e => e.stopPropagation()}"
+        />
       </div>
-      <div id="spacer">
+    </main>
-      </div>
+  `;
-      <label id="label" for="input">
+};
-        <img src=${state.getAsset('cloud-upload.png')} />
-      </label>
-      <input id="input" name="input" type="file" onchange=${uploadFile} />
-    </div>
-  </div>
-</body>`;
-}

android/pages/options.js

@@ -1,92 +0,0 @@
-/* globals DEFAULTS */
-const html = require('choo/html');
-
-export default function options(state, emit) {
-  function clickCancel(event) {
-    event.preventDefault();
-    emit('pushState', '/');
-  }
-
-  async function submitForm(event) {
-    event.preventDefault();
-    if (this.addPassword.checked) {
-      if (this.password.value !== this.confirmPassword.value) {
-        state.passwordDoesNotMatchError = true;
-        emit('render');
-        return;
-      } else {
-        state.passwordDoesNotMatchError = false;
-      }
-    }
-    state.timeLimit = parseInt(event.target.maxTime);
-    emit('upload', {
-      type: 'click',
-      dlimit: parseInt(event.target.numDownloads.value),
-      password: event.target.password.value
-    });
-    emit('pushState', '/upload');
-  }
-
-  function addPasswordChange(event) {
-    const pw = document.getElementById('password-section');
-    if (event.target.checked) {
-      pw.style.display = 'block';
-    } else {
-      pw.style.display = 'none';
-    }
-  }
-
-  const passwordDoesNotMatchDisplayStyle = state.passwordDoesNotMatchError
-    ? 'display: block'
-    : 'display: none';
-  const passwordChecked = state.passwordDoesNotMatchError ? true : false;
-
-  return html`<body>
-  <div id="white">
-    <div id="options">
-      <a onclick=${clickCancel} class="cancel" href="#">
-      cancel
-      </a>
-      <h5>Selected files</h5>
-      <ul>
-        <li>file</li>
-      </ul>
-      <div id="options-controls">
-        <form onsubmit=${submitForm}>
-          <div id="expires-after-section">
-            <h5>Expires after</h5>
-            <select name="numDownloads">
-            ${DEFAULTS.DOWNLOAD_COUNTS.map(i => {
-              return html`<option value="${i}">${i} download${
-                i > 1 ? 's' : ''
-              }</option>`;
-            })}
-            </select>
-            or
-            <select name="maxTime">
-              <option value="300">5 minutes</option>
-              <option value="3600">1 hour</option>
-              <option value="86400" selected="true">24 hours</option>
-              <option value="604800">7 days</option>
-            </select>
-          </div>
-          <div id="set-password-section">
-            <input onchange=${addPasswordChange} name="addPassword" autocomplete="off" type="checkbox" checked=${passwordChecked}>
-            <label for="addPassword">Protect with password</label>
-            <div id="password-section" style=${passwordDoesNotMatchDisplayStyle}>
-              <div style=${passwordDoesNotMatchDisplayStyle}>
-                Passwords must match.
-              </div>
-              <h5>Password:</h5>
-              <input name="password" type="password" />
-              <h5>Confirm password:</h5>
-              <input name="confirmPassword" type="password" />
-            </div>
-          </div>
-          <button>Send</button>
-        </form>
-      </div>
-    </div>
-  </div>
-</body>`;
-}

app/ui/archiveTile.js

@@ -189,13 +189,13 @@ module.exports = function(state, emit, archive) {
 
 module.exports.wip = function(state, emit) {
   return html`
-    <article class="h-full flex flex-col bg-white z-20" id="wip">
+    <article class="flex flex-col bg-white z-20 md:h-full" id="wip">
       ${
         list(
           Array.from(state.archive.files)
             .reverse()
             .map(f => fileInfo(f, remove(f))),
-          'list-reset h-full overflow-y-scroll px-4 bg-blue-lightest md:max-h-half-screen',
+          'list-reset overflow-y-scroll px-4 bg-blue-lightest md:h-full md:max-h-half-screen',
           'bg-white px-2 mt-3 border border-grey-light rounded'
         )
       }
@@ -209,7 +209,7 @@ module.exports.wip = function(state, emit) {
         />
         <label
           for="file-upload"
-          class="flex flex-row items-center w-full h-full p-2 cursor-pointer"
+          class="flex flex-row items-center w-full p-2 cursor-pointer"
           title="${state.translate('addFilesButton')}"
         >
           <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" /> ${

build/android_index_plugin.js

@@ -31,13 +31,17 @@ class AndroidIndexPlugin {
         <html lang="en-US">
           <head>
             <title>Firefox Send</title>
-          <link href="${files['app.css']}" rel="stylesheet">
+            <meta charset="utf-8" />
+            <meta
+              name="viewport"
+              content="width=device-width, initial-scale=1"
+            />
+            <link href="${files['app.css']}" rel="stylesheet" />
             <script src="${files['vendor.js']}"></script>
             <script src="${assets['public/locales/en-US/send.ftl']}"></script>
             <script src="${files['android.js']}"></script>
           </head>
-        <body>
+          <body></body>
-        </body>
         </html>
       `
         .toString()

postcss.config.js

@@ -16,7 +16,12 @@ if (process.env.NODE_ENV === 'development') {
 } else {
   options.plugins.push(
     require('@fullhuman/postcss-purgecss')({
-      content: ['./app/*.js', './app/ui/*.js'],
+      content: [
+        './app/*.js',
+        './app/ui/*.js',
+        './android/*.js',
+        './android/pages/*.js'
+      ],
       extractors: [
         {
           extractor: TailwindExtractor,