Merge pull request #10595 from asutherland/uplift-spinner-unific

Merge pull request #10407 from asutherland/email-progress-spinner. r=jrburke, a=blocking-b2g=leo+
mozilla-b2g · Jun 25, 2013 · 60fc036 · 60fc036
2 parents a2cc818 + b6499bd
commit 60fc036
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 45 deletions.
diff --git a/apps/email/index.html b/apps/email/index.html
@@ -190,8 +190,6 @@ <h1 class="msg-listedit-header-label"></h1>
             </ul>
           </header>
         </section>
-        <progress class="msg-list-progress hidden" value="0" total="1.0">
-        </progress>
         <!-- Scroll region -->
         <div class="msg-list-scrollouter">
           <!-- exists so we can force a minimum height -->
@@ -210,7 +208,6 @@ <h1 class="msg-listedit-header-label"></h1>
                  out of the way -->
             <div class="msg-messages-sync-container">
               <p class="msg-messages-syncing collapsed">
-                <progress class="small"></progress>
                 <span data-l10n-id="messages-syncing">Message loadinG</span>
               </p>
               <p class="msg-messages-sync-more collapsed">
@@ -227,7 +224,8 @@ <h1 class="msg-listedit-header-label"></h1>
         </div>
         <!-- Toolbar for non-multi-edit state -->
         <div class="msg-list-action-toolbar bottom-toolbar">
-          <button class="msg-refresh-btn bottom-btn msg-nonsearch-only"></button>
+          <button class="msg-refresh-btn bottom-btn msg-nonsearch-only"
+                  data-state="synchronized"></button>
           <button class="msg-search-btn bottom-btn msg-nonsearch-only"></button>
           <button class="msg-edit-btn bottom-btn"></button>
         </div>

diff --git a/apps/email/js/message-cards.js b/apps/email/js/message-cards.js
@@ -125,13 +125,6 @@ function MessageListCard(domNode, mode, args) {
     domNode.getElementsByClassName('msg-messages-sync-more')[0];
   this.syncMoreNode
     .addEventListener('click', this.onGetMoreMessages.bind(this), false);
-  this.progressNode =
-    domNode.getElementsByClassName('msg-list-progress')[0];
-  // The active timeout that will cause us to set the progressbar to
-  // indeterminate 'candybar' state when it fires.  Reset every time a new
-  // progress notification is received.
-  this.progressCandybarTimer = null;
-  this._bound_onCandybarTimeout = this.onCandybarTimeout.bind(this);
 
   // - header buttons: non-edit mode
   domNode.getElementsByClassName('msg-folder-list-btn')[0]
@@ -483,15 +476,7 @@ MessageListCard.prototype = {
         this.syncMoreNode.classList.add('collapsed');
         this.hideEmptyLayout();
 
-        this.progressNode.value = this.messagesSlice ?
-                                  this.messagesSlice.syncProgress : 0;
-        this.progressNode.classList.remove('pack-activity');
-        this.progressNode.classList.remove('hidden');
-        if (this.progressCandybarTimer)
-          window.clearTimeout(this.progressCandybarTimer);
-        this.progressCandybarTimer =
-          window.setTimeout(this._bound_onCandybarTimeout,
-                            this.PROGRESS_CANDYBAR_TIMEOUT_MS);
+        this.toolbar.refreshBtn.dataset.state = 'synchronizing';
         break;
       case 'syncfailed':
         // If there was a problem talking to the server, notify the user and
@@ -502,24 +487,12 @@ MessageListCard.prototype = {
 
         // Fall through...
       case 'synced':
+        this.toolbar.refreshBtn.dataset.state = 'synchronized';
         this.syncingNode.classList.add('collapsed');
-        this.progressNode.classList.remove('pack-activity');
-        this.progressNode.classList.add('hidden');
-        if (this.progressCandybarTimer) {
-          window.clearTimeout(this.progressCandybarTimer);
-          this.progressCandybarTimer = null;
-        }
         break;
     }
   },
 
-  onCandybarTimeout: function() {
-    if (this.progressCandybarTimer) {
-      this.progressNode.classList.add('pack-activity');
-      this.progressCandybarTimer = null;
-    }
-  },
-
   /**
    * Hide buttons that are not appropriate if we have no messages and display
    * the appropriate l10n string in the message list proper.
@@ -1836,4 +1809,3 @@ Cards.defineCardWithDefaultMode(
     { tray: false },
     MessageReaderCard
 );
-
diff --git a/apps/email/style/message-cards.css b/apps/email/style/message-cards.css
@@ -384,6 +384,16 @@ input.msg-search-text-tease {
 .msg-refresh-btn {
   background: url("images/icons/refresh.png") no-repeat scroll center transparent !important;
 }
+.msg-refresh-btn[data-state="synchronizing"] {
+  animation: 0.9s msg-refresh-rotate infinite steps(30);
+}
+
+@keyframes msg-refresh-rotate {
+  from { transform: rotate(1deg); }
+  to   { transform: rotate(360deg); }
+}
+
+
 
 .msg-search-btn {
   background: url("images/icons/search.png") no-repeat scroll center transparent !important;
@@ -491,17 +501,7 @@ input.msg-search-text-tease {
 .msg-messages-syncing,
 .msg-messages-sync-more {
   border-bottom: 0.1rem solid #bebebe;
-}
-
-.msg-messages-syncing > span {
-  display: inline-block;
-  vertical-align: middle;
-  line-height: normal;
-}
-
-.msg-messages-syncing > progress {
-  line-height: normal;
-  margin: 0 0.5rem 0 3rem !important;
+  text-align: center;
 }
 
 .msg-messages-sync-more {