Add a clock to the lock screen

Start implementing the lock screen design by adding a big white
clock in the middle.

https://bugzilla.gnome.org/show_bug.cgi?id=619955

data/theme/gnome-shell.css

@@ -2206,3 +2206,18 @@ StScrollBar StButton#vhandle:hover
     width: 100px;
     height: 50px;
 }
+
+.screen-shield-clock {
+    color: white;
+    text-shadow: black 0px 0px 0px 1px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.screen-shield-clock-time {
+    font-size: 86px;
+}
+
+.screen-shield-clock-date {
+    font-size: 48px;
+}

js/ui/screenShield.js

@@ -2,6 +2,7 @@
 
 const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
+const GnomeDesktop = imports.gi.GnomeDesktop;
 const Lang = imports.lang;
 const Meta = imports.gi.Meta;
 const Signals = imports.signals;
@@ -20,6 +21,43 @@ const CURTAIN_SLIDE_TIME = 1.2;
 // the slide up automatically
 const ARROW_DRAG_TRESHOLD = 0.4;
 
+const Clock = new Lang.Class({
+    Name: 'ScreenShieldClock',
+
+    CLOCK_FORMAT_KEY: 'clock-format',
+    CLOCK_SHOW_SECONDS_KEY: 'clock-show-seconds',
+
+    _init: function() {
+        this.actor = new St.BoxLayout({ style_class: 'screen-shield-clock',
+                                        vertical: true });
+
+        this._time = new St.Label({ style_class: 'screen-shield-clock-time' });
+        this._date = new St.Label({ style_class: 'screen-shield-clock-date' });
+
+        this.actor.add(this._time, { x_align: St.Align.MIDDLE });
+        this.actor.add(this._date, { x_align: St.Align.MIDDLE });
+
+        this._wallClock = new GnomeDesktop.WallClock({ time_only: true });
+        this._wallClock.connect('notify::clock', Lang.bind(this, this._updateClock));
+
+        this._updateClock();
+    },
+
+    _updateClock: function() {
+        this._time.text = this._wallClock.clock;
+
+        let date = new Date();
+        /* Translators: This is a time format for a date in
+           long format */
+        this._date.text = date.toLocaleFormat(_("%A, %B %d"));
+    },
+
+    destroy: function() {
+        this.actor.destroy();
+        this._wallClock.run_dispose();
+    }
+});
+
 /**
  * To test screen shield, make sure to kill gnome-screensaver.
  *
@@ -89,6 +127,7 @@ const ScreenShield = new Lang.Class({
 
         this._isModal = false;
         this._isLocked = false;
+        this._hasLockScreen = false;
 
         this._lightbox = new Lightbox.Lightbox(Main.uiGroup,
                                                { inhibitEvents: true, fadeInTime: 10, fadeFactor: 1 });
@@ -245,11 +284,40 @@ const ScreenShield = new Lang.Class({
         this._lockScreenGroup.grab_key_focus();
     },
 
+    // Some of the actors in the lock screen are heavy in
+    // resources, so we only create them when needed
+    _prepareLockScreen: function() {
+        this._lockScreenContentsBox = new St.BoxLayout({ x_align: Clutter.ActorAlign.CENTER,
+                                                         y_align: Clutter.ActorAlign.CENTER,
+                                                         x_expand: true,
+                                                         y_expand: true,
+                                                         vertical: true });
+        this._clock = new Clock();
+        this._lockScreenContentsBox.add(this._clock.actor, { x_fill: true,
+                                                             y_fill: true });
+
+        this._lockScreenGroup.add_actor(this._lockScreenContentsBox);
+
+        this._hasLockScreen = true;
+    },
+
+    _clearLockScreen: function() {
+        this._clock.destroy();
+        this._clock = null;
+
+        this._lockScreenContentsBox.destroy();
+
+        this._hasLockScreen = false;
+    },
+
     get locked() {
         return this._isLocked;
     },
 
     unlock: function() {
+        if (this._hasLockScreen)
+            this._clearLockScreen();
+
         if (this._keepDialog) {
             // The dialog must be kept alive,
             // so immediately go back to it
@@ -275,6 +343,9 @@ const ScreenShield = new Lang.Class({
     },
 
     lock: function() {
+        if (!this._hasLockScreen)
+            this._prepareLockScreen();
+
         if (!this._isModal) {
             Main.pushModal(this.actor);
             this._isModal = true;