Hook up the android kotlin code to the send js code (#860)

.gitignore

@@ -6,3 +6,6 @@ dist
 .nyc_output
 .tox
 .pytest_cache
+android/app/src/main/assets/vendor.js
+android/app/src/main/assets/android.js
+

android/android.iml

@@ -13,7 +13,7 @@
     <content url="file://$MODULE_DIR$">
       <excludeFolder url="file://$MODULE_DIR$/.gradle" />
     </content>
-    <orderEntry type="inheritedJdk" />
+    <orderEntry type="jdk" jdkName="1.8" jdkType="JavaSDK" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
 </module>

android/android.js

@@ -0,0 +1,159 @@
+/* global window, document, fetch */
+
+const MAXFILESIZE = 1024 * 1024 * 1024 * 2;
+
+const EventEmitter = require('events');
+const emitter = new EventEmitter();
+
+function dom(tagName, attributes, children = []) {
+  const node = document.createElement(tagName);
+  for (const name in attributes) {
+    if (name.indexOf('on') === 0) {
+      node[name] = attributes[name];
+    } else if (name === 'htmlFor') {
+      node.htmlFor = attributes.htmlFor;
+    } else if (name === 'className') {
+      node.className = attributes.className;
+    } else {
+      node.setAttribute(name, attributes[name]);
+    }
+  }
+  if (!(children instanceof Array)) {
+    children = [children];
+  }
+  for (let child of children) {
+    if (typeof child === 'string') {
+      child = document.createTextNode(child);
+    }
+    node.appendChild(child);
+  }
+  return node;
+}
+
+function uploadComplete(file) {
+  document.body.innerHTML = '';
+  const input = dom('input', { id: 'url', value: file.url });
+  const copy = dom(
+    'button',
+    {
+      id: 'copy-button',
+      className: 'button',
+      onclick: () => {
+        input.select();
+        document.execCommand('copy');
+        input.blur();
+        copy.textContent = 'Copied!';
+        setTimeout(function() {
+          copy.textContent = 'Copy to clipboard';
+        }, 2000);
+      }
+    },
+    'Copy to clipboard'
+  );
+  const node = dom(
+    'div',
+    { id: 'striped' },
+    dom('div', { id: 'white' }, [
+      input,
+      copy,
+      dom(
+        'button',
+        { id: 'send-another', className: 'button', onclick: render },
+        'Send another file'
+      )
+    ])
+  );
+  document.body.appendChild(node);
+}
+
+const state = {
+  storage: {
+    files: [],
+    remove: function(fileId) {
+      console.log('REMOVE FILEID', fileId);
+    },
+    writeFile: function(file) {
+      console.log('WRITEFILE', file);
+    },
+    addFile: uploadComplete,
+    totalUploads: 0
+  },
+  transfer: null,
+  uploading: false,
+  settingPassword: false,
+  passwordSetError: null,
+  route: '/'
+};
+
+function upload(event) {
+  event.preventDefault();
+  const target = event.target;
+  const file = target.files[0];
+  if (file.size === 0) {
+    return;
+  }
+  if (file.size > MAXFILESIZE) {
+    console.log('file too big (no bigger than ' + MAXFILESIZE + ')');
+    return;
+  }
+
+  emitter.emit('upload', { file: file, type: 'click' });
+}
+
+function render() {
+  document.body.innerHTML = '';
+  const striped = dom(
+    'div',
+    { id: 'striped' },
+    dom('div', { id: 'white' }, [
+      dom('label', { id: 'label', htmlFor: 'input' }, 'Choose file'),
+      dom('input', {
+        id: 'input',
+        type: 'file',
+        name: 'input',
+        onchange: upload
+      })
+    ])
+  );
+  document.body.appendChild(striped);
+}
+
+emitter.on('render', function() {
+  document.body.innerHTML = '';
+  const percent =
+    (state.transfer.progress[0] / state.transfer.progress[1]) * 100;
+  const node = dom(
+    'div',
+    { style: 'background-color: white; width: 100%' },
+    dom('span', {
+      style: `display: inline-block; width: ${percent}%; background-color: blue`
+    })
+  );
+  document.body.appendChild(node);
+});
+
+emitter.on('pushState', function(path) {
+  console.log('pushState ' + path + ' ' + JSON.stringify(state));
+});
+
+const fileManager = require('../app/fileManager').default;
+try {
+  fileManager(state, emitter);
+} catch (e) {
+  console.error('error' + e);
+  console.error(e);
+}
+
+window.addEventListener(
+  'message',
+  event => {
+    fetch(event.data)
+      .then(res => res.blob())
+      .then(blob => {
+        emitter.emit('upload', { file: blob, type: 'share' });
+      });
+  },
+  false
+);
+
+render();

android/app/app.iml

@@ -22,13 +22,14 @@
       </configuration>
     </facet>
     <facet type="kotlin-language" name="Kotlin">
-      <configuration version="3" platform="JVM 1.6" useProjectSettings="false">
+      <configuration version="3" platform="JVM 1.8" useProjectSettings="false">
         <compilerSettings />
         <compilerArguments>
           <option name="destination" value="$MODULE_DIR$/build/tmp/kotlin-classes/debug" />
           <option name="noStdlib" value="true" />
           <option name="noReflect" value="true" />
           <option name="moduleName" value="app_debug" />
+          <option name="jvmTarget" value="1.8" />
           <option name="addCompilerBuiltIns" value="true" />
           <option name="loadBuiltInsFromDependencies" value="true" />
           <option name="languageVersion" value="1.2" />

android/app/build.gradle

@@ -32,3 +32,12 @@ dependencies {
     androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
     implementation 'com.github.delight-im:Android-AdvancedWebView:v3.0.0'
 }
+
+task generateAndLinkBundle(type: Exec, description: 'Generate the android.js bundle and link it into the assets directory') {
+    commandLine 'node'
+    args '../generateAndLinkBundle.js'
+}
+
+tasks.withType(JavaCompile) {
+    compileTask -> compileTask.dependsOn generateAndLinkBundle
+}

android/app/src/main/AndroidManifest.xml

@@ -12,7 +12,7 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/AppTheme">
-        <activity android:name=".MainActivity">
+        <activity android:name=".MainActivity" android:screenOrientation="portrait">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 

android/app/src/main/assets/index.css

@@ -0,0 +1,84 @@
+body {
+  background: url('background_1.jpg');
+  display: flex;
+  flex-direction: row;
+  flex: auto;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+#striped {
+  background-image: repeating-linear-gradient(
+    45deg,
+    white,
+    white 5px,
+    #ea000e 5px,
+    #ea000e 25px,
+    white 25px,
+    white 30px,
+    #0083ff 30px,
+    #0083ff 50px
+  );
+  height: 350px;
+  width: 480px;
+}
+
+#white {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  background-color: white;
+  margin: 0 10px;
+  padding: 1px 10px 0 10px;
+}
+
+#label {
+  background: #0297f8;
+  border: 1px solid #0297f8;
+  color: white;
+  font-size: 24px;
+  font-weight: 500;
+  height: 60px;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#input {
+  display: none;
+}
+
+#url {
+  flex: 1;
+  width: 100%;
+  height: 32px;
+  font-size: 24px;
+  margin-top: 1em;
+}
+
+.button {
+  flex: 1;
+  display: block;
+  background: #0297f8;
+  border: 1px solid #0297f8;
+  color: white;
+  font-size: 24px;
+  font-weight: 500;
+  width: 95%;
+  height: 32px;
+  margin-top: 1em;
+}
+
+#send-another {
+  margin-bottom: 1em;
+}

