From bd713352e3682ab312a78023ae0e4c13f2598e1f Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 23 Sep 2016 16:19:29 -0700
Subject: [PATCH] Hourglass can start at any percentage

This breaks the css-purity of our mixin but is necessary in order to
apply the initial offset of the hourglass animation dynamically, since
jquery can't manipulate arbitrary css on psuedo elements.
---
 background.html             |  2 +-
 js/views/message_view.js    |  6 +++++-
 stylesheets/_hourglass.scss | 14 +++++---------
 stylesheets/manifest.css    | 17 ++++++++---------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/background.html b/background.html
index 6d7e3b57349a..6574bd468553 100644
--- a/background.html
+++ b/background.html
@@ -157,7 +157,7 @@
           <div class='meta'>
             <span class='timestamp' data-timestamp={{ timestamp }}></span>
             <span class='status hide'></span>
-            <span class='timer hourglass'></span>
+            <span class='timer hourglass'><span class='sand'></span></span>
           </div>
       </div>
   </script>
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 8e33b8116580..11d531841ba6 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -135,7 +135,11 @@
         },
         renderExpiring: function() {
             if (this.model.isExpiring()) {
-                this.$('.hourglass').css('animation-duration', this.model.msTilExpire()*0.001 + 's');
+                var totalTime = this.model.get('expireTimer') * 1000;
+                var remainingTime = this.model.msTilExpire();
+                this.$('.hourglass .sand')
+                    .css('animation-duration', remainingTime*0.001 + 's')
+                    .css('transform', 'translateY(' + 100*(1 - (remainingTime / totalTime)) + '%)');
                 this.$el.addClass('expiring');
             }
         },
diff --git a/stylesheets/_hourglass.scss b/stylesheets/_hourglass.scss
index 3125262edf70..07569b31c9ab 100644
--- a/stylesheets/_hourglass.scss
+++ b/stylesheets/_hourglass.scss
@@ -5,32 +5,28 @@
   @include color-svg('/images/hourglass_full.svg', transparent);
   background-size: 100%;
 
-  &, &:before, &:after {
+  &, .sand, &:before, &:after {
     width: $width;
     height: $height;
   }
-  &:before, &:after {
+  .sand, &:before, &:after {
     content: '';
     display: inline-block;
     position: absolute;
     top: 0;
     left: 0;
   }
-  &:before {
+  .sand {
     background: $color;
-    animation: moveDown 5s linear;
-    animation-duration: inherit;
+    animation: moveDown linear;
     animation-fill-mode: forwards;
   }
   &:after {
     @include color-svg('/images/hourglass_empty.svg', $color);
   }
   @keyframes moveDown {
-    from {
-      transform: translateY(0);
-    }
     to   {
-      transform: translateY($height);
+      transform: translateY(100%);
     }
   }
 }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index a7fcf66b6a93..60e236e87ec5 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1234,13 +1234,15 @@ li.entry .error-icon-container {
     -webkit-mask-size: 100%;
     background-color: transparent;
     background-size: 100%; }
-    .message-container .expiring .timer, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
+    .message-container .expiring .timer, .message-container .expiring .timer .sand, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
     .message-list .expiring .timer,
+    .message-list .expiring .timer .sand,
     .message-list .expiring .timer:before,
     .message-list .expiring .timer:after {
       width: 13px;
       height: 11px; }
-    .message-container .expiring .timer:before, .message-container .expiring .timer:after,
+    .message-container .expiring .timer .sand, .message-container .expiring .timer:before, .message-container .expiring .timer:after,
+    .message-list .expiring .timer .sand,
     .message-list .expiring .timer:before,
     .message-list .expiring .timer:after {
       content: '';
@@ -1248,11 +1250,10 @@ li.entry .error-icon-container {
       position: absolute;
       top: 0;
       left: 0; }
-    .message-container .expiring .timer:before,
-    .message-list .expiring .timer:before {
+    .message-container .expiring .timer .sand,
+    .message-list .expiring .timer .sand {
       background: #999;
-      animation: moveDown 5s linear;
-      animation-duration: inherit;
+      animation: moveDown linear;
       animation-fill-mode: forwards; }
     .message-container .expiring .timer:after,
     .message-list .expiring .timer:after {
@@ -1260,10 +1261,8 @@ li.entry .error-icon-container {
       -webkit-mask-size: 100%;
       background-color: #999; }
 @keyframes moveDown {
-  from {
-    transform: translateY(0); }
   to {
-    transform: translateY(11px); } }
+    transform: translateY(100%); } }
   .message-container .control .bubble .content,
   .message-list .control .bubble .content {
     font-style: italic; }