Bug 978065 - [Music] Favor scroll performance over thumbnails quality…

…. r=dkuo
lime124 · Mar 6, 2014 · f4a6842 · f4a6842
1 parent d4c4aa7
commit f4a6842
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/apps/music/index.html b/apps/music/index.html
@@ -23,6 +23,7 @@
     <script defer src="shared/js/text_normalizer.js"></script>
     <script defer src="shared/js/media/remote_controls.js"></script>
     <script defer src="shared/js/omadrm/fl.js"></script>
+    <script defer src="shared/js/scroll_detector.js"></script>
     <!-- Specific code -->
     <script defer src="js/utils.js"></script>
     <script defer src="js/music.js"></script>

diff --git a/apps/music/js/music.js b/apps/music/js/music.js
@@ -1965,3 +1965,13 @@ var TabBar = {
     }
   }
 };
+
+window.addEventListener('scrollstart', function onScroll(e) {
+  var views = document.getElementById('views');
+  views.classList.add('scrolling');
+});
+
+window.addEventListener('scrollend', function onScroll(e) {
+  var views = document.getElementById('views');
+  views.classList.remove('scrolling');
+});
diff --git a/apps/music/style/music.css b/apps/music/style/music.css
@@ -286,7 +286,7 @@ body.picker-mode #title-player {
 #views-tiles,
 #views-list,
 #views-sublist {
-  height: 100%;
+  height: calc(100% - 4.5rem);
   overflow-x: hidden;
   overflow-y: auto;
   background-color: #0E1214;
@@ -445,6 +445,13 @@ body.picker-mode #title-player {
   /* We set a background URL here when the thumbnail loads */
 }
 
+/* Favor scrolling performance over quality while scrolling */
+#views.scroll li.list-item,
+#views.scrolling .tile {
+  image-rendering: -moz-crisp-edges;
+  text-rendering: optimizeSpeed;
+}
+
 .main-tile {
   width: 66%;
   height: 0;
@@ -475,11 +482,6 @@ body.picker-mode #title-player {
   overflow: hidden;
 }
 
-.main-tile:last-child,
-.sub-tile:last-child {
-  margin-bottom: 4.5rem;
-}
-
 .tile-container {
   position: absolute;
   top: 0;
@@ -939,10 +941,6 @@ button::-moz-focus-inner {
   display: none;
 }
 
-li:last-child {
-  margin-bottom: 4rem;
-}
-
 li.list-header {
   list-style-type: none;
   position: relative;