Merge pull request #11560 from KevinGrandon/bug_871823_contacts_loading

Bug 905771 - Lazy load contact views r=arcturus

apps/communications/contacts/index.html

@@ -26,7 +26,7 @@
     <script defer src="/contacts/js/fb/fb_init.js"></script>
     <script defer type="text/javascript" src="/contacts/js/utilities/event_listeners.js"></script>
     <script defer type="text/javascript" src="/contacts/js/navigation.js"></script>
-    <script defer type="text/javascript" src="/contacts/js/contacts_list.js"></script>
+    <script defer type="text/javascript" src="/contacts/js/views/list.js"></script>
     <script defer type="text/javascript" src="/contacts/js/contacts.js"></script>
     <script defer type="text/javascript" src="/contacts/js/utilities/image_loader.js"></script>
 

apps/communications/contacts/js/contacts.js

@@ -451,14 +451,6 @@ var Contacts = (function() {
     showForm(true);
   };
 
-  var saveContact = function saveContact() {
-    return contacts.Form.saveContact();
-  };
-
-  var newField = function newField(evt) {
-    return contacts.Form.onNewFieldClicked(evt);
-  };
-
   var loadFacebook = function loadFacebook(callback) {
     if (!fbLoader.loaded) {
       fb.init(function onInitFb() {
@@ -478,38 +470,38 @@ var Contacts = (function() {
       callback();
     } else {
       initDetails(function onDetails() {
-        loadFacebook(function fbReady() {
+        Contacts.view('Form', function viewLoaded() {
+          formReady = true;
           contactsForm = contacts.Form;
           contactsForm.init(TAG_OPTIONS);
           callback();
         });
       });
-      formReady = true;
     }
   };
 
   var initSettings = function c_initSettings(callback) {
     if (settingsReady) {
       callback();
     } else {
-      loadFacebook(function fbReady() {
+      Contacts.view('Settings', function viewLoaded() {
+        settingsReady = true;
         contacts.Settings.init();
         callback();
       });
-      settingsReady = true;
     }
   };
 
   var initDetails = function c_initDetails(callback) {
     if (detailsReady) {
       callback();
     } else {
-      loadFacebook(function fbReady() {
+      Contacts.view('Details', function viewLoaded() {
+        detailsReady = true;
         contactsDetails = contacts.Details;
         contactsDetails.init();
         callback();
       });
-      detailsReady = true;
     }
   };
 
@@ -543,10 +535,6 @@ var Contacts = (function() {
     currentContact = contact;
   };
 
-  var hideSettings = function hideSettings() {
-    contacts.Settings.close();
-  };
-
   var showOverlay = function c_showOverlay(message, progressClass, textId) {
     return utils.overlay.show(message, progressClass, textId);
   };
@@ -567,10 +555,6 @@ var Contacts = (function() {
     });
   };
 
-  var toggleFavorite = function toggleFavorite() {
-    contacts.Details.toggleFavorite();
-  };
-
   var stopPropagation = function stopPropagation(evt) {
     evt.preventDefault();
   };
@@ -597,7 +581,6 @@ var Contacts = (function() {
     utils.listeners.add({
       '#cancel_activity': handleCancel, // Activity (any) cancellation
       '#cancel-edit': handleCancel, // Cancel edition
-      '#save-button': saveContact,
       '#add-contact-button': showAddContact,
       '#settings-button': showSettings, // Settings related
       '#cancel-search': exitSearchMode, // Search related
@@ -615,9 +598,6 @@ var Contacts = (function() {
       ],
       '#details-back': handleDetailsBack, // Details
       '#edit-contact-button': showEditContact,
-      '#contact-form button[data-field-type]': newField,
-      '#settings-close': hideSettings,
-      '#toggle-favorite': toggleFavorite,
       'button[type="reset"]': stopPropagation,
       '#settings-done': handleSelectTagDone,
       '#settings-cancel': handleBack,
@@ -633,12 +613,12 @@ var Contacts = (function() {
   };
 
   var onLineChanged = function() {
-    contacts.Settings.onLineChanged();
-    contacts.Details.onLineChanged();
-  };
-
-  var cardStateChanged = function() {
-    contacts.Settings.cardStateChanged();
+    Contacts.view('Settings', function viewLoaded() {
+      contacts.Settings.onLineChanged();
+    });
+    Contacts.view('Details', function viewLoaded() {
+      contacts.Details.onLineChanged();
+    });
   };
 
   var getFirstContacts = function c_getFirstContacts() {
@@ -659,9 +639,6 @@ var Contacts = (function() {
       '/contacts/js/import_utils.js',
       '/contacts/js/utilities/normalizer.js',
       '/shared/js/text_normalizer.js',
-      '/contacts/js/contacts_settings.js',
-      '/contacts/js/contacts_details.js',
-      '/contacts/js/contacts_form.js',
       '/dialer/js/telephony_helper.js',
       '/contacts/js/sms_integration.js',
       '/contacts/js/utilities/sdcard.js',
@@ -797,13 +774,49 @@ var Contacts = (function() {
       Contacts.checkCancelableActivity();
       if (document.hidden === false &&
                                 navigation.currentView() === 'view-settings') {
-        contacts.Settings.updateTimestamps();
+        Contacts.view('Settings', function viewLoaded() {
+          contacts.Settings.updateTimestamps();
+        });
       }
     });
   };
 
   window.addEventListener('localized', initContacts); // addEventListener
 
+  /**
+   * Specifies dependencies for resources
+   * E.g., mapping Facebook as a dependency of views
+   */
+  var dependencies = {
+    views: {
+      Settings: loadFacebook,
+      Details: loadFacebook,
+      Form: loadFacebook
+    }
+  };
+
+  /**
+   * Loads a view from the views/ folder
+   * @param {String} view name.
+   * @param {Function} callback.
+   */
+  function loadView(view, callback) {
+
+    /**
+     * Performs the actual lazy loading
+     * Called once all dependencies are met
+     */
+    function doLoad() {
+      LazyLoader.load(['js/views/' + view.toLowerCase() + '.js'], callback);
+    }
+
+    if (dependencies.views[view]) {
+      return dependencies.views[view](doLoad);
+    }
+
+    doLoad();
+  }
+
   return {
     'goBack' : handleBack,
     'cancel': handleCancel,
@@ -827,9 +840,9 @@ var Contacts = (function() {
     'updateContactDetail': updateContactDetail,
     'onLineChanged': onLineChanged,
     'showStatus': showStatus,
-    'cardStateChanged': cardStateChanged,
     'loadFacebook': loadFacebook,
     'close': close,
+    'view': loadView,
     get asyncScriptsLoaded() {
       return asyncScriptsLoaded;
     }

apps/communications/contacts/js/contacts_details.js → apps/communications/contacts/js/views/details.js

@@ -58,6 +58,10 @@ contacts.Details = (function() {
 
     wrapper = dom.querySelector('#contact-detail-wrapper');
     initPullEffect(cover);
+
+    utils.listeners.add({
+      '#toggle-favorite': toggleFavorite
+    });
   };
 
   var setContact = function cd_setContact(currentContact) {

apps/communications/contacts/js/contacts_form.js → apps/communications/contacts/js/views/form.js

@@ -161,6 +161,20 @@ contacts.Form = (function() {
         saveButton.removeAttribute('disabled');
       }
     });
+
+    // Add listeners
+    utils.listeners.add({
+      '#save-button': saveContact,
+      '#contact-form button[data-field-type]': newField
+    });
+  };
+
+  var saveContact = function saveContact() {
+    return contacts.Form.saveContact();
+  };
+
+  var newField = function newField(evt) {
+    return contacts.Form.onNewFieldClicked(evt);
   };
 
   var render = function cf_render(contact, callback, pFbContactData,

apps/communications/contacts/js/contacts_settings.js → apps/communications/contacts/js/views/settings.js

@@ -42,11 +42,18 @@ contacts.Settings = (function() {
   var init = function initialize() {
     // To listen to card state changes is needed for enabling import from SIM
     if (IccHelper.enabled) {
-      IccHelper.oncardstatechange = Contacts.cardStateChanged;
+      IccHelper.oncardstatechange = contacts.Settings.cardStateChanged;
     }
     fb.init(function onFbInit() {
       initContainers();
     });
+    utils.listeners.add({
+      '#settings-close': hideSettings
+    });
+  };
+
+  var hideSettings = function hideSettings() {
+    contacts.Settings.close();
   };
 
   // Get the different values that we will show in the app

apps/communications/contacts/test/unit/mock_contacts.js

@@ -48,5 +48,8 @@ var MockContacts = {
   navigation: {
     home: function() {}
   },
-  checkCancelableActivity: function() {}
+  checkCancelableActivity: function() {},
+  view: function(view, callback) {
+    callback();
+  }
 };

apps/communications/contacts/test/unit/contacts_details_test.js → apps/communications/contacts/test/unit/views/details_test.js

@@ -4,7 +4,8 @@ requireApp('communications/contacts/test/unit/mock_details_dom.js.html');
 require('/shared/js/text_normalizer.js');
 require('/shared/test/unit/mocks/mock_contact_all_fields.js');
 
-requireApp('communications/contacts/js/contacts_details.js');
+requireApp('communications/contacts/js/views/details.js');
+requireApp('communications/contacts/js/utilities/event_listeners.js');
 requireApp('communications/contacts/js/utilities/templates.js');
 requireApp('communications/contacts/js/utilities/dom.js');
 requireApp('communications/contacts/test/unit/mock_contacts.js');

apps/communications/contacts/test/unit/contacts_form_test.js → apps/communications/contacts/test/unit/views/form_test.js

@@ -1,12 +1,12 @@
 require('/shared/test/unit/mocks/mock_contact_all_fields.js');
 //Avoiding lint checking the DOM file renaming it to .html
-requireApp('communications/contacts/test/unit/mock_form_dom.js.html');
+requireApp('../communications/contacts/test/unit/mock_form_dom.js.html');
 
-requireApp('communications/contacts/js/contacts_form.js');
-requireApp('communications/contacts/js/utilities/templates.js');
-requireApp('communications/contacts/js/utilities/dom.js');
-requireApp('communications/contacts/test/unit/mock_contacts.js');
-requireApp('communications/contacts/test/unit/mock_fb.js');
+requireApp('../communications/contacts/js/views/form.js');
+requireApp('../communications/contacts/js/utilities/templates.js');
+requireApp('../communications/contacts/js/utilities/dom.js');
+requireApp('../communications/contacts/test/unit/mock_contacts.js');
+requireApp('../communications/contacts/test/unit/mock_fb.js');
 
 var subject,
     realL10n,

apps/communications/contacts/test/unit/contacts_list_test.js → apps/communications/contacts/test/unit/views/list_test.js

@@ -2,23 +2,23 @@ require('/shared/js/lazy_loader.js');
 require('/shared/js/text_normalizer.js');
 require('/shared/js/tag_visibility_monitor.js');
 require('/shared/test/unit/mocks/mock_contact_all_fields.js');
-requireApp('communications/contacts/test/unit/mock_asyncstorage.js');
-requireApp('communications/contacts/js/search.js');
-requireApp('communications/contacts/js/contacts_list.js');
-requireApp('communications/contacts/js/utilities/dom.js');
-requireApp('communications/contacts/js/utilities/templates.js');
-requireApp('communications/contacts/test/unit/mock_contacts.js');
-requireApp('communications/contacts/test/unit/mock_contacts_list.js');
-requireApp('communications/contacts/test/unit/mock_contacts_shortcuts.js');
-requireApp('communications/contacts/test/unit/mock_fixed_header.js');
-requireApp('communications/contacts/test/unit/mock_fb.js');
-requireApp('communications/contacts/test/unit/mock_navigation.js');
-requireApp('communications/contacts/test/unit/mock_extfb.js');
-requireApp('communications/contacts/test/unit/mock_activities.js');
-requireApp('communications/contacts/test/unit/mock_utils.js');
-requireApp('communications/contacts/test/unit/mock_mozContacts.js');
+requireApp('/contacts/test/unit/mock_asyncstorage.js');
+requireApp('../communications/contacts/js/search.js');
+requireApp('../communications/contacts/js/views/list.js');
+requireApp('../communications/contacts/js/utilities/dom.js');
+requireApp('../communications/contacts/js/utilities/templates.js');
+requireApp('../communications/contacts/test/unit/mock_contacts.js');
+requireApp('../communications/contacts/test/unit/mock_contacts_list.js');
+requireApp('../communications/contacts/test/unit/mock_contacts_shortcuts.js');
+requireApp('../communications/contacts/test/unit/mock_fixed_header.js');
+requireApp('../communications/contacts/test/unit/mock_fb.js');
+requireApp('../communications/contacts/test/unit/mock_navigation.js');
+requireApp('../communications/contacts/test/unit/mock_extfb.js');
+requireApp('../communications/contacts/test/unit/mock_activities.js');
+requireApp('../communications/contacts/test/unit/mock_utils.js');
+requireApp('../communications/contacts/test/unit/mock_mozContacts.js');
 requireApp(
-        'communications/contacts/test/unit/mock_performance_testing_helper.js');
+        '../communications/contacts/test/unit/mock_performance_testing_helper.js');
 
 // We're going to swap those with mock objects
 // so we need to make sure they are defined.

apps/communications/contacts/test/unit/contacts_settings_test.js → apps/communications/contacts/test/unit/views/settings_test.js

@@ -1,16 +1,16 @@
 require('/shared/js/lazy_loader.js');
 require('/shared/test/unit/load_body_html_helper.js');
-requireApp('communications/contacts/test/unit/mock_contacts.js');
-requireApp('communications/contacts/test/unit/mock_asyncstorage.js');
-requireApp('communications/contacts/test/unit/mock_fb.js');
-requireApp('communications/contacts/test/unit/mock_sdcard.js');
-requireApp('communications/contacts/test/unit/mock_icc_helper.js');
-requireApp('communications/dialer/test/unit/mock_confirm_dialog.js');
-requireApp('communications/contacts/test/unit/mock_vcard_parser.js');
-requireApp('communications/contacts/test/unit/mock_mozContacts.js');
-requireApp('communications/contacts/js/import_utils.js');
-requireApp('communications/contacts/js/navigation.js');
-requireApp('communications/contacts/js/contacts_settings.js');
+requireApp('../communications/contacts/test/unit/mock_contacts.js');
+requireApp('../communications/contacts/test/unit/mock_asyncstorage.js');
+requireApp('../communications/contacts/test/unit/mock_fb.js');
+requireApp('../communications/contacts/test/unit/mock_sdcard.js');
+requireApp('../communications/contacts/test/unit/mock_icc_helper.js');
+requireApp('../communications/dialer/test/unit/mock_confirm_dialog.js');
+requireApp('../communications/contacts/test/unit/mock_vcard_parser.js');
+requireApp('../communications/contacts/test/unit/mock_mozContacts.js');
+requireApp('../communications/contacts/js/import_utils.js');
+requireApp('../communications/contacts/js/navigation.js');
+requireApp('../communications/contacts/js/views/settings.js');
 
 if (!this._) this._ = null;
 if (!this.utils) this.utils = null;