Bug 1086930 - Add a progressbar to the sync button

Added a progress bar inside of the sync button. This is only added to the a11y tree during syncing. It will specify that syncing has started and completed.

apps/calendar/elements/settings.html

@@ -19,6 +19,7 @@ <h1></h1>
           <button class="sync update toolbar-item">
             <span class="icon"
                   data-l10n-id="drawer-sync-button">Sync</span>
+            <span class="sync-progress" role="progressbar"></span>
           </button>
         </div>
       </div>

apps/calendar/js/views/settings.js

@@ -66,6 +66,7 @@ Settings.prototype = {
 
     advancedSettingsButton: '#settings .settings',
     syncButton: '#settings .sync',
+    syncProgress: '#settings .sync-progress',
 
     // A view that settings overlays. Still needs to be active/visible but
     // hidden from the screen reader.
@@ -108,17 +109,34 @@ Settings.prototype = {
     return this._findElement('syncButton');
   },
 
+  get syncProgress() {
+    return this._findElement('syncProgress');
+  },
+
   get timeViews() {
     return this._findElement('timeViews');
   },
 
+  _syncStartStatus: function () {
+    this.syncProgress.setAttribute('data-l10n-id', 'sync-progress-syncing');
+    this.syncProgress.classList.add('syncing');
+  },
+
+  _syncCompleteStatus: function () {
+    this.syncProgress.setAttribute('data-l10n-id', 'sync-progress-complete');
+    this.syncProgress.classList.remove('syncing');
+  },
+
   _observeUI: function() {
     this.advancedSettingsButton.addEventListener('click', function(e) {
       e.stopPropagation();
       app.router.show('/advanced-settings/');
     });
 
     this.syncButton.addEventListener('click', this._onSyncClick.bind(this));
+    this.app.syncController.on('syncStart', this._syncStartStatus.bind(this));
+    this.app.syncController.on('syncComplete',
+      this._syncCompleteStatus.bind(this));
 
     this.calendars.addEventListener(
       'change', this._onCalendarDisplayToggle.bind(this)

apps/calendar/locales/calendar.en-US.properties

@@ -79,6 +79,12 @@ remove-account-dialog-details=Removing this account will also remove your local
 # for accessibility purposes, not visible to the eye.
 drawer-sync-button=Sync
 
+# sync progress
+# The following strings are spoken by screen readers and not shown on the
+# screen.
+sync-progress-syncing.ariaValueText=Syncing
+sync-progress-complete.ariaValueText=Syncing complete
+
 # sync
 sync-frequency=Sync Calendar
 sync-frequency-15min=15 min

apps/calendar/style/settings.css

@@ -209,6 +209,14 @@ not actually shown since the top header should be transparent.
   to   { transform: rotate(360deg); }
 }
 
+.sync-progress {
+  visibility: hidden;
+}
+
+.sync-progress.syncing {
+  visibility: visible;
+}
+
 #settings [role="toolbar"].noaccount .sync {
   display: none;
 }

apps/calendar/test/unit/views/settings_test.js

@@ -84,6 +84,7 @@ suiteGroup('views/settings', function() {
       '        <button class="sync update toolbar-item">',
       '          <span class="icon"',
       '                data-l10n-id="drawer-sync-button">Sync</span>',
+      '          <span class="sync-progress" role="progressbar"></span>',
       '        </button>',
       '      </div>',
       '    </div>',
@@ -170,6 +171,10 @@ suiteGroup('views/settings', function() {
     assert.ok(subject.syncProgressTarget);
   });
 
+  test('#syncProgress', function() {
+    assert.ok(subject.syncProgress);
+  });
+
   suite('#_observeAccountStore', function() {
     var accounts = testSupport.calendar.dbFixtures(
       'account',
@@ -336,16 +341,27 @@ suiteGroup('views/settings', function() {
     });
   });
 
-  test('sync', function() {
-    var controller = app.syncController;
-    var calledWith;
+  suite('syncProgress', function() {
 
-    controller.all = function() {
-      calledWith = arguments;
-    };
+    test('syncStart', function(done) {
+      app.syncController.on('syncStart', function () {
+        assert.ok(subject.syncProgress.classList.contains('syncing'));
+        assert.equal(subject.syncProgress.getAttribute('data-l10n-id'),
+        'sync-progress-syncing');
+        done();
+      });
+      app.syncController.emit('syncStart');
+    });
 
-    triggerEvent(subject.syncButton, 'click');
-    assert.ok(calledWith);
+    test('syncComplete', function(done) {
+      app.syncController.on('syncComplete', function () {
+        assert.equal(subject.syncProgress.getAttribute('data-l10n-id'),
+        'sync-progress-complete');
+        assert.notOk(subject.syncProgress.classList.contains('syncing'));
+        done();
+      });
+      app.syncController.emit('syncComplete');
+    });
   });
 
   suite('#_onCalendarDisplayToggle', function() {