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

This commit is contained in:
Donovan Preston 2018-07-27 09:11:46 -04:00 committed by GitHub
parent 5c7b4ace9a
commit a80d007e0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 317 additions and 222 deletions

3
.gitignore vendored
View File

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

View File

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

159
android/android.js Normal file
View File

@ -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();

View File

@ -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" />

View File

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

View File

@ -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" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 305 KiB

View File

@ -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;
}

View File

@ -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 dont stay online forever."/>
<meta property="og:description" content="Encrypt and send files with a link that automatically expires to ensure your important documents dont stay online forever."/>
<meta name="twitter:description" content="Encrypt and send files with a link that automatically expires to ensure your important documents dont 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, its 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>

View File

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

View File

@ -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")

View File

@ -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}`)
);

View File

@ -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));

View File

@ -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 });

View File

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

View File

@ -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',