Chapril/drop.chapril.org-firefoxsend
Chapril
/
drop.chapril.org-firefoxsend
24
1
Fork 0
Code Issues Releases Activity

formatting update

This commit is contained in:
Danny Coates 2018-11-16 12:39:36 -08:00
parent 91a8c66e0c
commit fbad1ab55a
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
18 changed files with 387 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
android/pages/error.js
View File

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

32
android/pages/preferences.js
View File

@ -16,21 +16,19 @@ export default function preferences(state, emit) {
emit('pushState', '/'); emit('pushState', '/');
} }
return html`<body> return html`
<div id="white"> <body>
<div id="preferences"> <div id="white">
<a onclick=${clickDone} href="#"> <div id="preferences">
done <a onclick="${clickDone}" href="#"> done </a>
</a> <dl>
<dl> <dt>wss url:</dt>
<dt> <dd>
wss url: <input type="text" onchange="${updateWssUrl}" value="${wssURL}" />
</dt> </dd>
<dd> </dl>
<input type="text" onchange=${updateWssUrl} value=${wssURL} /> </div>
</dd> </div>
</dl> </body>
</div> `;
</div>
</body>`;
} }

8
android/pages/share.js
View File

@ -26,8 +26,12 @@ export default function uploadComplete(state, emit) {
emit('upload', {}); emit('upload', {});
} }
const input = html`<input id="url" value=${file.url} readonly="true" />`; const input = html`
const copyText = html`<span>Copy link</span>`; <input id="url" value="${file.url}" readonly="true" />
`;
const copyText = html`
<span>Copy link</span>
`;
return html`<body> return html`<body>
<div id="white"> <div id="white">
<div class="card"> <div class="card">

20
android/pages/upload.js
View File

@ -12,13 +12,15 @@ export default function progressBar(state, emit) {
} }
emit('pushState', '/'); emit('pushState', '/');
} }
return html`<body> return html`
<div id="white"> <body>
<div class="card"> <div id="white">
<div>${percent}%</div> <div class="card">
<span class="progress" style="width: ${percent}%">.</span> <div>${percent}%</div>
<div class="cancel" onclick=${onclick}>CANCEL</div> <span class="progress" style="width: ${percent}%">.</span>
</div> <div class="cancel" onclick="${onclick}">CANCEL</div>
</div> </div>
</body>`; </div>
</body>
`;
} }

4
app/ui/blank.js
View File

@ -1,5 +1,7 @@
const html = require('choo/html'); const html = require('choo/html');
module.exports = function() { module.exports = function() {
return html`<main class="main container"></main>`; return html`
<main class="main container"></main>
`;
}; };

37
app/ui/copyDialog.js
View File