android/app/src/main/assets/index.html

@@ -2,187 +2,16 @@
   <!DOCTYPE html>
   <html lang="en-US">
   <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <meta property="og:title" content="Firefox Send"/>
-    <meta name="twitter:title" content="Firefox Send"/>
-    <meta name="description" content="Encrypt and send files with a link that automatically expires to ensure your important documents don’t stay online forever."/>
-    <meta property="og:description" content="Encrypt and send files with a link that automatically expires to ensure your important documents don’t stay online forever."/>
-    <meta name="twitter:description" content="Encrypt and send files with a link that automatically expires to ensure your important documents don’t stay online forever."/>
-    <meta name="twitter:card" content="summary"/>
-    <meta property="og:image" content="https://send.firefox.com/send-fb.19274ff0.jpg"/>
-    <meta name="twitter:image" content="https://send.firefox.com/send-twitter.7d5e4200.jpg"/>
-    <meta property="og:url" content="https://send.firefox.com"/>
-    <base href="https://send.firefox.com/" />
 
     <title>Firefox Send</title>
-
-    <link rel="stylesheet" type="text/css" href="/style.11428181.css" />
-
-    <!-- generic favicons -->
-    <link rel="icon" href="/favicon-32.4efdbe5a.png" sizes="32x32">
-    <link rel="icon" href="/favicon-96.a2ce7c6e.png" sizes="96x96">
-    <link rel="icon" href="/favicon-128.58447464.png" sizes="128x128">
-    <link rel="icon" href="/favicon-228.069d14fe.png" sizes="228x228">
-
-    <!-- Android -->
-    <link rel="shortcut icon" href="/favicon-196.55cef95d.png" sizes="196x196">
-
-    <!-- iOS -->
-    <link rel="apple-touch-icon" href="/favicon-120.a48a3fc0.png" sizes="120x120">
-    <link rel="apple-touch-icon" href="/favicon-152.10d8b941.png" sizes="152x152">
-    <link rel="apple-touch-icon" href="/favicon-180.373787f8.png" sizes="180x180">
-
-    <!-- Windows 8 IE 10-->
-    <meta name="msapplication-TileColor" content="#FFFFFF">
-    <meta name="msapplication-TileImage" content="/favicon-144.909cb064.png">
-
-    <!-- Windows 8.1 + IE11 and above -->
-    <meta name="msapplication-config" content="/browserconfig.xml"/>
-
-
-    
-    <script defer src="/jsconfig.js"></script>
-    <script defer src="/runtime.44a28e7e.js"></script>
-    <script defer src="/vendor.ec5b5b1d.js"></script>
-    <script defer src="/public/locales/en-US/send.6b4f8354.js"></script>
-    <script defer src="/cryptofill.1315ac9e.js"></script>
-    <script defer src="/app.baa60a46.js"></script>
+    <link href="index.css" rel="stylesheet">
   </head>
   <body>
