Hide last updated data until date is populated.

This fixes an issue where "last updated" data would be displayed before date
was populated, showing some weird data. I tried to use "template if" to
restrict when this would be painted, but couldn't get that to work, so I
resorted to using styling instead.

NOTRY=true
BUG=402661

Review URL: https://codereview.chromium.org/466783002

git-svn-id: svn://svn.chromium.org/blink/trunk@180100 bbb929c8-8fbe-4397-9dbb-9b2b20218538

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

@@ -6,12 +6,14 @@ found in the LICENSE file.
 
 <polymer-element name="ct-last-updated" attributes="date">
   <template>
-    Updated {{ date | _deltaMinutes }} min ago @ {{ date | _hours }}:{{ date | _minutes }}
+    <template if="{{ date }}">
+      Updated {{ date | _deltaMinutes }} min ago @ {{ date | _hours }}:{{ date | _minutes }}
+    </template>
   </template>
   <script>
   (function() {
     Polymer({
-      date: new Date(0),
+      date: null,
 
       _deltaMinutes: function(date) {
         return date.minutesAgo();
@@ -20,7 +22,10 @@ found in the LICENSE file.
         return date.getHours();
       },
       _minutes: function(date) {
-        return date.getMinutes();
+        var s = date.getMinutes().toString();
+        if (s.length == 1)
+          s = "0" + s;
+        return s;
       },
     });
   })();

third_party/WebKit/Tools/GardeningServer/ui/test/ct-last-updated-tests.html

@@ -12,22 +12,48 @@ found in the LICENSE file.
 var assert = chai.assert;
 
 describe('ct-last-updated', function() {
-  var builder;
+  var lastUpdated;
+
+  describe('Updated 5 minutes ago', function() {
+    beforeEach(function(done) {
+      lastUpdated = document.createElement('ct-last-updated');
+      // Set the date to 5 minutes ago.
+      lastUpdated.date = new Date(Date.now() - (5 * 60 * 1000));
+      requestAnimationFrame(function() { done(); });
+    });
 
-  beforeEach(function(done) {
-    builder = document.createElement('ct-last-updated');
-    // Set the date to 5 minutes ago.
-    builder.date = new Date(Date.now() - (5 * 60 * 1000));
-    requestAnimationFrame(function() { done(); });
+    it('should have correct text', function() {
+      var expected = 'Updated 5 min ago @ ' + lastUpdated.date.getHours() + ':' +
+                     lastUpdated.date.getMinutes();
+      assert.include(lastUpdated.shadowRoot.innerHTML.trim(), expected);
+    });
   });
 
-  describe('default UI', function() {
+  describe('No updated data', function() {
+    beforeEach(function(done) {
+      lastUpdated = document.createElement('ct-last-updated');
+      requestAnimationFrame(function() { done(); });
+    });
+
+    it('no text should be visible', function() {
+      assert.notInclude(lastUpdated.shadowRoot.querySelector('template').innerHTML.trim(), "Updated");
+    });
+  });
+
+  describe('Pad minutes when less than 10', function() {
+    beforeEach(function(done) {
+      lastUpdated = document.createElement('ct-last-updated');
+      // Set the date to 5 minutes ago.
+      lastUpdated.date = Date.create('11:05');
+      requestAnimationFrame(function() { done(); });
+    });
+
     it('should have correct text', function() {
-      var expected = 'Updated 5 min ago @ ' + builder.date.getHours() + ':' +
-                     builder.date.getMinutes();
-      assert.equal(builder.shadowRoot.innerHTML.trim(), expected);
+      var expected = '11:05';
+      assert.include(lastUpdated.shadowRoot.innerHTML.trim(), expected);
     });
   });
+
 });
 
 })()