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

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

@@ -12,14 +12,16 @@ import android.webkit.WebView
 import android.webkit.WebMessage
 import android.util.Log
 import android.util.Base64
-import android.provider.MediaStore
-import android.R.attr.data
-
-
-
-
-
+import android.webkit.ConsoleMessage
+import android.webkit.WebChromeClient
 
+internal class LoggingWebChromeClient : WebChromeClient() {
+    override fun onConsoleMessage(cm: ConsoleMessage): Boolean {
+        Log.w("CONTENT", String.format("%s @ %d: %s",
+                cm.message(), cm.lineNumber(), cm.sourceId()))
+        return true
+    }
+}
 
 class MainActivity : AppCompatActivity(), AdvancedWebView.Listener {
     private var mWebView: AdvancedWebView? = null
@@ -31,6 +33,7 @@ class MainActivity : AppCompatActivity(), AdvancedWebView.Listener {
 
         mWebView = findViewById<WebView>(R.id.webview) as AdvancedWebView
         mWebView!!.setListener(this, this)
+        mWebView!!.setWebChromeClient(LoggingWebChromeClient())
 
         val webSettings = mWebView!!.getSettings()
         webSettings.setJavaScriptEnabled(true)
@@ -51,12 +54,8 @@ class MainActivity : AppCompatActivity(), AdvancedWebView.Listener {
                 // TODO Currently this causes a Permission Denied error
                 // val stream = contentResolver.openInputStream(imageUri)
             }
-            mWebView!!.loadUrl("file:///android_asset/intent-target.html")
-
-        } else {
-            mWebView!!.loadUrl("file:///android_asset/index.html")
         }
-
+        mWebView!!.loadUrl("file:///android_asset/index.html")
     }
 
     @SuppressLint("NewApi")

android/generateAndLinkBundle.js

@@ -0,0 +1,21 @@
+const child_process = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+child_process.execSync('npm run build');
+
+const prefix = path.join('..', '..', 'dist');
+const json_string = fs.readFileSync(path.join(prefix, 'manifest.json'));
+const manifest = JSON.parse(json_string);
+
+const android_filename = manifest['android.js'];
+fs.writeFileSync(
+  'src/main/assets/android.js',
+  fs.readFileSync(`${prefix}${android_filename}`)
+);
+
+const vendor_filename = manifest['vendor.js'];
+fs.writeFileSync(
+  'src/main/assets/vendor.js',
+  fs.readFileSync(`${prefix}${vendor_filename}`)
+);

app/api.js

@@ -137,7 +137,12 @@ async function upload(
   const host = window.location.hostname;
   const port = window.location.port;
   const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-  const ws = await asyncInitWebSocket(`${protocol}//${host}:${port}/api/ws`);
+  const endpoint =
+    window.location.protocol === 'file:'
+      ? 'wss://send2.dev.lcip.org/api/ws'
+      : `${protocol}//${host}:${port}/api/ws`;
+
+  const ws = await asyncInitWebSocket(endpoint);
 
   try {
     const metadataHeader = arrayToB64(new Uint8Array(metadata));

app/fileManager.js

@@ -108,8 +108,10 @@ export default function(state, emitter) {
       if (cancelBtn) {
         cancelBtn.hidden = 'hidden';
       }
-      await delay(1000);
-      await fadeOut('.page');
+      if (document.querySelector('.page')) {
+        await delay(1000);
+        await fadeOut('.page');
+      }
       emitter.emit('pushState', `/share/${ownedFile.id}`);
     } catch (err) {
       if (err.message === '0') {
@@ -180,8 +182,10 @@ export default function(state, emitter) {
       await dl;
       const time = Date.now() - start;
       const speed = size / (time / 1000);
-      await delay(1000);
-      await fadeOut('.page');
+      if (document.querySelector('.page')) {
+        await delay(1000);
+        await fadeOut('.page');
+      }
       state.storage.totalDownloads += 1;
       state.transfer.reset();
       metrics.completedDownload({ size, time, speed });

build/version_plugin.js

@@ -15,10 +15,10 @@ class VersionPlugin {
           return version;
         },
         size() {
-          return version.length
+          return version.length;
         }
-      }
-    })
+      };
+    });
   }
 }
 

webpack.config.js

@@ -31,7 +31,8 @@ const web = {
     // babel-polyfill and fluent are directly included in vendor
     // because they are not explicitly referenced by app
     vendor: ['babel-polyfill', 'fluent'],
-    app: ['./app/main.js']
+    app: ['./app/main.js'],
+    android: ['./android/android.js']
   },
   output: {
     filename: '[name].[hash:8].js',