Bug 796392 - [Contacts] Performance when entering in search mode shou…

…ld be better
dscravag · Dec 18, 2012 · ca9a5bf · ca9a5bf
1 parent c62ca97
commit ca9a5bf
Show file tree

Hide file tree

Showing 7 changed files with 250 additions and 199 deletions.
diff --git a/apps/communications/contacts/fb_import.html b/apps/communications/contacts/fb_import.html
@@ -41,6 +41,7 @@
     <link rel="stylesheet" href="style/shared/core/css/root.css">
 
     <!-- Building Blocks -->
+    <link href="/shared/style_unstable/progress_activity.css" rel="stylesheet">
     <link href="/shared/style/status.css" rel="stylesheet">
     <link href="/shared/style/headers.css" rel="stylesheet">
     <link href="/shared/style/input_areas.css" rel="stylesheet">
@@ -85,8 +86,8 @@ <h1 data-l10n-id="fbFriends">Facebook Friends</h1>
         <section id='mainContent' data-state="selection">
           <form id="search-container" role="search" class="search">
             <p>
-              <label for="search-contact">
-                <input type="search" name="search" class="textfield" placeholder="Search" data-l10n-id="search-contact" />
+              <label for="search" id="search-start">
+                <input type="search" name="search" class="textfield" placeholder="Search" data-l10n-id="search-contact">
               </label>
             </p>
           </form>
@@ -101,34 +102,36 @@ <h1 data-l10n-id="fbFriends">Facebook Friends</h1>
               <ol id="contacts-list-#group#">
                 <li data-template data-uuid="#uid#" data-search="#search#" aria-disabled="false" class="block-item">
                   <label>
-                    <input type="checkbox" name="#uid#">
+                    <input type="checkbox" name="#uid#"></input>
                     <span></span>
                   </label>
                   <aside class="pack-end">
-                    <img data-src="https://graph.facebook.com/#uid#/picture?type=square">
+                    <img data-src="https://graph.facebook.com/#uid#/picture?type=square"></img>
                   </aside>
                   <p><strong>#givenName#</strong> #familyName#</p>
                   <p>#email1#</p>
                 </li>
               </ol>
-          </section> <!-- group template content -->
-        </section> <!-- mainContent -->
-
-        <form role="dialog" data-type="confirm" class="no-overlay">
-          <menu id="select-all-wrapper">
-            <button id="deselect-all" class="edit-button" data-l10n-id="deselectAll">
-              Deselect all
-            </button>
-            <button id="select-all" class="edit-button" data-l10n-id="selectAll">
-              Select all
-            </button>
-          </menu>
-        </form>
-      </section> <!-- main -->
+           </section> <!-- group template content -->
+          </section> <!-- groupsList -->
+
+          <form role="dialog" data-type="confirm" class="no-overlay">
+            <menu id="select-all-wrapper">
+              <button id="deselect-all" class="edit-button" data-l10n-id="deselectAll">
+                Deselect all
+              </button>
+              <button id="select-all" class="edit-button" data-l10n-id="selectAll">
+                Select all
+              </button>
+            </menu>
+          </form>
+
+      </section> <!-- mainContent -->
 
       <section id='fixed-container' class='fixed-title-fb'></section>
+      </section> <!-- main -->
 
-      <section id="search-view" class="view">
+      <section id="search-view" class="view" role="region">
         <form id="searchview-container" role="search" class="search">
            <button id='done-search' type="submit" data-l10n-id="done-search">Done</button>
            <p>
@@ -139,17 +142,24 @@ <h1 data-l10n-id="fbFriends">Facebook Friends</h1>
              </label>
            </p>
         </form>
-        <section id="groups-list-search" data-type="list">
-          <p id="no-result" class="hide" data-l10n-id="noResults">No contacts found</p>
-          <ol id="search-list">
+        <section id="groups-list-search">
+          <ol id="search-list" data-type="list">
           </ol>
         </section>
