Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Bug 836170 - [Contact]: Scrolling and Dragging in contact application is very slow #8045

Merged
merged 1 commit into from Feb 14, 2013
Merged

Bug 836170 - [Contact]: Scrolling and Dragging in contact application is very slow #8045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/communications/contacts/index.html
View file
Open in desktop
Expand Up @@ -18,6 +18,8 @@

<script defer src="/contacts/js/activities.js"></script>

<script defer type="text/javascript" src="/shared/js/async_storage.js"></script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

EDITED:
do we really need to defer this script? it has no DOM dependencies AFAIK, could it be async instead of defer?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nopes, we don't need to defer here.

Will check the performance tool to see if we gain something defering or not, as @albertopq commented me, perhaps loading the dom first (defering), we can provide a better responsive appreciation

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have to correct myself :)

We need to defer here as the dependency with contacts_list.js exists and we defer in this script.
We tried to load without defer and it impacts the responsive time (we measure it)


<!-- For initializing FB integration -->
<script defer src="/contacts/js/fb/fb_init.js"></script>
<script defer type="text/javascript" src="/contacts/js/utilities/event_listeners.js"></script>
Expand All @@ -36,8 +38,6 @@
<script defer type="text/javascript" src="/contacts/js/fb_loader.js"></script>
<script defer type="text/javascript" src="/shared/js/mouse_event_shim.js"></script>

<script defer type="text/javascript" src="/shared/js/async_storage.js"></script>

