Move most scripts to the background page

Dramatically improve load times for frontend pages.

Closes #133
This commit is contained in:
lilia 2015-03-15 16:04:39 -07:00
parent 5405b062d2
commit 08ccdf8d97
5 changed files with 215 additions and 292 deletions

View File

@ -15,6 +15,190 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script type='text/x-tmpl-mustache' id='conversation'>
<div class='title-bar' id='header'>
<div class='menu'>
<button class='hamburger'></button>
<ul class='menu-list'>
{{#group}}
<li><a class='new-group-update'>Update group</a></li>
<li><a class='leave-group'>Leave group</a></li>
{{/group}}
{{^group}}
<li><a class='end-session'>Reset Session</a></li>
<li><a class='verify-identity'>Verify Identity</a></li>
{{/group}}
<li><a class='destroy'>Delete messages</a></li>
</ul>
</div>
</div>
<div class='discussion-container'></div>
<div class="bottom-bar" id='footer'>
<form class='send'>
<div class='attachments'>
<div class='paperclip thumbnail'></div>
<input type='file' class='file-input'>
</div>
<input class="send-btn" type='submit' value='' />
<input class='send-message' type='textarea' placeholder="Send a message">
</form>
</div>
</script>
<script type='text/x-tmpl-mustache' id='attachment-preview'>
<img src="{{ source }}" class="preview" />
<div class="close">x</div>
</script>
<script type='text/x-tmpl-mustache' id='message'>
<div class='sender'>{{ sender }}</div>
<span class='avatar'></span>
<div class="bubble">
<p class="content">{{ message }}</p>
<div class='attachments'></div>
<div class='meta'>
<span class='timestamp'>{{ timestamp }}</span>
<span class='checkmark hide'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-group-update-form'>
<div class='title-bar' id='header'>
<button class='back'></button>
<button class='send check'></button>
<span class='title-text'>Update group</span>
</div>
<div class='container'>
<div class='scrollable'>
<div class='clearfix'>
<div class='group-avatar'>
<div class='thumbnail'>
<span class='default'></span>
</div>
<input type='file' name='avatar' class='file-input'>
</div>
<div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
</div>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='contact_pill'>
<span>{{ name }}</span><span class='remove'>x</span>
</script>
<script type='text/x-tmpl-mustache' id='contact'>
<span class='avatar'></span>
<div class='contact-details'>
<h3 class='contact-name'>
{{ contact_name }}
</h3>
<p class='number'>{{ number }}</p>
<p class='last-message'>
{{ last_message }}
</p>
<span class='last-timestamp'>
{{ last_message_timestamp }}
</span>
</div>
</script>
<script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form">
<div class="number-container">
<input type="tel" class="number" placeholder="Phone Number" />
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='file-size-modal'>
Sorry, the selected file exceeds message size
restrictions. ({{ limit }}kB)
</script>
<script type='text/x-tmpl-mustache' id='message-detail'>
<div class='title-bar' id='header'>
<button class='back'></button>
<span class='title-text'>Message Detail</span>
</div>
<div class='message-container'></div>
<div class='info'>
<table>
<tr><td class='label'>Sent</td><td> {{ sent_at }}</td></tr>
<tr><td class='label'>Received</td><td> {{ received_at }}</td></tr>
<tr>
<td class='tofrom label'>{{ tofrom }}</td>
<td>
<div class='contacts'>
{{ #contacts }}
<div>
<img class='avatar' src='{{ avatar }}'>
<span class='name'>{{ name }}</div>
{{ #conflict }}
<button class='resolve'>Key Conflict</button>
{{ /conflict }}
</div>
{{ /contacts }}
</div>
</td>
</tr>
</table>
</div>
</script>
<script type='text/x-tmpl-mustache' id='key-verification'>
<div class='title-bar' id='header'>
<button class='back'></button>
<span class='title-text'>Verify Identity</span>
</div>
<div class='container'>
<p> Their identity (they read): </p>
<div class='key'>
{{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
</div>
<p> Your identity (you read): </p>
<div class='key'>
{{ #your_key }} <span>{{ . }}</span> {{ /your_key }}
</div>
</div>
</script>
<!-- index -->
<script type="text/x-tmpl-mustache" id="inbox">
<div class='title-bar' id='header'>
<div class='socket-status'></div>
</div>
<div class='gutter'>
<div class='conversations scrollable'></div>
<span class='fab'></span>
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-conversation'>
<div class='title-bar' id='header'>
<button class='back'></button>
<button class='create check hide'></button>
<span class='title-text'>New Message</span>
</div>
<div class='gutter'>
<div class='scrollable'>
<div class='new-group-update-form clearfix'>
<div class='group-avatar'>
<div class='thumbnail'>
<span class='default group-default'></span>
</div>
<input type='file' name='avatar' class='file-input'>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='recipients-input'>
<div class='recipients-container'>
<span class='recipients'></span>
<input type='text' class='search' placeholder="Name or phone number" />
</div>
<div class='results'>
<div class='new-contact contact hide'></div>
<div class='contacts'></div>
</div>
</script>
<script type="text/javascript" src="js/components.js"></script>
<script type="text/javascript" src="js/libtextsecure.js"></script>
@ -24,6 +208,26 @@
<script type="text/javascript" src="js/models/conversations.js"></script>
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/views/whisper_view.js"></script>
<script type="text/javascript" src="js/views/toast_view.js"></script>
<script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
<script type="text/javascript" src="js/views/file_input_view.js"></script>
<script type="text/javascript" src="js/views/list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_view.js"></script>
<script type="text/javascript" src="js/views/recipients_input_view.js"></script>
<script type="text/javascript" src="js/views/new_group_update_view.js"></script>
<script type="text/javascript" src="js/views/end_session_view.js"></script>
<script type="text/javascript" src="js/views/group_update_view.js"></script>
<script type="text/javascript" src="js/views/attachment_view.js"></script>
<script type="text/javascript" src="js/views/message_view.js"></script>
<script type="text/javascript" src="js/views/key_verification_view.js"></script>
<script type="text/javascript" src="js/views/message_detail_view.js"></script>
<script type="text/javascript" src="js/views/message_list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_view.js"></script>
<script type="text/javascript" src="js/views/new_conversation_view.js"></script>
<script type="text/javascript" src="js/views/inbox_view.js"></script>
<script type="text/javascript" src="js/inbox_controller.js"></script>
<script type="text/javascript" src="js/bimap.js"></script>

View File

@ -9,193 +9,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='/icon.png' rel='shortcut icon'>
<link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/chromium.js"></script>
</head>
<body class='signal'>
<script type='text/x-tmpl-mustache' id='conversation'>
<div class='title-bar' id='header'>
<div class='menu'>
<button class='hamburger'></button>
<ul class='menu-list'>
{{#group}}
<li><a class='new-group-update'>Update group</a></li>
<li><a class='leave-group'>Leave group</a></li>
{{/group}}
{{^group}}
<li><a class='end-session'>Reset Session</a></li>
<li><a class='verify-identity'>Verify Identity</a></li>
{{/group}}
<li><a class='destroy'>Delete messages</a></li>
</ul>
</div>
</div>
<div class='discussion-container'></div>
<div class="bottom-bar" id='footer'>
<form class='send'>
<div class='attachments'>
<div class='paperclip thumbnail'></div>
<input type='file' class='file-input'>
</div>
<input class="send-btn" type='submit' value='' />
<input class='send-message' type='textarea' placeholder="Send a message">
</form>
</div>
</script>
<script type='text/x-tmpl-mustache' id='attachment-preview'>
<img src="{{ source }}" class="preview" />
<div class="close">x</div>
</script>
<script type='text/x-tmpl-mustache' id='message'>
<div class='sender'>{{ sender }}</div>
<span class='avatar'></span>
<div class="bubble">
<p class="content">{{ message }}</p>
<div class='attachments'></div>
<div class='meta'>
<span class='timestamp'>{{ timestamp }}</span>
<span class='checkmark hide'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-group-update-form'>
<div class='title-bar' id='header'>
<button class='back'></button>
<button class='send check'></button>
<span class='title-text'>Update group</span>
</div>
<div class='container'>
<div class='scrollable'>
<div class='clearfix'>
<div class='group-avatar'>
<div class='thumbnail'>
<span class='default'></span>
</div>
<input type='file' name='avatar' class='file-input'>
</div>
<div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
</div>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='contact_pill'>
<span>{{ name }}</span><span class='remove'>x</span>
</script>
<script type='text/x-tmpl-mustache' id='recipients-input'>
<div class='recipients-container'>
<span class='recipients'></span>
<input type='text' class='search' placeholder="Add member" />
</div>
<div class='results'>
<div class='new-contact contact'></div>
<div class='contacts'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='contact'>
<span class='avatar'></span>
<div class='contact-details'>
<h3 class='contact-name'>
{{ contact_name }}
</h3>
<p class='number'>{{ number }}</p>
<p class='last-message'>
{{ last_message }}
</p>
<span class='last-timestamp'>
{{ last_message_timestamp }}
</span>
</div>
</script>
<script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form">
<div class="number-container">
<input type="tel" class="number" placeholder="Phone Number" />
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='file-size-modal'>
Sorry, the selected file exceeds message size
restrictions. ({{ limit }}kB)
</script>
<script type='text/x-tmpl-mustache' id='message-detail'>
<div class='title-bar' id='header'>
<button class='back'></button>
<span class='title-text'>Message Detail</span>
</div>
<div class='message-container'></div>
<div class='info'>
<table>
<tr><td class='label'>Sent</td><td> {{ sent_at }}</td></tr>
<tr><td class='label'>Received</td><td> {{ received_at }}</td></tr>
<tr>
<td class='tofrom label'>{{ tofrom }}</td>
<td>
<div class='contacts'>
{{ #contacts }}
<div>
<img class='avatar' src='{{ avatar }}'>
<span class='name'>{{ name }}</div>
{{ #conflict }}
<button class='resolve'>Key Conflict</button>
{{ /conflict }}
</div>
{{ /contacts }}
</div>
</td>
</tr>
</table>
</div>
</script>
<script type='text/x-tmpl-mustache' id='key-verification'>
<div class='title-bar' id='header'>
<button class='back'></button>
<span class='title-text'>Verify Identity</span>
</div>
<div class='container'>
<p> Their identity (they read): </p>
<div class='key'>
{{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
</div>
<p> Your identity (you read): </p>
<div class='key'>
{{ #your_key }} <span>{{ . }}</span> {{ /your_key }}
</div>
</div>
</script>
<script type="text/javascript" src="js/components.js"></script>
<script type="text/javascript" src="js/libtextsecure.js"></script>
<script type="text/javascript" src="js/database.js"></script>
<script type="text/javascript" src="js/libphonenumber-util.js"></script>
<script type="text/javascript" src="js/models/messages.js"></script>
<script type="text/javascript" src="js/models/conversations.js"></script>
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/views/whisper_view.js"></script>
<script type="text/javascript" src="js/views/toast_view.js"></script>
<script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
<script type="text/javascript" src="js/views/file_input_view.js"></script>
<script type="text/javascript" src="js/views/list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_view.js"></script>
<script type="text/javascript" src="js/views/recipients_input_view.js"></script>
<script type="text/javascript" src="js/views/new_group_update_view.js"></script>
<script type="text/javascript" src="js/views/end_session_view.js"></script>
<script type="text/javascript" src="js/views/group_update_view.js"></script>
<script type="text/javascript" src="js/views/attachment_view.js"></script>
<script type="text/javascript" src="js/views/message_view.js"></script>
<script type="text/javascript" src="js/views/key_verification_view.js"></script>
<script type="text/javascript" src="js/views/message_detail_view.js"></script>
<script type="text/javascript" src="js/views/message_list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_view.js"></script>
<script type="text/javascript" src="js/conversation_panel.js"></script>
</body>
</html>

View File

@ -4,112 +4,14 @@
<meta charset='utf-8'>
<meta content='width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Signal for Chrome
</title>
<title>Signal</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='/icon.png' rel='shortcut icon'>
<link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/chromium.js"></script>
</head>
<body class='signal index'>
<script type="text/x-tmpl-mustache" id="inbox">
<div class='title-bar' id='header'>
<div class='socket-status'></div>
</div>
<div class='gutter'>
<div class='conversations scrollable'></div>
<span class='fab'></span>
</div>
</script>
<script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form">
<div class="number-container">
<input type="tel" class="number" placeholder="Phone Number" />
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='contact_pill'>
<span>{{ name }}</span><span class='remove'>x</span>
</script>
<script type='text/x-tmpl-mustache' id='contact'>
<span class='avatar'></span>
<div class='contact-details'>
<h3 class='contact-name'>
{{ contact_name }}
</h3>
<p class='number'>{{ number }}</p>
<p class='last-message'>
{{ last_message }}
</p>
<span class='last-timestamp'>
{{ last_message_timestamp }}
</span>
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-conversation'>
<div class='title-bar' id='header'>
<button class='back'></button>
<button class='create check hide'></button>
<span class='title-text'>New Message</span>
</div>
<div class='gutter'>
<div class='scrollable'>
<div class='new-group-update-form clearfix'>
<div class='group-avatar'>
<div class='thumbnail'>
<span class='default group-default'></span>
</div>
<input type='file' name='avatar' class='file-input'>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='recipients-input'>
<div class='recipients-container'>
<span class='recipients'></span>
<input type='text' class='search' placeholder="Name or phone number" />
</div>
<div class='results'>
<div class='new-contact contact hide'></div>
<div class='contacts'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='attachment-preview'>
<img src="{{ source }}" class="preview" />
<div class="close">x</div>
</script>
<script type="text/javascript" src="js/components.js"></script>
<script type="text/javascript" src="js/libtextsecure.js"></script>
<script type="text/javascript" src="js/database.js"></script>
<script type="text/javascript" src="js/libphonenumber-util.js"></script>
<script type="text/javascript" src="js/models/messages.js"></script>
<script type="text/javascript" src="js/models/conversations.js"></script>
<script type="text/javascript" src="js/chromium.js"></script>
<script type="text/javascript" src="js/views/whisper_view.js"></script>
<script type="text/javascript" src="js/views/toast_view.js"></script>
<script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
<script type="text/javascript" src="js/views/file_input_view.js"></script>
<script type="text/javascript" src="js/views/list_view.js"></script>
<script type="text/javascript" src="js/views/new_group_update_view.js"></script>
<script type="text/javascript" src="js/views/group_update_view.js"></script>
<script type="text/javascript" src="js/views/attachment_view.js"></script>
<script type="text/javascript" src="js/views/message_view.js"></script>
<script type="text/javascript" src="js/views/message_list_view.js"></script>
<script type="text/javascript" src="js/views/phone-input-view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_view.js"></script>
<script type="text/javascript" src="js/views/recipients_input_view.js"></script>
<script type="text/javascript" src="js/views/new_conversation_view.js"></script>
<script type="text/javascript" src="js/views/inbox_view.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

View File

@ -21,14 +21,15 @@
extension.windows.getCurrent(function (windowInfo) {
var bg = extension.windows.getBackground();
window.$ = bg.$;
var conversation = bg.getConversationForWindow(windowInfo.id);
if (conversation) {
window.document.title = conversation.getTitle();
new Whisper.ConversationView({
new bg.Whisper.ConversationView({
model: conversation
}).$el.prependTo($('body'));
}).$el.prependTo($('body', document));
} else {
$('<div>').text('Error').prependTo($('body'));
$('<div>').text('Error').prependTo($('body', document));
}
});
}());

View File

@ -16,14 +16,14 @@
*/
(function () {
'use strict';
var bg = extension.windows.getBackground();
window.Whisper = window.Whisper || {};
if (textsecure.storage.getUnencrypted("number_id") === undefined) {
if (bg.textsecure.storage.getUnencrypted("number_id") === undefined) {
window.location = '/options.html';
} else {
new Whisper.InboxView().$el.prependTo($('body'));
textsecure.storage.putUnencrypted("unreadCount", 0);
new bg.Whisper.InboxView().$el.prependTo(bg.$('body',document));
bg.textsecure.storage.putUnencrypted("unreadCount", 0);
extension.navigator.setBadgeText("");
}
}());