@ -4,20 +4,29 @@ const { copyToClipboard } = require('../utils');
module.exports = function(name, url) { module.exports = function(name, url) {
return function(state, emit, close) { return function(state, emit, close) {
return html` return html`
<div class="flex flex-col items-center text-center p-4 max-w-sm"> <div class="flex flex-col items-center text-center p-4 max-w-sm">
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1> <h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
<p class="font-normal leading-normal text-grey-darker word-break-all">${state.translate( <p class="font-normal leading-normal text-grey-darker word-break-all">
'copyUrlFormLabelWithName', ${state.translate('copyUrlFormLabelWithName', { filename: name })}
{ filename: name } </p>
)}</p> <input
<input type="text" id="share-url" class="w-full my-4 border rounded leading-loose h-12 px-2 py-1" value=${url} readonly="true"/> type="text"
<button class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" onclick=${copy}> id="share-url"
${state.translate('copyUrlFormButton')} class="w-full my-4 border rounded leading-loose h-12 px-2 py-1"
</button> value="${url}"
<a class="text-blue my-4 font-medium cursor-pointer" onclick=${close}>${state.translate( readonly="true"
'okButton' />
)}</a> <button
</div>`; class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
onclick="${copy}"
>
${state.translate('copyUrlFormButton')}
</button>
<a class="text-blue my-4 font-medium cursor-pointer" onclick="${close}"
>${state.translate('okButton')}</a
>
</div>
`;
function copy(event) { function copy(event) {
event.stopPropagation(); event.stopPropagation();

63
app/ui/download.js
View File

@ -8,31 +8,39 @@ function password(state, emit) {
const invalid = fileInfo.password === null; const invalid = fileInfo.password === null;
const div = html` const div = html`
<div class="h-full flex flex-col items-center justify-center border border-grey-light bg-white py-8"> <div
class="h-full flex flex-col items-center justify-center border border-grey-light bg-white py-8"
>
<label <label
id="password-error" id="password-error"
class="${invalid ? '' : 'invisible'} text-red my-4" class="${invalid ? '' : 'invisible'} text-red my-4"
for="password-input"> for="password-input"
>
${state.translate('passwordTryAgain')} ${state.translate('passwordTryAgain')}
</label> </label>
<form class="w-5/6" onsubmit=${checkPassword} data-no-csrf> <form class="w-5/6" onsubmit="${checkPassword}" data-no-csrf>
<input id="password-input" <input
id="password-input"
class="w-full border rounded ${ class="w-full border rounded ${
invalid ? 'border-red' : 'border-grey' invalid ? 'border-red' : 'border-grey'
} leading-loose px-2 py-1" } leading-loose px-2 py-1"
maxlength="32" maxlength="32"
autocomplete="off" autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}" placeholder="${state.translate('unlockInputPlaceholder')}"
oninput=${inputChanged} oninput="${inputChanged}"
type="password" /> type="password"
/>
<input type="submit" <input
type="submit"
id="password-btn" id="password-btn"
class="hidden" class="hidden"
value="${state.translate('unlockInputLabel')}"/> value="${state.translate('unlockInputLabel')}"
/>
</form> </form>
</div>`; </div>
`;
if (!(div instanceof String)) { if (!(div instanceof String)) {
setTimeout(() => document.getElementById('password-input').focus()); setTimeout(() => document.getElementById('password-input').focus());
@ -87,16 +95,20 @@ module.exports = function(state, emit) {
break; break;
case 'complete': case 'complete':
content = html` content = html`
<div id="download-complete" class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2"> <div
<h1 class="text-center font-bold my-4 text-2xl">${state.translate( id="download-complete"
'downloadFinish' class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2"
)}</h1> >
<p class="mb-4"> <h1 class="text-center font-bold my-4 text-2xl">
<a href="/" class="text-blue font-medium">${state.translate( ${state.translate('downloadFinish')}
'sendYourFilesLink' </h1>
)}</a> <p class="mb-4">
</p> <a href="/" class="text-blue font-medium"
</div>`; >${state.translate('sendYourFilesLink')}</a
>
</p>
</div>
`;
break; break;
default: default:
content = archiveTile.preview(state, emit); content = archiveTile.preview(state, emit);
@ -105,10 +117,11 @@ module.exports = function(state, emit) {
content = password(state, emit); content = password(state, emit);
} }
return html` return html`
<main class="main container"> <main class="main container">
<section class="relative h-full w-full p-6 md:flex md:flex-row"> <section class="relative h-full w-full p-6 md:flex md:flex-row">
<div class="md:mr-6 md:w-1/2">${content}</div> <div class="md:mr-6 md:w-1/2">${content}</div>
<div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div> <div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div>
</section> </section>
</main>`; </main>
`;
}; };

31
app/ui/error.js
View File

@ -3,18 +3,21 @@ const assets = require('../../common/assets');
module.exports = function(state) { module.exports = function(state) {
return html` return html`
<main class="main container"> <main class="main container">
<div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"> <div
<h1 class="text-2xl text-center">${state.translate( class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
'errorPageHeader' >
)}</h1> <h1 class="text-2xl text-center">
<img class="my-16" src="${assets.get('illustration_error.svg')}"/> ${state.translate('errorPageHeader')}
<p class="max-w-md leading-normal"> </h1>
${state.translate('uploadPageExplainer')} <img class="my-16" src="${assets.get('illustration_error.svg')}" />
</p> <p class="max-w-md leading-normal">
<a class="text-blue mt-10 font-medium" href="/"> ${state.translate('uploadPageExplainer')}
${state.translate('sendYourFilesLink')} </p>
</a> <a class="text-blue mt-10 font-medium" href="/">
</div> ${state.translate('sendYourFilesLink')}
</main>`; </a>
</div>
</main>
`;
}; };

21
app/ui/expiryOptions.js
View File

@ -7,15 +7,18 @@ const signupDialog = require('./signupDialog');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const el = html` const el = html`
<div class=""> <div class="">
${raw( ${
state.translate('frontPageExpireInfo', { raw(
downloadCount: state.translate('frontPageExpireInfo', {
'<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>', downloadCount:
timespan: '<select id="timespan"></select>' '<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
}) timespan: '<select id="timespan"></select>'
)} })
</div>`; )
}
</div>
`;
if (el.__encoded) { if (el.__encoded) {
// we're rendering on the server // we're rendering on the server
return el; return el;

43
app/ui/legal.js
View File

@ -3,24 +3,31 @@ const raw = require('choo/html/raw');
module.exports = function(state) { module.exports = function(state) {
return html` return html`
<main class="main container"> <main class="main container">
<div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"> <div
<h1 class="text-2xl text-center">${state.translate('legalHeader')}</h1> class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
${raw( >
replaceLinks(state.translate('legalNoticeTestPilot'), [ <h1 class="text-2xl text-center">${state.translate('legalHeader')}</h1>
'https://testpilot.firefox.com/terms', ${
'https://testpilot.firefox.com/privacy', raw(
'https://testpilot.firefox.com/experiments/send' replaceLinks(state.translate('legalNoticeTestPilot'), [
]) 'https://testpilot.firefox.com/terms',
)} 'https://testpilot.firefox.com/privacy',
${raw( 'https://testpilot.firefox.com/experiments/send'
replaceLinks(state.translate('legalNoticeMozilla'), [ ])
'https://www.mozilla.org/privacy/websites/', )
'https://www.mozilla.org/about/legal/terms/mozilla/' }
]) ${
)} raw(
</div> replaceLinks(state.translate('legalNoticeMozilla'), [
</main>`; 'https://www.mozilla.org/privacy/websites/',
'https://www.mozilla.org/about/legal/terms/mozilla/'
])
)
}
</div>
</main>
`;
}; };
function replaceLinks(str, urls) { function replaceLinks(str, urls) {

17
app/ui/modal.js
View File

@ -2,13 +2,20 @@ const html = require('choo/html');
module.exports = function(state, emit) { module.exports = function(state, emit) {
return html` return html`
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8" onclick=${close}> <div
<div class="h-full max-h-screen absolute pin-t flex items-center"> class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8"
<div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}> onclick="${close}"
${state.modal(state, emit, close)} >
<div class="h-full max-h-screen absolute pin-t flex items-center">
<div
class="shadow-cloud bg-white"
onclick="${e => e.stopPropagation()}"
>
${state.modal(state, emit, close)}
</div>
</div> </div>
</div> </div>
</div>`; `;
function close(event) { function close(event) {
if (event) { if (event) {

37
app/ui/notFound.js
View File

@ -3,20 +3,25 @@ const assets = require('../../common/assets');
module.exports = function(state) { module.exports = function(state) {
return html` return html`
<main class="main container"> <main class="main container">
<div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"> <div
<h1 class="text-pink-dark text-2xl text-center">${state.translate( class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
'expiredPageHeader' >
)}</h1> <h1 class="text-pink-dark text-2xl text-center">
<img class="my-16" src="${assets.get( ${state.translate('expiredPageHeader')}
'illustration_expired.svg' </h1>
)}" id="expired-img"> <img
<p class="max-w-md leading-normal"> class="my-16"
${state.translate('uploadPageExplainer')} src="${assets.get('illustration_expired.svg')}"
</p> id="expired-img"
<a class="text-blue mt-10 font-medium" href="/"> />
${state.translate('sendYourFilesLink')} <p class="max-w-md leading-normal">
</a> ${state.translate('uploadPageExplainer')}
</div> </p>
</main>`; <a class="text-blue mt-10 font-medium" href="/">
${state.translate('sendYourFilesLink')}
</a>
</div>
</main>
`;
}; };

16
app/ui/okDialog.js
View File

@ -3,11 +3,15 @@ const html = require('choo/html');
module.exports = function(message) { module.exports = function(message) {
return function(state, emit, close) { return function(state, emit, close) {
return html` return html`
<div class="flex flex-col max-w-xs p-4"> <div class="flex flex-col max-w-xs p-4">
<div class="text-center m-8 leading-normal">${message}</div> <div class="text-center m-8 leading-normal">${message}</div>
<button class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" onclick=${close}>${state.translate( <button
'okButton' class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
)}</button> onclick="${close}"
</div>`; >
${state.translate('okButton')}
</button>
</div>
`;
}; };
}; };

24
app/ui/selectbox.js
View File

@ -4,14 +4,22 @@ module.exports = function(selected, options, translate, changed) {
let x = selected; let x = selected;
return html` return html`
<select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8" onchange=${choose}> <select
${options.map( class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8"
i => onchange="${choose}"
html`<option value="${i}" ${ >
i === selected ? 'selected' : '' ${
}>${translate(i)}</option>` options.map(
)} i =>
</select>`; html`
<option value="${i}" ${i === selected ? 'selected' : ''}
>${translate(i)}</option
>
`
)
}
</select>
`;
function choose(event) { function choose(event) {
const target = event.target; const target = event.target;

52
app/ui/unsupported.js
View File

@ -11,41 +11,49 @@ module.exports = function(state) {
strings = unsupportedStrings(state); strings = unsupportedStrings(state);
why = html` why = html`
<a <a
class="text-blue" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported"> class="text-blue"
${state.translate('notSupportedLink')} href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported"
</a>`; >
${state.translate('notSupportedLink')}
</a>
`;
url = url =
'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com'; 'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com';
buttonAction = html` buttonAction = html`
<p class="ml-4 font-bold"> <p class="ml-4 font-bold">
Firefox<br><span class="font-light text-base">${strings.button}</span> Firefox<br /><span class="font-light text-base">${strings.button}</span>
</p>`; </p>
`;
} else { } else {
strings = outdatedStrings(state); strings = outdatedStrings(state);
url = 'https://support.mozilla.org/kb/update-firefox-latest-version'; url = 'https://support.mozilla.org/kb/update-firefox-latest-version';
buttonAction = html` buttonAction = html`
<p class="ml-4"> <p class="ml-4">${strings.button}</p>
${strings.button} `;
</p>`;
} }
return html` return html`
<main class="main container"> <main class="main container">
<div class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"> <div
<h1 class="text-center text-2xl">${strings.header}</h1> class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
<p class="my-10 max-w-md leading-normal"> >
${strings.description} <h1 class="text-center text-2xl">${strings.header}</h1>
</p> <p class="my-10 max-w-md leading-normal">${strings.description}</p>
${why} ${why}
<a href="${url}" class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white mt-10 py-4 px-6"> <a
<img href="${url}"
src="${assets.get('firefox_logo-only.svg')}" class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white mt-10 py-4 px-6"
class="w-10" >
alt="Firefox"/> <img
${buttonAction} src="${assets.get('firefox_logo-only.svg')}"
</a> class="w-10"
alt="Firefox"
/>
${buttonAction}
</a>
</div> </div>
</main>`; </main>
`;
}; };
function outdatedStrings(state) { function outdatedStrings(state) {

13
server/initScript.js
View File

@ -5,10 +5,13 @@ module.exports = function(state) {
// return ''; // return '';
return state.cspNonce return state.cspNonce
? html` ? html`
<script nonce="${state.cspNonce}"> <script nonce="${state.cspNonce}">
const downloadMetadata = ${ const downloadMetadata = ${
state.downloadMetadata ? raw(JSON.stringify(state.downloadMetadata)) : '{}' state.downloadMetadata
}; ? raw(JSON.stringify(state.downloadMetadata))
</script>` : '{}'
};
</script>
`
: ''; : '';
}; };

172
server/layout.js
View File

@ -5,87 +5,117 @@ const initScript = require('./initScript');
module.exports = function(state, body = '') { module.exports = function(state, body = '') {
const firaTag = state.fira const firaTag = state.fira
? html`<link rel="stylesheet" type="text/css" href="https://code.cdn.mozilla.net/fonts/fira.css" />` ? html`
<link
rel="stylesheet"
type="text/css"
href="https://code.cdn.mozilla.net/fonts/fira.css"
/>
`
: ''; : '';
return html` return html`
<!DOCTYPE html> <!DOCTYPE html>
<html lang="${state.locale}"> <html lang="${state.locale}">
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="${state.title}"/> <meta property="og:title" content="${state.title}" />
<meta name="twitter:title" content="${state.title}"/> <meta name="twitter:title" content="${state.title}" />
<meta name="description" content="${state.description}"/> <meta name="description" content="${state.description}" />
<meta property="og:description" content="${state.description}"/> <meta property="og:description" content="${state.description}" />
<meta name="twitter:description" content="${state.description}"/> <meta name="twitter:description" content="${state.description}" />
<meta name="twitter:card" content="summary"/> <meta name="twitter:card" content="summary" />
<meta property="og:image" content="${state.baseUrl}${assets.get( <meta
'send-fb.jpg' property="og:image"
)}"/> content="${state.baseUrl}${assets.get('send-fb.jpg')}"
<meta name="twitter:image" content="${state.baseUrl}${assets.get( />
'send-twitter.jpg' <meta
)}"/> name="twitter:image"
<meta property="og:url" content="${state.baseUrl}"/> content="${state.baseUrl}${assets.get('send-twitter.jpg')}"
/>
<meta property="og:url" content="${state.baseUrl}" />
<title>${state.title}</title> <title>${state.title}</title>
<link rel="stylesheet" type="text/css" href="${assets.get('app.css')}" /> <link
rel="stylesheet"
type="text/css"
href="${assets.get('app.css')}"
/>
<!-- generic favicons --> <!-- generic favicons -->
<link rel="icon" href="${assets.get('favicon-32.png')}" sizes="32x32"> <link rel="icon" href="${assets.get('favicon-32.png')}" sizes="32x32" />
<link rel="icon" href="${assets.get('favicon-96.png')}" sizes="96x96"> <link rel="icon" href="${assets.get('favicon-96.png')}" sizes="96x96" />
<link rel="icon" href="${assets.get('favicon-128.png')}" sizes="128x128"> <link
<link rel="icon" href="${assets.get('favicon-228.png')}" sizes="228x228"> rel="icon"
href="${assets.get('favicon-128.png')}"
sizes="128x128"
/>
<link
rel="icon"
href="${assets.get('favicon-228.png')}"
sizes="228x228"
/>
<!-- Android --> <!-- Android -->
<link rel="shortcut icon" href="${assets.get( <link
'favicon-196.png' rel="shortcut icon"
)}" sizes="196x196"> href="${assets.get('favicon-196.png')}"
sizes="196x196"
/>
<!-- iOS --> <!-- iOS -->
<link rel="apple-touch-icon" href="${assets.get( <link
'favicon-120.png' rel="apple-touch-icon"
)}" sizes="120x120"> href="${assets.get('favicon-120.png')}"
<link rel="apple-touch-icon" href="${assets.get( sizes="120x120"
'favicon-152.png' />
)}" sizes="152x152"> <link
<link rel="apple-touch-icon" href="${assets.get( rel="apple-touch-icon"
'favicon-180.png' href="${assets.get('favicon-152.png')}"
)}" sizes="180x180"> sizes="152x152"
/>
<link
rel="apple-touch-icon"
href="${assets.get('favicon-180.png')}"
sizes="180x180"
/>
<!-- Windows 8 IE 10--> <!-- Windows 8 IE 10 -->
<meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="${assets.get( <meta
'favicon-144.png' name="msapplication-TileImage"
)}"> content="${assets.get('favicon-144.png')}"
/>
<!-- Windows 8.1 + IE11 and above --> <!-- Windows 8.1 + IE11 and above -->
<meta name="msapplication-config" content="/browserconfig.xml"/> <meta name="msapplication-config" content="/browserconfig.xml" />
${firaTag}
${firaTag} <script defer src="/jsconfig.js"></script>
<script defer src="/jsconfig.js"></script> <!-- <script defer src="${assets.get('runtime.js')}"></script> -->
<!--<script defer src="${assets.get('runtime.js')}"></script>--> <script defer src="${assets.get('vendor.js')}"></script>
<script defer src="${assets.get('vendor.js')}"></script> <script defer src="${locales.get(state.locale)}"></script>
<script defer src="${locales.get(state.locale)}"></script> <script defer src="${assets.get('cryptofill.js')}"></script>
<script defer src="${assets.get('cryptofill.js')}"></script> <script defer src="${assets.get('app.js')}"></script>
<script defer src="${assets.get('app.js')}"></script> </head>
</head> <noscript>
<noscript> <div class="noscript">
<div class="noscript"> <h2>${state.translate('javascriptRequired')}</h2>
<h2>${state.translate('javascriptRequired')}</h2> <p>
<p> <a
<a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript"> class="link"
${state.translate('whyJavascript')} href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript"
</a> >
</p> ${state.translate('whyJavascript')}
<p>${state.translate('enableJavascript')}</p> </a>
</div> </p>
</noscript> <p>${state.translate('enableJavascript')}</p>
${body} </div>
${initScript(state)} </noscript>
</html> ${body} ${initScript(state)}
</html>
`; `;
}; };

62
test/frontend/routes.js
View File

@ -11,37 +11,37 @@ module.exports = function(app) {
app.get('/test', function(req, res) { app.get('/test', function(req, res) {
res.send( res.send(
html` html`
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="/mocha.css" /> <link rel="stylesheet" type="text/css" href="/mocha.css" />
<script src="/mocha.js"></script> <script src="/mocha.js"></script>
<script> <script>
const reporters = mocha.constructor.reporters; const reporters = mocha.constructor.reporters;
function Combo(runner) { function Combo(runner) {
reporters.HTML.call(this, runner) reporters.HTML.call(this, runner);
reporters.JSON.call(this, runner) reporters.JSON.call(this, runner);
} }
Object.setPrototypeOf(Combo.prototype, reporters.HTML.prototype) Object.setPrototypeOf(Combo.prototype, reporters.HTML.prototype);
mocha.setup({ mocha.setup({
ui: 'bdd', ui: 'bdd',
reporter: Combo, reporter: Combo,
timeout: 5000 timeout: 5000
}) });
</script> </script>
<script src="/jsconfig.js"></script> <script src="/jsconfig.js"></script>
<script src="${assets.get('cryptofill.js')}"></script> <script src="${assets.get('cryptofill.js')}"></script>
<!--<script src="${assets.get('runtime.js')}"></script>--> <!-- <script src="${assets.get('runtime.js')}"></script> -->
<script src="${assets.get('vendor.js')}"></script> <script src="${assets.get('vendor.js')}"></script>
<script src="${assets.get('tests.js')}"></script> <script src="${assets.get('tests.js')}"></script>
</head> </head>
<body> <body>
<div id="mocha"></div> <div id="mocha"></div>
<script> <script>
window.runner = mocha.run(); window.runner = mocha.run();
</script> </script>
</body> </body>
</html> </html>
`.toString() `.toString()
); );
}); });