[Representation] Don't reuse scopes

Addresses nasa/openmctweb#227
[Time Conductor] Don't broadcast on telemetry:view
2015-10-30 15:06:51 -07:00 · 2015-10-30 14:59:32 -07:00 · 2015-10-30 14:56:52 -07:00 · 2015-10-30 14:54:37 -07:00 · 2015-10-30 14:08:11 -07:00 · 2015-10-30 13:57:21 -07:00
179 changed files with 15407 additions and 4168 deletions
--- a/2
+++ b/2
@@ -1 +1 @@
-web: node app.js --port $PORT --include example/localstorage
+web: node app.js --port $PORT
--- a/README.md
+++ b/README.md
@@ -103,6 +103,21 @@ This build will:

 Run as `mvn clean install`.

+### Building Documentation
+
+Open MCT Web's documentation is generated by an
+[npm](https://www.npmjs.com/)-based build:
+
+* `npm install` _(only needs to run once)_
+* `npm run docs`
+
+Documentation will be generated in `target/docs`. Note that diagram
+generation is dependent on having [Cairo](http://cairographics.org/download/)
+installed; see
+[node-canvas](https://github.com/Automattic/node-canvas#installation)'s
+documentation for help with installation.
+
+
 # Glossary

 Certain terms are used throughout Open MCT Web with consistent meanings
--- a/bundles.json
+++ b/bundles.json
@@ -6,6 +6,7 @@
    "platform/commonUI/browse",
    "platform/commonUI/edit",
    "platform/commonUI/dialog",
+    "platform/commonUI/formats",
    "platform/commonUI/general",
    "platform/commonUI/inspect",
    "platform/commonUI/mobile",
--- a/docs/gendocs.js
+++ b/docs/gendocs.js
@@ -30,7 +30,8 @@
 var CONSTANTS = {
        DIAGRAM_WIDTH: 800,
        DIAGRAM_HEIGHT: 500
-    };
+    },
+    TOC_HEAD = "# Table of Contents";

 GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be defined
 (function () {
@@ -44,6 +45,7 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
        split = require("split"),
        stream = require("stream"),
        nomnoml = require('nomnoml'),
+        toc = require("markdown-toc"),
        Canvas = require('canvas'),
        options = require("minimist")(process.argv.slice(2));

@@ -110,6 +112,9 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
            done();
        };
        transform._flush = function (done) {
+            // Prepend table of contents
+            markdown =
+                [ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n");
            this.push("<html><body>\n");
            this.push(marked(markdown));
            this.push("\n</body></html>\n");
@@ -133,8 +138,8 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
        customRenderer.link = function (href, title, text) {
            // ...but only if they look like relative paths
            return (href || "").indexOf(":") === -1 && href[0] !== "/" ?
-                renderer.link(href.replace(/\.md/, ".html"), title, text) :
-                renderer.link.apply(renderer, arguments);
+                    renderer.link(href.replace(/\.md/, ".html"), title, text) :
+                    renderer.link.apply(renderer, arguments);
        };
        return customRenderer;
    }
@@ -179,13 +184,17 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
    glob(options['in'] + "/**/*.@(html|css|png)", {}, function (err, files) {
        files.forEach(function (file) {
            var destination = file.replace(options['in'], options.out),
-                destPath = path.dirname(destination);
-
+                destPath = path.dirname(destination),
+                streamOptions = {};
+            if (file.match(/png$/)){
+                streamOptions.encoding = null;
+            } else {
+                streamOptions.encoding = 'utf8';
+            }
+            
            mkdirp(destPath, function (err) {
-                fs.createReadStream(file, { encoding: 'utf8' })
-                    .pipe(fs.createWriteStream(destination, {
-                        encoding: 'utf8'
-                    }));
+                fs.createReadStream(file, streamOptions)
+                    .pipe(fs.createWriteStream(destination, streamOptions));
            });
        });
    });
--- a/docs/src/architecture/Platform.md
+++ b/docs/src/architecture/Platform.md
@@ -35,16 +35,26 @@ in __any of these tiers__.
 * _DOM_: The rendered HTML document, composed from HTML templates which
  have been processed by AngularJS and will be updated by AngularJS
  to reflect changes from the presentation layer. User interactions
-  are initiated from here and invoke behavior in the presentation layer.
+  are initiated from here and invoke behavior in the presentation layer. HTML 
+  templates are written in Angular’s template syntax; see the [Angular documentation on templates](https://docs.angularjs.org/guide/templates). 
+  These describe the page as actually seen by the user. Conceptually, 
+  stylesheets (controlling the lookandfeel of the rendered templates) belong 
+  in this grouping as well. 
 * [_Presentation layer_](#presentation-layer): The presentation layer
  is responsible for updating (and providing information to update)
  the displayed state of the application. The presentation layer consists
  primarily of _controllers_ and _directives_. The presentation layer is
  concerned with inspecting the information model and preparing it for
  display.
-* [_Information model_](#information-model): The information model
-  describes the state and behavior of the objects with which the user
-  interacts.
+* [_Information model_](#information-model): Provides a common (within Open MCT 
+  Web) set of interfaces for dealing with “things”  domain objects  within the 
+  system. Userfacing concerns in a Open MCT Web application are expressed as 
+  domain objects; examples include folders (used to organize other domain 
+  objects), layouts (used to build displays), or telemetry points (used as 
+  handles for streams of remote measurements.) These domain objects expose a 
+  common set of interfaces to allow reusable user interfaces to be built in the 
+  presentation and template tiers; the specifics of these behaviors are then 
+  mapped to interactions with underlying services. 
 * [_Service infrastructure_](#service-infrastructure): The service
  infrastructure is responsible for providing the underlying general
  functionality needed to support the information model. This includes
@@ -52,7 +62,9 @@ in __any of these tiers__.
  back-end.
 * _Back-end_: The back-end is out of the scope of Open MCT Web, except
  for the interfaces which are utilized by adapters participating in the
-  service infrastructure.
+  service infrastructure. Includes the underlying persistence stores, telemetry 
+  streams, and so forth which the Open MCT Web client is being used to interact 
+  with.

 ## Application Start-up

--- a/docs/src/guide/index.md
+++ b/docs/src/guide/index.md
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -29,8 +29,9 @@
    Sections:
    <ul>
        <li><a href="api/">API</a></li>
-        <li><a href="guide/">Developer Guide</a></li>
        <li><a href="architecture/">Architecture Overview</a></li>
+        <li><a href="guide/">Developer Guide</a></li>
+        <li><a href="tutorials/">Tutorials</a></li>
    </ul>
 </body>
 </html>
--- a/docs/src/tutorials/images/add-task.png
+++ b/docs/src/tutorials/images/add-task.png
--- a/docs/src/tutorials/images/bar-plot-2.png
+++ b/docs/src/tutorials/images/bar-plot-2.png
--- a/docs/src/tutorials/images/bar-plot-3.png
+++ b/docs/src/tutorials/images/bar-plot-3.png
--- a/docs/src/tutorials/images/bar-plot-4.png
+++ b/docs/src/tutorials/images/bar-plot-4.png
--- a/docs/src/tutorials/images/bar-plot.png
+++ b/docs/src/tutorials/images/bar-plot.png
--- a/docs/src/tutorials/images/chrome.png
+++ b/docs/src/tutorials/images/chrome.png
--- a/docs/src/tutorials/images/remove-task.png
+++ b/docs/src/tutorials/images/remove-task.png
--- a/docs/src/tutorials/images/telemetry-1.png
+++ b/docs/src/tutorials/images/telemetry-1.png
--- a/docs/src/tutorials/images/telemetry-2.png
+++ b/docs/src/tutorials/images/telemetry-2.png
--- a/docs/src/tutorials/images/telemetry-3.png
+++ b/docs/src/tutorials/images/telemetry-3.png
--- a/docs/src/tutorials/images/todo-edit.png
+++ b/docs/src/tutorials/images/todo-edit.png
--- a/docs/src/tutorials/images/todo-list.png
+++ b/docs/src/tutorials/images/todo-list.png
--- a/docs/src/tutorials/images/todo-restyled.png
+++ b/docs/src/tutorials/images/todo-restyled.png
--- a/docs/src/tutorials/images/todo-selection.png
+++ b/docs/src/tutorials/images/todo-selection.png
--- a/docs/src/tutorials/images/todo.png
+++ b/docs/src/tutorials/images/todo.png
--- a/docs/src/tutorials/index.md
+++ b/docs/src/tutorials/index.md
--- a/example/generator/bundle.json
+++ b/example/generator/bundle.json
@@ -16,6 +16,23 @@
                "implementation": "SinewaveLimitCapability.js"
            }
        ],
+        "formats": [
+            {
+                "key": "example.delta",
+                "implementation": "SinewaveDeltaFormat.js"
+            }
+        ],
+        "constants": [
+            {
+                "key": "TIME_CONDUCTOR_DOMAINS",
+                "value": [
+                    { "key": "time", "name": "Time" },
+                    { "key": "yesterday", "name": "Yesterday" },
+                    { "key": "delta", "name": "Delta", "format": "example.delta" }
+                ],
+                "priority": -1
+            }
+        ],
        "types": [
            {
                "key": "generator",
@@ -34,6 +51,15 @@
                        {
                            "key": "time",
                            "name": "Time"
+                        },
+                        {
+                            "key": "yesterday",
+                            "name": "Yesterday"
+                        },
+                        {
+                            "key": "delta",
+                            "name": "Delta",
+                            "format": "example.delta"
                        }
                    ],
                    "ranges": [
@@ -61,4 +87,4 @@
            }
        ]
    }
-}
+}
--- a/example/generator/src/SinewaveConstants.js
+++ b/example/generator/src/SinewaveConstants.js
@@ -0,0 +1,26 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define({
+    START_TIME: Date.now() - 24 * 60 * 60 * 1000 // Now minus a day.
+});
--- a/example/generator/src/SinewaveDeltaFormat.js
+++ b/example/generator/src/SinewaveDeltaFormat.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    ['./SinewaveConstants', 'moment'],
+    function (SinewaveConstants, moment) {
+        "use strict";
+
+        var START_TIME = SinewaveConstants.START_TIME,
+            FORMAT_REGEX = /^-?\d+:\d+:\d+$/,
+            SECOND = 1000,
+            MINUTE = SECOND * 60,
+            HOUR = MINUTE * 60;
+
+        function SinewaveDeltaFormat() {
+        }
+
+        function twoDigit(v) {
+            return v >= 10 ? String(v) : ('0' + v);
+        }
+
+        SinewaveDeltaFormat.prototype.format = function (value) {
+            var delta = Math.abs(value - START_TIME),
+                negative = value < START_TIME,
+                seconds = Math.floor(delta / SECOND) % 60,
+                minutes = Math.floor(delta / MINUTE) % 60,
+                hours = Math.floor(delta / HOUR);
+            return (negative ? "-" : "") +
+                [ hours, minutes, seconds ].map(twoDigit).join(":");
+        };
+
+        SinewaveDeltaFormat.prototype.validate = function (text) {
+            return FORMAT_REGEX.test(text);
+        };
+
+        SinewaveDeltaFormat.prototype.parse = function (text) {
+            var negative = text[0] === "-",
+                parts = text.replace("-", "").split(":");
+            return [ HOUR, MINUTE, SECOND ].map(function (sz, i) {
+                return parseInt(parts[i], 10) * sz;
+            }).reduce(function (a, b) {
+                return a + b;
+            }, 0) * (negative ? -1 : 1) + START_TIME;
+        };
+
+        return SinewaveDeltaFormat;
+    }
+);
--- a/example/generator/src/SinewaveLimitCapability.js
+++ b/example/generator/src/SinewaveLimitCapability.js
@@ -30,25 +30,25 @@ define(
            YELLOW = 0.5,
            LIMITS = {
                rh: {
-                    cssClass: "s-limit-upr-red",
+                    cssClass: "s-limit-upr s-limit-red",
                    low: RED,
                    high: Number.POSITIVE_INFINITY,
                    name: "Red High"
                },
                rl: {
-                    cssClass: "s-limit-lwr-red",
+                    cssClass: "s-limit-lwr s-limit-red",
                    high: -RED,
                    low: Number.NEGATIVE_INFINITY,
                    name: "Red Low"
                },
                yh: {
-                    cssClass: "s-limit-upr-yellow",
+                    cssClass: "s-limit-upr s-limit-yellow",
                    low: YELLOW,
                    high: RED,
                    name: "Yellow High"
                },
                yl: {
-                    cssClass: "s-limit-lwr-yellow",
+                    cssClass: "s-limit-lwr s-limit-yellow",
                    low: -RED,
                    high: -YELLOW,
                    name: "Yellow Low"
--- a/example/generator/src/SinewaveTelemetryProvider.js
+++ b/example/generator/src/SinewaveTelemetryProvider.js
@@ -25,8 +25,8 @@
 * Module defining SinewaveTelemetryProvider. Created by vwoeltje on 11/12/14.
 */
 define(
-    ["./SinewaveTelemetry"],
-    function (SinewaveTelemetry) {
+    ["./SinewaveTelemetrySeries"],
+    function (SinewaveTelemetrySeries) {
        "use strict";

        /**
@@ -45,7 +45,7 @@ define(
            function generateData(request) {
                return {
                    key: request.key,
-                    telemetry: new SinewaveTelemetry(request)
+                    telemetry: new SinewaveTelemetrySeries(request)
                };
            }

@@ -112,4 +112,4 @@ define(

        return SinewaveTelemetryProvider;
    }
-);
+);
--- a/example/generator/src/SinewaveTelemetrySeries.js
+++ b/example/generator/src/SinewaveTelemetrySeries.js
@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * Module defining SinewaveTelemetry. Created by vwoeltje on 11/12/14.
+ */
+define(
+    ['./SinewaveConstants'],
+    function (SinewaveConstants) {
+        "use strict";
+
+        var ONE_DAY = 60 * 60 * 24,
+            firstObservedTime = Math.floor(SinewaveConstants.START_TIME / 1000);
+
+        /**
+         *
+         * @constructor
+         */
+        function SinewaveTelemetrySeries(request) {
+            var timeOffset = (request.domain === 'yesterday') ? ONE_DAY : 0,
+                latestTime = Math.floor(Date.now() / 1000) - timeOffset,
+                firstTime = firstObservedTime - timeOffset,
+                endTime = (request.end !== undefined) ?
+                        Math.floor(request.end / 1000) : latestTime,
+                count = Math.min(endTime, latestTime) - firstTime,
+                period = +request.period || 30,
+                generatorData = {},
+                requestStart = (request.start === undefined) ? firstTime :
+                        Math.max(Math.floor(request.start / 1000), firstTime),
+                offset = requestStart - firstTime;
+
+            if (request.size !== undefined) {
+                offset = Math.max(offset, count - request.size);
+            }
+
+            generatorData.getPointCount = function () {
+                return count - offset;
+            };
+
+            generatorData.getDomainValue = function (i, domain) {
+                // delta uses the same numeric values as the default domain,
+                // so it's not checked for here, just formatted for display
+                // differently.
+                return (i + offset) * 1000 + firstTime * 1000 -
+                    (domain === 'yesterday' ? ONE_DAY : 0);
+            };
+
+            generatorData.getRangeValue = function (i, range) {
+                range = range || "sin";
+                return Math[range]((i + offset) * Math.PI * 2 / period);
+            };
+
+            return generatorData;
+        }
+
+        return SinewaveTelemetrySeries;
+    }
+);
--- a/example/profiling/bundle.json
+++ b/example/profiling/bundle.json
@@ -4,7 +4,11 @@
            {
                "implementation": "WatchIndicator.js",
                "depends": ["$interval", "$rootScope"]
+            },
+            {
+                "implementation": "DigestIndicator.js",
+                "depends": ["$interval", "$rootScope"]
            }
        ]
    }
-}
+}
--- a/platform/commonUI/browse/src/navigation/BackAction.js
+++ b/platform/commonUI/browse/src/navigation/BackAction.js
@@ -19,50 +19,59 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/*global define,Promise*/
+/*global define*/

-/**
- * Module defining NavigateAction. Created by vwoeltje on 11/10/14.
- */
 define(
    [],
    function () {
        "use strict";

        /**
-         * The `back` action navigates to the contextual parent of a
-         * specific domain object.
-         * @memberof platform/commonUI/browse
+         * Displays the number of digests that have occurred since the
+         * indicator was first instantiated.
         * @constructor
-         * @implements {Action}
+         * @param $interval Angular's $interval
+         * @implements {Indicator}
         */
-        function BackAction(context) {
-            this.domainObject = context.domainObject;
+        function DigestIndicator($interval, $rootScope) {
+            var digests = 0,
+                displayed = 0,
+                start = Date.now();
+
+            function update() {
+                var secs = (Date.now() - start) / 1000;
+                displayed = Math.round(digests / secs);
+            }
+
+            function increment() {
+                digests += 1;
+            }
+
+            $rootScope.$watch(increment);
+
+            // Update state every second
+            $interval(update, 1000);
+
+            // Provide initial state, too
+            update();
+
+            return {
+                getGlyph: function () {
+                    return ".";
+                },
+                getGlyphClass: function () {
+                    return undefined;
+                },
+                getText: function () {
+                    return displayed + " digests/sec";
+                },
+                getDescription: function () {
+                    return "";
+                }
+            };
        }

-        /**
-         * Navigate to the object described in the context.
-         * @returns {Promise} a promise that is resolved once the
-         *          navigation has been updated
-         */
-        BackAction.prototype.perform = function () {
-            var parent = this.domainObject.getCapability("context")
-                    .getParent();
-            return parent.getCapability("action").perform("navigate");
-        };
+        return DigestIndicator;

-        /**
-         * Navigate as an action is only applicable when a domain object
-         * is described in the action context.
-         * @param {ActionContext} context the context in which the action
-         *        will be performed
-         * @returns {boolean} true if applicable
-         */
-        BackAction.appliesTo = function (context) {
-            return context.domainObject !== undefined &&
-                    context.domainObject.hasCapability("context");
-        };
-
-        return BackAction;
    }
 );
--- a/ideas/cli/bundle.json
+++ b/ideas/cli/bundle.json
@@ -1,22 +0,0 @@
-{
-    "extensions": {
-        "routes": [
-            {
-                "when": "/cli",
-                "templateUrl": "templates/cli.html"
-            }
-        ],
-        "controllers": [
-            {
-                "key": "CLIController",
-                "implementation": "CLIController.js",
-                "depends": [ "$scope", "navigationService", "objectService" ]
-            }
-        ],
-        "stylesheets": [
-            {
-                "stylesheetUrl": "stylesheets/cli.css"
-            }
-        ]
-    }
-}
--- a/ideas/cli/res/stylesheets/cli.css
+++ b/ideas/cli/res/stylesheets/cli.css
@@ -1,47 +0,0 @@
-.iw-container {
-    position: absolute;
-    bottom: 30px;
-    left: 0;
-    top: 0;
-    right: 0;
-}
-
-.iw-stdin {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 30px;
-    width: calc(100% - 8px);
-    margin: 4px;
-    font-family: monospace;
-    font-size: 16px;
-}
-
-.iw-stdout {
-    position: absolute;
-    left: 6px;
-    right: 6px;
-    top: 12px;
-    bottom: 44px;
-    border: 1px #211 solid;
-    border-radius: 12px;
-    padding: 8px;
-    background: #302;
-    overflow: auto;
-    box-shadow: inset 0px 2px 8px 0px rgba(0, 0, 0, 0.5);
-}
-
-.iw-stdout span {
-    display: block;
-    font-family: monospace;
-    color: #FD9;
-    font-size: 16px;
-    margin-top: 2px;
-    margin-bottom: 2px;
-    min-height: 1em;
-    white-space: pre;
-}
-
-.iw-stdout span.iw-user-input {
-    color: gray;
-}
--- a/ideas/cli/res/templates/cli.html
+++ b/ideas/cli/res/templates/cli.html
@@ -1,15 +0,0 @@
-<div class="abs holder-all browse-mode" ng-controller="CLIController">
-    <div class="iw-container">
-        <div class="iw-stdout" mct-scroll-y="stdoutScroll">
-            <span ng-repeat="line in stdout track by $index"
-                  class="{{line.cssClass}}"
-                  ng-bind="line.text">
-            </span>
-        </div>
-        <form ng-submit="enter(stdin)">
-            <input type="text" class="iw-stdin" ng-model="stdin" autofocus>
-        </form>
-    </div>
-    <mct-include key="'bottombar'"></mct-include>
-</div>
-
--- a/ideas/cli/src/CLIController.js
+++ b/ideas/cli/src/CLIController.js
@@ -1,177 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define*/
-
-define(function () {
-    'use strict';
-    return function CLIController($scope, navigationService, objectService) {
-        var unlistenToMutation,
-            currentComposition = [];
-
-        function print(str, cssClass) {
-            $scope.stdout.push({
-                text: str,
-                cssClass: cssClass
-            });
-            $scope.stdoutScroll = Number.MAX_VALUE;
-        }
-
-        function pad(str, length) {
-            while (str.length < length) {
-                str += " ";
-            }
-            return str;
-        }
-
-        function summarize(domainObject) {
-            var type = domainObject.getCapability("type"),
-                typeName = type ? type.getName() : "Object",
-                location = domainObject.getCapability('location'),
-                isLink = (location && location.isLink()),
-                suffix = isLink ? " (link)" : "";
-            return "[" + typeName + "] " + domainObject.getModel().name + suffix;
-        }
-
-        function printComposition(domainObject) {
-            return domainObject.useCapability("composition").then(function (c) {
-                currentComposition = c;
-                c.forEach(function (childObject, i) {
-                    print(i + ") " + summarize(childObject));
-                });
-            });
-        }
-
-        function printObject(domainObject, callback) {
-            // Exclude the root object; nobody wants to see that
-            if (domainObject.hasCapability("context")) {
-                print(summarize(domainObject));
-            }
-            if (domainObject.hasCapability('composition')) {
-                printComposition(domainObject).then(callback);
-            } else {
-                callback();
-            }
-        }
-
-        function unlisten() {
-            if (unlistenToMutation) {
-                unlistenToMutation();
-                unlistenToMutation = undefined;
-            }
-        }
-
-        function navChange(domainObject) {
-            unlisten();
-            unlistenToMutation = domainObject.getCapability("mutation")
-                .listen(function () { printObject(domainObject); });
-            printObject(domainObject);
-        }
-
-        function findTarget(id) {
-            if (id === "this") {
-                return navigationService.getNavigation();
-            } else {
-                return currentComposition[parseInt(id, 10)];
-            }
-        }
-
-        function listActions(domainObject, index) {
-            // Don't show actions for the root
-            if (!domainObject.hasCapability('context')) {
-                return;
-            }
-
-            domainObject.getCapability('action').getActions().forEach(function (a) {
-                var metadata = a.getMetadata(),
-                    desc = metadata.description,
-                    suffix = index !== undefined ? (" " + index) : "";
-                print(pad(metadata.key + suffix, 32) + (desc || ""));
-            });
-        }
-
-        function performAction(domainObject, action) {
-            domainObject.getCapability('action').perform(action);
-        }
-
-        function handleInput(input) {
-            var parts = input.split(" "),
-                targetObject;
-
-            if (input.length === 0) {
-                targetObject = navigationService.getNavigation();
-                if (targetObject) {
-                    printObject(targetObject, function () {
-                        print("");
-                        listActions(targetObject);
-                    });
-                }
-                return;
-            } else if (parts.length === 1) {
-                if (isNaN(parseInt(parts[0], 10))) {
-                    targetObject = navigationService.getNavigation();
-                    performAction(targetObject, parts[0]);
-                    return;
-                }
-                targetObject = findTarget(parts[0]);
-                if (targetObject) {
-                    listActions(targetObject, parts[0]);
-                    return;
-                }
-            } else if (parts.length === 2) {
-                targetObject = findTarget(parts[1]);
-                if (targetObject) {
-                    performAction(targetObject, parts[0]);
-                    return;
-                }
-            }
-
-            // Any parse-able input should have returned already.
-            print("SYNTAX ERROR. READY.");
-        }
-
-        if (!navigationService.getNavigation()) {
-            objectService.getObjects(["ROOT"]).then(function (objects) {
-                navigationService.setNavigation(objects.ROOT);
-            });
-        }
-
-        navigationService.addListener(navChange);
-
-        $scope.stdout = [];
-        $scope.stdin = "";
-        $scope.stdoutScroll = 0;
-
-        $scope.enter = function (input) {
-            $scope.stdin = "";
-            print("");
-            print(input, "iw-user-input");
-            print("");
-
-            handleInput(input);
-        };
-
-        $scope.$on("$destroy", function () {
-            navigationService.removeListener(navChange);
-            unlisten();
-        });
-    };
-});
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
    "split": "^1.0.0",
    "mkdirp": "^0.5.1",
    "nomnoml": "^0.0.3",
-    "canvas": "^1.2.7"
+    "canvas": "^1.2.7",
+    "markdown-toc": "^0.11.7"
  },
  "scripts": {
    "start": "node app.js",
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -1,4 +1,9 @@
 {
+    "configuration": {
+        "paths": {
+            "uuid": "uuid"
+        }
+    },
    "extensions": {
        "routes": [
            {
@@ -105,15 +110,9 @@
        "actions": [
            {
                "key": "navigate",
-                "description": "Browse to this object.",
                "implementation": "navigation/NavigateAction.js",
                "depends": [ "navigationService", "$q" ]
            },
-            {
-                "key": "back",
-                "implementation": "navigation/BackAction.js",
-                "description": "Navigate to the parent of this object."
-            },
            {
                "key": "window",
                "name": "Open In New Tab",
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -24,7 +24,7 @@
 <a
   class='type-icon icon ui-symbol s-back'
   ng-show="context.getPath().length > 2"
-   ng-click="domainObject.getCapability('action').perform('back')">
+   ng-click="context.getParent().getCapability('action').perform('navigate')">
    {
 </a>

--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -42,9 +42,8 @@
        </div>
    </div>

-    <div class='object-holder abs vscroll'>
-        <mct-representation key="representation.selected.key"
-                            mct-object="representation.selected.key && domainObject">
-        </mct-representation>
-    </div>
+    <mct-representation key="representation.selected.key"
+                        mct-object="representation.selected.key && domainObject"
+                        class="abs object-holder">
+    </mct-representation>
 </span>
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -28,7 +28,9 @@
        <mct-split-pane class='contents abs' anchor='left'>
            <div class='split-pane-component treeview pane left'>
                <div class="holder abs l-mobile">
-                    <mct-representation key="'create-button'" mct-object="navigatedObject">
+                    <mct-representation key="'create-button'"
+                                        mct-object="navigatedObject"
+                                        mct-device="desktop">
                    </mct-representation>
                    <div class='holder search-holder abs'
                         ng-class="{active: treeModel.search}">
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -20,7 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
-    <div class="s-menu major create-btn" ng-click="createController.toggle()">
+    <div class="s-menu-btn major create-btn" ng-click="createController.toggle()">
 		<span class="ui-symbol icon type-icon">&#x2b;</span>
 		<span class="title-label">Create</span>
    </div>
--- a/platform/commonUI/browse/src/creation/CreateAction.js
+++ b/platform/commonUI/browse/src/creation/CreateAction.js
@@ -53,12 +53,11 @@ define(
         */
        function CreateAction(type, parent, context, dialogService, creationService, policyService) {
            this.metadata = {
-                key: 'create.' + type.getKey(),
+                key: 'create',
                glyph: type.getGlyph(),
                name: type.getName(),
                type: type.getKey(),
                description: type.getDescription(),
-                category: [ 'creation' ],
                context: context
            };

--- a/platform/commonUI/browse/src/creation/CreateActionProvider.js
+++ b/platform/commonUI/browse/src/creation/CreateActionProvider.js
@@ -63,10 +63,7 @@ define(
            // domain object to serve as the container for the
            // newly-created object (although the user may later
            // make a different selection)
-            if (!destination) {
-                return [];
-            }
-            if (context.category && context.category !== "creation") {
+            if (key !== 'create' || !destination) {
                return [];
            }

--- a/platform/commonUI/browse/src/creation/CreateMenuController.js
+++ b/platform/commonUI/browse/src/creation/CreateMenuController.js
@@ -41,7 +41,7 @@ define(
            // Update the set of Create actions
            function refreshActions() {
                $scope.createActions = $scope.action ?
-                        $scope.action.getActions({ category: "creation" }) :
+                        $scope.action.getActions('create') :
                        [];
            }

--- a/platform/commonUI/browse/src/creation/CreationService.js
+++ b/platform/commonUI/browse/src/creation/CreationService.js
@@ -25,7 +25,7 @@
 * Module defining CreateService. Created by vwoeltje on 11/10/14.
 */
 define(
-    ["../../lib/uuid"],
+    ["uuid"],
    function (uuid) {
        "use strict";

--- a/platform/commonUI/browse/src/windowing/FullscreenAction.js
+++ b/platform/commonUI/browse/src/windowing/FullscreenAction.js
@@ -53,10 +53,9 @@ define(
            // based on whether or not we are currently
            // full screen.
            var metadata = Object.create(FullscreenAction);
-            metadata.key = "fullscreen";
            metadata.glyph = screenfull.isFullscreen ? "_" : "z";
            metadata.description = screenfull.isFullscreen ?
-                    EXIT_FULLSCREEN : ENTER_FULLSCREEN;
+                EXIT_FULLSCREEN : ENTER_FULLSCREEN;
            metadata.group = "windowing";
            metadata.context = this.context;
            return metadata;
--- a/platform/commonUI/edit/res/templates/edit-object.html
+++ b/platform/commonUI/edit/res/templates/edit-object.html
@@ -30,12 +30,11 @@
                         structure="toolbar.structure"
                         ng-model="toolbar.state">
            </mct-toolbar>
-            <div class='holder abs object-holder work-area'>
-                <mct-representation key="representation.selected.key"
-                                    toolbar="toolbar"
-                                    mct-object="representation.selected.key && domainObject">
-                </mct-representation>
-            </div>
+            <mct-representation key="representation.selected.key"
+                                toolbar="toolbar"
+                                mct-object="representation.selected.key && domainObject"
+                                class="holder abs object-holder work-area">
+            </mct-representation>
        </div>
        <mct-splitter></mct-splitter>
        <div
--- a/platform/commonUI/formats/bundle.json
+++ b/platform/commonUI/formats/bundle.json
@@ -0,0 +1,26 @@
+{
+    "name": "Time services bundle",
+    "description": "Defines interfaces and provides default implementations for handling different time systems.",
+    "extensions": {
+        "components": [
+            {
+                "provides": "formatService",
+                "type": "provider",
+                "implementation": "FormatProvider.js",
+                "depends": [ "formats[]", "$log" ]
+            }
+        ],
+        "formats": [
+            {
+                "key": "utc",
+                "implementation": "UTCTimeFormat.js"
+            }
+        ],
+        "constants": [
+            {
+                "key": "DEFAULT_TIME_FORMAT",
+                "value": "utc"
+            }
+        ]
+    }
+}
--- a/platform/commonUI/formats/src/FormatProvider.js
+++ b/platform/commonUI/formats/src/FormatProvider.js
@@ -0,0 +1,113 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define([
+
+], function (
+
+) {
+    "use strict";
+
+    /**
+     * An object used to convert between numeric values and text values,
+     * typically used to display these values to the user and to convert
+     * user input to a numeric format, particularly for time formats.
+     * @interface {Format}
+     */
+
+    /**
+     * Parse text (typically user input) to a numeric value.
+     * Behavior is undefined when the text cannot be parsed;
+     * `validate` should be called first if the text may be invalid.
+     * @method parse
+     * @memberof Format#
+     * @param {string} text the text to parse
+     * @returns {number} the parsed numeric value
+     */
+
+    /**
+     * Determine whether or not some text (typically user input) can
+     * be parsed to a numeric value by this format.
+     * @method validate
+     * @memberof Format#
+     * @param {string} text the text to parse
+     * @returns {boolean} true if the text can be parsed
+     */
+
+    /**
+     * Convert a numeric value to a text value for display using
+     * this format.
+     * @method format
+     * @memberof Format#
+     * @param {number} value the numeric value to format
+     * @returns {string} the text representation of the value
+     */
+
+    /**
+     * Provides access to `Format` objects which can be used to
+     * convert values between human-readable text and numeric
+     * representations.
+     * @interface FormatService
+     */
+
+    /**
+     * Look up a format by its symbolic identifier.
+     * @param {string} key the identifier for this format
+     * @returns {Format} the format, or `undefined` if no such format
+     *                   is known.
+     */
+
+    /**
+     * Provides formats from the `formats` extension category.
+     * @constructor
+     * @implements {FormatService}
+     * @memberof platform/commonUI/formats
+     * @param {Array.<function(new : Format)>} format constructors,
+     *        from the `formats` extension category.
+     */
+    function FormatProvider(formats, $log) {
+        var formatMap = {};
+
+        function addToMap(Format) {
+            var key = Format.key;
+            if (key && !formatMap[key]) {
+                formatMap[key] = new Format();
+            }
+        }
+
+        formats.forEach(addToMap);
+        this.formatMap = formatMap;
+        this.$log = $log;
+    }
+
+    FormatProvider.prototype.getFormat = function (key) {
+        var format = this.formatMap[key];
+        if (!format) {
+            this.$log.warn("No format found for " + key);
+        }
+        return format;
+    };
+
+    return FormatProvider;
+
+});
--- a/platform/commonUI/formats/src/UTCTimeFormat.js
+++ b/platform/commonUI/formats/src/UTCTimeFormat.js
@@ -0,0 +1,63 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define([
+    'moment'
+], function (
+    moment
+) {
+    "use strict";
+
+    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
+        DATE_FORMATS = [
+            DATE_FORMAT,
+            "YYYY-MM-DD HH:mm",
+            "YYYY-MM-DD"
+        ];
+
+
+    /**
+     * Formatter for UTC timestamps. Interprets numeric values as
+     * milliseconds since the start of 1970.
+     *
+     * @implements {Format}
+     * @constructor
+     * @memberof platform/commonUI/formats
+     */
+    function UTCTimeFormat() {
+    }
+
+    UTCTimeFormat.prototype.format = function (value) {
+        return moment.utc(value).format(DATE_FORMAT);
+    };
+
+    UTCTimeFormat.prototype.parse = function (text) {
+        return moment.utc(text, DATE_FORMATS).valueOf();
+    };
+
+    UTCTimeFormat.prototype.validate = function (text) {
+        return moment.utc(text, DATE_FORMATS).isValid();
+    };
+
+    return UTCTimeFormat;
+});
--- a/platform/commonUI/formats/test/FormatProviderSpec.js
+++ b/platform/commonUI/formats/test/FormatProviderSpec.js
@@ -0,0 +1,70 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../src/FormatProvider'],
+    function (FormatProvider) {
+        'use strict';
+
+        var KEYS = [ 'a', 'b', 'c' ];
+
+        describe("The FormatProvider", function () {
+            var mockFormats,
+                mockLog,
+                mockFormatInstances,
+                provider;
+
+            beforeEach(function () {
+                mockFormatInstances = KEYS.map(function (k) {
+                    return jasmine.createSpyObj(
+                        'format-' + k,
+                        [ 'parse', 'validate', 'format' ]
+                    );
+                });
+                mockLog = jasmine.createSpyObj('$log', ['error', 'warn']);
+                // Return constructors
+                mockFormats = KEYS.map(function (k, i) {
+                    function MockFormat() { return mockFormatInstances[i]; }
+                    MockFormat.key = k;
+                    return MockFormat;
+                });
+                provider = new FormatProvider(mockFormats, mockLog);
+            });
+
+            it("looks up formats by key", function () {
+                KEYS.forEach(function (k, i) {
+                    expect(provider.getFormat(k))
+                        .toEqual(mockFormatInstances[i]);
+                });
+            });
+
+            it("warns about unknown formats", function () {
+                provider.getFormat('a'); // known format
+                expect(mockLog.warn).not.toHaveBeenCalled();
+                provider.getFormat('some-unknown-format');
+                expect(mockLog.warn).toHaveBeenCalledWith(jasmine.any(String));
+            });
+
+        });
+    }
+);
--- a/platform/commonUI/formats/test/UTCTimeFormatSpec.js
+++ b/platform/commonUI/formats/test/UTCTimeFormatSpec.js
@@ -0,0 +1,56 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../src/UTCTimeFormat', 'moment'],
+    function (UTCTimeFormat, moment) {
+        'use strict';
+
+        describe("The UTCTimeFormat", function () {
+            var format;
+
+            beforeEach(function () {
+                format = new UTCTimeFormat();
+            });
+
+            it("formats UTC timestamps", function () {
+                var timestamp = 12345670000,
+                    formatted = format.format(timestamp);
+                expect(formatted).toEqual(jasmine.any(String));
+                expect(moment.utc(formatted).valueOf()).toEqual(timestamp);
+            });
+
+            it("validates time inputs", function () {
+                expect(format.validate("1977-05-25 11:21:22")).toBe(true);
+                expect(format.validate("garbage text")).toBe(false);
+            });
+
+            it("parses valid input", function () {
+                var text = "1977-05-25 11:21:22",
+                    parsed = format.parse(text);
+                expect(parsed).toEqual(jasmine.any(Number));
+                expect(parsed).toEqual(moment.utc(text).valueOf());
+            });
+        });
+    }
+);
--- a/platform/commonUI/formats/test/suite.json
+++ b/platform/commonUI/formats/test/suite.json
@@ -0,0 +1,4 @@
+[
+    "FormatProvider",
+    "UTCTimeFormat"
+]
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -8,6 +8,11 @@
                "key": "urlService",
                "implementation": "services/UrlService.js",
                "depends": [ "$location" ]
+            },
+            {
+                "key": "popupService",
+                "implementation": "services/PopupService.js",
+                "depends": [ "$document", "$window" ]
            }
        ],
        "runs": [
@@ -45,6 +50,21 @@
            }
        ],
        "controllers": [
+            {
+                "key": "TimeRangeController",
+                "implementation": "controllers/TimeRangeController.js",
+                "depends": [ "$scope", "formatService", "DEFAULT_TIME_FORMAT", "now" ]
+            },
+            {
+                "key": "DateTimePickerController",
+                "implementation": "controllers/DateTimePickerController.js",
+                "depends": [ "$scope", "now" ]
+            },
+            {
+                "key": "DateTimeFieldController",
+                "implementation": "controllers/DateTimeFieldController.js",
+                "depends": [ "$scope", "formatService", "DEFAULT_TIME_FORMAT" ]
+            },
            {
                "key": "TreeNodeController",
                "implementation": "controllers/TreeNodeController.js",
@@ -105,11 +125,21 @@
                "implementation": "directives/MCTDrag.js",
                "depends": [ "$document" ]
            },
+            {
+                "key": "mctClickElsewhere",
+                "implementation": "directives/MCTClickElsewhere.js",
+                "depends": [ "$document" ]
+            },
            {
                "key": "mctResize",
                "implementation": "directives/MCTResize.js",
                "depends": [ "$timeout" ]
            },
+            {
+                "key": "mctPopup",
+                "implementation": "directives/MCTPopup.js",
+                "depends": [ "$compile", "popupService" ]
+            },
            {
                "key": "mctScrollX",
                "implementation": "directives/MCTScroll.js",
@@ -213,6 +243,14 @@
            {
                "key": "selector",
                "templateUrl": "templates/controls/selector.html"
+            },
+            {
+                "key": "datetime-picker",
+                "templateUrl": "templates/controls/datetime-picker.html"
+            },
+            {
+                "key": "datetime-field",
+                "templateUrl": "templates/controls/datetime-field.html"
            }
        ],
        "licenses": [
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -45,6 +45,7 @@ $ueEditToolBarH: 25px;
 $ueBrowseLeftPaneW: 25%;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
+$ueTimeControlH: (33px, 20px, 20px);
 // Overlay
 $ovrTopBarH: 60px;
 $ovrFooterH: 30px;
@@ -105,3 +106,8 @@ $dirImgs: $dirCommonRes + 'images/';

 /************************** TIMINGS */
 $controlFadeMs: 100ms;
+
+/************************** LIMITS */
+$glyphLimit: '\e603';
+$glyphLimitUpr: '\0000eb';
+$glyphLimitLwr: '\0000ee';
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -40,11 +40,11 @@

 /************************** HTML ENTITIES */
 a {
-	color: #ccc;
+	color: $colorA;
 	cursor: pointer;
 	text-decoration: none;
 	&:hover {
-		color: #fff;
+		color: $colorAHov;
 	}
 }

@@ -125,6 +125,14 @@ mct-container {
 	text-align: center;
 }

+.scrolling {
+	overflow: auto;
+}
+
+.vscroll {
+	overflow-y: auto;
+}
+
 .no-margin {
 	margin: 0;
 }
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -29,6 +29,9 @@
 }

 .ui-symbol {
+	&.type-icon {
+		color: $colorObjHdrIc;
+	}
 	&.icon {
 		color: $colorKey;
 		&.alert {
@@ -41,6 +44,9 @@
 			font-size: 1.65em;
 		}
 	}
+	&.icon-calendar:after {
+		content: "\e605";
+	}
 }

 .bar .ui-symbol {
@@ -52,7 +58,7 @@
 	display: inline-block;
 }

-.s-menu .invoke-menu,
+.s-menu-btn .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }
--- a/platform/commonUI/general/res/sass/_limits.scss
+++ b/platform/commonUI/general/res/sass/_limits.scss
@@ -1,26 +1,39 @@
-@mixin limit($bg, $ic, $glyph) {
-	background: $bg !important;
-	//color: $fg !important;
-	&:before {
-		//@include pulse(1000ms);
-		color: $ic;
-		content: $glyph;
-	}
+@mixin limitGlyph($iconColor, $glyph: $glyphLimit) {
+    &:before {
+        color: $iconColor;
+        content: $glyph;
+        font-family: symbolsfont;
+        font-size: 0.8em;
+        display: inline;
+        margin-right: $interiorMarginSm;
+    }
+
 }

-[class*="s-limit"] {
-	//white-space: nowrap;
-	&:before {
-		display: inline-block;
-		font-family: symbolsfont;
-		font-size: 0.75em;
-		font-style: normal !important;
-		margin-right: $interiorMarginSm;
-		vertical-align: middle;
-	}
+.s-limit-red { background: $colorLimitRedBg !important; }
+.s-limit-yellow { background: $colorLimitYellowBg !important; }
+
+// Handle limit when applied to a tr
+tr[class*="s-limit"] {
+    &.s-limit-red td:first-child {
+        @include limitGlyph($colorLimitRedIc);
+    }
+    &.s-limit-yellow td:first-child {
+        @include limitGlyph($colorLimitYellowIc);
+    }
+    &.s-limit-upr td:first-child:before { content:$glyphLimitUpr; }
+    &.s-limit-lwr td:first-child:before { content:$glyphLimitLwr; }
 }

-.s-limit-upr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000eb"); };
-.s-limit-upr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ed"); };
-.s-limit-lwr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ec"); };
-.s-limit-lwr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000ee"); };
+// Handle limit when applied directly to a non-tr element
+// Assume this is applied to the element that displays the limit value
+:not(tr)[class*="s-limit"] {
+    &.s-limit-red {
+        @include limitGlyph($colorLimitRedIc);
+    }
+    &.s-limit-yellow {
+        @include limitGlyph($colorLimitYellowIc);
+    }
+    &.s-limit-upr:before { content:$glyphLimitUpr; }
+    &.s-limit-lwr:before { content:$glyphLimitLwr; }
+}
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -347,9 +347,10 @@
    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
    //position: relative;
    top: 50%;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
+	@include webkitProp(transform, translateY(-50%));
+    //-webkit-transform: translateY(-50%);
+    //-ms-transform: translateY(-50%);
+    //transform: translateY(-50%);
 }

@mixin verticalCenterBlock($holderH, $itemH) {
@@ -374,22 +375,8 @@
    overflow-y: $showBar;
 }

-@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
-    display: block;
-    position: absolute;
-    -webkit-animation: rotation .6s infinite linear;
-    -moz-animation: rotation .6s infinite linear;
-    -o-animation: rotation .6s infinite linear;
-    animation: rotation .6s infinite linear;
-    border-color: rgba($c, 0.25);
-    border-top-color: rgba($c, 1.0);
-    border-style: solid;
-    border-width: $b;
-    border-radius: 100%;
-}
-
@mixin test($c: #ffcc00, $a: 0.2) {
-    background-color: rgba($c, $a);
+    background-color: rgba($c, $a) !important;
 }

@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
--- a/platform/commonUI/general/res/sass/_views.scss
+++ b/platform/commonUI/general/res/sass/_views.scss
@@ -10,9 +10,6 @@
 	&.fixed {
 		font-size: 0.8em;
 	}
-	&.scrolling {
-		overflow: auto;
-	}
 	.controls,
 	label,
 	.inline-block {
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -205,7 +205,7 @@ label.checkbox.custom {
 	}
 }

-.s-menu label.checkbox.custom {
+.s-menu-btn label.checkbox.custom {
 	margin-left: 5px;
 }

@@ -295,49 +295,155 @@ label.checkbox.custom {

 .slider {
 	$knobH: 100%; //14px;
-	$knobW: 12px;
-	$slotH: 50%;
 	.slot {
 		//		@include border-radius($basicCr * .75);
-		@include sliderTrack();
-		height: $slotH;
+		//@include sliderTrack();
 		width: auto;
 		position: absolute;
-		top: ($knobH - $slotH) / 2;
+		top: 0;
 		right: 0;
-		bottom: auto;
+		bottom: 0;
 		left: 0;
 	}
 	.knob {
-		@include btnSubtle();
-		@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
-		cursor: ew-resize;
+		//@include btnSubtle();
+		//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorKnob;
+		&:hover {
+			background-color: $sliderColorKnobHov;
+		}
 		position: absolute;
 		height: $knobH;
-		width: $knobW;
+		width: $sliderKnobW;
 		top: 0;
 		auto: 0;
 		bottom: auto;
 		left: auto;
-		&:before {
-			top: 1px;
-			bottom: 3px;
-			left: ($knobW / 2) - 1;
-		}
-
+	}
+	.knob-l {
+		@include border-left-radius($sliderKnobW);
+		cursor: w-resize;
+	}
+	.knob-r {
+		@include border-right-radius($sliderKnobW);
+		cursor: e-resize;
 	}
 	.range {
-		background: rgba($colorKey, 0.6);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorRange;
 		cursor: ew-resize;
 		position: absolute;
-		top: 0;
+		top: 0; //$tbOffset;
 		right: auto;
 		bottom: 0;
 		left: auto;
 		height: auto;
 		width: auto;
 		&:hover {
-			background: rgba($colorKey, 0.7);
+			background-color: $sliderColorRangeHov;
+		}
+	}
+}
+
+/******************************************************** DATETIME PICKER */
+.l-datetime-picker {
+	$r1H: 15px;
+	@include user-select(none);
+	font-size: 0.8rem;
+	padding: $interiorMarginLg !important;
+	width: 230px;
+	.l-month-year-pager {
+		$pagerW: 20px;
+		//@include test();
+		//font-size: 0.8rem;
+		height: $r1H;
+		margin-bottom: $interiorMargin;
+		position: relative;
+		.pager,
+		.val {
+			//@include test(red);
+			@extend .abs;
+		}
+		.pager {
+			width: $pagerW;
+			@extend .ui-symbol;
+			&.prev {
+				right: auto;
+				&:before {
+					content: "\3c";
+				}
+			}
+			&.next {
+				left: auto;
+				text-align: right;
+				&:before {
+					content: "\3e";
+				}
+			}
+		}
+		.val {
+			text-align: center;
+			left: $pagerW + $interiorMargin;
+			right: $pagerW + $interiorMargin;
+		}
+	}
+	.l-calendar,
+	.l-time-selects {
+		border-top: 1px solid $colorInteriorBorder
+	}
+	.l-time-selects {
+		line-height: $formInputH;
+	}
+}
+
+/******************************************************** CALENDAR */
+.l-calendar {
+	$colorMuted: pushBack($colorMenuFg, 30%);
+	ul.l-cal-row {
+		@include display-flex;
+		@include flex-flow(row nowrap);
+		margin-top: 1px;
+		&:first-child {
+			margin-top: 0;
+		}
+		li {
+			@include flex(1 0);
+			//@include test();
+			margin-left: 1px;
+			padding: $interiorMargin;
+			text-align: center;
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+		&.l-header li {
+			color: $colorMuted;
+		}
+		&.l-body li {
+			@include trans-prop-nice(background-color, .25s);
+			cursor: pointer;
+			&.in-month {
+				background-color: $colorCalCellInMonthBg;
+			}
+			.sub {
+				color: $colorMuted;
+				font-size: 0.8em;
+			}
+			&.selected {
+				background: $colorCalCellSelectedBg;
+				color: $colorCalCellSelectedFg;
+				.sub {
+					color: inherit;
+				}
+			}
+			&:hover {
+				background-color: $colorCalCellHovBg;
+				color: $colorCalCellHovFg;
+				.sub {
+					color: inherit;
+				}
+			}
 		}
 	}
 }
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -20,7 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /******************************************************** MENU BUTTONS */
-.s-menu {
+.s-menu-btn {
 	// Formerly .btn-menu
 	@extend .s-btn;
 	span.l-click-area {
@@ -62,186 +62,192 @@

 /******************************************************** MENUS THEMSELVES */
 .menu-element {
-	$bg: $colorMenuBg;
-	$fg: $colorMenuFg;
-	$ic: $colorMenuIc;
 	cursor: pointer;
 	position: relative;
-	.menu {
-		@include border-radius($basicCr);
-		@include containerSubtle($bg, $fg);
-		@include boxShdw($shdwMenu);
-		@include txtShdw($shdwMenuText);
-		display: block; // set to block via jQuery
-		padding: $interiorMarginSm 0;
-		position: absolute;
-		z-index: 10;
-		ul {
-			@include menuUlReset();
-			li {
-				@include box-sizing(border-box);
-				border-top: 1px solid lighten($bg, 20%);
-				color: pullForward($bg, 60%);
-				line-height: $menuLineH;
-				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
-				position: relative;
-				white-space: nowrap;
-				&:first-child {
-					border: none;
-				}
-				&:hover {
-					background: $colorMenuHovBg;
-					color: $colorMenuHovFg;
-					.icon {
-						color: $colorMenuHovIc;
-					}
-				}
-				.type-icon {
-					left: $interiorMargin * 2;
-				}
-			}
-		}
-	}
+}

-	.menu,
-	.context-menu,
-	.super-menu {
-		pointer-events: auto;
-		ul li {
-			//padding-left: 25px;
-			a {
-				color: $fg;
-			}
-			.icon {
-				color: $ic;
-			}
-			.type-icon {
-				left: $interiorMargin;
-			}
-			&:hover .icon {
-				//color: lighten($ic, 5%);
-			}
-		}
-	}
+.s-menu {
+	@include border-radius($basicCr);
+	@include containerSubtle($colorMenuBg, $colorMenuFg);
+	@include boxShdw($shdwMenu);
+	@include txtShdw($shdwMenuText);
+	padding: $interiorMarginSm 0;
+}

-	.checkbox-menu {
-		// Used in search dropdown in tree
-		@extend .context-menu;
-		ul li {
-			padding-left: 50px;
-			.checkbox {
-				$d: 0.7rem;
-				position: absolute;
-				left: $interiorMargin;
-				top: ($menuLineH - $d) / 1.5;
-				em {
-					height: $d;
-					width: $d;
-					&:before {
-						font-size: 7px !important;// $d/2;
-						height: $d;
-						width: $d;
-						line-height: $d;
-					}
-				}
-			}
-			.type-icon {
-				left: 25px;
-			}
-		}
-	}
-
-	.super-menu {
-		$w: 500px;
-		$h: $w - 20;
-		$plw: 50%;
-		$prw: 50%;
-		display: block;
-		width: $w;
-		height: $h;
-		.contents {
-			@include absPosDefault($interiorMargin);
-		}
-		.pane {
+.menu {
+	@extend .s-menu;
+	display: block;
+	position: absolute;
+	z-index: 10;
+	ul {
+		@include menuUlReset();
+		li {
 			@include box-sizing(border-box);
-			&.left {
-				//@include test();
-				border-right: 1px solid pullForward($colorMenuBg, 10%);
-				left: 0;
-				padding-right: $interiorMargin;
-				right: auto;
-				width: $plw;
-				overflow-x: hidden;
-				overflow-y: auto;
-				ul {
-					li {
-						@include border-radius($controlCr);
-						padding-left: 30px;
-						border-top: none;
-					}
+			border-top: 1px solid lighten($colorMenuBg, 20%);
+			color: pullForward($colorMenuBg, 60%);
+			line-height: $menuLineH;
+			padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+			position: relative;
+			white-space: nowrap;
+			&:first-child {
+				border: none;
+			}
+			&:hover {
+				background: $colorMenuHovBg;
+				color: $colorMenuHovFg;
+				.icon {
+					color: $colorMenuHovIc;
 				}
 			}
-			&.right {
-				//@include test(red);
-				left: auto;
-				right: 0;
-				padding: $interiorMargin * 5;
-				width: $prw;
+			.type-icon {
+				left: $interiorMargin * 2;
 			}
 		}
-		.menu-item-description {
-			.desc-area {
-				&.icon {
-					$h: 150px;
-					color: $colorCreateMenuLgIcon;
-					position: relative;
-					font-size: 8em;
-					left: 0;
-					height: $h;
-					line-height: $h;
-					margin-bottom: $interiorMargin * 5;
-					text-align: center;
-				}
-				&.title {
-					color: $colorCreateMenuText;
-					font-size: 1.2em;
-					margin-bottom: 0.5em;
-				}
-				&.description {
-					//color: lighten($bg, 30%);
-					color: $colorCreateMenuText;
-					font-size: 0.8em;
-					line-height: 1.5em;
-				}
-			}
-		}
-	}
-	.context-menu {
-		font-size: 0.80rem;
 	}
 }

-.context-menu-holder {
-	pointer-events: none;
+.menu,
+.context-menu,
+.super-menu {
+	pointer-events: auto;
+	ul li {
+		//padding-left: 25px;
+		a {
+			color: $colorMenuFg;
+		}
+		.icon {
+			color: $colorMenuIc;
+		}
+		.type-icon {
+			left: $interiorMargin;
+		}
+		&:hover .icon {
+			//color: lighten($colorMenuIc, 5%);
+		}
+	}
+}
+
+.checkbox-menu {
+	// Used in search dropdown in tree
+	@extend .context-menu;
+	ul li {
+		padding-left: 50px;
+		.checkbox {
+			$d: 0.7rem;
+			position: absolute;
+			left: $interiorMargin;
+			top: ($menuLineH - $d) / 1.5;
+			em {
+				height: $d;
+				width: $d;
+				&:before {
+					font-size: 7px !important;// $d/2;
+					height: $d;
+					width: $d;
+					line-height: $d;
+				}
+			}
+		}
+		.type-icon {
+			left: 25px;
+		}
+	}
+}
+
+.super-menu {
+	$w: 500px;
+	$h: $w - 20;
+	$plw: 50%;
+	$prw: 50%;
+	display: block;
+	width: $w;
+	height: $h;
+	.contents {
+		@include absPosDefault($interiorMargin);
+	}
+	.pane {
+		@include box-sizing(border-box);
+		&.left {
+			//@include test();
+			border-right: 1px solid pullForward($colorMenuBg, 10%);
+			left: 0;
+			padding-right: $interiorMargin;
+			right: auto;
+			width: $plw;
+			overflow-x: hidden;
+			overflow-y: auto;
+			ul {
+				li {
+					@include border-radius($controlCr);
+					padding-left: 30px;
+					border-top: none;
+				}
+			}
+		}
+		&.right {
+			//@include test(red);
+			left: auto;
+			right: 0;
+			padding: $interiorMargin * 5;
+			width: $prw;
+		}
+	}
+	.menu-item-description {
+		.desc-area {
+			&.icon {
+				$h: 150px;
+				color: $colorCreateMenuLgIcon;
+				position: relative;
+				font-size: 8em;
+				left: 0;
+				height: $h;
+				line-height: $h;
+				margin-bottom: $interiorMargin * 5;
+				text-align: center;
+			}
+			&.title {
+				color: $colorCreateMenuText;
+				font-size: 1.2em;
+				margin-bottom: 0.5em;
+			}
+			&.description {
+				//color: lighten($colorMenuBg, 30%);
+				color: $colorCreateMenuText;
+				font-size: 0.8em;
+				line-height: 1.5em;
+			}
+		}
+	}
+}
+.context-menu {
+	font-size: 0.80rem;
+}
+
+.context-menu-holder,
+.menu-holder {
 	position: absolute;
-	height: 200px;
-	width: 170px;
 	z-index: 70;
 	.context-menu-wrapper {
 		position: absolute;
 		height: 100%;
 		width: 100%;
-		.context-menu {
-		}
 	}
-	&.go-left .context-menu {
+	&.go-left .context-menu,
+	&.go-left .menu {
 		right: 0;
 	}
-	&.go-up .context-menu {
+	&.go-up .context-menu,
+	&.go-up .menu {
 		bottom: 0;
 	}
 }

+.context-menu-holder {
+	pointer-events: none;
+	height: 200px;
+	width: 170px;
+}
+
 .btn-bar.right .menu,
 .menus-to-left .menu {
 	left: auto;
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -1,72 +1,155 @@
-.l-time-controller {
-	$inputTxtW: 90px;
-	$knobW: 9px;
-	$r1H: 20px;
-	$r2H: 30px;
-	$r3H: 10px;
+@mixin toiLineHovEffects() {
+	//@include pulse(.25s);
+	&:before,
+	&:after {
+		background-color: $timeControllerToiLineColorHov;
+	}
+}

-	position: relative;
-	margin: $interiorMarginLg 0;
-	min-width: 400px;
+.l-time-controller-visible {
+
+}
+
+mct-include.l-time-controller {
+	$minW: 500px;
+	$knobHOffset: 0px;
+	$knobM: ($sliderKnobW + $knobHOffset) * -1;
+	$rangeValPad: $interiorMargin;
+	$rangeValOffset: $sliderKnobW;
+	//$knobCr: $sliderKnobW;
+	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
+	$r1H: nth($ueTimeControlH,1);
+	$r2H: nth($ueTimeControlH,2);
+	$r3H: nth($ueTimeControlH,3);
+
+    @include absPosDefault();
+    //@include test();
+    display: block;
+    top: auto;
+	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
+    min-width: $minW;
+    font-size: 0.8rem;

 	.l-time-range-inputs-holder,
 	.l-time-range-slider {
-		font-size: 0.8em;
+		//font-size: 0.8em;
 	}

 	.l-time-range-inputs-holder,
 	.l-time-range-slider-holder,
 	.l-time-range-ticks-holder
 	{
-		margin-bottom: $interiorMargin;
-		position: relative;
+		//@include test();
+		@include absPosDefault(0, visible);
+		@include box-sizing(border-box);
+		top: auto;
 	}
 	.l-time-range-slider,
 	.l-time-range-ticks {
 		//@include test(red, 0.1);
 		@include absPosDefault(0, visible);
+		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
 	}

 	.l-time-range-inputs-holder {
-		height: $r1H;
-	}
-
-	.l-time-range-slider,
-	.l-time-range-ticks {
-		left: $inputTxtW; right: $inputTxtW;
-
+		//@include test(red);
+		height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
+		padding-top: $interiorMargin;
+		border-top: 1px solid $colorInteriorBorder;
+		.type-icon {
+			font-size: 120%;
+			vertical-align: middle;
+		}
+		.l-time-range-input,
+		.l-time-range-inputs-elem {
+			margin-right: $interiorMargin;
+			.lbl {
+				color: $colorPlotLabelFg;
+			}
+			.ui-symbol.icon {
+				font-size: 11px;
+				width: 11px;
+			}
+		}
 	}

 	.l-time-range-slider-holder {
-		height: $r2H;
+		//@include test(green);
+		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
 		.range-holder {
 			@include box-shadow(none);
 			background: none;
 			border: none;
-			height: 75%;
+			.range {
+				.toi-line {
+					$myC: $timeControllerToiLineColor;
+					$myW: 8px;
+					@include transform(translateX(50%));
+					position: absolute;
+					//@include test();
+					top: 0; right: 0; bottom: 0px; left: auto;
+					width: $myW;
+					height: auto;
+					z-index: 2;
+					&:before,
+					&:after {
+						background-color: $myC;
+						content: "";
+						position: absolute;
+					}
+					&:before {
+						// Vert line
+						top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
+						width: 2px;
+						//top: 0; right: 3px; bottom: 0; left: 3px;
+					}
+					&:after {
+						// Circle element
+						@include border-radius($myW);
+						@include transform(translateY(-50%));
+						top: 50%; right: 0; bottom: auto; left: 0;
+						width: auto;
+						height: $myW;
+					}
+				}
+				&:hover .toi-line {
+					@include toiLineHovEffects;
+				}
+			}
+		}
+		&:not(:active) {
+			//@include test(#ff00cc);
+			.knob,
+			.range {
+				@include transition-property(left, right);
+				@include transition-duration(500ms);
+				@include transition-timing-function(ease-in-out);
+			}
 		}
 	}

 	.l-time-range-ticks-holder {
 		height: $r3H;
 		.l-time-range-ticks {
-			border-top: 1px solid $colorInteriorBorder;
+			border-top: 1px solid $colorTick;
 			.tick {
-				background-color: $colorInteriorBorder;
+				background-color: $colorTick;
 				border:none;
+				height: 5px;
 				width: 1px;
 				margin-left: -1px;
+				position: absolute;
 				&:first-child {
 					margin-left: 0;
 				}
 				.l-time-range-tick-label {
-					color: lighten($colorInteriorBorder, 20%);
-					font-size: 0.7em;
+					@include webkitProp(transform, translateX(-50%));
+					color: $colorPlotLabelFg;
+					display: inline-block;
+					font-size: 0.9em;
 					position: absolute;
-					margin-left: -0.5 * $tickLblW;
-					text-align: center;
-					top: $r3H;
-					width: $tickLblW;
+					top: 8px;
+					white-space: nowrap;
 					z-index: 2;
 				}
 			}
@@ -74,31 +157,47 @@
 	}

 	.knob {
-		width: $knobW;
+		z-index: 2;
 		.range-value {
-			$w: 75px;
-			//@include test();
+			//@include test($sliderColorRange);
+			@include trans-prop-nice-fade(.25s);
+			padding: 0 $rangeValOffset;
 			position: absolute;
-			top: 50%;
-			margin-top: -7px; // Label is 13px high
+			height: $r2H;
+			line-height: $r2H;
 			white-space: nowrap;
-			width: $w;
 		}
 		&:hover .range-value {
-			color: $colorKey;
+			color: $sliderColorKnobHov;
 		}
 		&.knob-l {
-			margin-left: $knobW / -2;
+			//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
+			margin-left: $knobM;
 			.range-value {
 				text-align: right;
-				right: $knobW + $interiorMargin;
+				right: $rangeValOffset;
 			}
 		}
 		&.knob-r {
-			margin-right: $knobW / -2;
+			//@include border-bottom-right-radius($knobCr);
+			margin-right: $knobM;
 			.range-value {
-				left: $knobW + $interiorMargin;
+				left: $rangeValOffset;
+			}
+			&:hover + .range-holder .range .toi-line {
+				@include toiLineHovEffects;
 			}
 		}
 	}
+}
+
+//.slot.range-holder {
+//	background-color: $sliderColorRangeHolder;
+//}
+
+.s-time-range-val {
+	//@include test();
+	@include border-radius($controlCr);
+	background-color: $colorInputBg;
+	padding: 1px 1px 0 $interiorMargin;
 }
--- a/platform/commonUI/general/res/sass/forms/_datetime.scss
+++ b/platform/commonUI/general/res/sass/forms/_datetime.scss
@@ -19,39 +19,44 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
+@mixin complexFieldHolder($myW) {
+	width: $myW + $interiorMargin;
+	input[type="text"] {
+		width: $myW;
+	}
+}
+
 .complex.datetime {
 	span {
 		display: inline-block;
 		margin-right: $interiorMargin;
 	}
-	
+
+/*
 	.field-hints,
 	.fields {
 	}
+
 	
 	.field-hints {
-		
+
 	}
-	
+	*/
+
 	.fields {
 		margin-top: $interiorMarginSm 0;
 		padding: $interiorMarginSm 0;
 	}
 	
 	.date {
-		$myW: 80px;
-		width: $myW + $interiorMargin;
-		input {
-			width: $myW;
-		}
-		
+		@include complexFieldHolder(80px);
+	}
+
+	.time.md {
+		@include complexFieldHolder(60px);
 	}
 	
 	.time.sm {
-		$myW: 40px;
-		width: $myW + $interiorMargin;
-		input {
-			width: $myW;
-		}
+		@include complexFieldHolder(40px);
 	}
 }
--- a/platform/commonUI/general/res/sass/forms/_selects.scss
+++ b/platform/commonUI/general/res/sass/forms/_selects.scss
@@ -21,10 +21,13 @@
 *****************************************************************************/
 .select {
 	@include btnSubtle($colorSelectBg);
-	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
+    @if $shdwBtns != none {
+	    margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
+    }
 	padding: 0 $interiorMargin;
    overflow: hidden;
 	position: relative;
+    line-height: $formInputH;
 	select {
 		@include appearance(none);
 		@include box-sizing(border-box);
@@ -40,11 +43,8 @@
 	}
 	&:after {
 		@include contextArrow();
+		pointer-events: none;
 		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
-		//content:"v";
-		//display: block;
-		//font-family: 'symbolsfont';
-		//pointer-events: none;
 		position: absolute;
 		right: $interiorMargin; top: 0;
 	}
--- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
+++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
@@ -19,24 +19,45 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-@-webkit-keyframes rotation {
-	from {-webkit-transform: rotate(0deg);}
-	to {-webkit-transform: rotate(359deg);}
+@include keyframes(rotation) {
+    0%   { transform: rotate(0deg); }
+    100% { transform: rotate(359deg); }
 }

-@-moz-keyframes rotation {
-	from {-moz-transform: rotate(0deg);}
-	to {-moz-transform: rotate(359deg);}
+@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
+    @include keyframes(rotateCentered) {
+         0%   { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
+         100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); }
+     }
+    @include animation-name(rotateCentered);
+    @include animation-duration(0.5s);
+    @include animation-iteration-count(infinite);
+    @include animation-timing-function(linear);
+    border-color: rgba($c, 0.25);
+    border-top-color: rgba($c, 1.0);
+    border-style: solid;
+    border-width: 5px;
+    @include border-radius(100%);
+    @include box-sizing(border-box);
+    display: block;
+    position: absolute;
+    height: 0; width: 0;
+    padding: 7%;
+    left: 50%; top: 50%;
 }

-@-o-keyframes rotation {
-	from {-o-transform: rotate(0deg);}
-	to {-o-transform: rotate(359deg);}
-}
-
-@keyframes rotation {
-	from {transform: rotate(0deg);}
-	to {transform: rotate(359deg);}
+@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
+	display: block;
+	position: absolute;
+	-webkit-animation: rotation .6s infinite linear;
+	-moz-animation: rotation .6s infinite linear;
+	-o-animation: rotation .6s infinite linear;
+	animation: rotation .6s infinite linear;
+	border-color: rgba($c, 0.25);
+	border-top-color: rgba($c, 1.0);
+	border-style: solid;
+	border-width: $b;
+	@include border-radius(100%);
 }

 .t-wait-spinner,
@@ -96,4 +117,28 @@
 	margin-top: 0 !important;
 	padding: 0 !important;
 	top: 0; left: 0;
+}
+
+.loading {
+	// Can be applied to any block element with height and width
+    pointer-events: none;
+    &:before,
+    &:after {
+        content: '';
+    }
+	&:before {
+        @include wait-spinner2(5px, $colorLoadingFg);
+        z-index: 10;
+	}
+    &:after {
+        @include absPosDefault();
+        background: $colorLoadingBg;
+        display: block;
+        z-index: 9;
+    }
+    &.tree-item:before {
+        padding: $menuLineH / 4;
+        border-width: 2px;
+    }
+
 }
--- a/platform/commonUI/general/res/sass/lists/_tabular.scss
+++ b/platform/commonUI/general/res/sass/lists/_tabular.scss
@@ -40,6 +40,11 @@ table {
 	thead, .thead {
 		border-bottom: 1px solid $colorTabHeaderBorder;
 	}
+
+	&:not(.fixed-header) tr th {
+		background-color: $colorTabHeaderBg;
+	}
+
 	tbody, .tbody {
 		display: table-row-group;
 		tr, .tr {
@@ -64,7 +69,6 @@ table {
 			display: table-cell;
 		}
 		th, .th {
-			background-color: $colorTabHeaderBg;
 			border-left: 1px solid $colorTabHeaderBorder;
 			color: $colorTabHeaderFg;
 			padding: $tabularTdPadLR $tabularTdPadLR;
@@ -143,7 +147,7 @@ table {
 				position: absolute;
 				width: 100%;
 				height: $tabularHeaderH;
-				background: rgba(#fff, 0.15);
+				background-color: $colorTabHeaderBg;
 			}
 		}
 		tbody, .tbody {
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -89,7 +89,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	.gl-plot-label,
 	.l-plot-label {
 		//		@include test(yellow);
-		color: lighten($colorBodyFg, 20%);
+		color: $colorPlotLabelFg;
 		position: absolute;
 		text-align: center;
 //		text-transform: uppercase;
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -214,8 +214,6 @@

 	.search-scroll {
 		order: 3;
-
-		//padding-right: $rightPadding;
 		margin-top: 4px;

 		// Adjustable scrolling size
@@ -227,28 +225,6 @@

 		.load-icon {
 			position: relative;
-			&.loading {
-				pointer-events: none;
-				margin-left: $leftMargin;
-
-				.title-label {
-					// Text styling
-					font-style: italic;
-					font-size: .9em;
-					opacity: 0.5;
-
-					// Text positioning
-					margin-left: $iconWidth + $leftMargin;
-					line-height: 24px;
-				}
-				.wait-spinner {
-					margin-left: $leftMargin;
-				}
-			}
-
-			&:not(.loading) {
-				cursor: pointer;
-			}
 		}

 		.load-more-button {
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -83,7 +83,6 @@ ul.tree {
 			.icon {
 				&.l-icon-link,
 				&.l-icon-alert {
-					//@include txtShdw($shdwItemTreeIcon);
 					position: absolute;
 					z-index: 2;
 				}
@@ -105,26 +104,12 @@ ul.tree {
 			@include absPosDefault();
 			display: block;
 			left: $runningItemW + ($interiorMargin * 3);
-			//right: $treeContextTriggerW + $interiorMargin;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
 	}

-	&.loading {
-		pointer-events: none;
-		.label {
-			opacity: 0.5;
-			.title-label {
-				font-style: italic;
-			}
-		}
-		.wait-spinner {
-			margin-left: 14px;
-		}
-	}
-
 	&.selected {
 		background: $colorItemTreeSelectedBg;
 		color: $colorItemTreeSelectedFg;
@@ -142,9 +127,6 @@ ul.tree {
 			&:hover {
 				background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
 				color: pullForward($colorBodyFg, 20%);
-				//.context-trigger {
-				//	display: block;
-				//}
 				.icon {
 					color: $colorItemTreeIconHover;
 				}
@@ -158,7 +140,6 @@ ul.tree {

 	.context-trigger {
 		$h: 0.9rem;
-		//display: none;
 		top: -1px;
 		position: absolute;
 		right: $interiorMarginSm;
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -47,7 +47,7 @@
 	}
 	&.frame-template {
 		.s-btn,
-		.s-menu {
+		.s-menu-btn {
 			height: $ohH;
 			line-height: $ohH;
 			padding: 0 $interiorMargin;
@@ -56,7 +56,7 @@
 			}
 		}

-		.s-menu:after {
+		.s-menu-btn:after {
 			font-size: 8px;
 		}

--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -30,21 +30,21 @@
 }

 .holder-all {
-	$myM: 0; // $interiorMarginSm;
-	top: $myM;
-	right: $myM;
-	bottom: $myM;
-	left: $myM;
+    $myM: 0; // $interiorMarginSm;
+    top: $myM;
+    right: $myM;
+    bottom: $myM;
+    left: $myM;
 }

 .browse-area,
 .edit-area,
 .editor {
-	position: absolute;
+    position: absolute;
 }

 .editor {
-	@include border-radius($basicCr * 1.5);
+    @include border-radius($basicCr * 1.5);
 }

 .contents {
@@ -68,8 +68,8 @@
        margin-right: $interiorMargin;
    }
    &.abs {
-	    text-wrap: none;
-	    white-space: nowrap;
+        text-wrap: none;
+        white-space: nowrap;
        &.left,
        .left {
            width: 45%;
@@ -95,51 +95,51 @@
 }

 .user-environ {
-	.browse-area,
-	.edit-area,
-	.editor {
-		top: $bodyMargin + $ueTopBarH + ($interiorMargin);
-		right: $bodyMargin;
-		bottom: $ueFooterH + $bodyMargin;
-		left: $bodyMargin;
-	}
+    .browse-area,
+    .edit-area,
+    .editor {
+        top: $bodyMargin + $ueTopBarH + ($interiorMargin);
+        right: $bodyMargin;
+        bottom: $ueFooterH + $bodyMargin;
+        left: $bodyMargin;
+    }

-	.browse-area,
-	.edit-area {
-		> .contents {
-			left: 0;
-			right: 0;
-		}
-	}
+    .browse-area,
+    .edit-area {
+        > .contents {
+            left: 0;
+            right: 0;
+        }
+    }

-	.edit-area {
-		$tbH: $btnToolbarH + $interiorMargin;
-		top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
-		.tool-bar {
-			bottom: auto;
-			height: $tbH;
-			line-height: $btnToolbarH;
-		}
-		.work-area {
-			top: $tbH + $interiorMargin * 2;
-		}
-	}
+    .edit-area {
+        $tbH: $btnToolbarH + $interiorMargin;
+        top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
+        .tool-bar {
+            bottom: auto;
+            height: $tbH;
+            line-height: $btnToolbarH;
+        }
+        .work-area {
+            top: $tbH + $interiorMargin * 2;
+        }
+    }

-	.ue-bottom-bar {
+    .ue-bottom-bar {
        //@include absPosDefault($bodyMargin);
-		@include absPosDefault(0);// New status bar design
-		top: auto;
-		height: $ueFooterH;
-		.status-holder {
-			//right: $ueAppLogoW + $bodyMargin; New status bar design
-			z-index: 1;
-		}
-		.app-logo {
-			left: auto;
-			width: $ueAppLogoW;
-			z-index: 2;
-		}
-	}
+        @include absPosDefault(0); // New status bar design
+        top: auto;
+        height: $ueFooterH;
+        .status-holder {
+            //right: $ueAppLogoW + $bodyMargin; New status bar design
+            z-index: 1;
+        }
+        .app-logo {
+            left: auto;
+            width: $ueAppLogoW;
+            z-index: 2;
+        }
+    }
 }

 .cols {
@@ -225,89 +225,89 @@
    }
 }

-
-
 .pane {
    position: absolute;
    &.treeview.left {
-	    .create-btn-holder {
-		    bottom: auto; top: 0;
-		    height: $ueTopBarH;
-		    .wrapper.menu-element {
-			    position: absolute;
-			    bottom: $interiorMargin;
-		    }
-	    }
-	    .search-holder {
-		    top: $ueTopBarH + $interiorMarginLg;
-	    }
-	    .tree-holder {
-		    overflow: auto;
-			top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
-	    }
+        .create-btn-holder {
+            bottom: auto;
+            top: 0;
+            height: $ueTopBarH;
+            .wrapper.menu-element {
+                position: absolute;
+                bottom: $interiorMargin;
+            }
+        }
+        .search-holder {
+            top: $ueTopBarH + $interiorMarginLg;
+        }
+        .tree-holder {
+            overflow: auto;
+            top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
+        }
    }
    &.items {
        .object-browse-bar {
-	        .left.abs,
-	        .right.abs {
-		        top: auto;
-	        }
-            //.left.abs {
-            //    @include tmpBorder(green);
-            //}
-            //.right.abs {
-            //    @include tmpBorder(red);
-            //}
-        }
-        .object-holder {
-            top: $ueTopBarH + $interiorMarginLg;
+            .left.abs,
+            .right.abs {
+                top: auto;
+            }
        }
    }
-	.object-holder {
-		overflow: auto;
-	}
 }

 .split-layout {
-	&.horizontal {
-		// Slides up and down
-		>.pane {
-//			@include test();
-			margin-top: $interiorMargin;
-			&:first-child {
-				margin-top: 0;
-			}
-		}
-	}
-	&.vertical {
-		// Slides left and right
-		>.pane {
-//            @include test();
-			margin-left: $interiorMargin;
-			>.holder {
-				left: 0;
-				right: 0;
-			}
-			&:first-child {
-				margin-left: 0;
-				.holder {
-					right: $interiorMarginSm;
-				}
-			}
-		}
+    &.horizontal {
+        // Slides up and down
+        > .pane {
+            //			@include test();
+            margin-top: $interiorMargin;
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+    &.vertical {
+        // Slides left and right
+        > .pane {
+            //            @include test();
+            margin-left: $interiorMargin;
+            > .holder {
+                left: 0;
+                right: 0;
+            }
+            &:first-child {
+                margin-left: 0;
+                .holder {
+                    right: $interiorMarginSm;
+                }
+            }
+        }

-	}
+    }
+}
+
+.object-holder {
+    overflow: hidden; // Contained objects need to handle their own overflow now
+    top: $ueTopBarH + $interiorMarginLg;
+    > ng-include {
+        @include absPosDefault(0, auto);
+    }
+    &.l-controls-visible {
+        &.l-time-controller-visible {
+            bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
+        }
+    }
 }

 .object-browse-bar .s-btn,
 .top-bar .buttons-main .s-btn,
-.top-bar .s-menu,
+.top-bar .s-menu-btn,
 .tool-bar .s-btn,
-.tool-bar .s-menu {
-	$h: $btnToolbarH;
-	height: $h;
-	line-height: $h;
-	vertical-align: top;
+.tool-bar .s-menu-btn {
+    $h: $btnToolbarH;
+    height: $h;
+    line-height: $h;
+    vertical-align: top;
 }

 .object-browse-bar,
@@ -318,33 +318,29 @@
 }

 .object-browse-bar {
-	//@include test(blue);
-	@include absPosDefault(0, visible);
-	@include box-sizing(border-box);
-	height: $ueTopBarH;
-	line-height: $ueTopBarH;
-	white-space: nowrap;
+    //@include test(blue);
+    @include absPosDefault(0, visible);
+    @include box-sizing(border-box);
+    height: $ueTopBarH;
+    line-height: $ueTopBarH;
+    white-space: nowrap;

-	.left {
-		padding-right: $interiorMarginLg * 2;
-		.l-back {
-			display: inline-block;
-			float: left;
-			margin-right: $interiorMarginLg;
-		}
-	}
+    .left {
+        padding-right: $interiorMarginLg * 2;
+        .l-back {
+            display: inline-block;
+            float: left;
+            margin-right: $interiorMarginLg;
+        }
+    }
 }

 .l-flex {
-	@include webkitVal('display', 'flex');
-	@include webkitProp('flex-flow', 'row nowrap');
-	.left {
-		//@include test(red);
-		@include webkitProp(flex, '1 1 0');
-		padding-right: $interiorMarginLg;
-	}
-}
-
-.vscroll {
-    overflow-y: auto;
-}
+    @include webkitVal('display', 'flex');
+    @include webkitProp('flex-flow', 'row nowrap');
+    .left {
+        //@include test(red);
+        @include webkitProp(flex, '1 1 0');
+        padding-right: $interiorMarginLg;
+    }
+}
--- a/platform/commonUI/general/res/templates/controls/datetime-field.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-field.html
@@ -0,0 +1,20 @@
+<span class="s-btn"
+      ng-controller="DateTimeFieldController">
+    <input type="text"
+           ng-model="textValue"
+           ng-class="{ error: textInvalid }">
+    </input>
+    <a class="ui-symbol icon icon-calendar"
+       ng-if="structure.format === 'utc' || !structure.format"
+       ng-click="pickerActive = !pickerActive">
+    </a>
+    <mct-popup ng-if="pickerActive">
+        <div mct-click-elsewhere="pickerActive = false">
+            <mct-control key="'datetime-picker'"
+                         ng-model="ngModel"
+                         field="field"
+                         options="{ hours: true }">
+            </mct-control>
+        </div>
+    </mct-popup>
+</span>
--- a/platform/commonUI/general/res/templates/controls/datetime-picker.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-picker.html
@@ -0,0 +1,66 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<div ng-controller="DateTimePickerController" class="l-datetime-picker s-datetime-picker s-menu">
+	<div class="holder">
+		<div class="l-month-year-pager">
+			<a class="pager prev" ng-click="changeMonth(-1)"></a>
+			<span class="val">{{month}} {{year}}</span>
+			<a class="pager next" ng-click="changeMonth(1)"></a>
+		</div>
+		<div class="l-calendar">
+			<ul class="l-cal-row l-header">
+				<li ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">{{day}}</li>
+			</ul>
+			<ul class="l-cal-row l-body" ng-repeat="row in table">
+				<li ng-repeat="cell in row"
+					ng-click="select(cell)"
+					ng-class='{ "in-month": isInCurrentMonth(cell), selected: isSelected(cell) }'>
+					<div class="prime">{{cell.day}}</div>
+					<div class="sub">{{cell.dayOfYear}}</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+	<div class="l-time-selects complex datetime"
+			ng-show="options">
+		<div class="field-hints">
+			<span class="hint time md"
+				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
+				  ng-if="options[key]">
+				{{nameFor(key)}}
+			</span>
+		</div>
+		<div>
+			<span class="field control time md"
+				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
+				  ng-if="options[key]">
+				<div class='form-control select'>
+					<select size="1"
+							ng-model="time[key]"
+							ng-options="i for i in optionsFor(key)">
+					</select>
+				</div>
+			</span>
+		</div>
+	</div>
+</div>
--- a/platform/commonUI/general/res/templates/controls/switcher.html
+++ b/platform/commonUI/general/res/templates/controls/switcher.html
@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
    <div
-	    class="view-switcher menu-element s-menu"
+	    class="view-switcher menu-element s-menu-btn"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >
--- a/platform/commonUI/general/res/templates/controls/time-controller.html
+++ b/platform/commonUI/general/res/templates/controls/time-controller.html
@@ -1,69 +1,85 @@
 <!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.

-NOTES
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.

-Ticks:
-The thinking is to divide whatever the current time span is by 5,
-and assign values accordingly to 5 statically-positioned ticks. So the tick x-position is a static percentage
-of the total width available, and the labels change dynamically. This is consistent
-with our current approach to the time axis of plots.
-I'm keeping the number of ticks low so that when the view portal gets narrow,
-the tick labels won't collide with each other. For extra credit, add/remove ticks as the user resizes the view area.
-Note: this eval needs to be based on the whatever is containing the
-time-controller component, not the whole browser window.
-
-Range indicator and slider knobs:
-The left and right properties used in .slider .range-holder and  the .knobs are
-CSS offsets from the left and right of their respective containers. You
-may want or need to calculate those positions as pure offsets from the start datetime
-(or left, as it were) and set them as left properties. No problem if so, but
-we'll need to tweak the CSS tiny bit to get the center of the knobs to line up
-properly on the range left and right bounds.
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.

+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
 -->
+<div ng-controller="TimeRangeController">
+    <div class="l-time-range-inputs-holder">
+        <span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
+        <span class="l-time-range-input">
+            <mct-control key="'datetime-field'"
+                         structure="{ format: parameters.format }"
+                         ng-model="ngModel.outer"
+                         field="'start'"
+                         class="time-range-start">
+            </mct-control>
+        </span>

-<div ng-init="
-notes = 'Temporarily using an array to populate ticks so I can see what I\'m doing';
-ticks = [
-'00:00',
-'00:30',
-'01:00',
-'01:30',
-'02:00'
-];
-"></div>
+        <span class="l-time-range-inputs-elem lbl">to</span>

-<div class="l-time-controller">
-	<div class="l-time-range-inputs-holder">
-		Start: <input type="date" />
-		End: <input type="date" />
-	</div>
+        <span class="l-time-range-input" ng-controller="ToggleController as t2">
+            <mct-control key="'datetime-field'"
+                         structure="{ format: parameters.format }"
+                         ng-model="ngModel.outer"
+                         field="'end'"
+                         class="time-range-end">
+            </mct-control>&nbsp;
+        </span>
+    </div>

-	<div class="l-time-range-slider-holder">
-		<div class="l-time-range-slider">
-			<div class="slider">
-				<div class="slot range-holder">
-					<div class="range" style="left: 0%; right: 30%;"></div>
-				</div>
-				<div class="knob knob-l" style="left: 0%;">
-					<div class="range-value">05/22 14:46</div>
-				</div>
-				<div class="knob knob-r" style="right: 30%;">
-					<div class="range-value">07/22 01:21</div>
-				</div>
-			</div>
-		</div>
-	</div>
+    <div class="l-time-range-slider-holder">
+        <div class="l-time-range-slider">
+            <div class="slider"
+                 mct-resize="spanWidth = bounds.width">
+                <div class="knob knob-l"
+                     mct-drag-down="startLeftDrag()"
+                     mct-drag="leftDrag(delta[0])"
+                     ng-style="{ left: startInnerPct }">
+                    <div class="range-value">{{startInnerText}}</div>
+                </div>
+                <div class="knob knob-r"
+                     mct-drag-down="startRightDrag()"
+                     mct-drag="rightDrag(delta[0])"
+                     ng-style="{ right: endInnerPct }">
+                    <div class="range-value">{{endInnerText}}</div>
+                </div>
+                <div class="slot range-holder">
+                    <div class="range"
+                         mct-drag-down="startMiddleDrag()"
+                         mct-drag="middleDrag(delta[0])"
+                         ng-style="{ left: startInnerPct, right: endInnerPct}">
+                        <div class="toi-line"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>

-	<div class="l-time-range-ticks-holder">
-		<div class="l-time-range-ticks">
-			<div
-				ng-repeat="tick in ticks"
-				ng-style="{ left: $index * 25 + '%' }"
-				class="tick tick-x"
-				>
-				<span class="l-time-range-tick-label">{{tick}}</span>
-			</div>
-		</div>
-	</div>
-</div>
+    <div class="l-time-range-ticks-holder">
+        <div class="l-time-range-ticks">
+            <div
+                ng-repeat="tick in ticks track by $index"
+                ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
+                class="tick tick-x"
+                >
+                <span class="l-time-range-tick-label">{{tick}}</span>
+            </div>
+        </div>
+    </div>
+</div>
--- a/platform/commonUI/general/src/controllers/DateTimeFieldController.js
+++ b/platform/commonUI/general/src/controllers/DateTimeFieldController.js
@@ -0,0 +1,85 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [],
+    function () {
+        'use strict';
+
+        var UNRECOGNIZED_FORMAT_ERROR =
+            "Unrecognized format for date-time field.";
+
+        /**
+         * Controller to support the date-time entry field.
+         *
+         * Accepts a `format` property in the `structure` attribute
+         * which allows a date/time to be specified via its symbolic
+         * key (as will be used to look up said format from the
+         * `formatService`.)
+         *
+         * {@see FormatService}
+         * @constructor
+         * @memberof platform/commonUI/general
+         * @param $scope the Angular scope for this controller
+         * @param {FormatService} formatService the service to user to format
+         *        domain values
+         * @param {string} defaultFormat the format to request when no
+         *        format has been otherwise specified
+         */
+        function DateTimeFieldController($scope, formatService, defaultFormat) {
+            var formatter = formatService.getFormat(defaultFormat);
+
+            function updateFromModel(value) {
+                // Only reformat if the value is different from user
+                // input (to avoid reformatting valid input while typing.)
+                if (!formatter.validate($scope.textValue) ||
+                        formatter.parse($scope.textValue) !== value) {
+                    $scope.textValue = formatter.format(value);
+                    $scope.textInvalid = false;
+                }
+            }
+
+            function updateFromView(textValue) {
+                $scope.textInvalid = !formatter.validate(textValue);
+                if (!$scope.textInvalid) {
+                    $scope.ngModel[$scope.field] =
+                        formatter.parse(textValue);
+                }
+            }
+
+            function setFormat(format) {
+                formatter = formatService.getFormat(format || defaultFormat);
+                if (!formatter) {
+                    throw new Error(UNRECOGNIZED_FORMAT_ERROR);
+                }
+                updateFromModel($scope.ngModel[$scope.field]);
+            }
+
+            $scope.$watch('structure.format', setFormat);
+            $scope.$watch('ngModel[field]', updateFromModel);
+            $scope.$watch('textValue', updateFromView);
+        }
+
+        return DateTimeFieldController;
+    }
+);
--- a/platform/commonUI/general/src/controllers/DateTimePickerController.js
+++ b/platform/commonUI/general/src/controllers/DateTimePickerController.js
@@ -0,0 +1,202 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [ 'moment' ],
+    function (moment) {
+        'use strict';
+
+        var TIME_NAMES = {
+                'hours': "Hour",
+                'minutes': "Minute",
+                'seconds': "Second"
+            },
+            MONTHS = moment.months(),
+            TIME_OPTIONS = (function makeRanges() {
+                var arr = [];
+                while (arr.length < 60) {
+                    arr.push(arr.length);
+                }
+                return {
+                    hours: arr.slice(0, 24),
+                    minutes: arr,
+                    seconds: arr
+                };
+            }());
+
+        /**
+         * Controller to support the date-time picker.
+         *
+         * Adds/uses the following properties in scope:
+         * * `year`: Year being displayed in picker
+         * * `month`: Month being displayed
+         * * `table`: Table being displayed; array of arrays of
+         *   * `day`: Day of month
+         *   * `dayOfYear`: Day of year
+         *   * `month`: Month associated with the day
+         *   * `year`: Year associated with the day.
+         * * `date`: Date chosen
+         *   * `year`: Year selected
+         *   * `month`: Month selected (0-indexed)
+         *   * `day`: Day of month selected
+         * * `time`: Chosen time (hours/minutes/seconds)
+         *   * `hours`: Hours chosen
+         *   * `minutes`: Minutes chosen
+         *   * `seconds`: Seconds chosen
+         *
+         * Months are zero-indexed, day-of-months are one-indexed.
+         */
+        function DateTimePickerController($scope, now) {
+            var year,
+                month, // For picker state, not model state
+                interacted = false;
+
+            function generateTable() {
+                var m = moment.utc({ year: year, month: month }).day(0),
+                    table = [],
+                    row,
+                    col;
+
+                for (row = 0; row < 6; row += 1) {
+                    table.push([]);
+                    for (col = 0; col < 7; col += 1) {
+                        table[row].push({
+                            year: m.year(),
+                            month: m.month(),
+                            day: m.date(),
+                            dayOfYear: m.dayOfYear()
+                        });
+                        m.add(1, 'days'); // Next day!
+                    }
+                }
+
+                return table;
+            }
+
+            function updateScopeForMonth() {
+                $scope.month = MONTHS[month];
+                $scope.year = year;
+                $scope.table = generateTable();
+            }
+
+            function updateFromModel(ngModel) {
+                var m;
+
+                m = moment.utc(ngModel);
+
+                $scope.date = {
+                    year: m.year(),
+                    month: m.month(),
+                    day: m.date()
+                };
+                $scope.time = {
+                    hours: m.hour(),
+                    minutes: m.minute(),
+                    seconds: m.second()
+                };
+
+                //window.alert($scope.date.day + " " + ngModel);
+
+                // Zoom to that date in the picker, but
+                // only if the user hasn't interacted with it yet.
+                if (!interacted) {
+                    year = m.year();
+                    month = m.month();
+                    updateScopeForMonth();
+                }
+            }
+
+            function updateFromView() {
+                var m = moment.utc({
+                    year: $scope.date.year,
+                    month: $scope.date.month,
+                    day: $scope.date.day,
+                    hour: $scope.time.hours,
+                    minute: $scope.time.minutes,
+                    second: $scope.time.seconds
+                });
+                $scope.ngModel[$scope.field] = m.valueOf();
+            }
+
+            $scope.isInCurrentMonth = function (cell) {
+                return cell.month === month;
+            };
+
+            $scope.isSelected = function (cell) {
+                var date = $scope.date || {};
+                return cell.day === date.day &&
+                    cell.month === date.month &&
+                    cell.year === date.year;
+            };
+
+            $scope.select = function (cell) {
+                $scope.date = $scope.date || {};
+                $scope.date.month = cell.month;
+                $scope.date.year = cell.year;
+                $scope.date.day = cell.day;
+                updateFromView();
+            };
+
+            $scope.dateEquals = function (d1, d2) {
+                return d1.year === d2.year &&
+                    d1.month === d2.month &&
+                    d1.day === d2.day;
+            };
+
+            $scope.changeMonth = function (delta) {
+                month += delta;
+                if (month > 11) {
+                    month = 0;
+                    year += 1;
+                }
+                if (month < 0) {
+                    month = 11;
+                    year -= 1;
+                }
+                interacted = true;
+                updateScopeForMonth();
+            };
+
+            $scope.nameFor = function (key) {
+                return TIME_NAMES[key];
+            };
+
+            $scope.optionsFor = function (key) {
+                return TIME_OPTIONS[key];
+            };
+
+            updateScopeForMonth();
+
+            // Ensure some useful default
+            $scope.ngModel[$scope.field] =
+                $scope.ngModel[$scope.field] === undefined ?
+                        now() : $scope.ngModel[$scope.field];
+
+            $scope.$watch('ngModel[field]', updateFromModel);
+            $scope.$watchCollection('date', updateFromView);
+            $scope.$watchCollection('time', updateFromView);
+        }
+
+        return DateTimePickerController;
+    }
+);
--- a/platform/commonUI/general/src/controllers/TimeRangeController.js
+++ b/platform/commonUI/general/src/controllers/TimeRangeController.js
@@ -0,0 +1,254 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    ['moment'],
+    function (moment) {
+        "use strict";
+
+        var TICK_SPACING_PX = 150,
+            UNRECOGNIZED_FORMAT_ERROR =
+                "Unrecognized format for time range control.";
+
+
+        /**
+         * Controller used by the `time-controller` template.
+         * @memberof platform/commonUI/general
+         * @constructor
+         * @param $scope the Angular scope for this controller
+         * @param {FormatService} formatService the service to user to format
+         *        domain values
+         * @param {string} defaultFormat the format to request when no
+         *        format has been otherwise specified
+         * @param {Function} now a function to return current system time
+         */
+        function TimeRangeController($scope, formatService, defaultFormat, now) {
+            var tickCount = 2,
+                innerMinimumSpan = 1000, // 1 second
+                outerMinimumSpan = 1000 * 60 * 60, // 1 hour
+                initialDragValue,
+                formatter = formatService.getFormat(defaultFormat);
+
+            function formatTimestamp(ts) {
+                return formatter.format(ts);
+            }
+
+            // From 0.0-1.0 to "0%"-"100%"
+            function toPercent(p) {
+                return (100 * p) + "%";
+            }
+
+            function updateTicks() {
+                var i, p, ts, start, end, span;
+                end = $scope.ngModel.outer.end;
+                start = $scope.ngModel.outer.start;
+                span = end - start;
+                $scope.ticks = [];
+                for (i = 0; i < tickCount; i += 1) {
+                    p = i / (tickCount - 1);
+                    ts = p * span + start;
+                    $scope.ticks.push(formatTimestamp(ts));
+                }
+            }
+
+            function updateSpanWidth(w) {
+                tickCount = Math.max(Math.floor(w / TICK_SPACING_PX), 2);
+                updateTicks();
+            }
+
+            function updateViewForInnerSpanFromModel(ngModel) {
+                var span = ngModel.outer.end - ngModel.outer.start;
+
+                // Expose readable dates for the knobs
+                $scope.startInnerText = formatTimestamp(ngModel.inner.start);
+                $scope.endInnerText = formatTimestamp(ngModel.inner.end);
+
+                // And positions for the knobs
+                $scope.startInnerPct =
+                    toPercent((ngModel.inner.start - ngModel.outer.start) / span);
+                $scope.endInnerPct =
+                    toPercent((ngModel.outer.end - ngModel.inner.end) / span);
+            }
+
+            function defaultBounds() {
+                var t = now();
+                return {
+                    start: t - 24 * 3600 * 1000, // One day
+                    end: t
+                };
+            }
+
+            function copyBounds(bounds) {
+                return { start: bounds.start, end: bounds.end };
+            }
+
+            function updateViewFromModel(ngModel) {
+                ngModel = ngModel || {};
+                ngModel.outer = ngModel.outer || defaultBounds();
+                ngModel.inner = ngModel.inner || copyBounds(ngModel.outer);
+
+                // Stick it back is scope (in case we just set defaults)
+                $scope.ngModel = ngModel;
+
+                updateViewForInnerSpanFromModel(ngModel);
+                updateTicks();
+            }
+
+            function startLeftDrag() {
+                initialDragValue = $scope.ngModel.inner.start;
+            }
+
+            function startRightDrag() {
+                initialDragValue = $scope.ngModel.inner.end;
+            }
+
+            function startMiddleDrag() {
+                initialDragValue = {
+                    start: $scope.ngModel.inner.start,
+                    end: $scope.ngModel.inner.end
+                };
+            }
+
+            function toMillis(pixels) {
+                var span =
+                    $scope.ngModel.outer.end - $scope.ngModel.outer.start;
+                return (pixels / $scope.spanWidth) * span;
+            }
+
+            function clamp(value, low, high) {
+                return Math.max(low, Math.min(high, value));
+            }
+
+            function leftDrag(pixels) {
+                var delta = toMillis(pixels);
+                $scope.ngModel.inner.start = clamp(
+                    initialDragValue + delta,
+                    $scope.ngModel.outer.start,
+                    $scope.ngModel.inner.end - innerMinimumSpan
+                );
+                updateViewFromModel($scope.ngModel);
+            }
+
+            function rightDrag(pixels) {
+                var delta = toMillis(pixels);
+                $scope.ngModel.inner.end = clamp(
+                    initialDragValue + delta,
+                    $scope.ngModel.inner.start + innerMinimumSpan,
+                    $scope.ngModel.outer.end
+                );
+                updateViewFromModel($scope.ngModel);
+            }
+
+            function middleDrag(pixels) {
+                var delta = toMillis(pixels),
+                    edge = delta < 0 ? 'start' : 'end',
+                    opposite = delta < 0 ? 'end' : 'start';
+
+                // Adjust the position of the edge in the direction of drag
+                $scope.ngModel.inner[edge] = clamp(
+                    initialDragValue[edge] + delta,
+                    $scope.ngModel.outer.start,
+                    $scope.ngModel.outer.end
+                );
+                // Adjust opposite knob to maintain span
+                $scope.ngModel.inner[opposite] = $scope.ngModel.inner[edge] +
+                    initialDragValue[opposite] - initialDragValue[edge];
+
+                updateViewFromModel($scope.ngModel);
+            }
+
+            function updateOuterStart(t) {
+                var ngModel = $scope.ngModel;
+
+                ngModel.outer.start = t;
+
+                ngModel.outer.end = Math.max(
+                    ngModel.outer.start + outerMinimumSpan,
+                    ngModel.outer.end
+                );
+
+                ngModel.inner.start =
+                    Math.max(ngModel.outer.start, ngModel.inner.start);
+                ngModel.inner.end = Math.max(
+                    ngModel.inner.start + innerMinimumSpan,
+                    ngModel.inner.end
+                );
+
+                updateViewForInnerSpanFromModel(ngModel);
+                updateTicks();
+            }
+
+            function updateOuterEnd(t) {
+                var ngModel = $scope.ngModel;
+
+                ngModel.outer.end = t;
+
+                ngModel.outer.start = Math.min(
+                    ngModel.outer.end - outerMinimumSpan,
+                    ngModel.outer.start
+                );
+
+                ngModel.inner.end =
+                    Math.min(ngModel.outer.end, ngModel.inner.end);
+                ngModel.inner.start = Math.min(
+                    ngModel.inner.end - innerMinimumSpan,
+                    ngModel.inner.start
+                );
+
+                updateViewForInnerSpanFromModel(ngModel);
+                updateTicks();
+            }
+
+            function updateFormat(key) {
+                formatter = formatService.getFormat(key || defaultFormat);
+
+                if (!formatter) {
+                    throw new Error(UNRECOGNIZED_FORMAT_ERROR);
+                }
+
+                updateViewForInnerSpanFromModel($scope.ngModel);
+                updateTicks();
+            }
+
+            $scope.startLeftDrag = startLeftDrag;
+            $scope.startRightDrag = startRightDrag;
+            $scope.startMiddleDrag = startMiddleDrag;
+            $scope.leftDrag = leftDrag;
+            $scope.rightDrag = rightDrag;
+            $scope.middleDrag = middleDrag;
+
+            $scope.ticks = [];
+
+            // Initialize scope to defaults
+            updateViewFromModel($scope.ngModel);
+
+            $scope.$watchCollection("ngModel", updateViewFromModel);
+            $scope.$watch("spanWidth", updateSpanWidth);
+            $scope.$watch("ngModel.outer.start", updateOuterStart);
+            $scope.$watch("ngModel.outer.end", updateOuterEnd);
+            $scope.$watch("parameters.format", updateFormat);
+        }
+
+        return TimeRangeController;
+    }
+);
--- a/platform/commonUI/general/src/directives/MCTClickElsewhere.js
+++ b/platform/commonUI/general/src/directives/MCTClickElsewhere.js
@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The `mct-click-elsewhere` directive will evaluate its
+         * associated expression whenever a `mousedown` occurs anywhere
+         * outside of the element that has the `mct-click-elsewhere`
+         * directive attached. This is useful for dismissing popups
+         * and the like.
+         */
+        function MCTClickElsewhere($document) {
+
+            // Link; install event handlers.
+            function link(scope, element, attrs) {
+                // Keep a reference to the body, to attach/detach
+                // mouse event handlers; mousedown and mouseup cannot
+                // only be attached to the element being linked, as the
+                // mouse may leave this element during the drag.
+                var body = $document.find('body');
+
+                function clickBody(event) {
+                    var x = event.clientX,
+                        y = event.clientY,
+                        rect = element[0].getBoundingClientRect(),
+                        xMin = rect.left,
+                        xMax = xMin + rect.width,
+                        yMin = rect.top,
+                        yMax = yMin + rect.height;
+
+                    if (x < xMin || x > xMax || y < yMin || y > yMax) {
+                        scope.$eval(attrs.mctClickElsewhere);
+                    }
+                }
+
+                body.on("mousedown", clickBody);
+                scope.$on("$destroy", function () {
+                    body.off("mousedown", clickBody);
+                });
+            }
+
+            return {
+                // mct-drag only makes sense as an attribute
+                restrict: "A",
+                // Link function, to install event handlers
+                link: link
+            };
+        }
+
+        return MCTClickElsewhere;
+    }
+);
+
--- a/platform/commonUI/general/src/directives/MCTPopup.js
+++ b/platform/commonUI/general/src/directives/MCTPopup.js
@@ -0,0 +1,73 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    function () {
+        'use strict';
+
+        var TEMPLATE = "<div></div>";
+
+        /**
+         * The `mct-popup` directive may be used to display elements
+         * which "pop up" over other parts of the page. Typically, this is
+         * done in conjunction with an `ng-if` to control the visibility
+         * of the popup.
+         *
+         * Example of usage:
+         *
+         *     <mct-popup ng-if="someExpr">
+         *         <span>These are the contents of the popup!</span>
+         *     </mct-popup>
+         *
+         * @constructor
+         * @memberof platform/commonUI/general
+         * @param $compile Angular's $compile service
+         * @param {platform/commonUI/general.PopupService} popupService
+         */
+        function MCTPopup($compile, popupService) {
+            function link(scope, element, attrs, ctrl, transclude) {
+                var div = $compile(TEMPLATE)(scope),
+                    rect = element.parent()[0].getBoundingClientRect(),
+                    position = [ rect.left, rect.top ],
+                    popup = popupService.display(div, position);
+
+                transclude(function (clone) {
+                    div.append(clone);
+                });
+
+                scope.$on('$destroy', function () {
+                    popup.dismiss();
+                });
+            }
+
+            return {
+                restrict: "E",
+                transclude: true,
+                link: link,
+                scope: {}
+            };
+        }
+
+        return MCTPopup;
+    }
+);
--- a/platform/commonUI/general/src/directives/MCTResize.js
+++ b/platform/commonUI/general/src/directives/MCTResize.js
@@ -58,6 +58,7 @@ define(
            // Link; start listening for changes to an element's size
            function link(scope, element, attrs) {
                var lastBounds,
+                    linking = true,
                    active = true;

                // Determine how long to wait before the next update
@@ -74,7 +75,9 @@ define(
                            lastBounds.width !== bounds.width ||
                            lastBounds.height !== bounds.height) {
                        scope.$eval(attrs.mctResize, { bounds: bounds });
-                        scope.$apply(); // Trigger a digest
+                        if (!linking) { // Avoid apply-in-a-digest
+                            scope.$apply();
+                        }
                        lastBounds = bounds;
                    }
                }
@@ -101,6 +104,9 @@ define(

                // Handle the initial callback
                onInterval();
+
+                // Trigger scope.$apply on subsequent changes
+                linking = false;
            }

            return {
--- a/platform/commonUI/general/src/directives/MCTScroll.js
+++ b/platform/commonUI/general/src/directives/MCTScroll.js
@@ -49,22 +49,17 @@ define(
                var expr = attrs[attribute],
                    parsed = $parse(expr);

+                // Set the element's scroll to match the scope's state
+                function updateElement(value) {
+                    element[0][property] = value;
+                }
+
                // Handle event; assign to scroll state to scope
                function updateScope() {
                    parsed.assign(scope, element[0][property]);
                    scope.$apply(expr);
                }

-                // Set the element's scroll to match the scope's state
-                function updateElement(value) {
-                    element[0][property] = value;
-                    // Some values may be out of range for the scroll bar,
-                    // so publish the real scroll value back into scope.
-                    if (element[0][property] !== value) {
-                        parsed.assign(scope, element[0][property]);
-                    }
-                }
-
                // Initialize state in scope
                parsed.assign(scope, element[0][property]);

--- a/platform/commonUI/general/src/services/Popup.js
+++ b/platform/commonUI/general/src/services/Popup.js
@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    function () {
+        "use strict";
+
+        /**
+         * A popup is an element that has been displayed at a particular
+         * location within the page.
+         * @constructor
+         * @memberof platform/commonUI/general
+         * @param element the jqLite-wrapped element
+         * @param {object} styles an object containing key-value pairs
+         *        of styles used to position the element.
+         */
+        function Popup(element, styles) {
+            this.styles = styles;
+            this.element = element;
+
+            element.css(styles);
+        }
+
+        /**
+         * Stop showing this popup.
+         */
+        Popup.prototype.dismiss = function () {
+            this.element.remove();
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears to the
+         * left of its original location.
+         * @returns {boolean} true if the popup goes left
+         */
+        Popup.prototype.goesLeft = function () {
+            return !this.styles.left;
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears to the
+         * right of its original location.
+         * @returns {boolean} true if the popup goes right
+         */
+        Popup.prototype.goesRight = function () {
+            return !this.styles.right;
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears above
+         * its original location.
+         * @returns {boolean} true if the popup goes up
+         */
+        Popup.prototype.goesUp = function () {
+            return !this.styles.top;
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears below
+         * its original location.
+         * @returns {boolean} true if the popup goes down
+         */
+        Popup.prototype.goesDown = function () {
+            return !this.styles.bottom;
+        };
+
+        return Popup;
+    }
+);
--- a/platform/commonUI/general/src/services/PopupService.js
+++ b/platform/commonUI/general/src/services/PopupService.js
@@ -0,0 +1,127 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    ['./Popup'],
+    function (Popup) {
+        "use strict";
+
+        /**
+         * Displays popup elements at specific positions within the document.
+         * @memberof platform/commonUI/general
+         * @constructor
+         */
+        function PopupService($document, $window) {
+            this.$document = $document;
+            this.$window = $window;
+        }
+
+        /**
+         * Options controlling how the popup is displaed.
+         *
+         * @typedef PopupOptions
+         * @memberof platform/commonUI/general
+         * @property {number} [offsetX] the horizontal distance, in pixels,
+         *           to offset the element in whichever direction it is
+         *           displayed. Defaults to 0.
+         * @property {number} [offsetY] the vertical distance, in pixels,
+         *           to offset the element in whichever direction it is
+         *           displayed. Defaults to 0.
+         * @property {number} [marginX] the horizontal position, in pixels,
+         *           after which to prefer to display the element to the left.
+         *           If negative, this is relative to the right edge of the
+         *           page. Defaults to half the window's width.
+         * @property {number} [marginY] the vertical position, in pixels,
+         *           after which to prefer to display the element upward.
+         *           If negative, this is relative to the right edge of the
+         *           page. Defaults to half the window's height.
+         * @property {string} [leftClass] class to apply when shifting to the left
+         * @property {string} [rightClass] class to apply when shifting to the right
+         * @property {string} [upClass] class to apply when shifting upward
+         * @property {string} [downClass] class to apply when shifting downward
+         */
+
+        /**
+         * Display a popup at a particular location. The location chosen will
+         * be the corner of the element; the element will be positioned either
+         * to the left or the right of this point depending on available
+         * horizontal space, and will similarly be shifted upward or downward
+         * depending on available vertical space.
+         *
+         * @param element the jqLite-wrapped DOM element to pop up
+         * @param {number[]} position x,y position of the element, in
+         *        pixel coordinates. Negative values are interpreted as
+         *        relative to the right or bottom of the window.
+         * @param {PopupOptions} [options] additional options to control
+         *        positioning of the popup
+         * @returns {platform/commonUI/general.Popup} the popup
+         */
+        PopupService.prototype.display = function (element, position, options) {
+            var $document = this.$document,
+                $window = this.$window,
+                body = $document.find('body'),
+                winDim = [ $window.innerWidth, $window.innerHeight ],
+                styles = { position: 'absolute' },
+                margin,
+                offset,
+                bubble;
+
+            function adjustNegatives(value, index) {
+                return value < 0 ? (value + winDim[index]) : value;
+            }
+
+            // Defaults
+            options = options || {};
+            offset = [
+                options.offsetX !== undefined ? options.offsetX : 0,
+                options.offsetY !== undefined ? options.offsetY : 0
+            ];
+            margin = [ options.marginX, options.marginY ].map(function (m, i) {
+                return m === undefined ? (winDim[i] / 2) : m;
+            }).map(adjustNegatives);
+
+            position = position.map(adjustNegatives);
+
+            if (position[0] > margin[0]) {
+                styles.right = (winDim[0] - position[0] + offset[0]) + 'px';
+            } else {
+                styles.left =  (position[0] + offset[0]) + 'px';
+            }
+
+            if (position[1] > margin[1]) {
+                styles.bottom = (winDim[1] - position[1] + offset[1]) + 'px';
+            } else {
+                styles.top = (position[1] + offset[1]) + 'px';
+            }
+
+            // Add the menu to the body
+            body.append(element);
+
+            // Return a function to dismiss the bubble
+            return new Popup(element, styles);
+        };
+
+        return PopupService;
+    }
+);
+
--- a/platform/commonUI/general/test/controllers/DateTimeFieldControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/DateTimeFieldControllerSpec.js
@@ -0,0 +1,183 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../../src/controllers/DateTimeFieldController", "moment"],
+    function (DateTimeFieldController, moment) {
+        'use strict';
+
+        var TEST_FORMAT = "YYYY-MM-DD HH:mm:ss";
+
+        describe("The DateTimeFieldController", function () {
+            var mockScope,
+                mockFormatService,
+                mockFormat,
+                controller;
+
+            function fireWatch(expr, value) {
+                mockScope.$watch.calls.forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        call.args[1](value);
+                    }
+                });
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj('$scope', ['$watch']);
+                mockFormatService =
+                    jasmine.createSpyObj('formatService', ['getFormat']);
+                mockFormat = jasmine.createSpyObj('format', [
+                    'parse',
+                    'validate',
+                    'format'
+                ]);
+
+                mockFormatService.getFormat.andReturn(mockFormat);
+
+                mockFormat.validate.andCallFake(function (text) {
+                    return moment.utc(text, TEST_FORMAT).isValid();
+                });
+                mockFormat.parse.andCallFake(function (text) {
+                    return moment.utc(text, TEST_FORMAT).valueOf();
+                });
+                mockFormat.format.andCallFake(function (value) {
+                    return moment.utc(value).format(TEST_FORMAT);
+                });
+
+                mockScope.ngModel = { testField: 12321 };
+                mockScope.field = "testField";
+                mockScope.structure = { format: "someFormat" };
+
+                controller = new DateTimeFieldController(
+                    mockScope,
+                    mockFormatService
+                );
+            });
+
+            it("updates models from user-entered text", function () {
+                var newText = "1977-05-25 17:30:00";
+
+                mockScope.textValue = newText;
+                fireWatch("textValue", newText);
+                expect(mockScope.ngModel.testField)
+                    .toEqual(mockFormat.parse(newText));
+                expect(mockScope.textInvalid).toBeFalsy();
+            });
+
+            it("updates text from model values", function () {
+                var testTime = mockFormat.parse("1977-05-25 17:30:00");
+                mockScope.ngModel.testField = testTime;
+                fireWatch("ngModel[field]", testTime);
+                expect(mockScope.textValue).toEqual("1977-05-25 17:30:00");
+            });
+
+            describe("when user input is invalid", function () {
+                var newText, oldValue;
+
+                beforeEach(function () {
+                    newText = "Not a date";
+                    oldValue = mockScope.ngModel.testField;
+                    mockScope.textValue = newText;
+                    fireWatch("textValue", newText);
+                });
+
+                it("displays error state", function () {
+                    expect(mockScope.textInvalid).toBeTruthy();
+                });
+
+                it("does not modify model state", function () {
+                    expect(mockScope.ngModel.testField).toEqual(oldValue);
+                });
+
+                it("does not modify user input", function () {
+                    expect(mockScope.textValue).toEqual(newText);
+                });
+            });
+
+            it("does not modify valid but irregular user input", function () {
+                // Don't want the controller "fixing" bad or
+                // irregularly-formatted input out from under
+                // the user's fingertips.
+                var newText = "2015-3-3 01:02:04",
+                    oldValue = mockScope.ngModel.testField;
+
+                mockFormat.validate.andReturn(true);
+                mockFormat.parse.andReturn(42);
+                mockScope.textValue = newText;
+                fireWatch("textValue", newText);
+
+                expect(mockScope.textValue).toEqual(newText);
+                expect(mockScope.ngModel.testField).toEqual(42);
+                expect(mockScope.ngModel.testField).not.toEqual(oldValue);
+            });
+
+            it("obtains a format from the format service", function () {
+                fireWatch('structure.format', mockScope.structure.format);
+                expect(mockFormatService.getFormat)
+                    .toHaveBeenCalledWith(mockScope.structure.format);
+            });
+
+            it("throws an error for unknown formats", function () {
+                mockFormatService.getFormat.andReturn(undefined);
+                expect(function () {
+                    fireWatch("structure.format", "some-format");
+                }).toThrow();
+            });
+
+            describe("using the obtained format", function () {
+                var testValue = 1234321,
+                    testText = "some text";
+
+                beforeEach(function () {
+                    mockFormat.validate.andReturn(true);
+                    mockFormat.parse.andReturn(testValue);
+                    mockFormat.format.andReturn(testText);
+                });
+
+                it("parses user input", function () {
+                    var newText = "some other new text";
+                    mockScope.textValue = newText;
+                    fireWatch("textValue", newText);
+                    expect(mockFormat.parse).toHaveBeenCalledWith(newText);
+                    expect(mockScope.ngModel.testField).toEqual(testValue);
+                });
+
+                it("validates user input", function () {
+                    var newText = "some other new text";
+                    mockScope.textValue = newText;
+                    fireWatch("textValue", newText);
+                    expect(mockFormat.validate).toHaveBeenCalledWith(newText);
+                });
+
+                it("formats model data for display", function () {
+                    var newValue = 42;
+                    mockScope.ngModel.testField = newValue;
+                    fireWatch("ngModel[field]", newValue);
+                    expect(mockFormat.format).toHaveBeenCalledWith(newValue);
+                    expect(mockScope.textValue).toEqual(testText);
+                });
+            });
+
+        });
+    }
+);
--- a/platform/commonUI/general/test/controllers/DateTimePickerControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/DateTimePickerControllerSpec.js
@@ -0,0 +1,63 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../../src/controllers/DateTimePickerController"],
+    function (DateTimePickerController) {
+        "use strict";
+
+        describe("The DateTimePickerController", function () {
+            var mockScope,
+                mockNow,
+                controller;
+
+            function fireWatch(expr, value) {
+                mockScope.$watch.calls.forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        call.args[1](value);
+                    }
+                });
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj(
+                    "$scope",
+                    [ "$apply", "$watch", "$watchCollection" ]
+                );
+                mockScope.ngModel = {};
+                mockScope.field = "testField";
+                mockNow = jasmine.createSpy('now');
+                controller = new DateTimePickerController(mockScope, mockNow);
+            });
+
+            it("watches the model that was passed in", function () {
+                expect(mockScope.$watch).toHaveBeenCalledWith(
+                    "ngModel[field]",
+                    jasmine.any(Function)
+                );
+            });
+
+
+        });
+    }
+);
--- a/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js
@@ -0,0 +1,214 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../../src/controllers/TimeRangeController", "moment"],
+    function (TimeRangeController, moment) {
+        "use strict";
+
+        var SEC = 1000,
+            MIN = 60 * SEC,
+            HOUR = 60 * MIN,
+            DAY = 24 * HOUR;
+
+        describe("The TimeRangeController", function () {
+            var mockScope,
+                mockFormatService,
+                testDefaultFormat,
+                mockNow,
+                mockFormat,
+                controller;
+
+            function fireWatch(expr, value) {
+                mockScope.$watch.calls.forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        call.args[1](value);
+                    }
+                });
+            }
+
+            function fireWatchCollection(expr, value) {
+                mockScope.$watchCollection.calls.forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        call.args[1](value);
+                    }
+                });
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj(
+                    "$scope",
+                    [ "$apply", "$watch", "$watchCollection" ]
+                );
+                mockFormatService = jasmine.createSpyObj(
+                    "formatService",
+                    [ "getFormat" ]
+                );
+                testDefaultFormat = 'utc';
+                mockFormat = jasmine.createSpyObj(
+                    "format",
+                    [ "validate", "format", "parse" ]
+                );
+
+                mockFormatService.getFormat.andReturn(mockFormat);
+
+                mockFormat.format.andCallFake(function (value) {
+                    return moment.utc(value).format("YYYY-MM-DD HH:mm:ss");
+                });
+
+                mockNow = jasmine.createSpy('now');
+
+                controller = new TimeRangeController(
+                    mockScope,
+                    mockFormatService,
+                    testDefaultFormat,
+                    mockNow
+                );
+            });
+
+            it("watches the model that was passed in", function () {
+                expect(mockScope.$watchCollection)
+                    .toHaveBeenCalledWith("ngModel", jasmine.any(Function));
+            });
+
+            describe("when dragged", function () {
+                beforeEach(function () {
+                    mockScope.ngModel = {
+                        outer: {
+                            start: DAY * 1000,
+                            end: DAY * 1001
+                        },
+                        inner: {
+                            start: DAY * 1000 + HOUR * 3,
+                            end: DAY * 1001 - HOUR * 3
+                        }
+                    };
+                    mockScope.spanWidth = 1000;
+                    fireWatch("spanWidth", mockScope.spanWidth);
+                    fireWatchCollection("ngModel", mockScope.ngModel);
+                });
+
+                it("updates the start time for left drags", function () {
+                    mockScope.startLeftDrag();
+                    mockScope.leftDrag(250);
+                    expect(mockScope.ngModel.inner.start)
+                        .toEqual(DAY * 1000 + HOUR * 9);
+                });
+
+                it("updates the end time for right drags", function () {
+                    mockScope.startRightDrag();
+                    mockScope.rightDrag(-250);
+                    expect(mockScope.ngModel.inner.end)
+                        .toEqual(DAY * 1000 + HOUR * 15);
+                });
+
+                it("updates both start and end for middle drags", function () {
+                    mockScope.startMiddleDrag();
+                    mockScope.middleDrag(-125);
+                    expect(mockScope.ngModel.inner).toEqual({
+                        start: DAY * 1000,
+                        end: DAY * 1000 + HOUR * 18
+                    });
+                    mockScope.middleDrag(250);
+                    expect(mockScope.ngModel.inner).toEqual({
+                        start: DAY * 1000 + HOUR * 6,
+                        end: DAY * 1001
+                    });
+                });
+
+                it("enforces a minimum inner span", function () {
+                    mockScope.startRightDrag();
+                    mockScope.rightDrag(-9999999);
+                    expect(mockScope.ngModel.inner.end)
+                        .toBeGreaterThan(mockScope.ngModel.inner.start);
+                });
+            });
+
+            describe("when outer bounds are changed", function () {
+                beforeEach(function () {
+                    mockScope.ngModel = {
+                        outer: {
+                            start: DAY * 1000,
+                            end: DAY * 1001
+                        },
+                        inner: {
+                            start: DAY * 1000 + HOUR * 3,
+                            end: DAY * 1001 - HOUR * 3
+                        }
+                    };
+                    mockScope.spanWidth = 1000;
+                    fireWatch("spanWidth", mockScope.spanWidth);
+                    fireWatchCollection("ngModel", mockScope.ngModel);
+                });
+
+                it("enforces a minimum outer span", function () {
+                    mockScope.ngModel.outer.end =
+                        mockScope.ngModel.outer.start - DAY * 100;
+                    fireWatch(
+                        "ngModel.outer.end",
+                        mockScope.ngModel.outer.end
+                    );
+                    expect(mockScope.ngModel.outer.end)
+                        .toBeGreaterThan(mockScope.ngModel.outer.start);
+
+                    mockScope.ngModel.outer.start =
+                        mockScope.ngModel.outer.end + DAY * 100;
+                    fireWatch(
+                        "ngModel.outer.start",
+                        mockScope.ngModel.outer.start
+                    );
+                    expect(mockScope.ngModel.outer.end)
+                        .toBeGreaterThan(mockScope.ngModel.outer.start);
+                });
+
+                it("enforces a minimum inner span when outer span changes", function () {
+                    mockScope.ngModel.outer.end =
+                        mockScope.ngModel.outer.start - DAY * 100;
+                    fireWatch(
+                        "ngModel.outer.end",
+                        mockScope.ngModel.outer.end
+                    );
+                    expect(mockScope.ngModel.inner.end)
+                        .toBeGreaterThan(mockScope.ngModel.inner.start);
+                });
+
+            });
+
+            it("watches for changes in format selection", function () {
+                expect(mockFormatService.getFormat)
+                    .not.toHaveBeenCalledWith('test-format');
+                fireWatch("parameters.format", 'test-format');
+                expect(mockFormatService.getFormat)
+                    .toHaveBeenCalledWith('test-format');
+            });
+
+            it("throws an error for unknown formats", function () {
+                mockFormatService.getFormat.andReturn(undefined);
+                expect(function () {
+                    fireWatch("parameters.format", "some-format");
+                }).toThrow();
+            });
+
+        });
+    }
+);
--- a/platform/commonUI/general/test/directives/MCTClickElsewhereSpec.js
+++ b/platform/commonUI/general/test/directives/MCTClickElsewhereSpec.js
@@ -0,0 +1,84 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,describe,it,expect,beforeEach,jasmine*/
+
+define(
+    ["../../src/directives/MCTClickElsewhere"],
+    function (MCTClickElsewhere) {
+        "use strict";
+
+        var JQLITE_METHODS = [ "on", "off", "find", "parent" ];
+
+        describe("The mct-click-elsewhere directive", function () {
+            var mockDocument,
+                mockScope,
+                mockElement,
+                testAttrs,
+                mockBody,
+                mockParentEl,
+                testRect,
+                mctClickElsewhere;
+
+            function testEvent(x, y) {
+                return {
+                    pageX: x,
+                    pageY: y,
+                    preventDefault: jasmine.createSpy("preventDefault")
+                };
+            }
+
+            beforeEach(function () {
+                mockDocument =
+                    jasmine.createSpyObj("$document", JQLITE_METHODS);
+                mockScope =
+                    jasmine.createSpyObj("$scope", [ "$eval", "$apply", "$on" ]);
+                mockElement =
+                    jasmine.createSpyObj("element", JQLITE_METHODS);
+                mockBody =
+                    jasmine.createSpyObj("body", JQLITE_METHODS);
+                mockParentEl =
+                    jasmine.createSpyObj("parent", ["getBoundingClientRect"]);
+
+                testAttrs = {
+                    mctClickElsewhere: "some Angular expression"
+                };
+                testRect = {
+                    left: 20,
+                    top: 42,
+                    width: 60,
+                    height: 75
+                };
+
+                mockDocument.find.andReturn(mockBody);
+
+                mctClickElsewhere = new MCTClickElsewhere(mockDocument);
+                mctClickElsewhere.link(mockScope, mockElement, testAttrs);
+            });
+
+            it("is valid as an attribute", function () {
+                expect(mctClickElsewhere.restrict).toEqual("A");
+            });
+
+
+        });
+    }
+);
--- a/platform/commonUI/general/test/directives/MCTPopupSpec.js
+++ b/platform/commonUI/general/test/directives/MCTPopupSpec.js
@@ -0,0 +1,136 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,describe,it,expect,beforeEach,jasmine*/
+
+define(
+    ["../../src/directives/MCTPopup"],
+    function (MCTPopup) {
+        "use strict";
+
+        var JQLITE_METHODS = [ "on", "off", "find", "parent", "css", "append" ];
+
+        describe("The mct-popup directive", function () {
+            var mockCompile,
+                mockPopupService,
+                mockPopup,
+                mockScope,
+                mockElement,
+                testAttrs,
+                mockBody,
+                mockTransclude,
+                mockParentEl,
+                mockNewElement,
+                testRect,
+                mctPopup;
+
+            function testEvent(x, y) {
+                return {
+                    pageX: x,
+                    pageY: y,
+                    preventDefault: jasmine.createSpy("preventDefault")
+                };
+            }
+
+            beforeEach(function () {
+                mockCompile =
+                    jasmine.createSpy("$compile");
+                mockPopupService =
+                    jasmine.createSpyObj("popupService", ["display"]);
+                mockPopup =
+                    jasmine.createSpyObj("popup", ["dismiss"]);
+                mockScope =
+                    jasmine.createSpyObj("$scope", [ "$eval", "$apply", "$on" ]);
+                mockElement =
+                    jasmine.createSpyObj("element", JQLITE_METHODS);
+                mockBody =
+                    jasmine.createSpyObj("body", JQLITE_METHODS);
+                mockTransclude =
+                    jasmine.createSpy("transclude");
+                mockParentEl =
+                    jasmine.createSpyObj("parent", ["getBoundingClientRect"]);
+                mockNewElement =
+                    jasmine.createSpyObj("newElement", JQLITE_METHODS);
+
+                testAttrs = {
+                    mctClickElsewhere: "some Angular expression"
+                };
+                testRect = {
+                    left: 20,
+                    top: 42,
+                    width: 60,
+                    height: 75
+                };
+
+                mockCompile.andCallFake(function () {
+                    var mockFn = jasmine.createSpy();
+                    mockFn.andReturn(mockNewElement);
+                    return mockFn;
+                });
+                mockElement.parent.andReturn([mockParentEl]);
+                mockParentEl.getBoundingClientRect.andReturn(testRect);
+                mockPopupService.display.andReturn(mockPopup);
+
+                mctPopup = new MCTPopup(mockCompile, mockPopupService);
+
+                mctPopup.link(
+                    mockScope,
+                    mockElement,
+                    testAttrs,
+                    null,
+                    mockTransclude
+                );
+            });
+
+            it("is valid as an element", function () {
+                expect(mctPopup.restrict).toEqual("E");
+            });
+
+            describe("creates an element which", function () {
+                it("displays as a popup", function () {
+                    expect(mockPopupService.display).toHaveBeenCalledWith(
+                        mockNewElement,
+                        [ testRect.left, testRect.top ]
+                    );
+                });
+
+                it("displays transcluded content", function () {
+                    var mockClone =
+                        jasmine.createSpyObj('clone', JQLITE_METHODS);
+                    mockTransclude.mostRecentCall.args[0](mockClone);
+                    expect(mockNewElement.append)
+                        .toHaveBeenCalledWith(mockClone);
+                });
+
+                it("is removed when its containing scope is destroyed", function () {
+                    expect(mockPopup.dismiss).not.toHaveBeenCalled();
+                    mockScope.$on.calls.forEach(function (call) {
+                        if (call.args[0] === '$destroy') {
+                            call.args[1]();
+                        }
+                    });
+                    expect(mockPopup.dismiss).toHaveBeenCalled();
+                });
+            });
+
+        });
+    }
+);
--- a/platform/commonUI/general/test/services/PopupServiceSpec.js
+++ b/platform/commonUI/general/test/services/PopupServiceSpec.js
@@ -0,0 +1,98 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+
+define(
+    ["../../src/services/PopupService"],
+    function (PopupService) {
+        'use strict';
+
+        describe("PopupService", function () {
+            var mockDocument,
+                testWindow,
+                mockBody,
+                mockElement,
+                popupService;
+
+            beforeEach(function () {
+                mockDocument = jasmine.createSpyObj('$document', [ 'find' ]);
+                testWindow = { innerWidth: 1000, innerHeight: 800 };
+                mockBody = jasmine.createSpyObj('body', [ 'append' ]);
+                mockElement = jasmine.createSpyObj('element', [
+                    'css',
+                    'remove'
+                ]);
+
+                mockDocument.find.andCallFake(function (query) {
+                    return query === 'body' && mockBody;
+                });
+
+                popupService = new PopupService(mockDocument, testWindow);
+            });
+
+            it("adds elements to the body of the document", function () {
+                popupService.display(mockElement, [ 0, 0 ]);
+                expect(mockBody.append).toHaveBeenCalledWith(mockElement);
+            });
+
+            describe("when positioned in appropriate quadrants", function () {
+                it("orients elements relative to the top-left", function () {
+                    popupService.display(mockElement, [ 25, 50 ]);
+                    expect(mockElement.css).toHaveBeenCalledWith({
+                        position: 'absolute',
+                        left: '25px',
+                        top: '50px'
+                    });
+                });
+
+                it("orients elements relative to the top-right", function () {
+                    popupService.display(mockElement, [ 800, 50 ]);
+                    expect(mockElement.css).toHaveBeenCalledWith({
+                        position: 'absolute',
+                        right: '200px',
+                        top: '50px'
+                    });
+                });
+
+                it("orients elements relative to the bottom-right", function () {
+                    popupService.display(mockElement, [ 800, 650 ]);
+                    expect(mockElement.css).toHaveBeenCalledWith({
+                        position: 'absolute',
+                        right: '200px',
+                        bottom: '150px'
+                    });
+                });
+
+                it("orients elements relative to the bottom-left", function () {
+                    popupService.display(mockElement, [ 120, 650 ]);
+                    expect(mockElement.css).toHaveBeenCalledWith({
+                        position: 'absolute',
+                        left: '120px',
+                        bottom: '150px'
+                    });
+                });
+            });
+
+        });
+    }
+);
--- a/platform/commonUI/general/test/services/PopupSpec.js
+++ b/platform/commonUI/general/test/services/PopupSpec.js
@@ -0,0 +1,74 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+
+define(
+    ["../../src/services/Popup"],
+    function (Popup) {
+        'use strict';
+
+        describe("Popup", function () {
+            var mockElement,
+                testStyles,
+                popup;
+
+            beforeEach(function () {
+                mockElement =
+                    jasmine.createSpyObj('element', [ 'css', 'remove' ]);
+                testStyles = { left: '12px', top: '14px' };
+                popup = new Popup(mockElement, testStyles);
+            });
+
+            it("applies CSS styles when instantiated", function () {
+                expect(mockElement.css)
+                    .toHaveBeenCalledWith(testStyles);
+            });
+
+            it("reports the orientation of the popup", function () {
+                var otherStyles = {
+                        right: '12px',
+                        bottom: '14px'
+                    },
+                    otherPopup = new Popup(mockElement, otherStyles);
+
+                expect(popup.goesLeft()).toBeFalsy();
+                expect(popup.goesRight()).toBeTruthy();
+                expect(popup.goesUp()).toBeFalsy();
+                expect(popup.goesDown()).toBeTruthy();
+
+                expect(otherPopup.goesLeft()).toBeTruthy();
+                expect(otherPopup.goesRight()).toBeFalsy();
+                expect(otherPopup.goesUp()).toBeTruthy();
+                expect(otherPopup.goesDown()).toBeFalsy();
+            });
+
+            it("removes elements when dismissed", function () {
+                expect(mockElement.remove).not.toHaveBeenCalled();
+                popup.dismiss();
+                expect(mockElement.remove).toHaveBeenCalled();
+            });
+
+        });
+
+    }
+);
--- a/platform/commonUI/general/test/suite.json
+++ b/platform/commonUI/general/test/suite.json
@@ -3,16 +3,23 @@
    "controllers/BottomBarController",
    "controllers/ClickAwayController",
    "controllers/ContextMenuController",
+    "controllers/DateTimeFieldController",
+    "controllers/DateTimePickerController",
    "controllers/GetterSetterController",
    "controllers/SelectorController",
    "controllers/SplitPaneController",
+    "controllers/TimeRangeController",
    "controllers/ToggleController",
    "controllers/TreeNodeController",
    "controllers/ViewSwitcherController",
+    "directives/MCTClickElsewhere",
    "directives/MCTContainer",
    "directives/MCTDrag",
+    "directives/MCTPopup",
    "directives/MCTResize",
    "directives/MCTScroll",
+    "services/Popup",
+    "services/PopupService",
    "services/UrlService",
    "StyleSheetLoader"
 ]
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -45,13 +45,12 @@
                "implementation": "services/InfoService.js",
                "depends": [
                    "$compile",
-                    "$document",
-                    "$window",
                    "$rootScope",
+                    "popupService",
                    "agentService"
                ]
            }
-        ],  
+        ],
        "constants": [
            {
                "key": "INFO_HOVER_DELAY",
@@ -66,4 +65,4 @@
            }
        ]
    }
-}
+}
--- a/platform/commonUI/inspect/src/InfoConstants.js
+++ b/platform/commonUI/inspect/src/InfoConstants.js
@@ -31,13 +31,19 @@ define({
    BUBBLE_TEMPLATE: "<mct-container key=\"bubble\" " +
                "bubble-title=\"{{bubbleTitle}}\" " +
                "bubble-layout=\"{{bubbleLayout}}\" " +
-	            "class=\"bubble-container\">" +
-                "<mct-include key=\"bubbleTemplate\" ng-model=\"bubbleModel\">" +
+                "class=\"bubble-container\">" +
+                "<mct-include key=\"bubbleTemplate\" " +
+                "ng-model=\"bubbleModel\">" +
                "</mct-include>" +
                "</mct-container>",
-    // Pixel offset for bubble, to align arrow position
-    BUBBLE_OFFSET: [ 0, -26 ],
-	// Max width and margins allowed for bubbles; defined in /platform/commonUI/general/res/sass/_constants.scss
-	BUBBLE_MARGIN_LR: 10,
-	BUBBLE_MAX_WIDTH: 300
+    // Options and classes for bubble
+    BUBBLE_OPTIONS: {
+        offsetX: 0,
+        offsetY: -26
+    },
+    BUBBLE_MOBILE_POSITION: [ 0, -25 ],
+    // Max width and margins allowed for bubbles;
+    // defined in /platform/commonUI/general/res/sass/_constants.scss
+    BUBBLE_MARGIN_LR: 10,
+    BUBBLE_MAX_WIDTH: 300
 });
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -55,11 +55,6 @@ define(
                self.trackPosition(event);
            };

-            // Also make sure we dismiss bubble if representation is destroyed
-            // before the mouse actually leaves it
-            this.scopeOff =
-                element.scope().$on('$destroy', this.hideBubbleCallback);
-
            this.element = element;
            this.$timeout = $timeout;
            this.infoService = infoService;
@@ -143,7 +138,6 @@ define(
            this.hideBubble();
            // ...and detach listeners
            this.element.off('mouseenter', this.showBubbleCallback);
-            this.scopeOff();
        };

        return InfoGesture;
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -27,18 +27,18 @@ define(
        "use strict";

        var BUBBLE_TEMPLATE = InfoConstants.BUBBLE_TEMPLATE,
-            OFFSET = InfoConstants.BUBBLE_OFFSET;
+            MOBILE_POSITION = InfoConstants.BUBBLE_MOBILE_POSITION,
+            OPTIONS = InfoConstants.BUBBLE_OPTIONS;

        /**
         * Displays informative content ("info bubbles") for the user.
         * @memberof platform/commonUI/inspect
         * @constructor
         */
-        function InfoService($compile, $document, $window, $rootScope, agentService) {
+        function InfoService($compile, $rootScope, popupService, agentService) {
            this.$compile = $compile;
-            this.$document = $document;
-            this.$window = $window;
            this.$rootScope = $rootScope;
+            this.popupService = popupService;
            this.agentService = agentService;
        }

@@ -55,53 +55,47 @@ define(
         */
        InfoService.prototype.display = function (templateKey, title, content, position) {
            var $compile = this.$compile,
-                $document = this.$document,
-                $window = this.$window,
                $rootScope = this.$rootScope,
-                body = $document.find('body'),
                scope = $rootScope.$new(),
-                winDim = [$window.innerWidth, $window.innerHeight],
-                bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR + InfoConstants.BUBBLE_MAX_WIDTH,
-                goLeft = position[0] > (winDim[0] - bubbleSpaceLR),
-                goUp = position[1] > (winDim[1] / 2),
+                span = $compile('<span></span>')(scope),
+                bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR +
+                    InfoConstants.BUBBLE_MAX_WIDTH,
+                options,
+                popup,
                bubble;
-            
+
+            options = Object.create(OPTIONS);
+            options.marginX = -bubbleSpaceLR;
+
+            // On a phone, bubble takes up more screen real estate,
+            // so position it differently (toward the bottom)
+            if (this.agentService.isPhone(navigator.userAgent)) {
+                position = MOBILE_POSITION;
+                options = {};
+            }
+
+            popup = this.popupService.display(span, position, options);
+
            // Pass model & container parameters into the scope
            scope.bubbleModel = content;
            scope.bubbleTemplate = templateKey;
-            scope.bubbleLayout = (goUp ? 'arw-btm' : 'arw-top') + ' ' +
-                (goLeft ? 'arw-right' : 'arw-left');
            scope.bubbleTitle = title;
+            // Style the bubble according to how it was positioned
+            scope.bubbleLayout = [
+                popup.goesUp() ? 'arw-btm' : 'arw-top',
+                popup.goesLeft() ? 'arw-right' : 'arw-left'
+            ].join(' ');
+            scope.bubbleLayout = 'arw-top arw-left';

-            // Create the context menu
+            // Create the info bubble, now that we know how to
+            // point the arrow...
            bubble = $compile(BUBBLE_TEMPLATE)(scope);
+            span.append(bubble);

-            // Position the bubble
-            bubble.css('position', 'absolute');
-            if (this.agentService.isPhone(navigator.userAgent)) {
-                bubble.css('right', '0px');
-                bubble.css('left', '0px');
-                bubble.css('top', 'auto');
-                bubble.css('bottom', '25px');
-            } else {
-                if (goLeft) {
-                    bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
-                } else {
-                    bubble.css('left', position[0] + OFFSET[0] + 'px');
-                }
-                if (goUp) {
-                    bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
-                } else {
-                    bubble.css('top', position[1] + OFFSET[1] + 'px');
-                }
-            }
-
-            // Add the menu to the body
-            body.append(bubble);
-
-            // Return a function to dismiss the bubble
-            return function () {
-                bubble.remove();
+            // Return a function to dismiss the info bubble
+            return function dismiss() {
+                popup.dismiss();
+                scope.$destroy();
            };
        };

--- a/platform/commonUI/inspect/test/services/InfoServiceSpec.js
+++ b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
@@ -28,117 +28,85 @@ define(

        describe("The info service", function () {
            var mockCompile,
-                mockDocument,
-                testWindow,
                mockRootScope,
+                mockPopupService,
                mockAgentService,
-                mockCompiledTemplate,
-                testScope,
-                mockBody,
-                mockElement,
+                mockScope,
+                mockElements,
+                mockPopup,
                service;

            beforeEach(function () {
                mockCompile = jasmine.createSpy('$compile');
-                mockDocument = jasmine.createSpyObj('$document', ['find']);
-                testWindow = { innerWidth: 1000, innerHeight: 100 };
                mockRootScope = jasmine.createSpyObj('$rootScope', ['$new']);
                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
-                mockCompiledTemplate = jasmine.createSpy('template');
-                testScope = {};
-                mockBody = jasmine.createSpyObj('body', ['append']);
-                mockElement = jasmine.createSpyObj('element', ['css', 'remove']);
+                mockPopupService = jasmine.createSpyObj(
+                    'popupService',
+                    ['display']
+                );
+                mockPopup = jasmine.createSpyObj('popup', [
+                    'dismiss',
+                    'goesLeft',
+                    'goesRight',
+                    'goesUp',
+                    'goesDown'
+                ]);

-                mockDocument.find.andCallFake(function (tag) {
-                    return tag === 'body' ? mockBody : undefined;
+                mockScope = jasmine.createSpyObj("scope", ["$destroy"]);
+                mockElements = [];
+
+                mockPopupService.display.andReturn(mockPopup);
+                mockCompile.andCallFake(function () {
+                    var mockCompiledTemplate = jasmine.createSpy('template'),
+                        mockElement = jasmine.createSpyObj('element', [
+                            'css',
+                            'remove',
+                            'append'
+                        ]);
+                    mockCompiledTemplate.andReturn(mockElement);
+                    mockElements.push(mockElement);
+                    return mockCompiledTemplate;
                });
-                mockCompile.andReturn(mockCompiledTemplate);
-                mockCompiledTemplate.andReturn(mockElement);
-                mockRootScope.$new.andReturn(testScope);
+                mockRootScope.$new.andReturn(mockScope);

                service = new InfoService(
                    mockCompile,
-                    mockDocument,
-                    testWindow,
                    mockRootScope,
+                    mockPopupService,
                    mockAgentService
                );
            });

-            it("creates elements and appends them to the body to display", function () {
-                service.display('', '', {}, [0, 0]);
-                expect(mockBody.append).toHaveBeenCalledWith(mockElement);
+            it("creates elements and displays them as popups", function () {
+                service.display('', '', {}, [123, 456]);
+                expect(mockPopupService.display).toHaveBeenCalledWith(
+                    mockElements[0],
+                    [ 123, 456 ],
+                    jasmine.any(Object)
+                );
            });

            it("provides a function to remove displayed info bubbles", function () {
                var fn = service.display('', '', {}, [0, 0]);
-                expect(mockElement.remove).not.toHaveBeenCalled();
+                expect(mockPopup.dismiss).not.toHaveBeenCalled();
                fn();
-                expect(mockElement.remove).toHaveBeenCalled();
+                expect(mockPopup.dismiss).toHaveBeenCalled();
            });

-            describe("depending on mouse position", function () {
-                // Positioning should vary based on quadrant in window,
-                // which is 1000 x 100 in this test case.
-                it("displays from the top-left in the top-left quadrant", function () {
-                    service.display('', '', {}, [250, 25]);
-                    expect(mockElement.css).toHaveBeenCalledWith(
-                        'left',
-                        (250 + InfoConstants.BUBBLE_OFFSET[0]) + 'px'
-                    );
-                    expect(mockElement.css).toHaveBeenCalledWith(
-                        'top',
-                        (25 + InfoConstants.BUBBLE_OFFSET[1]) + 'px'
-                    );
-                });
-
-                it("displays from the top-right in the top-right quadrant", function () {
-                    service.display('', '', {}, [700, 25]);
-                    expect(mockElement.css).toHaveBeenCalledWith(
-                        'right',
-                        (300 + InfoConstants.BUBBLE_OFFSET[0]) + 'px'
-                    );
-                    expect(mockElement.css).toHaveBeenCalledWith(
-                        'top',
-                        (25 + InfoConstants.BUBBLE_OFFSET[1]) + 'px'
-                    );
-                });
-
-                it("displays from the bottom-left in the bottom-left quadrant", function () {
-                    service.display('', '', {}, [250, 70]);
-                    expect(mockElement.css).toHaveBeenCalledWith(
-                        'left',
-                        (250 + InfoConstants.BUBBLE_OFFSET[0]) + 'px'
-                    );
-                    expect(mockElement.css).toHaveBeenCalledWith(
-                        'bottom',
-                        (30 + InfoConstants.BUBBLE_OFFSET[1]) + 'px'
-                    );
-                });
-
-                it("displays from the bottom-right in the bottom-right quadrant", function () {
-                    service.display('', '', {}, [800, 60]);
-                    expect(mockElement.css).toHaveBeenCalledWith(
-                        'right',
-                        (200 + InfoConstants.BUBBLE_OFFSET[0]) + 'px'
-                    );
-                    expect(mockElement.css).toHaveBeenCalledWith(
-                        'bottom',
-                        (40 + InfoConstants.BUBBLE_OFFSET[1]) + 'px'
-                    );
-                });
-                
-                it("when on phone device, positioning is always on bottom", function () {
-                    mockAgentService.isPhone.andReturn(true);
-                    service = new InfoService(
-                        mockCompile,
-                        mockDocument,
-                        testWindow,
-                        mockRootScope,
-                        mockAgentService
-                    );
-                    service.display('', '', {}, [0, 0]);
-                });
+            it("when on phone device, positions at  bottom", function () {
+                mockAgentService.isPhone.andReturn(true);
+                service = new InfoService(
+                    mockCompile,
+                    mockRootScope,
+                    mockPopupService,
+                    mockAgentService
+                );
+                service.display('', '', {}, [123, 456]);
+                expect(mockPopupService.display).toHaveBeenCalledWith(
+                    mockElements[0],
+                    [ 0, -25 ],
+                    jasmine.any(Object)
+                );
            });

        });
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -7,12 +7,14 @@ $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
 $colorInteriorBorder: rgba($colorBodyFg, 0.1);
+$colorA: #ccc;
+$colorAHov: #fff;
 $contrastRatioPercent: 7%;
 $basicCr: 2px;
 $controlCr: 3px;
 $smallCr: 2px;

-// Buttons
+// Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
 $colorBtnFg: $colorBodyFg;
 $colorBtnMajorBg: $colorKey;
@@ -20,6 +22,18 @@ $colorBtnMajorFg: $colorKeyFg;
 $colorBtnIcon: $colorKey;
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
+$shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$sliderColorBase: $colorKey;
+$sliderColorRangeHolder: rgba(black, 0.1);
+$sliderColorRange: rgba($sliderColorBase, 0.3);
+$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
+$sliderColorKnob: rgba($sliderColorBase, 0.6);
+$sliderColorKnobHov: $sliderColorBase;
+$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
+$sliderColorRangeValHovFg: $colorKeyFg;
+$sliderKnobW: nth($ueTimeControlH,2)/2;
+$timeControllerToiLineColor: #00c2ff;
+$timeControllerToiLineColorHov: #fff;

 // General Colors
 $colorAlt1: #ffc700;
@@ -34,6 +48,7 @@ $colorFormSectionHeader: rgba(#000, 0.2);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
+$colorTick: rgba(white, 0.2);

 // Menu colors
 $colorMenuBg: pullForward($colorBodyBg, 23%);
@@ -99,16 +114,17 @@ $colorItemBgSelected: $colorKey;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: darken($colorBodyBg, 10%);
 $colorTabBodyFg: lighten($colorTabBodyBg, 40%);
-$colorTabHeaderBg: lighten($colorBodyBg, 10%);
-$colorTabHeaderFg: lighten($colorTabHeaderBg, 40%);
+$colorTabHeaderBg: rgba(white, 0.1); // lighten($colorBodyBg, 10%);
+$colorTabHeaderFg: $colorBodyFg; //lighten($colorTabHeaderBg, 40%);
 $colorTabHeaderBorder: $colorBodyBg;

 // Plot
 $colorPlotBg: rgba(black, 0.1);
 $colorPlotFg: $colorBodyFg;
-$colorPlotHash: rgba(white, 0.2);
+$colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
+$colorPlotLabelFg: pushBack($colorPlotFg, 20%);

 // Tree
 $colorItemTreeIcon: $colorKey;
@@ -139,5 +155,16 @@ $colorGrippyInteriorHover: $colorKey;
 // Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 5%);

+// Datetime Picker
+$colorCalCellHovBg: $colorKey;
+$colorCalCellHovFg: $colorKeyFg;
+$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
+$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
+$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
+
 // About Screen
-$colorAboutLink: #84b3ff;
+$colorAboutLink: #84b3ff;
+
+// Loading
+$colorLoadingBg: rgba($colorBodyFg, 0.2);
+$colorLoadingFg: $colorAlt1;
--- a/Show More
+++ b/Show More