Add last update time to Sheriff-O-Matic.

Tools/GardeningServer/ui/ct-last-updated.html

+<!--
+Copyright 2014 The Chromium Authors. All rights reserved.
+Use of this source code is governed by a BSD-style license that can be
+found in the LICENSE file.
+-->
+
+<polymer-element name="ct-last-updated" attributes="date">

[ojan, 2014/08/08 06:05:13]

Please add a test for this. It's confusing because we're transitioning from one
test harness to another. See README-mocha and write the tests using the
mocha+chai harness, not the qunit one.

[teravest, 2014/08/08 22:21:28]

Done.

+  <template>
+    <style>
+      :host {
+        display: flex;

[ojan, 2014/08/08 06:05:13]

I don't think you need this element to be a flexbox.

[teravest, 2014/08/08 22:21:28]

Removed.

+      }
+
+      .message {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;

[ojan, 2014/08/08 06:05:12]

It's tricky deciding where to put which CSS styling. This sort of styling is the
sort of thing the outer page may want to control (e.g. if this component is
included in two different places, one may want to clip and one may not).

In the future patch in which you add colors to show when the update time gets
too long, I think that would be appropriate styling to include here inside the
component because it's tied to logic in the component itself instead of how the
outer page uses the component.

[teravest, 2014/08/08 22:21:28]

I've removed the styling here.

+      }
+
+    </style>
+    <div class="message">Updated {{ delta_min }} min ago @ {{ date_hours }}:{{ date_minutes }}.</div>

[ojan, 2014/08/08 06:05:12]

I don't think this wrapper div is needed.

[teravest, 2014/08/08 22:21:28]

Removed.

+  </template>
+  <script>
+  (function() {
+    Polymer({
+      date: 0,  // seconds from epoch
+      delta_min: 0,
+      date_hours: 0,
+      date_minutes: 0,
+
+      dateChanged: function() {
+        this.update();
+      },
+
+      update: function() {

[ojan, 2014/08/08 06:05:13]

You don't need the update function. Better is to let Polymer's data binding do
this work for you.

Updated {{ date | _deltaMinutes }} min ago @ {{ date | _hours }}:{{ date :
_minutes }}.

Then on your polymer element define:
_deltaMinutes: function(date) {
  return date.relative(...);
},
_hours: function (date) {
...

Then you don't need to do any manual updating. When the date object changes,
polymer will update all these things for you.

[teravest, 2014/08/08 22:21:28]

That's much better, thanks!

+        this.delta_min = Math.floor(((Date.now() / 1000) - this.date) / 60);
+        this.date_hours = new Date(this.date * 1000).getHours();
+        this.date_minutes = new Date(this.date * 1000).getMinutes();

[ojan, 2014/08/08 06:05:12]

sugarjs, which we include, has nice methods to get these things. Use
http://sugarjs.com/api/Date/unitsAgo for the hours/minutes and
http://sugarjs.com/api/Date/relative for the deltaMinutes.

[teravest, 2014/08/08 22:21:27]

Excellent. Done.

+      },
+
+    });
+  })();
+
+  </script>
+</polymer-element>