<!-- Loading FB indexedDB related stuff -->
<script defer src="/contacts/js/utilities/config.js"></script>
<script defer type="text/javascript" src="/contacts/js/search.js"></script>
Expand Down
111 changes: 70 additions & 41 deletions apps/communications/contacts/js/contacts.js
View file
Open in desktop
Expand Up @@ -503,43 +503,6 @@ var Contacts = (function() {
(contact1.updated - contact2.updated) == 0;
};

// When a visiblity change is sent, handles and updates the
// different views according to the app state
var handleVisibilityChange = function handleVisibilityChange() {
switch (navigation.currentView()) {
case 'view-contact-details':
if (!currentContact) {
return;
}
contacts.List.load();
contacts.List.getContactById(currentContact.id, function(contact) {
if (isUpdated(contact, currentContact)) {
return;
}
currentContact = contact;
contactsDetails.render(currentContact, TAG_OPTIONS);
});
break;
case 'view-contact-form':
if (!currentContact) {
return;
}
contacts.List.load();
contacts.List.getContactById(currentContact.id, function(contact) {
if (!contact || isUpdated(contact, currentContact)) {
return;
}
currentContact = contact;
contactsDetails.render(currentContact, TAG_OPTIONS);
navigation.back();
});
break;
case 'view-contacts-list':
contacts.List.load();
break;
}
};

var showAddContact = function showAddContact() {
showForm();
};
Expand Down Expand Up @@ -777,6 +740,76 @@ var Contacts = (function() {
document.head.appendChild(fragment);
};

var pendingChanges = {};

// This function is called when we finish a oncontactchange operation to
// remove the op of the pending changes and check if we need to apply more
// changes request over the same id.
var checkPendingChanges = function checkPendingChanges(id) {
var changes = pendingChanges[id];

if(!changes) {
return;
}

pendingChanges[id].shift();

if (pendingChanges[id].length >= 1) {
performOnContactChange(pendingChanges[id][0]);
}
}

navigator.mozContacts.oncontactchange = function oncontactchange(event) {
if (typeof pendingChanges[event.contactID] !== 'undefined') {
pendingChanges[event.contactID].push({
contactID: event.contactID,
reason: event.reason
});
} else {
pendingChanges[event.contactID] = [{
contactID: event.contactID,
reason: event.reason
}];
}

// If there is already a pending request, don't do anything, just wait to finish it in order
if(pendingChanges[event.contactID].length > 1) {
return;
}

performOnContactChange(event);
}

var performOnContactChange = function performOnContactChange(event) {
var currView = navigation.currentView();
switch (event.reason) {
case 'update':
if (currView == 'view-contact-details' && currentContact != null &&
currentContact.id == event.contactID) {
contactsList.getContactById(event.contactID, function success(contact, enrichedContact) {
currentContact = enrichedContact || contact;
contactsDetails.render(currentContact);
contactsList.refresh(currentContact, checkPendingChanges, event.reason);
});
} else {
contactsList.refresh(event.contactID, checkPendingChanges, event.reason);
}
break;
case 'create':
contactsList.refresh(event.contactID, checkPendingChanges, event.reason);
break;
case 'remove':
if (currentContact != null && currentContact.id == event.contactID
&& (currView == 'view-contact-details' || currView == 'view-contact-form')) {
navigation.home();
}
contactsList.remove(event.contactID, event.reason);
currentContact = {};
checkPendingChanges(event.contactID);
break;
}
}

return {
'doneTag': doneTag,
'goBack' : handleBack,
Expand All @@ -790,7 +823,6 @@ var Contacts = (function() {
'checkCancelableActivity': checkCancelableActivity,
'isEmpty': isEmpty,
'getLength': getLength,
'handleVisibilityChange': handleVisibilityChange,
'showForm': showForm,
'setCurrent': setCurrent,
'getTags': TAG_OPTIONS,
Expand Down Expand Up @@ -827,9 +859,6 @@ window.addEventListener('localized', function initContacts(evt) {
ActivityHandler.postCancel();
return;
}
if (!ActivityHandler.currentlyHandling && !document.mozHidden) {
Contacts.handleVisibilityChange();
}
Contacts.checkCancelableActivity();
});
}); // fb.init
Expand Down
11 changes: 1 addition & 10 deletions apps/communications/contacts/js/contacts_details.js
View file
Open in desktop
Expand Up @@ -219,16 +219,7 @@ contacts.Details = (function() {
*/
cList.getContactById(contact.id,
function onSuccess(savedContact, enrichedContact) {

contactData = savedContact;
Contacts.setCurrent(contactData);

if (enrichedContact) {
cList.refresh(enrichedContact);
} else {
cList.refresh(contact);
}
renderFavorite(contactData);
renderFavorite(savedContact);
favoriteMessage.style.pointerEvents = 'auto';
}, function onError() {
console.error('Error reloading contact');
Expand Down
31 changes: 4 additions & 27 deletions apps/communications/contacts/js/contacts_form.js
View file
Open in desktop
Expand Up @@ -315,12 +315,10 @@ contacts.Form = (function() {

var deleteContact = function deleteContact(contact) {
var deleteSuccess = function deleteSuccess() {
contacts.List.remove(contact.id);
if (contacts.Search.isInSearchMode()) {
contacts.Search.invalidateCache();
contacts.Search.removeContact(contact.id);
}
Contacts.setCurrent({});
Contacts.navigation.home();
};
var request;
Expand Down Expand Up @@ -438,31 +436,10 @@ contacts.Form = (function() {

request.onsuccess = function onsuccess() {
// Reloading contact, as it only allows to be updated once
var cList = contacts.List;
cList.getContactById(contact.id, function onSuccess(savedContact,
enrichedContact) {
var nextCurrent = enrichedContact || savedContact;

Contacts.setCurrent(savedContact);
myContact.id = savedContact.id;

myContact.photo = nextCurrent.photo;
myContact.org = nextCurrent.org;
myContact.category = nextCurrent.category;

cList.refresh(myContact);
if (ActivityHandler.currentlyHandling) {
ActivityHandler.postNewSuccess(savedContact);
} else {
contacts.Details.render(savedContact, TAG_OPTIONS);
}
Contacts.cancel();
}, function onError() {
console.error('Error reloading contact');
if (ActivityHandler.currentlyHandling) {
ActivityHandler.postCancel();
}
});
if (ActivityHandler.currentlyHandling) {
ActivityHandler.postNewSuccess(contact);
}
Contacts.cancel();
};

request.onerror = function onerror() {
Expand Down