Merge pull request #10780 from huchengtw-moz/hd/Bug_881158_for_master

Bug 881158 - hdpi/xhdpi resolution assets and layout for Video app, r=@rexboy, r=@dale

apps/video/style/video.css

@@ -39,6 +39,7 @@ section {
 
 ul {
   background: url(images/background.png);
+  background-size: 100% 100%;
   height: 45.9rem;
   padding: 0;
   margin: 0;
@@ -48,16 +49,16 @@ ul {
   background: linear-gradient(to bottom, #222 0%,#000 100%);
 }
 li {
-  height: 12.1rem;
+  height: 12rem;
   overflow: hidden;
   position: relative;
   list-style-type: none;
+  border-bottom: 0.1rem solid;
+  border-color:rgba(255,255,255, 0.1);
 }
 li .inner {
   height: 12rem;
   margin: 0 1.9rem 0 0;
-  border-bottom: 0.1rem solid;
-  border-color:rgba(255,255,255, 0.1);
 }
 .unwatched {
   background: url(images/unwatched.png) no-repeat center / 100%;
@@ -185,9 +186,9 @@ li .after {
 
 #crop-view:before {
   content: "";
-  width: 1px;
+  width: 0.1rem;
   height: 100%;
-  margin-left: -1px;
+  margin-left: -0.1rem;
   display: inline-block;
   vertical-align: middle
 }
@@ -476,9 +477,12 @@ header .icon:after {
 
 #play:active {
   background-image: url(images/button_bg_pressed.png);
+  background-size: 8rem;
 }
 
+/* play/pause button */
 #play:after {
+  background-image: url("images/pause.png");
   background-position: 2.3rem 0.8rem;
   background-repeat: no-repeat;
   background-size: 3rem;
@@ -488,12 +492,9 @@ header .icon:after {
   z-index: 10;
 }
 
-/* play/pause button */
-#play:after {
-  background-image: url("images/pause.png");
-}
 #play.paused:after {
   background-image: url("images/play.png");
+  background-size: 3rem;
 }
 
 /* time slider */
@@ -541,7 +542,7 @@ header .icon:after {
 }
 
 #elapsedTime {
-  background: url(images/timeline_filled.png) no-repeat left center / 25.5rem;
+  background: url(images/timeline_filled.png) no-repeat left center / 100% 0.3rem;
   z-index: 30;
 }
 
@@ -551,7 +552,7 @@ header .icon:after {
 }
 
 #timeBackground {
-  background: url(images/timeline.png) repeat-x left top / 25.5rem;
+  background: url(images/timeline.png) repeat-x left top / 100% 0.3rem;
   z-index: 10;
   width: 100%;
 }
@@ -594,6 +595,7 @@ header .icon:after {
 
   #play:active {
     background-image: url(images/portrait/button_bg_pressed.png);
+    background-size: 5.6rem;
   }
 
   #play:after {