[Timer] Updated Timer UI and fixed tests

Added peeking stop button to view, added legacy and first run support, added new and fixed old tests

platform/features/clock/src/actions/AbstractTimerAction.js

@@ -30,9 +30,6 @@ define(
          * Sets the reference timestamp in a timer to the current
          * time, such that it begins counting up.
          *
-         * Both "Start" and "Restart" share this implementation, but
-         * control their visibility with different `appliesTo` behavior.
-         *
          * @implements {Action}
          * @memberof platform/features/clock
          * @constructor
@@ -60,7 +57,7 @@ define(
             }
 
             function setTimerState(model) {
-                model.timerState = 'play';
+                model.timerState = 'started';
             }
 
             function setPausedTime(model) {

platform/features/clock/src/actions/PauseTimerAction.js

@@ -54,8 +54,7 @@ define(
             // We show this variant for timers which have
             // a target time, or is in a playing state.
             return model.type === 'timer' &&
-                (model.timestamp !== undefined ||
-                    model.timerState === 'play');
+                    model.timerState === 'started';
         };
 
         PauseTimerAction.prototype.perform = function () {
@@ -63,7 +62,7 @@ define(
                 now = this.now;
 
             function setTimerState(model) {
-                model.timerState = 'pause';
+                model.timerState = 'paused';
             }
 
             function setPausedTime(model) {

platform/features/clock/src/actions/RestartTimerAction.js

@@ -50,14 +50,32 @@ define(
                 (context.domainObject && context.domainObject.getModel()) ||
                 {};
 
-            // We show this variant for timers which already have
-            // a target time.
+            // We show this variant for timers which already have a target time.
             return model.type === 'timer' &&
-                (model.timestamp !== undefined ||
-                    model.timerState !== undefined);
+                model.timerState !== 'stopped';
+        };
+
+        RestartTimerAction.prototype.perform = function () {
+            var domainObject = this.domainObject,
+                now = this.now;
+
+            function setTimestamp(model) {
+                model.timestamp = now();
+            }
+
+            function setTimerState(model) {
+                model.timerState = 'started';
+            }
+
+            function setPausedTime(model) {
+                model.pausedTime = undefined;
+            }
+
+            return domainObject.useCapability('mutation', setTimestamp) &&
+                domainObject.useCapability('mutation', setTimerState) &&
+                domainObject.useCapability('mutation', setPausedTime);
         };
 
         return RestartTimerAction;
-
     }
 );

platform/features/clock/src/actions/StartTimerAction.js

@@ -53,8 +53,7 @@ define(
             // We show this variant for timers which do not yet have
             // a target time.
             return model.type === 'timer' &&
-                (model.timestamp === undefined ||
-                    model.timerState !== 'play');
+                    model.timerState !== 'started';
         };
 
         return StartTimerAction;

platform/features/clock/src/actions/StopTimerAction.js

@@ -54,8 +54,7 @@ define(
             // We show this variant for timers which do not yet have
             // a target time.
             return model.type === 'timer' &&
-                (model.timestamp !== undefined ||
-                    model.timerState !== undefined);
+                    model.timerState !== 'stopped';
         };
 
         StopTimerAction.prototype.perform = function () {
@@ -66,7 +65,7 @@ define(
             }
 
             function setTimerState(model) {
-                model.timerState = undefined;
+                model.timerState = 'stopped';
             }
 
             function setPausedTime(model) {

platform/features/clock/src/controllers/TimerController.js

@@ -54,10 +54,13 @@ define(
                         timeDelta >= 1000 ? "+" : "";
                     self.signCssClass = timeDelta < 0 ? "icon-minus" :
                         timeDelta >= 1000 ? "icon-plus" : "";
+                    self.stateCssClass = relativeTimerState === "play" ? "icon-play" :
+                        relativeTimerState === "pause" ? "icon-pause" : "icon-box";
                 } else {
                     self.textValue = "";
                     self.signValue = "";
                     self.signCssClass = "";
+                    self.stateCssClass = "icon-box";
                 }
             }
 
@@ -73,34 +76,47 @@ define(
                 relativeTimerState = timerState;
             }
 
+            function updateActions(actionCapability, actionKey) {
+                self.relevantAction = actionCapability &&
+                    actionCapability.getActions(actionKey)[0];
+
+                self.stopAction = relativeTimerState !== 'stopped' ?
+                    actionCapability && actionCapability.getActions('timer.stop')[0] : undefined;
+
+            }
+
             function isPaused() {
-                return relativeTimerState === 'pause';
+                return relativeTimerState === 'paused';
+            }
+
+            function handleLegacyTimer(model) {
+                if (model.timerState === undefined) {
+                    model.timerState = model.timestamp === undefined ?
+                        'stopped' : 'started';
+                }
             }
 
             function updateObject(domainObject) {
-                var model = domainObject.getModel(),
-                    timestamp = model.timestamp,
+                var model = domainObject.getModel();
+                handleLegacyTimer(model);
+
+                var timestamp = model.timestamp,
                     formatKey = model.timerFormat,
                     timerState = model.timerState,
                     actionCapability = domainObject.getCapability('action'),
-                    actionKey = (timerState !== 'play') ?
+                    actionKey = (timerState !== 'started') ?
                         'timer.start' : 'timer.pause';
 
-                self.timerState = model.timerState;
-                self.pausedTime = model.pausedTime;
-
                 updateFormat(formatKey);
                 updateTimestamp(timestamp);
                 updateTimerState(timerState);
+                updateActions(actionCapability, actionKey);
 
                 //if paused on startup show last known position
                 if (isPaused() && !lastTimestamp) {
-                    lastTimestamp = self.pausedTime;
+                    lastTimestamp = model.pausedTime;
                 }
 
-                self.relevantAction = actionCapability &&
-                    actionCapability.getActions(actionKey)[0];
-
                 update();
             }
 
@@ -122,6 +138,11 @@ define(
                     lastTimestamp = now();
                     update();
                 }
+
+                if (relativeTimerState === undefined) {
+                    handleModification();
+                }
+
                 // We're running in an animation frame, not in a digest cycle.
                 // We need to trigger a digest cycle if our displayable data
                 // changes.
@@ -157,7 +178,7 @@ define(
          */
         TimerController.prototype.buttonCssClass = function () {
             return this.relevantAction ?
-                    this.relevantAction.getMetadata().cssclass : "";
+                this.relevantAction.getMetadata().cssclass : "";
         };
 
         /**
@@ -167,7 +188,7 @@ define(
          */
         TimerController.prototype.buttonText = function () {
             return this.relevantAction ?
-                    this.relevantAction.getMetadata().name : "";
+                this.relevantAction.getMetadata().name : "";
         };
 
 
@@ -181,6 +202,36 @@ define(
             }
         };
 
+        /**
+         * Get the CSS class to display the stop button
+         * @returns {string} cssclass to display
+         */
+        TimerController.prototype.stopButtonCssClass = function () {
+            return this.stopAction ?
+                this.stopAction.getMetadata().cssclass : '';
+        };
+
+        /**
+         * Get the text to show the stop button
+         * (e.g. in a tooltip)
+         * @returns {string} name of the action
+         */
+        TimerController.prototype.stopButtonText = function () {
+            return this.stopAction ?
+                this.stopAction.getMetadata().name : '';
+        };
+
+
+        /**
+         * Perform the action associated with the stop button.
+         */
+        TimerController.prototype.clickStopButton = function () {
+            if (this.stopAction) {
+                this.stopAction.perform();
+                this.updateObject(this.$scope.domainObject);
+            }
+        };
+
         /**
          * Get the sign (+ or -) of the current timer value, as
          * displayable text.
@@ -199,6 +250,15 @@ define(
             return this.signCssClass;
         };
 
+        /**
+         * Get the symbol (play, pause or stop) of the current timer state, as
+         * a CSS class.
+         * @returns {string} symbol of the current timer state
+         */
+        TimerController.prototype.stateClass = function () {
+            return this.stateCssClass;
+        };
+
         /**
          * Get the text to display for the current timer value.
          * @returns {string} current timer value