+
+        <section>
+          <p id="no-result" class="hide" data-l10n-id="noResults">No contacts found</p>
+          <p id="search-progress" class="hidden" role="status">
+            <progress  class="small"></progress>
+          </p>
+        </section>
+
       </section> <!-- search-view section -->
 
-    </section> <!-- role="region" -->
+      <section id="statusMsg" role="status">
+        <p></p>
+      </section>
 
-    <section id="statusMsg" role="status">
-      <p></p>
-    </section>
+    </section> <!-- role region -->
   </body>
 </html>
diff --git a/apps/communications/contacts/index.html b/apps/communications/contacts/index.html
@@ -127,8 +127,8 @@ <h1 data-l10n-id="contacts">Contacts</h1>
           <div id="groups-container" class="view-body-inner">
             <form id="search-container" class="search" role="search">
               <p>
-                <label for="search-contact">
-                  <input type="search" name="search" class="textfield" placeholder="Search" data-l10n-id="search-contact" />
+                <label for="search" id="search-start">
+                  <input type="search" name="search" class="textfield" placeholder="Search" data-l10n-id="search-contact">
                 </label>
               </p>
             </form>
@@ -138,26 +138,34 @@ <h1 data-l10n-id="contacts">Contacts</h1>
           </div>
         </article>
         <div id='fixed-container' class='fixed-title'></div>
-
-        <section id="search-view" class="view">
-          <form id="searchview-container" class="search" role="search">
-            <button id='cancel-search' data-l10n-id="cancel" type="submit">Cancel</button>
-            <p>
-              <label for="search-contact">
-                <input data-cancelable required type="search" name="search" class="textfield" placeholder="Search"
-                       id="search-contact" data-l10n-id="search-contact" />
-                <button type="reset" class="hide">Clear</button>
-              </label>
-            </p>
-          </form>
-          <section id="groups-list-search">
-            <p id="no-result" class="hide" data-l10n-id="noResults">No contacts found</p>
-            <ol id="search-list" data-type="list">
-            </ol>
-          </section>
-        </section>    <!-- Search list -->
       </section>
 
+      <section id="search-view" class="view">
+        <form id="searchview-container" class="search" role="search">
+          <button id='cancel-search' data-l10n-id="cancel" type="submit">Cancel</button>
+          <p>
+            <label for="search-contact">
+              <input data-cancelable required type="search" name="search" class="textfield" placeholder="Search"
+                     id="search-contact" data-l10n-id="search-contact">
+              <button type="reset" class="hide">Clear</button>
+            </label>
+          </p>
+        </form>
+
+        <section id="groups-list-search">
+          <ol id="search-list" data-type="list">
+          </ol>
+        </section>
+
+        <section>
+          <p id="no-result" class="hide" data-l10n-id="noResults">No contacts found</p>
+          <p id="search-progress" class="hidden" role="status">
+            <progress  class="small"></progress>
+          </p>
+        </section>
+
+      </section>    <!-- Search view -->
+
       <!-- Contact Details Section -->
       <section id='view-contact-details' role="region" class="view view-right view-contact-profile">
         <header id='details-view-header'>

diff --git a/apps/communications/contacts/js/contacts.js b/apps/communications/contacts/js/contacts.js
@@ -596,9 +596,9 @@ var Contacts = (function() {
       '#settings-done': doneTag,
       '#settings-close': contacts.Settings.close,
       '#cancel-search': contacts.Search.exitSearchMode, // Search related
-      '#search-contact': [
+      '#search-start': [
         {
-          event: 'focus',
+          event: 'click',
           handler: contacts.Search.enterSearchMode
         }
       ],

diff --git a/apps/communications/contacts/js/fb/fb_import_init.js b/apps/communications/contacts/js/fb/fb_import_init.js
@@ -36,9 +36,9 @@
       '#import-action': fb.importer.ui.importAll,
       '#done-search': contacts.Search.exitSearchMode,
       '#groups-list': fb.importer.ui.selection,
-      '#search-contact': [
+      '#search-start': [
         {
-          event: 'focus',
+          event: 'click',
           handler: contacts.Search.enterSearchMode
         }
       ]