Rebased Bugzilla 873574 to master

arasbm.diff

commit 1457958c78ae4db8c5babaeb01fce46d3ccf6c81
Author: arasbm@gmail.com
Date:   Fri Aug 30 14:40:35 2013 -0400

    bug-873574 - scroll indicators for alarms list - performance improved
    
    performance improvements for alarm list scroll indicators
    
     * limit execution of `showHideScrollIndicators` to one per 150ms
     * set threshold for showing and hiding indicators relative to alarm cell height
     * remove animation as it is not needed with the new threshold

diff --git a/apps/clock/js/alarm_list.js b/apps/clock/js/alarm_list.js
index 290f2ce..dac795c 100644
--- a/apps/clock/js/alarm_list.js
+++ b/apps/clock/js/alarm_list.js
@@ -7,6 +7,8 @@ var AlarmList = {
   alarmList: [],
   refreshingAlarms: [],
   _previousAlarmCount: 0,
+  _scrollTimeoutID: 0,
+  _scrollThreshold: 0,
 
   get alarms() {
     delete this.alarms;
@@ -23,6 +25,48 @@ var AlarmList = {
     return this.newAlarmButton = document.getElementById('alarm-new');
   },
 
+  showHideScrollIndicators: function al_showHideScrollIndicators() {
+    this._scrollTimeoutID = 0;
+    var element = this.alarms;
+    var hasTop = element.classList.contains('scroll-up');
+    var hasDown = element.classList.contains('scroll-down');
+
+    if (!this._scrollThreshold) {
+      var alarmCell = document.querySelector('.alarm-cell');
+      if (alarmCell) {
+        this._scrollThreshold =
+          alarmCell.getBoundingClientRect().height * 3 / 5;
+      }
+    }
+
+    if (element.scrollTop < this._scrollThreshold) {
+      if (hasTop) {
+        element.classList.remove('scroll-up');
+      }
+    } else {
+      if (!hasTop) {
+        element.classList.add('scroll-up');
+      }
+    }
+
+    if (element.scrollTop > element.scrollTopMax - this._scrollThreshold) {
+      if (hasDown) {
+        element.classList.remove('scroll-down');
+      }
+    } else {
+      if (!hasDown) {
+        element.classList.add('scroll-down');
+      }
+    }
+  },
+
+  handleScrollEvent: function al_handleScrollEvent() {
+    if (!this._scrollTimeoutID) {
+      this._scrollTimeoutID = setTimeout(
+        this.showHideScrollIndicators.bind(this), 150);
+    }
+  },
+
   handleEvent: function al_handleEvent(evt) {
 
     var link = evt.target;
@@ -59,6 +103,8 @@ var AlarmList = {
   init: function al_init() {
     this.newAlarmButton.addEventListener('click', this);
     this.alarms.addEventListener('click', this);
+    this.alarms.addEventListener('scroll',
+      this.handleScrollEvent.bind(this));
     this.refresh();
     AlarmManager.regUpdateAlarmEnableState(this.refreshItem.bind(this));
   },
@@ -137,6 +183,7 @@ var AlarmList = {
       var index = this.refreshingAlarms.indexOf(alarm.id);
       this.refreshingAlarms.splice(index, 1);
     }
+    this.showHideScrollIndicators();
   },
 
   fillList: function al_fillList(alarmDataList) {
@@ -156,6 +203,7 @@ var AlarmList = {
       // prepend the rendered alarm to the alarm list
       this.createItem(alarm, this.alarms);
     }.bind(this));
+    this.showHideScrollIndicators();
   },
 
   getAlarmFromList: function al_getAlarmFromList(id) {
diff --git a/apps/clock/style/alarm.css b/apps/clock/style/alarm.css
index e4a349b..0d80edd 100755
--- a/apps/clock/style/alarm.css
+++ b/apps/clock/style/alarm.css
@@ -85,6 +85,7 @@ body.hidden #alarm-view {
 }
 
 /* ----------- Alarm List ---------- */
+
 #alarms {
   width: 90%;
   height: auto;
@@ -97,6 +98,40 @@ body.hidden #alarm-view {
   background-image: none;
 }
 
+ul#alarms:before {
+  content: '';
+  pointer-events: none;
+  background: -moz-linear-gradient(bottom, rgba(16, 17, 17, 0) 0%, rgba(16, 17, 17, 1) 100%);
+  position: fixed;
+  width: 100%;
+  margin-left: -1.5em;
+  z-index: 10;
+  height: 6em;
+  margin-left: -1.5em;
+  opacity: 0;
+}
+
+ul#alarms.scroll-up:before {
+  opacity: 1;
+}
+
+ul#alarms:after {
+  content: '';
+  pointer-events: none;
+  background: -moz-linear-gradient(top, rgba(16, 17, 17, 0) 0%, rgba(16, 17, 17, 1) 100%);
+  position: fixed;
+  width: 100%;
+  height: 6em;
+  top: 100%;
+  margin-top: -6em;
+  margin-left: -1.5em;
+  opacity: 0;
+}
+
+ul#alarms.scroll-down:after {
+  opacity: 1;
+}
+
 ul#alarms li.alarm-cell { /* 6rem, including a 0.13rem border */
   border-top: 1px solid rgba(115, 125, 128, 0.2);
   position: relative;