-      
-      
-  <header class="header">
-    <div class="logo">
-      <a class="logo__link" href="/">
-        <img
-          src="/send_logo.5fcfdf0e.svg"
-          alt="Send"/>
-        <h1 class="logo__title">Send</h1>
-      </a>
-      <div class="logo__subtitle">
-        <a class="logo__subtitle-link" href="https://testpilot.firefox.com">Firefox Test Pilot</a>
-        <div>web experiment</div>
-      </div>
-    </div>
-    <a href="https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=2.5.4&amp;browser=unknown"
-      rel="noreferrer noopener"
-      class="feedback"
-      target="_blank">Feedback</a>
-  </header>
-      <main class="main">
-        <noscript>
-          <div class="noscript">
-            <h2>Firefox Send requires JavaScript</h2>
-            <p>
-              <a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
-              Why does Firefox Send require JavaScript?
-              </a>
-            </p>
-            <p>Please enable JavaScript and try again.</p>
-          </div>
-        </noscript>
-        
-  <div id="page-one" class="">
-    <div class="title">Private, Encrypted File Sharing</div>
-    <div class="description">
-      <div>Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.</div>
-      <a
-        href="https://testpilot.firefox.com/experiments/send"
-        class="link">
-        Learn more
-      </a>
-    </div>
-    <div class="uploadArea"
-     
-     >
-      <img
-        src="/upload.8e2a8bdb.svg"
-        title="Upload"/>
-      <div class="uploadArea__msg">
-        Drop your file here to start uploading
-      </div>
-      <span class="uploadArea__sizeMsg">
-        For the most reliable operation, it’s best to keep your file under 1GB
-      </span>
-      <input id="file-upload"
-        class="inputFile"
-        type="file"
-        name="fileUploaded"
-       
-       
-        />
-      <label for="file-upload"
-        class="btn btn--file"
-        title="Select a file to upload">
-        Select a file to upload
-      </label>
-    </div>
-    
-  </div>
-  
-      </main>
-      <footer class="footer">
-    <div class="legalSection">
-      <a
-        href="https://www.mozilla.org"
-        class="legalSection__link"
-        role="presentation">
-        <img
-          class="legalSection__mozLogo"
-          src="/mozilla-logo.2538e7d3.svg"
-          alt="mozilla"/>
-      </a>
-      <a
-        href="https://www.mozilla.org/about/legal"
-        class="legalSection__link">
-        Legal
-      </a>
-      <a
-        href="https://testpilot.firefox.com/about"
-        class="legalSection__link">
-        About Test Pilot
-      </a>
-      <a
-        href="/legal"
-        class="legalSection__link">Privacy</a>
-      <a
-        href="/legal"
-        class="legalSection__link">Terms</a>
-      <a
-        href="https://www.mozilla.org/privacy/websites/#cookies"
-        class="legalSection__link">
-        Cookies
-      </a>
-      <a
-        href="https://www.mozilla.org/about/legal/report-infringement/"
-        class="legalSection__link">
-        Report IP Infringement
-      </a>
-    </div>
-    <div class="socialSection">
-      <a
-        href="https://github.com/mozilla/send"
-        class="socialSection__link"
-        role="presentation">
-        <img
-          class="socialSection__icon"
-          src="/github-icon.74dc24f7.svg"
-          alt="github"/>
-      </a>
-      <a
-        href="https://twitter.com/FxTestPilot"
-        class="socialSection__link"
-        role="presentation">
-        <img
-          class="socialSection__icon"
-          src="/twitter-icon.018c7f54.svg"
-          alt="twitter"/>
-      </a>
-    </div>
-  </footer>
-    </body>
+<script>
+  const EXPIRE_SECONDS = 86400;
+</script>
+<script src="vendor.js"></script>
+<script src="android.js"></script>
+  </body>
   </html>
   

android/app/src/main/assets/intent-target.html

@@ -1,20 +0,0 @@
-
-  <!DOCTYPE html>
-  <html lang="en-US">
-  <head>
-
-    <title>Firefox Send</title>
-
-  </head>
-  <body>
-    <div id="output">output</div>
-<script>
-window.addEventListener("message", (event) => {
-  fetch(event.data).then(res => res.text()).then(txt => {
-    document.getElementById('output').textContent = "GOT MESSAGE" + txt;
-  });
-}, false);
-</script>
-  </body>
-  </html>
-