Hacked plot to work with new time conductor

Fixes #933
WIP: Fixed look for Firefox

README.md

@@ -1,4 +1,4 @@
-# Open MCT
+# Open MCT [![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](http://www.apache.org/licenses/LICENSE-2.0)
 
 Open MCT is a web-based platform for mission operations user interface
 software.
@@ -7,7 +7,7 @@ software.
 
 A bundle is a group of software components (including source code, declared
 as AMD modules, as well as resources such as images and HTML templates)
-that are intended to be added or removed as a single unit. A plug-in for
+that is intended to be added or removed as a single unit. A plug-in for
 Open MCT will be expressed as a bundle; platform components are also
 expressed as bundles.
 
@@ -133,6 +133,6 @@ documentation, may presume an understanding of these terms.
   it, and it is thereafter considered the _navigated_ object (until the
   user makes another such choice.)
 * _space_: A name used to identify a persistence store. Interactions with
-  persistence with generally involve a `space` parameter in some form, to
+  persistence will generally involve a `space` parameter in some form, to
   distinguish multiple persistence stores from one another (for cases
   where there are multiple valid persistence locations available.)

app.js

@@ -75,6 +75,8 @@
     // Expose everything else as static files
     app.use(express['static'](options.directory));
 
-    // Finally, open the HTTP server
-    app.listen(options.port);
+    // Finally, open the HTTP server and log the instance to the console
+    app.listen(options.port, function() {
+        console.log('Open MCT application running at localhost:' + options.port)
+    });
 }());

bower.json

@@ -18,6 +18,8 @@
     "node-uuid": "^1.4.7",
     "comma-separated-values": "^3.6.4",
     "FileSaver.js": "^0.0.2",
-    "zepto": "^1.1.6"
+    "zepto": "^1.1.6",
+    "eventemitter3": "^1.2.0",
+    "d3": "~4.1.0"
   }
 }

circle.yml

@@ -17,6 +17,7 @@ deployment:
 test:
   post:
     - gulp lint
+    - gulp checkstyle
 
 general:
   branches:

example/msl/src/RemsTelemetryModelProvider.js

@@ -45,11 +45,12 @@ define(
             function buildTaxonomy(dictionary){
                 var models = {};
 
-                function addMeasurement(measurement){
+                function addMeasurement(measurement, parent){
                     var format = FORMAT_MAPPINGS[measurement.type];
                     models[makeId(measurement)] = {
                         type: "msl.measurement",
                         name: measurement.name,
+                        location: parent,
                         telemetry: {
                             key: measurement.identifier,
                             ranges: [{
@@ -62,17 +63,24 @@ define(
                     };
                 }
 
-                function addInstrument(subsystem) {
-                    var measurements = (subsystem.measurements || []);
-                    models[makeId(subsystem)] = {
+                function addInstrument(subsystem, spacecraftId) {
+                    var measurements = (subsystem.measurements || []),
+                        instrumentId = makeId(subsystem);
+
+                    models[instrumentId] = {
                         type: "msl.instrument",
                         name: subsystem.name,
+                        location: spacecraftId,
                         composition: measurements.map(makeId)
                     };
-                    measurements.forEach(addMeasurement);
+                    measurements.forEach(function(measurement) {
+                        addMeasurement(measurement, instrumentId);
+                    });
                 }
 
-                (dictionary.instruments || []).forEach(addInstrument);
+                (dictionary.instruments || []).forEach(function(instrument) {
+                    addInstrument(instrument, "msl:curiosity");
+                });
                 return models;
             }
 

main.js

@@ -28,13 +28,15 @@ requirejs.config({
         "angular-route": "bower_components/angular-route/angular-route.min",
         "csv": "bower_components/comma-separated-values/csv.min",
         "es6-promise": "bower_components/es6-promise/promise.min",
+        "EventEmitter": "bower_components/eventemitter3/index",
         "moment": "bower_components/moment/moment",
         "moment-duration-format": "bower_components/moment-duration-format/lib/moment-duration-format",
         "saveAs": "bower_components/FileSaver.js/FileSaver.min",
         "screenfull": "bower_components/screenfull/dist/screenfull.min",
         "text": "bower_components/text/text",
         "uuid": "bower_components/node-uuid/uuid",
-        "zepto": "bower_components/zepto/zepto.min"
+        "zepto": "bower_components/zepto/zepto.min",
+        "d3": "bower_components/d3/d3.min"
     },
     "shim": {
         "angular": {
@@ -43,6 +45,9 @@ requirejs.config({
         "angular-route": {
             "deps": ["angular"]
         },
+        "EventEmitter": {
+            "exports": "EventEmitter"
+        },
         "moment-duration-format": {
             "deps": ["moment"]
         },
@@ -51,6 +56,9 @@ requirejs.config({
         },
         "zepto": {
             "exports": "Zepto"
+        },
+        "d3": {
+            "exports": "d3"
         }
     }
 });
@@ -82,6 +90,7 @@ define([
     './platform/features/pages/bundle',
     './platform/features/plot/bundle',
     './platform/features/timeline/bundle',
+    './platform/features/conductor-v2/bundle',
     './platform/features/table/bundle',
     './platform/forms/bundle',
     './platform/identity/bundle',
@@ -92,7 +101,8 @@ define([
     './platform/entanglement/bundle',
     './platform/search/bundle',
     './platform/status/bundle',
-    './platform/commonUI/regions/bundle'
+    './platform/commonUI/regions/bundle',
+    './example/msl/bundle'
 ], function (Main, legacyRegistry) {
     return {
         legacyRegistry: legacyRegistry,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "0.10.2-SNAPSHOT",
+  "version": "0.11.0-SNAPSHOT",
   "description": "The Open MCT core platform",
   "dependencies": {
     "express": "^4.13.1",

platform/commonUI/browse/bundle.js

@@ -24,23 +24,15 @@ define([
     "./src/BrowseController",
     "./src/PaneController",
     "./src/BrowseObjectController",
-    "./src/creation/CreateMenuController",
-    "./src/creation/LocatorController",
     "./src/MenuArrowController",
     "./src/navigation/NavigationService",
-    "./src/creation/CreationPolicy",
     "./src/navigation/NavigateAction",
+    "./src/navigation/OrphanNavigationHandler",
     "./src/windowing/NewTabAction",
     "./src/windowing/FullscreenAction",
-    "./src/creation/CreateActionProvider",
-    "./src/creation/AddActionProvider",
-    "./src/creation/CreationService",
     "./src/windowing/WindowTitler",
     "text!./res/templates/browse.html",
-    "text!./res/templates/create/locator.html",
     "text!./res/templates/browse-object.html",
-    "text!./res/templates/create/create-button.html",
-    "text!./res/templates/create/create-menu.html",
     "text!./res/templates/items/grid-item.html",
     "text!./res/templates/browse/object-header.html",
     "text!./res/templates/menu-arrow.html",
@@ -53,23 +45,15 @@ define([
     BrowseController,
     PaneController,
     BrowseObjectController,
-    CreateMenuController,
-    LocatorController,
     MenuArrowController,
     NavigationService,
-    CreationPolicy,
     NavigateAction,
+    OrphanNavigationHandler,
     NewTabAction,
     FullscreenAction,
-    CreateActionProvider,
-    AddActionProvider,
-    CreationService,
     WindowTitler,
     browseTemplate,
-    locatorTemplate,
     browseObjectTemplate,
-    createButtonTemplate,
-    createMenuTemplate,
     gridItemTemplate,
     objectHeaderTemplate,
     menuArrowTemplate,
@@ -109,11 +93,9 @@ define([
                         "$scope",
                         "$route",
                         "$location",
-                        "$window",
                         "objectService",
                         "navigationService",
                         "urlService",
-                        "policyService",
                         "DEFAULT_PATH"
                     ]
                 },
@@ -136,22 +118,6 @@ define([
                         "$route"
                     ]
                 },
-                {
-                    "key": "CreateMenuController",
-                    "implementation": CreateMenuController,
-                    "depends": [
-                        "$scope"
-                    ]
-                },
-                {
-                    "key": "LocatorController",
-                    "implementation": LocatorController,
-                    "depends": [
-                        "$scope",
-                        "$timeout",
-                        "objectService"
-                    ]
-                },
                 {
                     "key": "MenuArrowController",
                     "implementation": MenuArrowController,
@@ -160,12 +126,6 @@ define([
                     ]
                 }
             ],
-            "controls": [
-                {
-                    "key": "locator",
-                    "template": locatorTemplate
-                }
-            ],
             "representations": [
                 {
                     "key": "view-object",
@@ -181,17 +141,6 @@ define([
                         "view"
                     ]
                 },
-                {
-                    "key": "create-button",
-                    "template": createButtonTemplate
-                },
-                {
-                    "key": "create-menu",
-                    "template": createMenuTemplate,
-                    "uses": [
-                        "action"
-                    ]
-                },
                 {
                     "key": "grid-item",
                     "template": gridItemTemplate,
@@ -244,19 +193,15 @@ define([
                     "implementation": NavigationService
                 }
             ],
-            "policies": [
-                {
-                    "implementation": CreationPolicy,
-                    "category": "creation"
-                }
-            ],
             "actions": [
                 {
                     "key": "navigate",
                     "implementation": NavigateAction,
                     "depends": [
                         "navigationService",
-                        "$q"
+                        "$q",
+                        "policyService",
+                        "$window"
                     ]
                 },
                 {
@@ -302,42 +247,6 @@ define([
                     "editable": false
                 }
             ],
-            "components": [
-                {
-                    "key": "CreateActionProvider",
-                    "provides": "actionService",
-                    "type": "provider",
-                    "implementation": CreateActionProvider,
-                    "depends": [
-                        "$q",
-                        "typeService",
-                        "navigationService",
-                        "policyService"
-                    ]
-                },
-                {
-                    "key": "AddActionProvider",
-                    "provides": "actionService",
-                    "type": "provider",
-                    "implementation": AddActionProvider,
-                    "depends": [
-                        "$q",
-                        "typeService",
-                        "dialogService",
-                        "policyService"
-                    ]
-                },
-                {
-                    "key": "CreationService",
-                    "provides": "creationService",
-                    "type": "provider",
-                    "implementation": CreationService,
-                    "depends": [
-                        "$q",
-                        "$log"
-                    ]
-                }
-            ],
             "runs": [
                 {
                     "implementation": WindowTitler,
@@ -346,6 +255,14 @@ define([
                         "$rootScope",
                         "$document"
                     ]
+                },
+                {
+                    "implementation": OrphanNavigationHandler,
+                    "depends": [
+                        "throttle",
+                        "topic",
+                        "navigationService"
+                    ]
                 }
             ],
             "licenses": [

platform/commonUI/browse/res/templates/browse-object.html

@@ -43,7 +43,7 @@
             </mct-representation>
         </div>
     </div>
-    <div class="holder l-flex-col flex-elem grows l-object-wrapper">
+    <div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">
         <div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
             <!-- Toolbar and Save/Cancel buttons -->
             <div class="l-edit-controls flex-elem l-flex-row flex-align-end">
@@ -59,4 +59,9 @@
             </mct-representation>
         </div>
     </div>
+    <!-- put time conductor in here? -->
+    <mct-representation mct-object="domainObject"
+                        key="'time-conductor'"
+                        class="abs holder flex-elem flex-fixed l-flex-row l-time-conductor-holder">
+    </mct-representation>
 </div>

platform/commonUI/browse/src/BrowseController.js

@@ -44,11 +44,9 @@ define(
             $scope,
             $route,
             $location,
-            $window,
             objectService,
             navigationService,
             urlService,
-            policyService,
             defaultPath
         ) {
             var path = [ROOT_ID].concat(
@@ -75,25 +73,10 @@ define(
 
             }
 
-            // Callback for updating the in-scope reference to the object
-            // that is currently navigated-to.
-            function setNavigation(domainObject) {
-                var navigationAllowed = true;
-
-                if (domainObject === $scope.navigatedObject) {
-                    //do nothing;
-                    return;
-                }
-
-                policyService.allow("navigation", $scope.navigatedObject, domainObject, function (message) {
-                    navigationAllowed = $window.confirm(message + "\r\n\r\n" +
-                        " Are you sure you want to continue?");
-                });
-
+            function setScopeObjects(domainObject, navigationAllowed) {
                 if (navigationAllowed) {
                     $scope.navigatedObject = domainObject;
                     $scope.treeModel.selectedObject = domainObject;
-                    navigationService.setNavigation(domainObject);
                     updateRoute(domainObject);
                 } else {
                     //If navigation was unsuccessful (ie. blocked), reset
@@ -103,6 +86,20 @@ define(
                 }
             }
 
+            // Callback for updating the in-scope reference to the object
+            // that is currently navigated-to.
+            function setNavigation(domainObject) {
+                if (domainObject === $scope.navigatedObject) {
+                    //do nothing;
+                    return;
+                }
+                if (domainObject) {
+                    domainObject.getCapability("action").perform("navigate").then(setScopeObjects.bind(undefined, domainObject));
+                } else {
+                    setScopeObjects(domainObject, true);
+                }
+            }
+
             function navigateTo(domainObject) {
 
                 // Check if an object has been navigated-to already...

platform/commonUI/browse/src/navigation/NavigateAction.js

@@ -33,10 +33,12 @@ define(
          * @constructor
          * @implements {Action}
          */
-        function NavigateAction(navigationService, $q, context) {
+        function NavigateAction(navigationService, $q, policyService, $window, context) {
             this.domainObject = context.domainObject;
             this.$q = $q;
             this.navigationService = navigationService;
+            this.policyService = policyService;
+            this.$window = $window;
         }
 
         /**
@@ -45,9 +47,20 @@ define(
          *          navigation has been updated
          */
         NavigateAction.prototype.perform = function () {
+            var self = this,
+                navigationAllowed = true;
+
+            function allow() {
+                self.policyService.allow("navigation", self.navigationService.getNavigation(), self.domainObject, function (message) {
+                    navigationAllowed = self.$window.confirm(message + "\r\n\r\n" +
+                        " Are you sure you want to continue?");
+                });
+                return navigationAllowed;
+            }
+
             // Set navigation, and wrap like a promise
             return this.$q.when(
-                this.navigationService.setNavigation(this.domainObject)
+                allow() && this.navigationService.setNavigation(this.domainObject)
             );
         };
 

platform/commonUI/browse/src/navigation/OrphanNavigationHandler.js

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define([], function () {
+
+    /**
+     * Navigates away from orphan objects whenever they are detected.
+     *
+     * An orphan object is an object whose apparent parent does not
+     * actually contain it. This may occur in certain circumstances, such
+     * as when persistence succeeds for a newly-created object but fails
+     * for its parent.
+     *
+     * @param throttle the `throttle` service
+     * @param topic the `topic` service
+     * @param navigationService the `navigationService`
+     * @constructor
+     */
+    function OrphanNavigationHandler(throttle, topic, navigationService) {
+        var throttledCheckNavigation;
+
+        function getParent(domainObject) {
+            var context = domainObject.getCapability('context');
+            return context.getParent();
+        }
+
+        function isOrphan(domainObject) {
+            var parent = getParent(domainObject),
+                composition = parent.getModel().composition,
+                id = domainObject.getId();
+            return !composition || (composition.indexOf(id) === -1);
+        }
+
+        function navigateToParent(domainObject) {
+            var parent = getParent(domainObject);
+            return parent.getCapability('action').perform('navigate');
+        }
+
+        function checkNavigation() {
+            var navigatedObject = navigationService.getNavigation();
+            if (navigatedObject.hasCapability('context') &&
+                isOrphan(navigatedObject)) {
+                if (!navigatedObject.getCapability('editor').isEditContextRoot()) {
+                    navigateToParent(navigatedObject);
+                }
+            }
+        }
+
+        throttledCheckNavigation = throttle(checkNavigation);
+
+        navigationService.addListener(throttledCheckNavigation);
+        topic('mutation').listen(throttledCheckNavigation);
+    }
+
+    return OrphanNavigationHandler;
+});

platform/commonUI/browse/test/BrowseControllerSpec.js

@@ -37,9 +37,8 @@ define(
                 mockUrlService,
                 mockDomainObject,
                 mockNextObject,
-                mockWindow,
-                mockPolicyService,
                 testDefaultRoot,
+                mockActionCapability,
                 controller;
 
             function mockPromise(value) {
@@ -55,25 +54,14 @@ define(
                     mockScope,
                     mockRoute,
                     mockLocation,
-                    mockWindow,
                     mockObjectService,
                     mockNavigationService,
                     mockUrlService,
-                    mockPolicyService,
                     testDefaultRoot
                 );
             }
 
             beforeEach(function () {
-                mockWindow = jasmine.createSpyObj('$window', [
-                   "confirm"
-                ]);
-                mockWindow.confirm.andReturn(true);
-
-                mockPolicyService = jasmine.createSpyObj('policyService', [
-                    'allow'
-                ]);
-
                 testDefaultRoot = "some-root-level-domain-object";
 
                 mockScope = jasmine.createSpyObj(
@@ -128,6 +116,8 @@ define(
                 mockNextObject.getId.andReturn("next");
                 mockDomainObject.getId.andReturn(testDefaultRoot);
 
+                mockActionCapability = jasmine.createSpyObj('actionCapability', ['perform']);
+
                 instantiateController();
             });
 
@@ -211,8 +201,13 @@ define(
                 mockContext.getPath.andReturn(
                     [mockRootObject, mockDomainObject, mockNextObject]
                 );
+
+                //Return true from navigate action
+                mockActionCapability.perform.andReturn(mockPromise(true));
+
                 mockNextObject.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockContext;
+                    return (c === 'context' && mockContext) ||
+                        (c === 'action' && mockActionCapability);
                 });
                 mockScope.$on.andReturn(mockUnlisten);
                 // Provide a navigation change
@@ -225,6 +220,7 @@ define(
                 mockLocation.path.andReturn("/browse/");
 
                 mockNavigationService.setNavigation.andReturn(true);
+                mockActionCapability.perform.andReturn(mockPromise(true));
 
                 // Exercise the Angular workaround
                 mockNavigationService.addListener.mostRecentCall.args[0]();
@@ -243,6 +239,9 @@ define(
                 mockScope.navigatedObject = mockDomainObject;
                 mockNavigationService.setNavigation.andReturn(true);
 
+                mockActionCapability.perform.andReturn(mockPromise(true));
+                mockNextObject.getCapability.andReturn(mockActionCapability);
+
                 //Simulate a change in selected tree object
                 mockScope.treeModel = {selectedObject: mockDomainObject};
                 mockScope.$watch.mostRecentCall.args[1](mockNextObject);
@@ -254,11 +253,10 @@ define(
             it("after failed navigation event resets the selected tree" +
                 " object", function () {
                 mockScope.navigatedObject = mockDomainObject;
-                mockWindow.confirm.andReturn(false);
-                mockPolicyService.allow.andCallFake(function (category, object, context, callback) {
-                    callback("unsaved changes");
-                    return false;
-                });
+
+                //Return false from navigation action
+                mockActionCapability.perform.andReturn(mockPromise(false));
+                mockNextObject.getCapability.andReturn(mockActionCapability);
 
                 //Simulate a change in selected tree object
                 mockScope.treeModel = {selectedObject: mockDomainObject};

platform/commonUI/browse/test/creation/CreateActionSpec.js

@@ -1,130 +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.
- *****************************************************************************/
-
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
-define(
-    ["../../src/creation/CreateAction"],
-    function (CreateAction) {
-
-        describe("The create action", function () {
-            var mockType,
-                mockParent,
-                mockContext,
-                mockDialogService,
-                mockCreationService,
-                action;
-
-            function mockPromise(value) {
-                return {
-                    then: function (callback) {
-                        return mockPromise(callback(value));
-                    }
-                };
-            }
-
-            beforeEach(function () {
-                mockType = jasmine.createSpyObj(
-                    "type",
-                    [
-                        "getKey",
-                        "getGlyph",
-                        "getName",
-                        "getDescription",
-                        "getProperties",
-                        "getInitialModel"
-                    ]
-                );
-                mockParent = jasmine.createSpyObj(
-                    "domainObject",
-                    [
-                        "getId",
-                        "getModel",
-                        "getCapability"
-                    ]
-                );
-                mockContext = {
-                    domainObject: mockParent
-                };
-                mockDialogService = jasmine.createSpyObj(
-                    "dialogService",
-                    ["getUserInput"]
-                );
-                mockCreationService = jasmine.createSpyObj(
-                    "creationService",
-                    ["createObject"]
-                );
-
-                mockType.getKey.andReturn("test");
-                mockType.getGlyph.andReturn("T");
-                mockType.getDescription.andReturn("a test type");
-                mockType.getName.andReturn("Test");
-                mockType.getProperties.andReturn([]);
-                mockType.getInitialModel.andReturn({});
-
-                mockDialogService.getUserInput.andReturn(mockPromise({}));
-
-                action = new CreateAction(
-                    mockType,
-                    mockParent,
-                    mockContext,
-                    mockDialogService,
-                    mockCreationService
-                );
-            });
-
-            it("exposes type-appropriate metadata", function () {
-                var metadata = action.getMetadata();
-
-                expect(metadata.name).toEqual("Test");
-                expect(metadata.description).toEqual("a test type");
-                expect(metadata.glyph).toEqual("T");
-            });
-
-            //TODO: Disabled for NEM Beta
-            xit("invokes the creation service when performed", function () {
-                action.perform();
-                expect(mockCreationService.createObject).toHaveBeenCalledWith(
-                    { type: "test" },
-                    mockParent
-                );
-            });
-
-            //TODO: Disabled for NEM Beta
-            xit("does not create an object if the user cancels", function () {
-                mockDialogService.getUserInput.andReturn({
-                    then: function (callback, fail) {
-                        fail();
-                    }
-                });
-
-                action.perform();
-
-                expect(mockCreationService.createObject)
-                    .not.toHaveBeenCalled();
-
-            });
-
-        });
-    }
-);

platform/commonUI/browse/test/navigation/NavigateActionSpec.js

@@ -31,6 +31,8 @@ define(
             var mockNavigationService,
                 mockQ,
                 mockDomainObject,
+                mockPolicyService,
+                mockWindow,
                 action;
 
             function mockPromise(value) {
@@ -44,25 +46,70 @@ define(
             beforeEach(function () {
                 mockNavigationService = jasmine.createSpyObj(
                     "navigationService",
-                    ["setNavigation"]
+                    [
+                        "setNavigation",
+                        "getNavigation"
+                    ]
                 );
+                mockNavigationService.getNavigation.andReturn({});
                 mockQ = { when: mockPromise };
                 mockDomainObject = jasmine.createSpyObj(
                     "domainObject",
                     ["getId", "getModel", "getCapability"]
                 );
 
+                mockPolicyService = jasmine.createSpyObj("policyService",
+                    [
+                        "allow"
+                    ]);
+                mockWindow = jasmine.createSpyObj("$window",
+                    [
+                        "confirm"
+                    ]);
+
                 action = new NavigateAction(
                     mockNavigationService,
                     mockQ,
+                    mockPolicyService,
+                    mockWindow,
                     { domainObject: mockDomainObject }
                 );
             });
 
-            it("invokes the navigate service when performed", function () {
+            it("invokes the policy service to determine if navigation" +
+                " allowed", function () {
                 action.perform();
-                expect(mockNavigationService.setNavigation)
-                    .toHaveBeenCalledWith(mockDomainObject);
+                expect(mockPolicyService.allow)
+                    .toHaveBeenCalledWith("navigation", jasmine.any(Object), jasmine.any(Object), jasmine.any(Function));
+            });
+
+            it("prompts user if policy rejection", function () {
+                action.perform();
+                expect(mockPolicyService.allow).toHaveBeenCalled();
+                mockPolicyService.allow.mostRecentCall.args[3]();
+                expect(mockWindow.confirm).toHaveBeenCalled();
+            });
+
+            describe("shows a prompt", function () {
+                beforeEach(function () {
+                    // Ensure the allow callback is called synchronously
+                    mockPolicyService.allow.andCallFake(function () {
+                        return arguments[3]();
+                    });
+                });
+                it("does not navigate on prompt rejection", function () {
+                    mockWindow.confirm.andReturn(false);
+                    action.perform();
+                    expect(mockNavigationService.setNavigation)
+                        .not.toHaveBeenCalled();
+                });
+
+                it("does navigate on prompt acceptance", function () {
+                    mockWindow.confirm.andReturn(true);
+                    action.perform();
+                    expect(mockNavigationService.setNavigation)
+                        .toHaveBeenCalled();
+                });
             });
 
             it("is only applicable when a domain object is in context", function () {

platform/commonUI/browse/test/navigation/OrphanNavigationHandlerSpec.js

@@ -0,0 +1,180 @@
+/*****************************************************************************
+* 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.
+*****************************************************************************/
+
+define([
+    '../../src/navigation/OrphanNavigationHandler'
+], function (OrphanNavigationHandler) {
+    describe("OrphanNavigationHandler", function () {
+        var mockTopic,
+            mockThrottle,
+            mockMutationTopic,
+            mockNavigationService,
+            mockDomainObject,
+            mockParentObject,
+            mockContext,
+            mockActionCapability,
+            mockEditor,
+            testParentModel,
+            testId,
+            mockThrottledFns;
+
+        beforeEach(function () {
+            testId = 'some-identifier';
+
+            mockThrottledFns = [];
+            testParentModel = {};
+
+            mockTopic = jasmine.createSpy('topic');
+            mockThrottle = jasmine.createSpy('throttle');
+            mockNavigationService = jasmine.createSpyObj('navigationService', [
+                'getNavigation',
+                'addListener'
+            ]);
+            mockMutationTopic = jasmine.createSpyObj('mutationTopic', [
+                'listen'
+            ]);
+            mockDomainObject = jasmine.createSpyObj('domainObject', [
+                'getId',
+                'getCapability',
+                'getModel',
+                'hasCapability'
+            ]);
+            mockParentObject = jasmine.createSpyObj('domainObject', [
+                'getId',
+                'getCapability',
+                'getModel',
+                'hasCapability'
+            ]);
+            mockContext = jasmine.createSpyObj('context', ['getParent']);
+            mockActionCapability = jasmine.createSpyObj('action', ['perform']);
+            mockEditor = jasmine.createSpyObj('editor', ['isEditContextRoot']);
+
+            mockThrottle.andCallFake(function (fn) {
+                var mockThrottledFn =
+                    jasmine.createSpy('throttled-' + mockThrottledFns.length);
+                mockThrottledFn.andCallFake(fn);
+                mockThrottledFns.push(mockThrottledFn);
+                return mockThrottledFn;
+            });
+            mockTopic.andCallFake(function (k) {
+                return k === 'mutation' && mockMutationTopic;
+            });
+            mockDomainObject.getId.andReturn(testId);
+            mockDomainObject.getCapability.andCallFake(function (c) {
+                return {
+                    context: mockContext,
+                    editor: mockEditor
+                }[c];
+            });
+            mockDomainObject.hasCapability.andCallFake(function (c) {
+                return !!mockDomainObject.getCapability(c);
+            });
+            mockParentObject.getModel.andReturn(testParentModel);
+            mockParentObject.getCapability.andCallFake(function (c) {
+                return {
+                    action: mockActionCapability
+                }[c];
+            });
+            mockContext.getParent.andReturn(mockParentObject);
+            mockNavigationService.getNavigation.andReturn(mockDomainObject);
+            mockEditor.isEditContextRoot.andReturn(false);
+
+            return new OrphanNavigationHandler(
+                mockThrottle,
+                mockTopic,
+                mockNavigationService
+            );
+        });
+
+
+        it("listens for mutation with a throttled function", function () {
+            expect(mockMutationTopic.listen)
+                .toHaveBeenCalledWith(jasmine.any(Function));
+            expect(mockThrottledFns.indexOf(
+                mockMutationTopic.listen.mostRecentCall.args[0]
+            )).not.toEqual(-1);
+        });
+
+        it("listens for navigation changes with a throttled function", function () {
+            expect(mockNavigationService.addListener)
+                .toHaveBeenCalledWith(jasmine.any(Function));
+            expect(mockThrottledFns.indexOf(
+                mockNavigationService.addListener.mostRecentCall.args[0]
+            )).not.toEqual(-1);
+        });
+
+        [false, true].forEach(function (isOrphan) {
+            var prefix = isOrphan ? "" : "non-";
+            describe("for " + prefix + "orphan objects", function () {
+                beforeEach(function () {
+                    testParentModel.composition = isOrphan ? [] : [testId];
+                });
+
+                [false, true].forEach(function (isEditRoot) {
+                    var caseName = isEditRoot ?
+                        "that are being edited" : "that are not being edited";
+
+                    function itNavigatesAsExpected() {
+                        if (isOrphan && !isEditRoot) {
+                            it("navigates to the parent", function () {
+                                expect(mockActionCapability.perform)
+                                    .toHaveBeenCalledWith('navigate');
+                            });
+                        } else {
+                            it("does nothing", function () {
+                                expect(mockActionCapability.perform)
+                                    .not.toHaveBeenCalled();
+                            });
+                        }
+                    }
+
+                    describe(caseName, function () {
+                        beforeEach(function () {
+                            mockEditor.isEditContextRoot.andReturn(isEditRoot);
+                        });
+
+                        describe("when navigation changes", function () {
+                            beforeEach(function () {
+                                mockNavigationService.addListener.mostRecentCall
+                                    .args[0](mockDomainObject);
+                            });
+
+                            itNavigatesAsExpected();
+                        });
+
+                        describe("when mutation occurs", function () {
+                            beforeEach(function () {
+                                mockMutationTopic.listen.mostRecentCall
+                                    .args[0](mockParentObject);
+                            });
+
+                            itNavigatesAsExpected();
+                        });
+
+                    });
+                });
+            });
+        });
+
+    });
+});
+

platform/commonUI/edit/bundle.js

@@ -43,6 +43,15 @@ define([
     "./src/capabilities/EditorCapability",
     "./src/capabilities/TransactionCapabilityDecorator",
     "./src/services/TransactionService",
+    "./src/creation/CreateMenuController",
+    "./src/creation/LocatorController",
+    "./src/creation/CreationPolicy",
+    "./src/creation/CreateActionProvider",
+    "./src/creation/AddActionProvider",
+    "./src/creation/CreationService",
+    "text!./res/templates/create/locator.html",
+    "text!./res/templates/create/create-button.html",
+    "text!./res/templates/create/create-menu.html",
     "text!./res/templates/library.html",
     "text!./res/templates/edit-object.html",
     "text!./res/templates/edit-action-buttons.html",
@@ -72,6 +81,15 @@ define([
     EditorCapability,
     TransactionCapabilityDecorator,
     TransactionService,
+    CreateMenuController,
+    LocatorController,
+    CreationPolicy,
+    CreateActionProvider,
+    AddActionProvider,
+    CreationService,
+    locatorTemplate,
+    createButtonTemplate,
+    createMenuTemplate,
     libraryTemplate,
     editObjectTemplate,
     editActionButtonsTemplate,
@@ -112,6 +130,22 @@ define([
                         "$location",
                         "policyService"
                     ]
+                },
+                {
+                    "key": "CreateMenuController",
+                    "implementation": CreateMenuController,
+                    "depends": [
+                        "$scope"
+                    ]
+                },
+                {
+                    "key": "LocatorController",
+                    "implementation": LocatorController,
+                    "depends": [
+                        "$scope",
+                        "$timeout",
+                        "objectService"
+                    ]
                 }
             ],
             "directives": [
@@ -136,7 +170,7 @@ define([
                         "navigationService",
                         "$log"
                     ],
-                    "description": "Edit this object.",
+                    "description": "Edit",
                     "category": "view-control",
                     "glyph": "p"
                 },
@@ -172,7 +206,9 @@ define([
                     "implementation": SaveAction,
                     "name": "Save",
                     "description": "Save changes made to these objects.",
-                    "depends": [],
+                    "depends": [
+                        "dialogService"
+                    ],
                     "priority": "mandatory"
                 },
                 {
@@ -219,10 +255,13 @@ define([
                 },
                 {
                     "category": "navigation",
-                    "message": "There are unsaved changes.",
+                    "message": "Continuing will cause the loss of any unsaved changes.",
                     "implementation": EditNavigationPolicy
+                },
+                {
+                    "implementation": CreationPolicy,
+                    "category": "creation"
                 }
-
             ],
             "templates": [
                 {
@@ -261,6 +300,17 @@ define([
                 {
                     "key": "topbar-edit",
                     "template": topbarEditTemplate
+                },
+                {
+                    "key": "create-button",
+                    "template": createButtonTemplate
+                },
+                {
+                    "key": "create-menu",
+                    "template": createMenuTemplate,
+                    "uses": [
+                        "action"
+                    ]
                 }
             ],
             "components": [
@@ -282,7 +332,40 @@ define([
                         "$q",
                         "$log"
                     ]
+                },
+                {
+                    "key": "CreateActionProvider",
+                    "provides": "actionService",
+                    "type": "provider",
+                    "implementation": CreateActionProvider,
+                    "depends": [
+                        "typeService",
+                        "policyService"
+                    ]
+                },
+                {
+                    "key": "AddActionProvider",
+                    "provides": "actionService",
+                    "type": "provider",
+                    "implementation": AddActionProvider,
+                    "depends": [
+                        "$q",
+                        "typeService",
+                        "dialogService",
+                        "policyService"
+                    ]
+                },
+                {
+                    "key": "CreationService",
+                    "provides": "creationService",
+                    "type": "provider",
+                    "implementation": CreationService,
+                    "depends": [
+                        "$q",
+                        "$log"
+                    ]
                 }
+
             ],
             "representers": [
                 {
@@ -316,6 +399,12 @@ define([
                         "transactionService"
                     ]
                 }
+            ],
+            "controls": [
+                {
+                    "key": "locator",
+                    "template": locatorTemplate
+                }
             ]
         }
     });

platform/commonUI/edit/res/templates/create/create-menu.html

@@ -36,14 +36,14 @@
 
         </ul>
     </div>
-    <div class="pane right menu-item-description">
-        <div class="desc-area ui-symbol icon type-icon">
+    <div class="pane right menu-item-description l-flex-col">
+        <div class="desc-area flex-elem holder ui-symbol icon type-icon">
             {{representation.activeMetadata.glyph}}
         </div>
-        <div class="desc-area title">
+        <div class="desc-area flex-elem holder title">
             {{representation.activeMetadata.name}}
         </div>
-        <div class="desc-area description">
+        <div class="desc-area flex-elem holder description">
             {{representation.activeMetadata.description}}
         </div>
     </div>

platform/commonUI/edit/src/actions/CancelAction.js

@@ -50,18 +50,24 @@ define(
                 //If the object existed already, navigate to refresh view
                 // with previous object state.
                 if (domainObject.getModel().persisted) {
-                    domainObject.getCapability("action").perform("navigate");
+                    return domainObject.getCapability("action").perform("navigate");
                 } else {
                     //If the object was new, and user has cancelled, then
                     //navigate back to parent because nothing to show.
-                    domainObject.getCapability("location").getOriginal().then(function (original) {
+                    return domainObject.getCapability("location").getOriginal().then(function (original) {
                         parent = original.getCapability("context").getParent();
                         parent.getCapability("action").perform("navigate");
                     });
                 }
             }
-            return this.domainObject.getCapability("editor").cancel()
-                .then(returnToBrowse);
+
+            function cancel(allowed) {
+                return allowed && domainObject.getCapability("editor").cancel();
+            }
+
+            //Do navigation first in order to trigger unsaved changes dialog
+            return returnToBrowse()
+                .then(cancel);
         };
 
         /**

platform/commonUI/edit/src/actions/EditAction.js

@@ -74,6 +74,12 @@ define(
                 self.domainObject.getCapability('editor').cancel();
                 self.navigationService.removeListener(cancelEditing);
             }
+            //If this is not the currently navigated object, then navigate
+            // to it.
+            if (this.navigationService.getNavigation() !== this.domainObject) {
+                this.navigationService.setNavigation(this.domainObject);
+            }
+
             this.navigationService.addListener(cancelEditing);
             this.domainObject.useCapability("editor");
         };

platform/commonUI/edit/src/actions/SaveAction.js

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 define(
-    [],
-    function () {
+    ['./SaveInProgressDialog'],
+    function (SaveInProgressDialog) {
 
         /**
          * The "Save" action; the action triggered by clicking Save from
@@ -33,9 +33,11 @@ define(
          * @memberof platform/commonUI/edit
          */
         function SaveAction(
+            dialogService,
             context
         ) {
             this.domainObject = (context || {}).domainObject;
+            this.dialogService = dialogService;
         }
 
         /**
@@ -46,7 +48,8 @@ define(
          * @memberof platform/commonUI/edit.SaveAction#
          */
         SaveAction.prototype.perform = function () {
-            var domainObject = this.domainObject;
+            var domainObject = this.domainObject,
+                dialog = new SaveInProgressDialog(this.dialogService);
 
             function resolveWith(object) {
                 return function () {
@@ -72,8 +75,17 @@ define(
                 return object;
             }
 
-            //return doSave().then(returnToBrowse);
-            return doSave().then(returnToBrowse);
+            function hideBlockingDialog(object) {
+                dialog.hide();
+                return object;
+            }
+
+            dialog.show();
+
+            return doSave()
+                .then(hideBlockingDialog)
+                .then(returnToBrowse)
+                .catch(hideBlockingDialog);
         };
 
         /**

platform/commonUI/edit/src/actions/SaveAsAction.js

@@ -21,9 +21,14 @@
  *****************************************************************************/
 
 
-define(
-    ['../../../browse/src/creation/CreateWizard'],
-    function (CreateWizard) {
+define([
+    '../creation/CreateWizard',
+    './SaveInProgressDialog'
+],
+    function (
+        CreateWizard,
+        SaveInProgressDialog
+    ) {
 
         /**
          * The "Save" action; the action triggered by clicking Save from
@@ -105,7 +110,8 @@ define(
         SaveAsAction.prototype.save = function () {
             var self = this,
                 domainObject = this.domainObject,
-                copyService = this.copyService;
+                copyService = this.copyService,
+                dialog = new SaveInProgressDialog(this.dialogService);
 
             function doWizardSave(parent) {
                 var wizard = self.createWizard(parent);
@@ -116,6 +122,16 @@ define(
                     ).then(wizard.populateObjectFromInput.bind(wizard));
             }
 
+            function showBlockingDialog(object) {
+                dialog.show();
+                return object;
+            }
+
+            function hideBlockingDialog(object) {
+                dialog.hide();
+                return object;
+            }
+
             function fetchObject(objectId) {
                 return self.getObjectService().getObjects([objectId]).then(function (objects) {
                     return objects[objectId];
@@ -140,14 +156,22 @@ define(
                     .then(resolveWith(clonedObject));
             }
 
+            function onFailure() {
+                hideBlockingDialog();
+                return false;
+            }
+
             return getParent(domainObject)
                 .then(doWizardSave)
+                .then(showBlockingDialog)
                 .then(getParent)
                 .then(cloneIntoParent)
                 .then(commitEditingAfterClone)
-                .catch(resolveWith(false));
+                .then(hideBlockingDialog)
+                .catch(onFailure);
         };
 
+
         /**
          * Check if this action is applicable in a given context.
          * This will ensure that a domain object is present in the context,

platform/commonUI/edit/src/actions/SaveInProgressDialog.js

@@ -0,0 +1,20 @@
+define([], function () {
+    function SaveInProgressDialog(dialogService) {
+        this.dialogService = dialogService;
+    }
+
+    SaveInProgressDialog.prototype.show = function () {
+        this.dialogService.showBlockingMessage({
+            title: "Saving...",
+            hint: "Do not navigate away from this page or close this browser tab while this message is displayed.",
+            unknownProgress: true,
+            severity: "info"
+        });
+    };
+
+    SaveInProgressDialog.prototype.hide = function () {
+        this.dialogService.dismiss();
+    };
+
+    return SaveInProgressDialog;
+});

platform/commonUI/edit/src/capabilities/TransactionalPersistenceCapability.js

@@ -67,10 +67,17 @@ define(
             }
 
             function onCancel() {
-                return self.persistenceCapability.refresh().then(function (result) {
+                if (self.domainObject.getModel().persisted !== undefined) {
+                    //Fetch clean model from persistence
+                    return self.persistenceCapability.refresh().then(function (result) {
+                        self.persistPending = false;
+                        return result;
+                    });
+                } else {
                     self.persistPending = false;
-                    return result;
-                });
+                    //Model is undefined in persistence, so return undefined.
+                    return self.$q.when(undefined);
+                }
             }
 
             if (this.transactionService.isActive()) {

platform/commonUI/edit/src/creation/CreateAction.js

@@ -43,11 +43,8 @@ define(
          *        override this)
          * @param {ActionContext} context the context in which the
          *        action is being performed
-         * @param {NavigationService} navigationService the navigation service,
-         *        which handles changes in navigation. It allows the object
-         *        being browsed/edited to be set.
          */
-        function CreateAction(type, parent, context, $q, navigationService) {
+        function CreateAction(type, parent, context) {
             this.metadata = {
                 key: 'create',
                 glyph: type.getGlyph(),
@@ -56,24 +53,8 @@ define(
                 description: type.getDescription(),
                 context: context
             };
-
             this.type = type;
             this.parent = parent;
-            this.navigationService = navigationService;
-            this.$q = $q;
-        }
-
-        // Get a count of views which are not flagged as non-editable.
-        function countEditableViews(domainObject) {
-            var views = domainObject && domainObject.useCapability('view'),
-                count = 0;
-
-            // A view is editable unless explicitly flagged as not
-            (views || []).forEach(function (view) {
-                count += (view.editable !== false) ? 1 : 0;
-            });
-
-            return count;
         }
 
         /**
@@ -82,26 +63,31 @@ define(
          */
         CreateAction.prototype.perform = function () {
             var newModel = this.type.getInitialModel(),
-                parentObject = this.navigationService.getNavigation(),
-                editorCapability,
-                newObject;
+                newObject,
+                editAction,
+                editorCapability;
+
+            function onSave() {
+                return editorCapability.save();
+            }
+
+            function onCancel() {
+                return editorCapability.cancel();
+            }
 
             newModel.type = this.type.getKey();
-            newModel.location = parentObject.getId();
-            newObject = parentObject.useCapability('instantiation', newModel);
+            newModel.location = this.parent.getId();
+            newObject = this.parent.useCapability('instantiation', newModel);
+            editorCapability = newObject.hasCapability('editor') && newObject.getCapability("editor");
 
-            editorCapability = newObject.getCapability("editor");
-
-            if (countEditableViews(newObject) > 0 && newObject.hasCapability('composition')) {
-                this.navigationService.setNavigation(newObject);
-                return newObject.getCapability("action").perform("edit");
-            } else {
+            editAction = newObject.getCapability("action").getActions("edit")[0];
+            //If an edit action is available, perform it
+            if (editAction) {
+                return editAction.perform();
+            } else if (editorCapability) {
+                //otherwise, use the save action
                 editorCapability.edit();
-                return newObject.useCapability("action").perform("save").then(function () {
-                        return editorCapability.save();
-                    }, function () {
-                        return editorCapability.cancel();
-                    });
+                return newObject.getCapability("action").perform("save").then(onSave, onCancel);
             }
         };
 

platform/commonUI/edit/src/creation/CreateActionProvider.js

@@ -44,10 +44,8 @@ define(
          *        introduced in this bundle), responsible for handling actual
          *        object creation.
          */
-        function CreateActionProvider($q, typeService, navigationService, policyService) {
+        function CreateActionProvider(typeService, policyService) {
             this.typeService = typeService;
-            this.navigationService = navigationService;
-            this.$q = $q;
             this.policyService = policyService;
         }
 
@@ -72,9 +70,7 @@ define(
                 return new CreateAction(
                     type,
                     destination,
-                    context,
-                    self.$q,
-                    self.navigationService
+                    context
                 );
             });
         };

platform/commonUI/edit/src/policies/EditActionPolicy.js

@@ -56,7 +56,10 @@ define(
             // A view is editable unless explicitly flagged as not
             (views || []).forEach(function (view) {
                 if (view.editable === true ||
-                    (view.key === 'plot' && type.getKey() === 'telemetry.panel')) {
+                    (view.key === 'plot' && type.getKey() === 'telemetry.panel') ||
+                    (view.key === 'table' && type.getKey() === 'table') ||
+                    (view.key === 'rt-table' && type.getKey() === 'rttable')
+                    ) {
                     count++;
                 }
             });

platform/commonUI/edit/test/actions/CancelActionSpec.js

@@ -24,12 +24,11 @@ define(
     ["../../src/actions/CancelAction"],
     function (CancelAction) {
 
-        //TODO: Disabled for NEM Beta
-        xdescribe("The Cancel action", function () {
-            var mockLocation,
-                mockDomainObject,
-                mockEditorCapability,
-                mockUrlService,
+        describe("The Cancel action", function () {
+            var mockDomainObject,
+                mockParentObject,
+                capabilities = {},
+                parentCapabilities = {},
                 actionContext,
                 action;
 
@@ -42,61 +41,114 @@ define(
             }
 
             beforeEach(function () {
-                mockLocation = jasmine.createSpyObj(
-                    "$location",
-                    ["path"]
-                );
                 mockDomainObject = jasmine.createSpyObj(
                     "domainObject",
-                    ["getCapability", "hasCapability"]
+                    [
+                        "getCapability",
+                        "hasCapability",
+                        "getModel"
+                    ]
                 );
-                mockEditorCapability = jasmine.createSpyObj(
+                mockDomainObject.getModel.andReturn({});
+
+                mockParentObject = jasmine.createSpyObj(
+                    "parentObject",
+                    [
+                        "getCapability"
+                    ]
+                );
+                mockParentObject.getCapability.andCallFake(function (name) {
+                    return parentCapabilities[name];
+                });
+
+                capabilities.editor = jasmine.createSpyObj(
                     "editor",
-                    ["save", "cancel"]
+                    ["save", "cancel", "isEditContextRoot"]
                 );
-                mockUrlService = jasmine.createSpyObj(
-                    "urlService",
-                    ["urlForLocation"]
+                capabilities.action = jasmine.createSpyObj(
+                    "actionCapability",
+                    [
+                        "perform"
+                    ]
+                );
+                capabilities.location = jasmine.createSpyObj(
+                    "locationCapability",
+                    [
+                        "getOriginal"
+                    ]
+                );
+                capabilities.location.getOriginal.andReturn(mockPromise(mockDomainObject));
+                capabilities.context = jasmine.createSpyObj(
+                    "contextCapability",
+                    [
+                        "getParent"
+                    ]
+                );
+                capabilities.context.getParent.andReturn(mockParentObject);
+
+                parentCapabilities.action = jasmine.createSpyObj(
+                    "actionCapability",
+                    [
+                        "perform"
+                    ]
                 );
 
                 actionContext = {
                     domainObject: mockDomainObject
                 };
 
-                mockDomainObject.hasCapability.andReturn(true);
-                mockDomainObject.getCapability.andReturn(mockEditorCapability);
-                mockEditorCapability.cancel.andReturn(mockPromise(true));
+                mockDomainObject.getCapability.andCallFake(function (name) {
+                    return capabilities[name];
+                });
 
-                action = new CancelAction(mockLocation, mockUrlService, actionContext);
+                mockDomainObject.hasCapability.andCallFake(function (name) {
+                    return !!capabilities[name];
+                });
+
+                capabilities.editor.cancel.andReturn(mockPromise(true));
+
+                action = new CancelAction(actionContext);
 
             });
 
-            it("only applies to domain object with an editor capability", function () {
+            it("only applies to domain object that is being edited", function () {
+                capabilities.editor.isEditContextRoot.andReturn(true);
                 expect(CancelAction.appliesTo(actionContext)).toBeTruthy();
                 expect(mockDomainObject.hasCapability).toHaveBeenCalledWith("editor");
 
+                capabilities.editor.isEditContextRoot.andReturn(false);
+                expect(CancelAction.appliesTo(actionContext)).toBeFalsy();
+
                 mockDomainObject.hasCapability.andReturn(false);
-                mockDomainObject.getCapability.andReturn(undefined);
                 expect(CancelAction.appliesTo(actionContext)).toBeFalsy();
             });
 
-            it("invokes the editor capability's save functionality when performed", function () {
-                // Verify precondition
-                expect(mockEditorCapability.cancel).not.toHaveBeenCalled();
+            it("invokes the editor capability's cancel functionality when" +
+                " performed", function () {
+                mockDomainObject.getModel.andReturn({persisted: 1});
+                //Return true from navigate action
+                capabilities.action.perform.andReturn(mockPromise(true));
                 action.perform();
 
                 // Should have called cancel
-                expect(mockEditorCapability.cancel).toHaveBeenCalled();
+                expect(capabilities.editor.cancel).toHaveBeenCalled();
 
                 // Definitely shouldn't call save!
-                expect(mockEditorCapability.save).not.toHaveBeenCalled();
+                expect(capabilities.editor.save).not.toHaveBeenCalled();
             });
 
-            it("returns to browse when performed", function () {
+            it("navigates to object if existing using navigate action", function () {
+                mockDomainObject.getModel.andReturn({persisted: 1});
+                //Return true from navigate action
+                capabilities.action.perform.andReturn(mockPromise(true));
                 action.perform();
-                expect(mockLocation.path).toHaveBeenCalledWith(
-                    mockUrlService.urlForLocation("browse", mockDomainObject)
-                );
+                expect(capabilities.action.perform).toHaveBeenCalledWith("navigate");
+            });
+
+            it("navigates to parent if new using navigate action", function () {
+                mockDomainObject.getModel.andReturn({persisted: undefined});
+                action.perform();
+                expect(parentCapabilities.action.perform).toHaveBeenCalledWith("navigate");
             });
         });
     }

platform/commonUI/edit/test/actions/SaveActionSpec.js

@@ -28,6 +28,7 @@ define(
             var mockDomainObject,
                 mockEditorCapability,
                 actionContext,
+                dialogService,
                 mockActionCapability,
                 capabilities = {},
                 action;
@@ -36,6 +37,9 @@ define(
                 return {
                     then: function (callback) {
                         return mockPromise(callback(value));
+                    },
+                    catch: function (callback) {
+                        return mockPromise(callback(value));
                     }
                 };
             }
@@ -64,6 +68,10 @@ define(
                 actionContext = {
                     domainObject: mockDomainObject
                 };
+                dialogService = jasmine.createSpyObj(
+                    "dialogService",
+                    ["showBlockingMessage", "dismiss"]
+                );
 
                 mockDomainObject.hasCapability.andReturn(true);
                 mockDomainObject.getCapability.andCallFake(function (capability) {
@@ -73,8 +81,7 @@ define(
                 mockEditorCapability.save.andReturn(mockPromise(true));
                 mockEditorCapability.isEditContextRoot.andReturn(true);
 
-                action = new SaveAction(actionContext);
-
+                action = new SaveAction(dialogService, actionContext);
             });
 
             it("only applies to domain object with an editor capability", function () {
@@ -104,6 +111,19 @@ define(
                     expect(mockActionCapability.perform).toHaveBeenCalledWith("navigate");
                 });
 
+            it("shows a dialog while saving", function () {
+                mockEditorCapability.save.andReturn(new Promise(function () {}));
+                action.perform();
+                expect(dialogService.showBlockingMessage).toHaveBeenCalled();
+                expect(dialogService.dismiss).not.toHaveBeenCalled();
+            });
+
+            it("hides a dialog when saving is complete", function () {
+                action.perform();
+                expect(dialogService.showBlockingMessage).toHaveBeenCalled();
+                expect(dialogService.dismiss).toHaveBeenCalled();
+            });
+
         });
     }
 );

platform/commonUI/edit/test/actions/SaveAsActionSpec.js

@@ -100,7 +100,9 @@ define(
                 mockDialogService = jasmine.createSpyObj(
                     "dialogService",
                     [
-                        "getUserInput"
+                        "getUserInput",
+                        "showBlockingMessage",
+                        "dismiss"
                     ]
                 );
                 mockDialogService.getUserInput.andReturn(mockPromise(undefined));
@@ -169,6 +171,19 @@ define(
                 expect(mockDialogService.getUserInput).toHaveBeenCalled();
             });
 
+            it("shows a blocking dialog while waiting for save", function () {
+                mockEditorCapability.save.andReturn(new Promise(function () {}));
+                action.perform();
+                expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
+                expect(mockDialogService.dismiss).not.toHaveBeenCalled();
+            });
+
+            it("hides the blocking dialog after saving", function () {
+                action.perform();
+                expect(mockDialogService.showBlockingMessage).toHaveBeenCalled();
+                expect(mockDialogService.dismiss).toHaveBeenCalled();
+            });
+
         });
     }
 );

platform/commonUI/edit/test/capabilities/TransactionalPersistenceCapabilitySpec.js

@@ -57,6 +57,15 @@ define(
                 );
                 mockPersistence.persist.andReturn(fastPromise());
                 mockPersistence.refresh.andReturn(fastPromise());
+
+                mockDomainObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [
+                        "getModel"
+                    ]
+                );
+                mockDomainObject.getModel.andReturn({persisted: 1});
+
                 capability = new TransactionalPersistenceCapability(mockQ, mockTransactionService, mockPersistence, mockDomainObject);
             });
 
@@ -78,6 +87,20 @@ define(
                 expect(mockPersistence.refresh).toHaveBeenCalled();
             });
 
+            it("if transaction is active, cancel call is queued that refreshes model when appropriate", function () {
+                mockTransactionService.isActive.andReturn(true);
+                capability.persist();
+                expect(mockTransactionService.addToTransaction).toHaveBeenCalled();
+
+                mockDomainObject.getModel.andReturn({});
+                mockTransactionService.addToTransaction.mostRecentCall.args[1]();
+                expect(mockPersistence.refresh).not.toHaveBeenCalled();
+
+                mockDomainObject.getModel.andReturn({persisted: 1});
+                mockTransactionService.addToTransaction.mostRecentCall.args[1]();
+                expect(mockPersistence.refresh).toHaveBeenCalled();
+            });
+
             it("persist call is only added to transaction once", function () {
                 mockTransactionService.isActive.andReturn(true);
                 capability.persist();

platform/commonUI/edit/test/creation/CreateActionProviderSpec.js

@@ -29,13 +29,10 @@ define(
 
         describe("The create action provider", function () {
             var mockTypeService,
-                mockDialogService,
-                mockNavigationService,
                 mockPolicyService,
                 mockCreationPolicy,
                 mockPolicyMap = {},
                 mockTypes,
-                mockQ,
                 provider;
 
             function createMockType(name) {
@@ -61,14 +58,6 @@ define(
                     "typeService",
                     ["listTypes"]
                 );
-                mockDialogService = jasmine.createSpyObj(
-                    "dialogService",
-                    ["getUserInput"]
-                );
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    ["setNavigation"]
-                );
                 mockPolicyService = jasmine.createSpyObj(
                     "policyService",
                     ["allow"]
@@ -91,9 +80,7 @@ define(
                 mockTypeService.listTypes.andReturn(mockTypes);
 
                 provider = new CreateActionProvider(
-                    mockQ,
                     mockTypeService,
-                    mockNavigationService,
                     mockPolicyService
                 );
             });

platform/commonUI/edit/test/creation/CreateActionSpec.js

@@ -0,0 +1,190 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/**
+ * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
+ */
+define(
+    ["../../src/creation/CreateAction"],
+    function (CreateAction) {
+
+        describe("The create action", function () {
+            var mockType,
+                mockParent,
+                mockContext,
+                mockDomainObject,
+                capabilities = {},
+                mockEditAction,
+                mockSaveAction,
+                action;
+
+            function mockPromise(value) {
+                return {
+                    then: function (callback) {
+                        return mockPromise(callback(value));
+                    }
+                };
+            }
+
+            beforeEach(function () {
+                mockType = jasmine.createSpyObj(
+                    "type",
+                    [
+                        "getKey",
+                        "getGlyph",
+                        "getName",
+                        "getDescription",
+                        "getProperties",
+                        "getInitialModel"
+                    ]
+                );
+                mockParent = jasmine.createSpyObj(
+                    "domainObject",
+                    [
+                        "getId",
+                        "getModel",
+                        "getCapability",
+                        "useCapability"
+                    ]
+                );
+                mockDomainObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [
+                        "getId",
+                        "getModel",
+                        "getCapability",
+                        "hasCapability",
+                        "useCapability"
+                    ]
+                );
+                mockDomainObject.hasCapability.andCallFake(function (name) {
+                    return !!capabilities[name];
+                });
+                mockDomainObject.getCapability.andCallFake(function (name) {
+                    return capabilities[name];
+                });
+                mockSaveAction = jasmine.createSpyObj(
+                    "saveAction",
+                    [
+                        "perform"
+                    ]
+                );
+
+                capabilities.action = jasmine.createSpyObj(
+                    "actionCapability",
+                    [
+                        "getActions",
+                        "perform"
+                    ]
+                );
+
+                capabilities.editor = jasmine.createSpyObj(
+                    "editorCapability",
+                    [
+                        "edit",
+                        "save",
+                        "cancel"
+                    ]
+                );
+
+                mockEditAction = jasmine.createSpyObj(
+                    "editAction",
+                    [
+                        "perform"
+                    ]
+                );
+
+                mockContext = {
+                    domainObject: mockParent
+                };
+                mockParent.useCapability.andReturn(mockDomainObject);
+
+                mockType.getKey.andReturn("test");
+                mockType.getGlyph.andReturn("T");
+                mockType.getDescription.andReturn("a test type");
+                mockType.getName.andReturn("Test");
+                mockType.getProperties.andReturn([]);
+                mockType.getInitialModel.andReturn({});
+
+                action = new CreateAction(
+                    mockType,
+                    mockParent,
+                    mockContext
+                );
+            });
+
+            it("exposes type-appropriate metadata", function () {
+                var metadata = action.getMetadata();
+
+                expect(metadata.name).toEqual("Test");
+                expect(metadata.description).toEqual("a test type");
+                expect(metadata.glyph).toEqual("T");
+            });
+
+            describe("the perform function", function () {
+                beforeEach(function () {
+                    capabilities.action.getActions.andReturn([mockEditAction]);
+                });
+
+                it("uses the instantiation capability when performed", function () {
+                    action.perform();
+                    expect(mockParent.useCapability).toHaveBeenCalledWith("instantiation", jasmine.any(Object));
+                });
+
+                it("uses the edit action if available", function () {
+                    action.perform();
+                    expect(mockEditAction.perform).toHaveBeenCalled();
+                });
+
+                it("uses the save action if object does not have an edit action" +
+                    " available", function () {
+                    capabilities.action.getActions.andReturn([]);
+                    capabilities.action.perform.andReturn(mockPromise(undefined));
+                    action.perform();
+                    expect(capabilities.action.perform).toHaveBeenCalledWith("save");
+                });
+
+                describe("uses to editor capability", function () {
+                    var promise = jasmine.createSpyObj("promise", ["then"]);
+                    beforeEach(function () {
+                        capabilities.action.getActions.andReturn([]);
+                        capabilities.action.perform.andReturn(promise);
+                    });
+
+                    it("to save the edit if user saves dialog", function () {
+                        action.perform();
+                        expect(promise.then).toHaveBeenCalled();
+                        promise.then.mostRecentCall.args[0]();
+                        expect(capabilities.editor.save).toHaveBeenCalled();
+                    });
+
+                    it("to cancel the edit if user cancels dialog", function () {
+                        action.perform();
+                        promise.then.mostRecentCall.args[1]();
+                        expect(capabilities.editor.cancel).toHaveBeenCalled();
+                    });
+                });
+            });
+
+        });
+    }
+);

platform/commonUI/formats/bundle.js

@@ -23,10 +23,12 @@
 define([
     "./src/FormatProvider",
     "./src/UTCTimeFormat",
+    "./src/DurationFormat",
     'legacyRegistry'
 ], function (
     FormatProvider,
     UTCTimeFormat,
+    DurationFormat,
     legacyRegistry
 ) {
 
@@ -48,6 +50,10 @@ define([
                 {
                     "key": "utc",
                     "implementation": UTCTimeFormat
+                },
+                {
+                    "key": "duration",
+                    "implementation": DurationFormat
                 }
             ],
             "constants": [

platform/commonUI/formats/src/DurationFormat.js

@@ -0,0 +1,60 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define([
+    'moment'
+], function (
+    moment
+) {
+
+    var DATE_FORMAT = "HH:mm:ss",
+        DATE_FORMATS = [
+            DATE_FORMAT
+        ];
+
+
+    /**
+     * Formatter for UTC timestamps. Interprets numeric values as
+     * milliseconds since the start of 1970. Displays only the utc time. Can
+     * be used, with care, for specifying time intervals.
+     *
+     * @implements {Format}
+     * @constructor
+     * @memberof platform/commonUI/formats
+     */
+    function DurationFormat() {
+    }
+
+    DurationFormat.prototype.format = function (value) {
+        return moment.utc(value).format(DATE_FORMAT);
+    };
+
+    DurationFormat.prototype.parse = function (text) {
+        return moment.duration(text).asMilliseconds();
+    };
+
+    DurationFormat.prototype.validate = function (text) {
+        return moment.utc(text, DATE_FORMATS).isValid();
+    };
+
+    return DurationFormat;
+});

platform/commonUI/general/bundle.js

@@ -204,6 +204,7 @@ define([
                     "implementation": TimeRangeController,
                     "depends": [
                         "$scope",
+                        "$timeout",
                         "formatService",
                         "DEFAULT_TIME_FORMAT",
                         "now"

platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg

@@ -100,5 +100,6 @@
 <glyph unicode="&#xe620;" glyph-name="icon-tabular-realtime" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM448 668l25.060-25.32c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.97 30.338 71.571 49.128 117.56 49.128s87.59-18.79 117.544-49.112l50.456-50.997v-152.2c-24.111 8.83-44.678 22.255-61.542 39.342l-75.518 76.318c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.971-30.343-71.575-49.137-117.568-49.137-20.084 0-39.331 3.584-57.137 10.146l1.145 151.831zM320 0h-192c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192zM320 256h-256v192h256v-192zM320 512h-256v192h256v-192zM640 0h-256v192h256v-192zM448 323.38v174.5c1.88-1.74 3.74-3.5 5.56-5.34l75.5-76.3c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.966 30.333 71.56 49.119 117.542 49.119 43.28 0 82.673-16.644 112.128-43.879l-0.11-174.399c-1.88 1.74-3.74 3.5-5.56 5.34l-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.966-30.333-71.56-49.119-117.542-49.119-43.28 0-82.673 16.644-112.128 43.879zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128z" />
 <glyph unicode="&#xe621;" glyph-name="icon-tabular-lad" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM64 704h256v-192h-256v192zM64 448h256v-192h-256v192zM128 0c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192h-192zM384 0v192h256v-192h-256zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128zM960 448v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.32 412.62l-110.32 55.16v172.22c0 17.673-14.327 32-32 32s-32-14.327-32-32v-211.78l145.68-72.84c4.172-2.133 9.1-3.383 14.32-3.383 17.675 0 32.003 14.328 32.003 32.003 0 12.454-7.114 23.247-17.501 28.536z" />
 <glyph unicode="&#xe622;" glyph-name="icon-tabular-lad-set" d="M128 192v576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979l-576 0.021c-70.606 0.215-127.785 57.394-128 127.979zM896 960h-576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v576.021c-0.215 70.606-57.394 127.785-127.979 128zM256 768h192v-128h-192v128zM256 576h192v-192h-192v192zM320 192c-35.26 0.214-63.786 28.74-64 63.98v64.020h192v-128h-128zM512 192v128h192v-128h-192zM960 256c-0.214-35.26-28.74-63.786-63.98-64h-128.020v128h192v-64zM960 384h-448v384h448v-384zM832 480c0.002 0 0.005 0 0.007 0 17.673 0 32 14.327 32 32 0 14.055-9.062 25.994-21.662 30.293l-74.345 24.767v104.94c0 17.673-14.327 32-32 32s-32-14.327-32-32v-151.060l117.88-39.3c3.018-1.040 6.495-1.64 10.113-1.64 0.003 0 0.005 0 0.008 0z" />
+<glyph unicode="&#xe623;" glyph-name="icon-download" d="M832 384v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 320l448 448h-256v192h-384v-192h-256l448-448z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>

platform/commonUI/general/res/sass/_animations.scss

@@ -0,0 +1,91 @@
+@include keyframes(rotation) {
+    100% { @include transform(rotate(360deg)); }
+}
+
+@include keyframes(rotation-centered) {
+    0%   { @include transform(translate(-50%, -50%) rotate(0deg)); }
+    100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
+}
+
+@include keyframes(clock-hands) {
+    0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
+    100% { @include transform(translate(-50%, -50%) rotate(360deg));  }
+}
+
+@include keyframes(clock-hands-sticky) {
+    0% {
+        @include transform(translate(-50%, -50%) rotate(0deg));
+    }
+    7% {
+        @include transform(translate(-50%, -50%) rotate(0deg));
+    }
+    8% {
+        @include transform(translate(-50%, -50%) rotate(30deg));
+    }
+    15% {
+        @include transform(translate(-50%, -50%) rotate(30deg));
+    }
+    16% {
+        @include transform(translate(-50%, -50%) rotate(60deg));
+    }
+    24% {
+        @include transform(translate(-50%, -50%) rotate(60deg));
+    }
+    25% {
+        @include transform(translate(-50%, -50%) rotate(90deg));
+    }
+    32% {
+        @include transform(translate(-50%, -50%) rotate(90deg));
+    }
+    33% {
+        @include transform(translate(-50%, -50%) rotate(120deg));
+    }
+    40% {
+        @include transform(translate(-50%, -50%) rotate(120deg));
+    }
+    41% {
+        @include transform(translate(-50%, -50%) rotate(150deg));
+    }
+    49% {
+        @include transform(translate(-50%, -50%) rotate(150deg));
+    }
+    50% {
+        @include transform(translate(-50%, -50%) rotate(180deg));
+    }
+    57% {
+        @include transform(translate(-50%, -50%) rotate(180deg));
+    }
+    58% {
+        @include transform(translate(-50%, -50%) rotate(210deg));
+    }
+    65% {
+        @include transform(translate(-50%, -50%) rotate(210deg));
+    }
+    66% {
+        @include transform(translate(-50%, -50%) rotate(240deg));
+    }
+    74% {
+        @include transform(translate(-50%, -50%) rotate(240deg));
+    }
+    75% {
+        @include transform(translate(-50%, -50%) rotate(270deg));
+    }
+    82% {
+        @include transform(translate(-50%, -50%) rotate(270deg));
+    }
+    83% {
+        @include transform(translate(-50%, -50%) rotate(300deg));
+    }
+    90% {
+        @include transform(translate(-50%, -50%) rotate(300deg));
+    }
+    91% {
+        @include transform(translate(-50%, -50%) rotate(330deg));
+    }
+    99% {
+        @include transform(translate(-50%, -50%) rotate(330deg));
+    }
+    100% {
+        @include transform(translate(-50%, -50%) rotate(360deg));
+    }
+}

platform/commonUI/general/res/sass/_archetypes.scss

@@ -108,6 +108,9 @@
         &.grows {
             @include flex(1 1 auto);
         }
+        &.contents-align-right {
+            text-align: right;
+        }
     }
     .flex-container {
         // Apply to wrapping elements, mct-includes, etc.
@@ -121,17 +124,18 @@
 .l-flex-row {
     @include flex-direction(row);
     &.flex-elem { @include flex(1 1 auto); }
-    .flex-elem {
+    > .flex-elem {
         height: inherit;
         line-height: inherit;
         min-width: 0;
+        &.holder:not(:last-child) { margin-right: $interiorMargin; }
     }
     .flex-container { @include flex-direction(row); }
 }
 
 .l-flex-col {
     @include flex-direction(column);
-    .flex-elem {
+    > .flex-elem {
         min-height: 0;
         &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
     }
@@ -145,3 +149,8 @@
 .flex-justify-end {
     @include justify-content(flex-end);
 }
+
+/********************************************* POPUPS */
+.t-popup {
+    z-index: 75;
+}

platform/commonUI/general/res/sass/_constants.scss

@@ -48,8 +48,8 @@ $uePaneMiniTabW: 10px;
 $uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
-$ueTimeControlH: (33px, 20px, 20px);
-// Panes
+$ueTimeControlH: (25px, 6px, 20px);
+/*************** Panes */
 $ueBrowseLeftPaneTreeMinW: 150px;
 $ueBrowseLeftPaneTreeMaxW: 35%;
 $ueBrowseLeftPaneTreeW: 25%;
@@ -57,48 +57,59 @@ $ueBrowseRightPaneInspectMinW: 200px;
 $ueBrowseRightPaneInspectMaxW: 35%;
 $ueBrowseRightPaneInspectW: 20%;
 $ueDesktopMinW: 600px;
-
-// Overlay
+/*************** Overlay */
 $ovrTopBarH: 45px;
 $ovrFooterH: 24px;
 $overlayMargin: 25px;
-// Items
+/*************** Items */
 $ueBrowseGridItemLg: 200px;
 $ueBrowseGridItemTopBarH: 20px;
 $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;
-// Tree
+/*************** Tree */
 $treeVCW: 10px;
 $treeTypeIconH: 1.4em; // was 16px
 $treeTypeIconHPx: 16px;
 $treeTypeIconW: 18px;
 $treeContextTriggerW: 20px;
-// Tabular
+/*************** Tabular */
 $tabularHeaderH: 22px; //18px
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 3px;
-// Imagery
+/*************** Imagery */
 $imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
 $imageThumbsWrapperH: $imageThumbsD * 1.4;
 $imageThumbPad: 1px;
-// Ticks
+/*************** Ticks */
 $ticksH: 25px;
 $tickLblVMargin: 3px;
 $tickLblH: 15px;
 $tickLblW: 50px;
 $tickH: $ticksH - $tickLblVMargin - $tickLblH;
 $tickW: 1px;
-// Bubbles
+/*************** Plots */
+$plotYBarW: 60px;
+$plotYLabelMinH: 20px;
+$plotYLabelW: 10px;
+$plotXBarH: 32px;
+$plotLegendH: 20px;
+$plotSwatchD: 8px;
+// 1: Top, 2: right, 3: bottom, 4: left
+$plotDisplayArea: ($plotLegendH + $interiorMargin, 0, $plotXBarH + $interiorMargin, $plotYBarW);
+/* min plot height is based on user testing to find minimum useful height */
+$plotMinH: 95px;
+/*************** Bubbles */
 $bubbleArwSize: 10px;
 $bubblePad: $interiorMargin;
 $bubbleMinW: 100px;
 $bubbleMaxW: 300px;
-// Forms
+/*************** Forms */
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.7em;
-// Wait Spinner Defaults
+$inputTextP: 3px 5px;
+/*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;
 $waitSpinnerBorderW: 5px;
@@ -124,6 +135,8 @@ $dirImgs: $dirCommonRes + 'images/';
 
 /************************** TIMINGS */
 $controlFadeMs: 100ms;
+$browseToEditAnimMs: 400ms;
+$editBorderPulseMs: 500ms;
 
 /************************** LIMITS */
 $glyphLimit: '\e603';

platform/commonUI/general/res/sass/_effects.scss

@@ -39,15 +39,20 @@
     @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
 }
 
-@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
-    @include keyframes(pulseBorder) {
-        0%   { border-color: rgba($c, $opacity0); }
-        100% { border-color: rgba($c, $opacity100); }
+@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0) {
+    @include keyframes($animName) {
+        from { #{propName}: $propValStart; }
+        to { #{$propName}: $propValEnd; }
     }
-    @include animation-name(pulseBorder);
-    @include animation-duration($dur);
-    @include animation-direction(alternate);
-    @include animation-iteration-count($iteration);
-    @include animation-timing-function(ease);
-    @include animation-delay($delay);
+    @include animToParams($animName, $dur: 500ms, $delay: 0)
+}
+
+@mixin animToParams($animName, $dur: 500ms, $delay: 0) {
+    @include animation-name($animName);
+    @include animation-duration($dur);
+    @include animation-delay($delay);
+    @include animation-fill-mode(both);
+    @include animation-direction(normal);
+    @include animation-iteration-count(1);
+    @include animation-timing-function(ease-in-out);
 }

platform/commonUI/general/res/sass/_global.scss

@@ -63,9 +63,10 @@ input, textarea {
 	font-family: Helvetica, Arial, sans-serif;
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="search"] {
 	vertical-align: baseline;
-	padding: 3px 5px !important;
+	padding: $inputTextP;
 }
 
 h1, h2, h3 {

platform/commonUI/general/res/sass/_icons.scss

@@ -66,8 +66,7 @@
 }
 
 .menu .type-icon,
-.tree-item .type-icon,
-.super-menu.menu .type-icon {
+.tree-item .type-icon {
 	position: absolute;
 }
 

platform/commonUI/general/res/sass/_main.scss

@@ -21,6 +21,7 @@
  *****************************************************************************/
 @import "effects";
 @import "global";
+@import "animations";
 @import "archetypes";
 @import "about";
 @import "text";
@@ -40,7 +41,7 @@
 @import "controls/lists";
 @import "controls/menus";
 @import "controls/messages";
-@import "controls/time-controller";
+@import "controls/time-conductor";
 @import "mobile/controls/menus";
 
 /********************************* FORMS */

platform/commonUI/general/res/sass/_mixins.scss

@@ -139,6 +139,17 @@
     background-size: $d $d;
 }
 
+@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
+    @include background-image(linear-gradient($angle,
+        rgba($c, $a) 25%, transparent 25%,
+        transparent 50%, rgba($c, $a) 50%,
+        rgba($c, $a) 75%, transparent 75%,
+        transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $bgsize $bgsize;
+}
+
 @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
     @include background-image(linear-gradient(-90deg,
         rgba($c, $a) 0%, rgba($c, $a) 50%,
@@ -174,21 +185,15 @@
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    //$b: 1px solid lighten($bg, 30%);
     border-radius: 2px;
     box-sizing: border-box;
     @include boxIncised(0.7);
     background-color: $bg;
-    //border-bottom: $b;
-    //border-right: $b;
 }
 
 @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-    //&:before {
-    //@include trans-prop-nice("border-color", 25ms);
     content: '';
     display: block;
-    //height: auto;
     pointer-events: none;
     position: absolute;
     z-index: 2;
@@ -294,7 +299,6 @@
 	border-radius: $controlCr;
 	box-sizing: border-box;
 	color: $fg;
-	display: inline-block;
 }
 
 @mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@@ -322,13 +326,13 @@
 	color: $fg;
 	outline: none;
 	&.error {
-		background: rgba(red, 0.5);
+		background-color: $colorFormFieldErrorBg;
+        color: $colorFormFieldErrorFg;
 	}
 }
 
 @mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
 	@include input-base($bg, $fg);
-	padding: 0 $interiorMarginSm;
 }
 
 @mixin contextArrow() {
@@ -337,7 +341,6 @@
 	display: inline-block;
 	font-family: 'symbolsfont';
 	margin-left: $interiorMarginSm;
-	vertical-align: top;
 }
 
 @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -33,18 +33,11 @@ $pad: $interiorMargin * $baseRatio;
 
 .s-btn {
     box-sizing: border-box;
+    display: inline-block;
     padding: 0 $pad;
     font-size: 0.7rem;
     vertical-align: top;
-
-    .icon {
-        font-size: 0.8rem;
-        color: $colorKey;
-    }
-
-    .title-label {
-        vertical-align: top;
-    }
+    @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
 
 	&.lg {
 		font-size: 1rem;
@@ -58,19 +51,14 @@ $pad: $interiorMargin * $baseRatio;
         padding: 0 ($pad / $baseRatio) / 2;
     }
 
-    &.major {
+    &.major,
+    &.key-edit,
+    &.key-properties {
         $bg: $colorBtnMajorBg;
         $hc: lighten($bg, 10%);
         @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
     }
 
-    &:not(.major) {
-        // bg, bgHov, fg, ic
-        @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
-    }
-    &.pause-play {
-
-    }
     &.t-save:before {
         content:'\e612';
         font-family: symbolsfont;
@@ -109,6 +97,22 @@ $pad: $interiorMargin * $baseRatio;
             content: "\000039";
         }
     }
+
+    &.t-export {
+        &:before {
+            @extend .ui-symbol;
+            @extend .icon;
+            content: '\e623';
+        }
+    }
+
+    .icon {
+        font-size: 0.8rem;
+    }
+
+    .title-label {
+        vertical-align: top;
+    }
 }
 
 .s-icon-btn {
@@ -275,4 +279,3 @@ body.desktop .mini-tab-icon {
         color: $colorPausedBg !important;
     }
 }
-

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -29,7 +29,7 @@
     .accordion-head {
         $op: 0.2;
         border-radius: $basicCr * 0.75;
-        box-sizing: "border-box";
+        box-sizing: border-box;
         background: rgba($colorBodyFg, $op);
         cursor: pointer;
         font-size: 0.75em;
@@ -396,11 +396,11 @@ input[type="search"] {
         left: auto;
     }
     .knob-l {
-        @include border-left-radius($sliderKnobW);
+        @include border-left-radius($sliderKnobR);
         cursor: w-resize;
     }
     .knob-r {
-        @include border-right-radius($sliderKnobW);
+        @include border-right-radius($sliderKnobR);
         cursor: e-resize;
     }
     .range {
@@ -420,13 +420,69 @@ input[type="search"] {
     }
 }
 
+@mixin sliderKnob() {
+    $h: 16px;
+    cursor: pointer;
+    width: floor($h/1.75);
+    height: $h;
+    margin-top: 1 + floor($h/2) * -1;
+    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    //border-radius: 50% !important;
+}
+
+@mixin sliderKnobRound() {
+    $h: 12px;
+    cursor: pointer;
+    width: $h;
+    height: $h;
+    margin-top: 1 + floor($h/2) * -1;
+    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    border-radius: 50% !important;
+}
+
+input[type="range"] {
+    // HTML5 range inputs
+
+    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    background: transparent; /* Otherwise white in Chrome */
+    &:focus {
+        outline: none; /* Removes the blue border. */
+    }
+
+    // Thumb
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @include sliderKnobRound();
+    }
+    &::-moz-range-thumb {
+        border: none;
+        @include sliderKnobRound();
+    }
+    &::-ms-thumb {
+        border: none;
+        @include sliderKnobRound();
+    }
+
+    // Track
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 3px;
+        @include sliderTrack();
+    }
+
+    &::-moz-range-track {
+        width: 100%;
+        height: 3px;
+        @include sliderTrack();
+    }
+}
+
 /******************************************************** 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;
         height: $r1H;
@@ -518,6 +574,19 @@ input[type="search"] {
     }
 }
 
+@include phone {
+    .l-datetime-picker {
+        padding: $interiorMargin !important;
+    }
+    .l-calendar {
+        ul.l-cal-row {
+            li {
+                padding: 2px $interiorMargin;
+            }
+        }
+    }
+}
+
 /******************************************************** TEXTAREA */
 textarea {
     @include nice-textarea($colorInputBg, $colorInputFg);

platform/commonUI/general/res/sass/controls/_menus.scss

@@ -167,7 +167,7 @@
 	}
 	.pane {
 		box-sizing: border-box;
-		&.left {
+		&.menu-items {
 			border-right: 1px solid pullForward($colorMenuBg, 10%);
 			left: 0;
 			padding-right: $interiorMargin;
@@ -183,38 +183,53 @@
 				}
 			}
 		}
-		&.right {
+		&.menu-item-description {
 			left: auto;
 			right: 0;
 			padding: $interiorMargin * 5;
 			width: $prw;
+            .desc-area {
+                &.icon {
+                    color: $colorCreateMenuLgIcon;
+                    font-size: 8em;
+                    margin-bottom: $interiorMargin * 3;
+                    position: relative;
+                    text-align: center;
+                }
+                &.title {
+                    color: $colorCreateMenuText;
+                    font-size: 1.2em;
+                    margin-bottom: $interiorMargin * 2;
+                }
+                &.description {
+                    color: pushBack($colorCreateMenuText, 20%);
+                    font-size: 0.8em;
+                    line-height: 1.5em;
+                }
+            }
 		}
 	}
-	.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: $colorCreateMenuText;
-				font-size: 0.8em;
-				line-height: 1.5em;
-			}
-		}
-	}
+
+    &.mini {
+        width: 400px;
+        height: 300px;
+        .pane {
+            &.menu-items {
+                font-size: 0.8em;
+            }
+            &.menu-item-description {
+                padding: $interiorMargin * 3;
+                .desc-area {
+                    &.icon {
+                        font-size: 4em;
+                    }
+                    &.title {
+                        font-size: 1em;
+                    }
+                }
+            }
+        }
+    }
 }
 .context-menu {
 	font-size: 0.80rem;
@@ -251,3 +266,7 @@
 	right: 0;
 	width: auto;
 }
+
+.menus-up .menu {
+    bottom: $btnStdH; top: auto;
+}

platform/commonUI/general/res/sass/controls/_time-conductor.scss

@@ -0,0 +1,376 @@
+@mixin toiLineHovEffects() {
+    &:before,
+    &:after {
+        background-color: $timeControllerToiLineColorHov;
+    }
+}
+
+.l-time-conductor-holder {
+    $minW: 500px;
+    border-top: 1px solid $colorInteriorBorder;
+    min-width: $minW;
+    padding-top: $interiorMargin;
+}
+
+.time-conductor-icon {
+    $c: $colorObjHdrIc;
+    $d: 20px;
+    background: $c;
+    border-radius: 4px;
+    height: $d !important;
+    width: $d;
+    position: relative;
+    
+    // Icon shape: brackets
+    &:before,
+    &:after {
+        content: '';
+        background: $colorBodyBg;
+        position: absolute;
+    }
+    &:before {
+        $in: 7px;
+        left: $in;
+        top: 0;
+        right: $in;
+        bottom: 0;
+
+    }
+    &:after {
+        $in: 4px;
+        left: $in;
+        top: $in;
+        right: $in;
+        bottom: $in;
+    }
+
+    // Clock hands
+    div[class*="hand"] {
+        $handW: 2px;
+        $handH: 8px;
+        @include transform(translate(-50%, -50%));
+        @include animation-iteration-count(infinite);
+        @include animation-timing-function(linear);
+        position: absolute;
+        height: $handW;
+        width: $handW;
+        left: 50%;
+        top: 50%;
+        z-index: 2;
+        &:before {
+            background-color: $c;
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            bottom: -1px;
+        }
+        &.hand-little {
+            z-index: 2;
+            @include animation-duration(12s);
+            &:before {
+                //background: red;
+                height: ceil($handH * 0.7);
+            }
+        }
+        &.hand-big {
+            z-index: 1;
+            @include animation-duration(1s);
+            &:before {
+                height: $handH;
+            }
+        }
+    }
+}
+
+.l-time-conductor {
+    $knobHOffset: 0px;
+    $rangeValPad: $interiorMargin;
+    $rangeValOffset: $sliderKnobW + $interiorMargin;
+    $r1H: nth($ueTimeControlH, 1);
+    $r2H: nth($ueTimeControlH, 2);
+    $r3H: nth($ueTimeControlH, 3);
+
+    // Glyphs Todo: replace with refactored CSS approach when that is merged into master
+    $glyphIconFixed: '\e604';
+    $glyphIconRealtime: '\43';
+    $glyphIconLatest: '\44';
+
+    position: relative;
+
+    > .l-row-elem {
+        // First order row elements
+        box-sizing: border-box;
+        width: 100%;
+        position: relative;
+    }
+
+    .mode-selector .s-menu-btn,
+    .time-delta {
+        &:before {
+            @extend .ui-symbol;
+        }
+    }
+
+    .time-delta {
+        &:before {
+            color: $colorTimeCondKeyBg;
+        }
+    }
+
+    .l-time-conductor-inputs-holder,
+    .l-time-conductor-ticks,
+    .l-time-conductor-zoom-w {
+        font-size: 0.8rem;
+    }
+
+    .l-time-conductor-inputs-holder {
+        $trInputW: 180px;
+        $hmInputW: 60px;
+        $ticksBlockerFadeW: 50px;
+        $iconCalendarW: 16px;
+        $wBgColor: $colorBodyBg;
+
+        height: $r1H;
+        z-index: 1;
+        .l-time-range-w {
+            // Wraps a datetime text input field
+            height: 100%;
+            position: absolute;
+            &.start-w {
+                @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
+                padding-right: $ticksBlockerFadeW;
+            }
+            &.end-w {
+                @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
+                padding-left: $ticksBlockerFadeW;
+                right: 0;
+                text-align: right;
+            }
+            input[type="text"] {
+                @include trans-prop-nice(padding, 250ms);
+            }
+            .time-range-input input {
+                width: $trInputW;
+            }
+            .hrs-min-input input {
+                width: $hmInputW;
+            }
+            .icon-calendar {
+                margin-top: 4px;
+            }
+        }
+    }
+
+    .l-time-conductor-ticks {
+        $c: $colorTick;
+        height: $r1H;
+        mct-conductor-axis {
+            display: block;
+            position: relative;
+            width: 100%;
+        }
+        .l-axis-holder {
+            height: $r1H;
+            position: relative;
+            width: 100%;
+            svg {
+                text-rendering: geometricPrecision;
+                width: 100%;
+                height: 100%;
+                > g {
+                    font-size: 0.9em;
+                }
+                path {
+                    // Line beneath ticks
+                    display: none;
+                }
+                line {
+                    // Tick marks
+                    stroke: $c;
+                }
+                text {
+                    // Tick labels
+                    fill: $c;
+                }
+            }
+        }
+    }
+    .l-data-visualization {
+        background: $colorTimeCondDataVisBg;
+        height: $r2H;
+    }
+
+    .l-time-conductor-controls {
+        align-items: center;
+        margin-top: $interiorMargin;
+        .l-time-conductor-zoom-w {
+            @include justify-content(flex-end);
+            .time-conductor-zoom {
+                height: $r3H;
+                min-width: 100px;
+                width: 20%;
+            }
+            .time-conductor-zoom-current-range {
+                color: $colorTick;
+            }
+        }
+
+    }
+    // Fixed
+    &.fixed-mode {
+        .time-conductor-icon div[class*="hand"] {
+            &.hand-little {
+                @include transform(rotate(120deg));
+            }
+        }
+    }
+
+    // Realtime, latest modes
+    &.realtime-mode,
+    &.latest-mode {
+        .time-conductor-icon {
+            background: $colorTimeCondKeyBg;
+            div[class*="hand"] {
+                @include animation-name(clock-hands);
+                &:before {
+                    background: $colorTimeCondKeyBg;
+                }
+            }
+        }
+
+        .l-time-conductor-inputs-holder {
+            .l-time-range-input-w {
+                input[type="text"]:not(.error) {
+                    background: transparent;
+                    box-shadow: none;
+                    border-radius: 0;
+                    padding-left: 0;
+                    padding-right: 0;
+                    &:hover,
+                    &:focus {
+                        @include nice-input();
+                        padding: $inputTextP;
+                    }
+                }
+                &.start-date {
+                    pointer-events: none;
+                }
+                .icon-calendar {
+                    display: none;
+                }
+                &.end-date {
+                    display: none;
+                }
+            }
+        }
+
+        &.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); }
+        &.latest-mode .time-conductor-icon div[class*="hand"] {
+            @include animation-name(clock-hands-sticky);
+            &.hand-big { @include animation-duration(5s); }
+            &.hand-little { @include animation-duration(60s); }
+        }
+
+        .l-data-visualization {
+            background: $colorTimeCondDataVisRtBg !important
+        }
+        .mode-selector .s-menu-btn {
+            @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
+        }
+    }
+    &.fixed-mode {
+        $i: $glyphIconFixed;
+        .mode-selector .s-menu-btn:before {
+            content: $i;
+        }
+    }
+    &.realtime-mode {
+        $i: $glyphIconRealtime;
+        .time-delta:before {
+            content: $i;
+        }
+        .mode-selector .s-menu-btn:before {
+            content: $i;
+        }
+    }
+    &.latest-mode {
+        $i: $glyphIconLatest;
+        .time-delta:before {
+            content: $i;
+        }
+        .mode-selector .s-menu-btn:before {
+            content: $i;
+        }
+    }
+}
+
+.s-time-range-val {
+    border-radius: $controlCr;
+    background-color: $colorInputBg;
+    padding: 1px 1px 0 $interiorMargin;
+}
+
+/******************************************************************** MOBILE */
+
+@include phoneandtablet {
+    .l-time-conductor {
+        min-width: 0;
+        .l-time-range-slider-holder,
+        .l-time-conductor-ticks {
+            display: none;
+        }
+    }
+}
+
+@include phone {
+    .l-time-conductor {
+        .l-time-conductor-inputs-holder {
+            &.l-flex-row,
+            .l-flex-row {
+                @include align-items(flex-start);
+            }
+            .l-time-range-inputs-elem {
+                &.type-icon {
+                    margin-top: 3px;
+                }
+            }
+            .l-time-conductor-inputs-holder {
+                @include flex-direction(column);
+                .l-time-range-input-w:not(:first-child) {
+                    &:not(:first-child) {
+                        margin-top: $interiorMargin;
+                    }
+                    margin-right: 0;
+                }
+                .l-time-range-inputs-elem {
+                    &.lbl {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include phonePortrait {
+    .l-time-conductor {
+        .l-time-conductor-inputs-holder {
+            .l-time-conductor-inputs-holder {
+                @include flex(1 1 auto);
+                padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
+                .flex-elem {
+                    @include flex(1 1 auto);
+                    width: 100%;
+                }
+                input[type="text"] {
+                    width: 100%;
+                }
+            }
+        }
+    }
+    .l-time-domain-selector {
+        right: auto;
+        left: 20px;
+    }
+}

platform/commonUI/general/res/sass/controls/_time-controller.scss

@@ -1,354 +0,0 @@
-@mixin toiLineHovEffects() {
-	&:before,
-	&:after {
-		background-color: $timeControllerToiLineColorHov;
-	}
-}
-
-.l-time-controller {
-	$minW: 500px;
-	$knobHOffset: 0px;
-	$knobM: ($sliderKnobW + $knobHOffset) * -1;
-	$rangeValPad: $interiorMargin;
-	$rangeValOffset: $sliderKnobW;
-	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
-	$r1H: nth($ueTimeControlH,1);
-	$r2H: nth($ueTimeControlH,2);
-	$r3H: nth($ueTimeControlH,3);
-
-    display: block;
-	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
-    min-width: $minW;
-    font-size: 0.8rem;
-
-
-	.l-time-range-inputs-holder,
-	.l-time-range-slider-holder,
-	.l-time-range-ticks-holder
-	{
-		@include absPosDefault(0, visible);
-		box-sizing: border-box;
-		top: auto;
-	}
-	.l-time-range-slider,
-	.l-time-range-ticks {
-		@include absPosDefault(0, visible);
-		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
-	}
-
-	.l-time-range-inputs-holder {
-		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; bottom: $r3H + ($interiorMarginSm * 1);
-		.range-holder {
-			box-shadow: none;
-			background: none;
-			border: none;
-			.range {
-				.toi-line {
-					$myC: $timeControllerToiLineColor;
-					$myW: 8px;
-					@include transform(translateX(50%));
-					position: absolute;
-					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;
-					}
-					&:after {
-						// Circle element
-						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) {
-			.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 $colorTick;
-			.tick {
-				background-color: $colorTick;
-				border:none;
-				height: 5px;
-				width: 1px;
-				margin-left: -1px;
-				position: absolute;
-				&:first-child {
-					margin-left: 0;
-				}
-				.l-time-range-tick-label {
-					@include webkitProp(transform, translateX(-50%));
-					color: $colorPlotLabelFg;
-					display: inline-block;
-					font-size: 0.9em;
-					position: absolute;
-					top: 8px;
-					white-space: nowrap;
-					z-index: 2;
-				}
-			}
-		}
-	}
-
-	.knob {
-		z-index: 2;
-		.range-value {
-			@include trans-prop-nice-fade(.25s);
-			padding: 0 $rangeValOffset;
-			position: absolute;
-			height: $r2H;
-			line-height: $r2H;
-			white-space: nowrap;
-		}
-		&:hover .range-value {
-			color: $sliderColorKnobHov;
-		}
-		&.knob-l {
-			margin-left: $knobM;
-			.range-value {
-				text-align: right;
-				right: $rangeValOffset;
-			}
-		}
-		&.knob-r {
-			margin-right: $knobM;
-			.range-value {
-				left: $rangeValOffset;
-			}
-			&:hover + .range-holder .range .toi-line {
-				@include toiLineHovEffects;
-			}
-		}
-	}
-
-	.l-time-domain-selector {
-		position: absolute;
-		right: 0px;
-		bottom: 46px;
-	}
-
-}
-
-.s-time-range-val {
-	border-radius: $controlCr;
-	background-color: $colorInputBg;
-	padding: 1px 1px 0 $interiorMargin;
-}
-
-@include phoneandtablet {
-	.l-time-controller, .l-time-range-inputs-holder {
-		min-width: 0px;
-	}
-
-	.l-time-controller {
-
-		.l-time-domain-selector {
-			select {
-				height: 25px;
-				margin-bottom: 0px;
-			}
-		}
-
-		.l-time-range-slider-holder, .l-time-range-ticks-holder {
-			display: none;
-		}
-
-		.time-range-start, .time-range-end, {
-			width: 100%;
-		}
-
-		.l-time-range-inputs-holder {
-			.l-time-range-input {
-				display: block;
-				.s-btn {
-					padding-right: 18px;
-					white-space: nowrap;
-					input {
-						width: 100%;
-					}
-				}
-			}
-			.l-time-range-inputs-elem {
-
-			}
-		}
-	}
-}
-
-@include phone {
-	.l-time-controller {
-		height: 48px;
-
-		.l-time-range-inputs-holder {
-			bottom: 24px;
-		}
-
-		.l-time-domain-selector {
-			width: 33%;
-			bottom: -9px;
-		}
-
-		.l-time-range-inputs-holder {
-			.l-time-range-input {
-				margin-bottom: 5px;
-				.s-btn {
-					width: 66%;
-				}
-			}
-			.l-time-range-inputs-elem {
-				&.ui-symbol {
-					display: none;
-				}
-
-				&.lbl {
-					width: 33%;
-					right: 0px;
-					top: 5px;
-					display: block;
-					height: 25px;
-					margin: 0;
-					line-height: 25px;
-					position: absolute;
-				}
-			}
-		}
-	}
-}
-
-
-@include tablet {
-	.l-time-controller {
-		height: 17px;
-
-		.l-time-range-inputs-holder {
-			bottom: -7px;
-			left: -5px;
-		}
-
-		.l-time-domain-selector {
-			width: 23%;
-			right: -4px;
-			bottom: -10px;
-		}
-
-		.l-time-range-inputs-holder {
-			.l-time-range-input {
-				float: left;
-				.s-btn {
-					width: 100%;
-					padding-left: 4px;
-				}
-			}
-		}
-	}
-}
-
-@include tabletLandscape {
-	.l-time-controller {
-		height: 17px;
-
-		.l-time-range-inputs-holder {
-			bottom: -7px;
-		}
-
-		.l-time-domain-selector {
-			width: 23%;
-			right: auto;
-			bottom: -10px;
-			left: 391px;
-		}
-
-		.l-time-range-inputs-holder {
-			.l-time-range-inputs-elem {
-				&.ui-symbol, &.lbl {
-					display: block;
-					float: left;
-					line-height: 25px;
-				}
-			}
-		}
-	}
-
-	.pane-tree-hidden .l-time-controller {
-		.l-time-domain-selector {
-			left: 667px;
-		}
-		.l-time-range-inputs-holder {
-			padding-left: 277px;
-		}
-	}
-}
-@include tabletPortrait {
-	.l-time-controller {
-		height: 17px;
-
-		.l-time-range-inputs-holder {
-			bottom: -7px;
-			left: -5px;
-		}
-
-		.l-time-domain-selector {
-			width: 23%;
-			right: -4px;
-			bottom: -10px;
-		}
-
-		.l-time-range-inputs-holder {
-			.l-time-range-input {
-				width: 38%;
-				float: left;
-			}
-			.l-time-range-inputs-elem {
-				&.ui-symbol, &.lbl {
-					display: none;
-				}
-			}
-		}
-	}
-}

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -1,13 +1,10 @@
 .l-image-main-wrapper,
-.l-image-main,
-.l-image-main-controlbar,
 .l-image-thumbs-wrapper {
 	@include absPosDefault(0, false);
 }
 
 /*************************************** MAIN LAYOUT */
 .l-image-main-wrapper {
-	//@include test();
 	@if $enableImageryThumbs == true {
 		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
 	}
@@ -15,16 +12,14 @@
 	min-width: 150px;
 	.l-image-main {
 		background-color: $colorPlotBg;
-		bottom: $imageMainControlBarH + $interiorMargin;
+        margin-bottom: $interiorMargin;
 	}
 	.l-image-main-controlbar {
-		top: auto;
-		height: $imageMainControlBarH;
+        &.l-flex-row { @include align-items(center); }
 	}
 }
 
 .l-image-thumbs-wrapper {
-	//@include test(red);
 	top: auto;
 	height: $imageThumbsWrapperH;
 }
@@ -44,24 +39,17 @@
 	background-repeat: no-repeat;
 }
 
-.l-image-main {
-	//cursor: crosshair;
-}
-
 .l-image-main-controlbar {
-	//@include test();
 	font-size: 0.8em;
-	line-height: $imageMainControlBarH;
+	line-height: inherit;
 	.left, .right {
 		direction: rtl;
 		overflow: hidden;
 	}
 	.left {
-		//@include test(red);
 		text-align: left;
 	}
 	.right {
-		//@include test(green);
 		z-index: 2;
 	}
 	.l-date,
@@ -71,7 +59,6 @@
 	.l-mag {
 		direction: ltr;
 		display: inline-block;
-		//white-space: nowrap;
 		&:before {
 			content: "\000049";
 		}

platform/commonUI/general/res/sass/helpers/_wait-spinner.scss

@@ -19,15 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@include keyframes(rotation) {
-    100% { @include transform(rotate(360deg)); }
-}
-
-@include keyframes(rotation-centered) {
-    0%   { @include transform(translate(-50%, -50%) rotate(0deg)); }
-    100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
-}
-
 @mixin  spinner($b: 5px, $c: $colorKey) {
     @include transform-origin(center);
     @include animation-name(rotation-centered);

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -24,6 +24,10 @@
 	height: 100%;
 }
 
+.tabular-holder {
+    @include absPosDefault();
+}
+
 .tabular,
 table {
 	box-sizing: border-box;
@@ -163,3 +167,40 @@ table {
 		}
 	}
 }
+
+/********************************************************** SPECIFIC TABULAR VIEWS */
+.tabular-holder {
+    &.t-exportable {
+        $btnExportH: 25px;
+        .l-view-section {
+            top: $btnExportH + $interiorMargin;
+        }
+    }
+}
+
+.child-frame {
+    .tabular-holder {
+        &.t-exportable {
+            $btnExportH: $btnFrameH;
+            .s-btn.t-export {
+                @include trans-prop-nice(opacity, $dur: 50ms);
+                opacity: 0;
+            }
+            .l-view-section {
+                @include trans-prop-nice(top, $dur: 150ms, $delay: 50ms);
+                top: 0;
+            }
+            &:hover {
+                .s-btn.t-export {
+                    @include trans-prop-nice(opacity, 150ms, 100ms);
+                    opacity: 1;
+                }
+                .l-view-section {
+                    @include trans-prop-nice(top, $dur: 150ms);
+                    top: $btnExportH + $interiorMargin;
+                }
+            }
+        }
+    }
+
+}

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -19,12 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-$yBarW: 60px;
-$yLabelW: 10px;
-$xBarH: 32px;
-$legendH: 20px;
-$swatchD: 8px;
-$plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left
+.abs.holder-plot {
+    // Fend off the scrollbar when less than min-height;
+    right: $interiorMargin;
+}
 
 .gl-plot {
 	color: $colorPlotFg;
@@ -32,6 +30,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	position: relative;
 	width: 100%;
 	height: 100%;
+    min-height: $plotMinH;
 
     .gl-plot-local-controls {
         @include trans-prop-nice(opacity, 150ms);
@@ -54,17 +53,17 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 			top: auto;
 			right: 0;
 			bottom: $interiorMargin;
-			left: $yBarW;
-			height: $xBarH;
+			left: $plotYBarW;
+			height: $plotXBarH;
 			width: auto;
 			overflow: hidden;
 		}
 		&.gl-plot-y {
-			top: $legendH + $interiorMargin;
+			top: $plotLegendH + $interiorMargin;
 			right: auto;
 			bottom: nth($plotDisplayArea, 3);
 			left: 0;
-			width: $yBarW;
+			width: $plotYBarW;
 		}
 	}
 
@@ -146,7 +145,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
         @include transform(translateY(-50%));
         min-width: 150px; // Need this due to enclosure of .select
         top: 50%;
-        left: $yLabelW + $interiorMargin * 2;
+        left: $plotYLabelW + $interiorMargin * 2;
     }
 
     .t-plot-display-controls {
@@ -174,7 +173,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		right: 0;
 		bottom: auto;
 		left: 0;
-		height: $legendH;
+		height: $plotLegendH;
 		overflow-x: hidden;
 		overflow-y: auto;
 	}
@@ -236,8 +235,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		.color-swatch {
 			border-radius: 2px;
 			display: inline-block;
-			height: $swatchD;
-			width: $swatchD;
+			height: $plotSwatchD;
+			width: $plotSwatchD;
 		}
 	}
 }
@@ -249,8 +248,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		padding: 0px $itemPadLR;
 		.plot-color-swatch {
 			border: 1px solid $colorBodyBg;
-			height: $swatchD + 1;
-			width: $swatchD + 1;
+			height: $plotSwatchD + 1;
+			width: $plotSwatchD + 1;
 		}
 	}
 }

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -54,7 +54,8 @@
 			height: $ohH;
 			line-height: $ohH;
 			padding: 0 $interiorMargin;
-			> span {
+			> span,
+            &:before {
 				font-size: 0.65rem;
 			}
 		}

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -129,6 +129,8 @@
     }
 
     .primary-pane {
+        // Clip element that have min-widths
+        overflow: hidden;
         // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
         z-index: 4;
     }
@@ -194,7 +196,7 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     .holder.holder-treeview-elements {
         top: $bodyMargin;
         right: 0;
-        bottom: $bodyMargin;
+        bottom: $interiorMargin;
         left: $bodyMargin;
         .create-btn-holder {
             &.s-status-editing {
@@ -215,17 +217,17 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
         left: 0;
         .holder-object {
             top: $bodyMargin;
-            bottom: $bodyMargin;
+            bottom: $interiorMargin;
         }
         .holder-inspector {
             top: $bodyMargin;
-            bottom: $bodyMargin;
+            bottom: $interiorMargin;
             left: $bodyMargin;
             right: $bodyMargin;
         }
         .holder-elements {
             top: 0;
-            bottom: $bodyMargin;
+            bottom: $interiorMargin;
             left: $bodyMargin;
             right: $bodyMargin;
         }
@@ -237,30 +239,10 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     top: $ueTopBarH + $interiorMarginLg;
 }
 
-.l-object-wrapper {
-    @extend .abs;
-
-    .object-holder-main {
-        @extend .abs;
-    }
-    .l-edit-controls {
-        //@include trans-prop-nice((opacity, height), 0.25s);
-        border-bottom: 1px solid $colorInteriorBorder;
-        line-height: $ueEditToolBarH;
-        height: 0px;
-        opacity: 0;
-        .tool-bar {
-            right: $interiorMargin;
-        }
-    }
-}
-
 .l-object-wrapper-inner {
     @include trans-prop-nice-resize(0.25s);
 }
 
-
-
 .object-browse-bar .s-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .s-menu-btn,
@@ -288,8 +270,9 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
 
     .left {
         padding-right: $interiorMarginLg;
-        .l-back:not(.s-status-editing) {
+        .l-back {
             margin-right: $interiorMarginLg;
+            &.s-status-editing { display: none; }
         }
     }
 }
@@ -376,19 +359,49 @@ body.desktop {
 
 .s-status-editing {
     .l-object-wrapper {
-        @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
-        border-radius: $controlCr;
+        $t2Dur: $browseToEditAnimMs;
+        $t1Dur: $t2Dur / 2;
+        $pulseDur: $editBorderPulseMs;
+        $bC0: rgba($colorEditAreaFg, 0.5);
+        $bC100: rgba($colorEditAreaFg, 1);
+
         background-color: $colorEditAreaBg;
-        border-color: $colorEditAreaFg;
-        border-width: 2px;
-        border-style: dotted;
-        .l-object-wrapper-inner {
-            @include absPosDefault(3px, hidden);
+        border-radius: $controlCr;
+        border: 1px dotted $bC0;
+
+        // Transition 1
+        @include keyframes(wrapperIn) {
+            from { border: 0px dotted transparent; padding: 0; }
+            to { border: 1px dotted $bC0; padding: 5px; }
         }
+
+        // Do last
+        @include keyframes(pulseNew) {
+            from  { border-color: $bC0; }
+            to { border-color: $bC100; }
+        }
+
+        @include animation-name(wrapperIn, pulseNew);
+        @include animation-duration($t1Dur, $pulseDur);
+        @include animation-delay(0s, $t1Dur + $t2Dur);
+        @include animation-direction(normal, alternate);
+        @include animation-fill-mode(both, none);
+        @include animation-iteration-count(1, infinite);
+        @include animation-timing-function(ease-in-out, linear);
+
+
         .l-edit-controls {
-            height: $ueEditToolBarH + $interiorMargin;
-            margin-bottom: $interiorMargin;
-            opacity: 1;
+            height: 0;
+            border-bottom: 1px solid $colorInteriorBorder;
+            // Transition 2: reveal edit controls
+            @include keyframes(editIn) {
+                from { border-bottom: 0px solid transparent; height: 0; margin-bottom: 0; }
+                to { border-bottom: 1px solid $colorInteriorBorder; height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin; }
+            }
+            @include animToParams(editIn, $dur: $t2Dur, $delay: $t1Dur);
+            .tool-bar {
+                right: $interiorMargin;
+            }
         }
     }
 }

platform/commonUI/general/res/templates/controls/datetime-field.html

@@ -19,27 +19,28 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span class="s-btn"
-      ng-controller="DateTimeFieldController">
+<span ng-controller="DateTimeFieldController">
     <input type="text"
            ng-model="textValue"
            ng-blur="restoreTextValue(); ngBlur()"
+           ng-mouseup="ngMouseup()"
            ng-class="{
                         error: textInvalid ||
                             (structure.validate &&
-                                !structure.validate(ngModel[field]))
+                                !structure.validate(ngModel[field])),
+                        'picker-icon': structure.format === 'utc' || !structure.format
                      }">
     </input>
     <a class="ui-symbol icon icon-calendar"
-       ng-if="structure.format === 'utc' || !structure.format"
-       ng-click="picker.active = !picker.active">
-    </a>
+       ng-if="!picker.active && (structure.format === 'utc' || !structure.format)"
+       ng-click="picker.active = !picker.active"></a>
+    <!-- If picker active show icon with no onclick to prevent double registration of clicks -->
+    <a class="ui-symbol icon icon-calendar" ng-if="picker.active"></a>
     <mct-popup ng-if="picker.active">
         <div mct-click-elsewhere="picker.active = false">
             <mct-control key="'datetime-picker'"
                          ng-model="pickerModel"
-                         field="'value'"
-                         options="{ hours: true }">
+                         field="'value'">
             </mct-control>
         </div>
     </mct-popup>

platform/commonUI/general/res/templates/controls/time-controller.html

@@ -19,42 +19,43 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div ng-controller="TimeRangeController as trCtrl">
-    <form class="l-time-range-inputs-holder"
+<div ng-controller="TimeRangeController as trCtrl" class="l-flex-col">
+    <form class="l-time-conductor-inputs-holder l-flex-row flex-elem"
           ng-submit="trCtrl.updateBoundsFromForm()">
-        <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,
-                             validate: trCtrl.validateStart
-                         }"
-                         ng-model="formModel"
-                         ng-blur="trCtrl.updateBoundsFromForm()"
-                         field="'start'"
-                         class="time-range-start">
-            </mct-control>
+        <span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">&#x43;</span>
+        <span class="l-time-range-inputs-elem l-flex-row flex-elem">
+            <span class="l-time-range-input-w flex-elem">
+                <mct-control key="'datetime-field'"
+                             structure="{
+                                 format: parameters.format,
+                                 validate: trCtrl.validateStart
+                             }"
+                             ng-model="formModel"
+                             ng-blur="trCtrl.updateBoundsFromForm()"
+                             field="'start'"
+                             class="time-range-start">
+                </mct-control>
+            </span>
+
+            <span class="l-time-range-inputs-elem lbl flex-elem">to</span>
+
+            <span class="l-time-range-input-w flex-elem" ng-controller="ToggleController as t2">
+                <mct-control key="'datetime-field'"
+                             structure="{
+                                 format: parameters.format,
+                                 validate: trCtrl.validateEnd
+                             }"
+                             ng-model="formModel"
+                             ng-blur="trCtrl.updateBoundsFromForm()"
+                             field="'end'"
+                             class="time-range-end">
+                </mct-control>
+            </span>
         </span>
-
-        <span class="l-time-range-inputs-elem lbl">to</span>
-
-        <span class="l-time-range-input" ng-controller="ToggleController as t2">
-            <mct-control key="'datetime-field'"
-                         structure="{
-                             format: parameters.format,
-                             validate: trCtrl.validateEnd
-                         }"
-                         ng-model="formModel"
-                         ng-blur="trCtrl.updateBoundsFromForm()"
-                         field="'end'"
-                         class="time-range-end">
-            </mct-control>&nbsp;
-        </span>
-
         <input type="submit" class="hidden">
     </form>
 
-    <div class="l-time-range-slider-holder">
+    <div class="l-time-range-slider-holder flex-elem">
         <div class="l-time-range-slider">
             <div class="slider"
                  mct-resize="spanWidth = bounds.width">
@@ -85,7 +86,7 @@
         </div>
     </div>
 
-    <div class="l-time-range-ticks-holder">
+    <div class="l-time-conductor-ticks flex-elem">
         <div class="l-time-range-ticks">
             <div
                 ng-repeat="tick in ticks track by $index"

platform/commonUI/general/src/controllers/DateTimeFieldController.js

@@ -72,6 +72,17 @@ define(
                     if ($scope.ngBlur) {
                         $scope.ngBlur();
                     }
+
+                    // If picker is active, dismiss it when valid value has been selected
+                    // This 'if' is to avoid unnecessary validation if picker is not active
+                    if ($scope.picker.active) {
+                        if ($scope.structure.validate && $scope.structure.validate($scope.ngModel[$scope.field])) {
+                            $scope.picker.active = false;
+                        } else if (!$scope.structure.validate) {
+                            //If picker visible, but no validation function, hide picker
+                            $scope.picker.active = false;
+                        }
+                    }
                 }
             }
 
@@ -93,7 +104,6 @@ define(
             $scope.$watch('ngModel[field]', updateFromModel);
             $scope.$watch('pickerModel.value', updateFromPicker);
             $scope.$watch('textValue', updateFromView);
-
         }
 
         return DateTimeFieldController;

platform/commonUI/general/src/controllers/TimeRangeController.js

@@ -53,7 +53,7 @@ define([
      *        format has been otherwise specified
      * @param {Function} now a function to return current system time
      */
-    function TimeRangeController($scope, formatService, defaultFormat, now) {
+    function TimeRangeController($scope, $timeout, formatService, defaultFormat, now) {
         this.$scope = $scope;
         this.formatService = formatService;
         this.defaultFormat = defaultFormat;
@@ -66,6 +66,7 @@ define([
         this.formatter = formatService.getFormat(defaultFormat);
         this.formStartChanged = false;
         this.formEndChanged = false;
+        this.$timeout = $timeout;
 
         this.$scope.ticks = [];
 
@@ -259,18 +260,23 @@ define([
     };
 
     TimeRangeController.prototype.updateBoundsFromForm = function () {
-        if (this.formStartChanged) {
-            this.$scope.ngModel.outer.start =
-                this.$scope.ngModel.inner.start =
-                this.$scope.formModel.start;
-            this.formStartChanged = false;
-        }
-        if (this.formEndChanged) {
-            this.$scope.ngModel.outer.end =
-                this.$scope.ngModel.inner.end =
-                this.$scope.formModel.end;
-            this.formEndChanged = false;
-        }
+        var self = this;
+
+        //Allow Angular to trigger watches and determine whether values have changed.
+        this.$timeout(function () {
+            if (self.formStartChanged) {
+                self.$scope.ngModel.outer.start =
+                    self.$scope.ngModel.inner.start =
+                        self.$scope.formModel.start;
+                self.formStartChanged = false;
+            }
+            if (self.formEndChanged) {
+                self.$scope.ngModel.outer.end =
+                    self.$scope.ngModel.inner.end =
+                        self.$scope.formModel.end;
+                self.formEndChanged = false;
+            }
+        });
     };
 
     TimeRangeController.prototype.onFormStartChange = function (

platform/commonUI/general/src/directives/MCTClickElsewhere.js

@@ -51,7 +51,9 @@ define(
                         yMax = yMin + rect.height;
 
                     if (x < xMin || x > xMax || y < yMin || y > yMax) {
-                        scope.$eval(attrs.mctClickElsewhere);
+                        scope.$apply(function () {
+                            scope.$eval(attrs.mctClickElsewhere);
+                        });
                     }
                 }
 

platform/commonUI/general/src/directives/MCTPopup.js

@@ -49,10 +49,7 @@ define(
                     position = [rect.left, rect.top],
                     popup = popupService.display(div, position);
 
-                // TODO: Handle in CSS;
-                //       https://github.com/nasa/openmctweb/issues/298
-                div.css('z-index', 75);
-
+                div.addClass('t-popup');
                 transclude(function (clone) {
                     div.append(clone);
                 });

platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js

@@ -33,6 +33,7 @@ define(
             var mockScope,
                 mockFormatService,
                 testDefaultFormat,
+                mockTimeout,
                 mockNow,
                 mockFormat,
                 controller;
@@ -54,6 +55,10 @@ define(
             }
 
             beforeEach(function () {
+                mockTimeout = function (fn) {
+                    return fn();
+                };
+
                 mockScope = jasmine.createSpyObj(
                     "$scope",
                     ["$apply", "$watch", "$watchCollection"]
@@ -78,6 +83,7 @@ define(
 
                 controller = new TimeRangeController(
                     mockScope,
+                    mockTimeout,
                     mockFormatService,
                     testDefaultFormat,
                     mockNow

platform/commonUI/general/test/directives/MCTClickElsewhereSpec.js

@@ -104,6 +104,8 @@ define(
                 });
 
                 it("triggers an evaluation of its related Angular expression", function () {
+                    expect(mockScope.$apply).toHaveBeenCalled();
+                    mockScope.$apply.mostRecentCall.args[0]();
                     expect(mockScope.$eval)
                         .toHaveBeenCalledWith(testAttrs.mctClickElsewhere);
                 });

platform/commonUI/general/test/directives/MCTPopupSpec.js

@@ -24,7 +24,15 @@ define(
     ["../../src/directives/MCTPopup"],
     function (MCTPopup) {
 
-        var JQLITE_METHODS = ["on", "off", "find", "parent", "css", "append"];
+        var JQLITE_METHODS = [
+            "on",
+            "off",
+            "find",
+            "parent",
+            "css",
+            "addClass",
+            "append"
+        ];
 
         describe("The mct-popup directive", function () {
             var mockCompile,

platform/commonUI/inspect/src/gestures/InfoButtonGesture.js

@@ -38,7 +38,6 @@ define(
         function InfoGestureButton($document, agentService, infoService, element, domainObject) {
             var dismissBubble,
                 touchPosition,
-                scopeOff,
                 body = $document.find('body');
 
             function trackPosition(event) {
@@ -94,10 +93,6 @@ define(
                 element.on('click', showBubble);
             }
 
-            // Also make sure we dismiss bubble if representation is destroyed
-            // before the mouse actually leaves it
-            scopeOff = element.scope().$on('$destroy', hideBubble);
-
             return {
                 /**
                  * Detach any event handlers associated with this gesture.
@@ -109,7 +104,6 @@ define(
                     hideBubble();
                     // ...and detach listeners
                     element.off('click', showBubble);
-                    scopeOff();
                 }
             };
         }

platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js

@@ -137,6 +137,11 @@ define(
                 );
             });
 
+            // https://github.com/nasa/openmct/issues/948
+            it("does not try to access scope", function () {
+                expect(mockElement.scope).not.toHaveBeenCalled();
+            });
+
         });
     }
 );

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -14,7 +14,7 @@ $colorAHov: #fff;
 $contrastRatioPercent: 7%;
 $hoverRatioPercent: 10%;
 $basicCr: 3px;
-$controlCr: 3px;
+$controlCr: 2px;
 $smallCr: 2px;
 
 // Buttons and Controls
@@ -32,11 +32,12 @@ $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.1);
 $sliderColorRange: rgba($sliderColorBase, 0.3);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.5);
-$sliderColorKnob: rgba($sliderColorBase, 0.6);
-$sliderColorKnobHov: $sliderColorBase;
+$sliderColorKnob: $sliderColorBase;
+$sliderColorKnobHov: pullForward($sliderColorKnob, $ltGamma);
 $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorKeyFg;
-$sliderKnobW: nth($ueTimeControlH,2)/2;
+$sliderKnobW: 15px;
+$sliderKnobR: 2px;
 $timeControllerToiLineColor: #00c2ff;
 $timeControllerToiLineColorHov: #fff;
 
@@ -51,7 +52,7 @@ $colorGridLines: rgba(#fff, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
-$colorTick: rgba(white, 0.2);
+$colorTick: pullForward($colorBodyBg, 20%);
 
 // Menu colors
 $colorMenuBg: pullForward($colorBodyBg, 23%);
@@ -69,8 +70,10 @@ $colorCreateMenuText: $colorMenuFg;
 $colorCheck: $colorKey;
 $colorFormRequired: $colorAlt1;
 $colorFormValid: #33cc33;
-$colorFormError: #cc0000;
+$colorFormError: #990000;
 $colorFormInvalid: #ff3300;
+$colorFormFieldErrorBg: $colorFormError;
+$colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#fff, 0.1);
 $colorInputBg: rgba(#000, 0.1);
@@ -180,12 +183,13 @@ $scrollbarThumbColorOverlay: lighten($colorOvrBg, 10%);
 $scrollbarThumbColorOverlayHov: lighten($scrollbarThumbColorOverlay, 2%);
 
 // Splitter
-$splitterD: 25px; // splitterD and HandleD should both be odd, or even
+$splitterD: 17px; // splitterD and $splitterHandleD should both be odd, or even
 $splitterHandleD: 1px;
+$splitterDSm: 17px; // Smaller splitter, used inside elements like a Timeline view
 $colorSplitterBg: rgba(#fff, 0.1); //pullForward($colorBodyBg, 5%);
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $splitterEndCr: none;
-$colorSplitterHover: pullForward($colorBodyBg, 15%);
+$colorSplitterHover: pullForward($colorBodyBg, 40%);
 $colorSplitterActive: $colorKey;
 
 // Mobile
@@ -204,3 +208,9 @@ $colorAboutLink: #84b3ff;
 // Loading
 $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorBodyFg, 0.2);
+
+// Time Conductor
+$colorTimeCondKeyBg: #4e70dc;
+$colorTimeCondKeyFg: #fff;
+$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
+$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -32,11 +32,12 @@ $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.07);
 $sliderColorRange: rgba($sliderColorBase, 0.2);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: rgba($sliderColorBase, 0.5);
+$sliderColorKnob: pushBack($sliderColorBase, 20%);
 $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
+$sliderColorRangeValHovBg: $sliderColorRange;
 $sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: nth($ueTimeControlH,2)/2;
+$sliderKnobW: 15px;
+$sliderKnobR: 2px;
 $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;
 
@@ -51,7 +52,7 @@ $colorGridLines: rgba(#000, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
-$colorTick: rgba(black, 0.2);
+$colorTick: pullForward($colorBodyBg, 30%);
 
 // Menu colors
 $colorMenuBg: pushBack($colorBodyBg, 10%);
@@ -69,8 +70,10 @@ $colorCreateMenuText: $colorBodyFg;
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: #33cc33;
-$colorFormError: #cc0000;
+$colorFormError: #990000;
 $colorFormInvalid: #ff2200;
+$colorFormFieldErrorBg: $colorFormError;
+$colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;
@@ -180,12 +183,13 @@ $scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
 $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
 
 // Splitter
-$splitterD: 24px;
+$splitterD: 16px; // splitterD and $splitterHandleD should both be odd, or even
 $splitterHandleD: 2px;
+$splitterDSm: 16px; // Smaller splitter, used inside elements like a Timeline view
 $colorSplitterBg: pullForward($colorBodyBg, 10%);
 $splitterShdw: none;
 $splitterEndCr: none;
-$colorSplitterHover: none;
+$colorSplitterHover: pullForward($colorBodyBg, 30%);
 $colorSplitterActive: $colorKey;
 
 // Mobile
@@ -204,3 +208,9 @@ $colorAboutLink: #84b3ff;
 // Loading
 $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorLoadingFg, 0.1);
+
+// Time Conductor
+$colorTimeCondKeyBg: #6178dc;
+$colorTimeCondKeyFg: #fff;
+$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
+$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);

platform/core/src/capabilities/PersistenceCapability.js

@@ -60,11 +60,6 @@ define(
             this.$q = $q;
         }
 
-        function getKey(id) {
-            var parts = id.split(":");
-            return parts.length > 1 ? parts.slice(1).join(":") : id;
-        }
-
         /**
          * Checks if the value returned is falsey, and if so returns a
          * rejected promise
@@ -131,7 +126,7 @@ define(
             // ...and persist
             return persistenceFn.apply(persistenceService, [
                 this.getSpace(),
-                getKey(domainObject.getId()),
+                this.getKey(),
                 domainObject.getModel()
             ]).then(function (result) {
                 return rejectIfFalsey(result, self.$q);
@@ -159,7 +154,7 @@ define(
 
             return this.persistenceService.readObject(
                     this.getSpace(),
-                    this.domainObject.getId()
+                    this.getKey()
                 ).then(updateModel);
         };
 
@@ -178,6 +173,17 @@ define(
             return this.identifierService.parse(id).getSpace();
         };
 
+
+        /**
+         * Get the key for this domain object in the given space.
+         *
+         * @returns {string} the key of the object in it's space.
+         */
+        PersistenceCapability.prototype.getKey = function () {
+            var id = this.domainObject.getId();
+            return this.identifierService.parse(id).getKey();
+        };
+
         return PersistenceCapability;
     }
 );

platform/core/test/capabilities/PersistenceCapabilitySpec.js

@@ -35,7 +35,8 @@ define(
                 mockNofificationService,
                 mockCacheService,
                 mockQ,
-                id = "object id",
+                key = "persistence key",
+                id = "object identifier",
                 model,
                 SPACE = "some space",
                 persistence,
@@ -101,6 +102,7 @@ define(
                 });
                 mockIdentifierService.parse.andReturn(mockIdentifier);
                 mockIdentifier.getSpace.andReturn(SPACE);
+                mockIdentifier.getKey.andReturn(key);
                 persistence = new PersistenceCapability(
                     mockCacheService,
                     mockPersistenceService,
@@ -124,7 +126,7 @@ define(
 
                     expect(mockPersistenceService.createObject).toHaveBeenCalledWith(
                         SPACE,
-                        id,
+                        key,
                         model
                     );
                 });
@@ -138,7 +140,7 @@ define(
 
                     expect(mockPersistenceService.updateObject).toHaveBeenCalledWith(
                         SPACE,
-                        id,
+                        key,
                         model
                     );
                 });

platform/core/test/objects/DomainObjectProviderSpec.js

@@ -82,16 +82,6 @@ define(
                 expect(result.a.getModel()).toEqual(model);
             });
 
-            //TODO: Disabled for NEM Beta
-            xit("provides a new, fully constituted domain object for a" +
-                " provided model", function () {
-                var model = { someKey: "some value"},
-                    result;
-                result = provider.newObject("a", model);
-                expect(result.getId()).toEqual("a");
-                expect(result.getModel()).toEqual(model);
-            });
-
         });
     }
 );

platform/entanglement/src/actions/CopyAction.js

@@ -81,6 +81,7 @@ define(
             if (phase.toLowerCase() === 'preparing' && !this.dialog) {
                 this.dialog = this.dialogService.showBlockingMessage({
                     title: "Preparing to copy objects",
+                    hint: "Do not navigate away from this page or close this browser tab while this message is displayed.",
                     unknownProgress: true,
                     severity: "info"
                 });

platform/entanglement/src/policies/CrossSpacePolicy.js

@@ -24,10 +24,7 @@ define(
     [],
     function () {
 
-        var DISALLOWED_ACTIONS = [
-            "move",
-            "copy"
-        ];
+        var DISALLOWED_ACTIONS = ["move"];
 
         /**
          * This policy prevents performing move/copy/link actions across

platform/entanglement/test/policies/CrossSpacePolicySpec.js

@@ -70,27 +70,25 @@ define(
                 policy = new CrossSpacePolicy();
             });
 
-            ['move', 'copy'].forEach(function (key) {
-                describe("for " + key + " actions", function () {
-                    beforeEach(function () {
-                        testActionMetadata.key = key;
-                    });
+            describe("for move actions", function () {
+                beforeEach(function () {
+                    testActionMetadata.key = 'move';
+                });
 
-                    it("allows same-space changes", function () {
-                        expect(policy.allow(mockAction, sameSpaceContext))
-                            .toBe(true);
-                    });
+                it("allows same-space changes", function () {
+                    expect(policy.allow(mockAction, sameSpaceContext))
+                        .toBe(true);
+                });
 
-                    it("disallows cross-space changes", function () {
-                        expect(policy.allow(mockAction, crossSpaceContext))
-                            .toBe(false);
-                    });
+                it("disallows cross-space changes", function () {
+                    expect(policy.allow(mockAction, crossSpaceContext))
+                        .toBe(false);
+                });
 
-                    it("allows actions with no selectedObject", function () {
-                        expect(policy.allow(mockAction, {
-                            domainObject: makeObject('a')
-                        })).toBe(true);
-                    });
+                it("allows actions with no selectedObject", function () {
+                    expect(policy.allow(mockAction, {
+                        domainObject: makeObject('a')
+                    })).toBe(true);
                 });
             });
 

platform/features/conductor-v2/bundle.js

@@ -0,0 +1,93 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define([
+    "./src/TimeConductor",
+    "./src/ui/TimeConductorController",
+    "./src/ui/MCTConductorAxis",
+    "./src/timeSystems/UTCTimeSystem",
+    "text!./res/templates/time-conductor.html",
+    "text!./res/templates/mode-selector/mode-selector.html",
+    "text!./res/templates/mode-selector/mode-menu.html",
+    'legacyRegistry'
+], function (
+    TimeConductor,
+    TimeConductorController,
+    MCTConductorAxis,
+    UTCTimeSystem,
+    timeConductorTemplate,
+    modeSelectorTemplate,
+    modeMenuTemplate,
+    legacyRegistry
+) {
+
+    legacyRegistry.register("platform/features/conductor-v2", {
+        "extensions": {
+            "services": [
+                {
+                    "key": "timeConductor",
+                    "implementation": TimeConductor
+                }
+            ],
+            "controllers": [
+                {
+                    "key": "TimeConductorController",
+                    "implementation": TimeConductorController,
+                    "depends": [
+                        "$scope",
+                        "timeConductor",
+                        "timeSystems[]"
+                    ]
+                }
+            ],
+            "directives": [
+                {
+                    "key": "mctConductorAxis",
+                    "implementation": MCTConductorAxis,
+                    "depends": [
+                        "timeConductor"
+                    ]
+                }
+            ],
+            "representations": [
+                {
+                    "key": "time-conductor",
+                    "template": timeConductorTemplate
+                },
+                {
+                    "key": "mode-selector",
+                    "template": modeSelectorTemplate
+                },
+                {
+                    "key": "mode-menu",
+                    "template": modeMenuTemplate
+                }
+            ],
+            "timeSystems": [
+                {
+                    "implementation": UTCTimeSystem,
+                    "depends": ["$timeout"]
+                }
+            ]
+        }
+    });
+});

platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html

@@ -0,0 +1,49 @@
+<!--
+ 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 class="contents">
+    <div class="pane left menu-items">
+        <ul>
+            <li ng-repeat="option in ngModel.options"
+                ng-click="ngModel.selected=option">
+                <a
+                   ng-mouseover="representation.activeMetadata = option.metadata"
+                   ng-mouseleave="representation.activeMetadata = undefined">
+                    <span class="ui-symbol icon type-icon">
+                        {{option.metadata.glyph}}
+                    </span>
+                    {{option.metadata.name}}
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="pane right menu-item-description">
+        <div class="desc-area ui-symbol icon type-icon">
+            {{representation.activeMetadata.glyph}}
+        </div>
+        <div class="desc-area title">
+            {{representation.activeMetadata.name}}
+        </div>
+        <div class="desc-area description">
+            {{representation.activeMetadata.description}}
+        </div>
+    </div>
+</div>

platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html

@@ -0,0 +1,34 @@
+<!--
+ 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.
+-->
+<span ng-controller="ClickAwayController as modeController">
+    <div class="s-menu-btn"
+         ng-click="modeController.toggle()">
+		<span class="title-label">{{ngModel.selected.metadata.label}}</span>
+    </div>
+    <div class="menu super-menu mini mode-selector-menu"
+         ng-show="modeController.isActive()">
+        <mct-representation mct-object="domainObject"
+                            key="'mode-menu'"
+                            ng-model="ngModel">
+        </mct-representation>
+    </div>
+</span>

platform/features/conductor-v2/res/templates/time-conductor.html

@@ -0,0 +1,107 @@
+<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
+<div ng-controller="TimeConductorController as tcController"
+    class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selected.metadata.key}}-mode {{timeSystemModel.selected.metadata.key}}-time-system">
+
+    <div class="flex-elem holder time-conductor-icon">
+        <div class="hand-little"></div>
+        <div class="hand-big"></div>
+    </div>
+
+    <div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
+        <!-- Holds inputs and ticks -->
+        <div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
+            <form class="abs l-time-conductor-inputs-holder"
+                  ng-submit="tcController.updateBoundsFromForm(formModel)">
+                <span class="l-time-range-w start-w">
+                    <span class="l-time-range-input-w start-date">
+                        <mct-control key="'datetime-field'"
+                                     structure="{
+                                         format: timeSystemModel.format,
+                                         validate: tcController.validation.validateStart
+                                     }"
+                                     ng-model="formModel"
+                                     ng-mouseup="changing['start'] = true"
+                                     ng-blur="changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
+                                     field="'start'"
+                                     class="time-range-input">
+                        </mct-control>
+                    </span>
+                        <span class="l-time-range-input-w time-delta start-delta"
+                          ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
+                        <mct-control key="'datetime-field'"
+                                     structure="{
+                                        format: 'duration',
+                                        validate: tcController.validation.validateStartDelta
+                                     }"
+                                     ng-model="formModel"
+                                     ng-blur="tcController.updateDeltasFromForm(formModel)"
+                                     field="'startDelta'"
+                                     class="hrs-min-input">
+                        </mct-control>
+                    </span>
+                </span>
+                <span class="l-time-range-w end-w">
+                    <span class="l-time-range-input-w time-delta end-delta"
+                          ng-class="{'hide':(modeModel.selected.metadata.key === 'fixed')}">
+
+                        <mct-control key="'datetime-field'"
+                                     structure="{
+                                        format: 'duration',
+                                        validate: tcController.validation.validateEndDelta
+                                     }"
+                                     ng-model="formModel"
+                                     ng-blur="tcController.updateDeltasFromForm(formModel)"
+                                     field="'endDelta'"
+                                     class="hrs-min-input">
+                        </mct-control>
+                    </span>
+                    <span class="l-time-range-input-w end-date"
+                          ng-controller="ToggleController as t2">
+                        <mct-control key="'datetime-field'"
+                                     structure="{
+                                         format: timeSystemModel.format,
+                                         validate: tcController.validation.validateEnd
+                                     }"
+                                     ng-model="formModel"
+                                     ng-mouseup="changing['end'] = true"
+                                     ng-blur="changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
+                                     field="'end'"
+                                     class="time-range-input">
+                        </mct-control>
+                    </span>
+                </span>
+
+                <input type="submit" class="hidden">
+            </form>
+            <mct-conductor-axis></mct-conductor-axis>
+        </div>
+
+        <!-- Holds data availability, time of interest -->
+        <div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
+
+        <!-- Holds time system and session selectors, and zoom control -->
+        <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
+            <mct-representation
+                key="'mode-selector'"
+                mct-object="domainObject"
+                ng-model="modeModel"
+                class="holder flex-elem menus-up mode-selector">
+            </mct-representation>
+            <mct-control
+                    key="'menu-button'"
+                    class="holder flex-elem menus-up time-system"
+                    structure="{
+                        text: timeSystemModel.selected.metadata.name,
+                        click: tcController.selectTimeSystem,
+                        options: timeSystemModel.options
+                    }">
+            </mct-control>
+            <!-- Zoom control -->
+            <div class="l-time-conductor-zoom-w grows flex-elem l-flex-row">
+                <span class="time-conductor-zoom-current-range flex-elem flex-fixed holder">Mars Minutes</span>
+                <input class="time-conductor-zoom flex-elem" type="range" />
+            </div>
+        </div>
+
+    </div>
+</div>

platform/features/conductor-v2/src/TimeConductor.js

@@ -0,0 +1,185 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define(['EventEmitter'], function (EventEmitter) {
+
+    /**
+     * The public API for setting and querying time conductor state. The
+     * time conductor is the means by which the temporal bounds of a view
+     * are controlled. Time-sensitive views will typically respond to
+     * changes to bounds or other properties of the time conductor and
+     * update the data displayed based on the time conductor state.
+     *
+     * The TimeConductor extends the EventEmitter class. A number of events are
+     * fired when properties of the time conductor change, which are
+     * documented below.
+     * @constructor
+     */
+    function TimeConductor() {
+        EventEmitter.call(this);
+
+        //The Time System
+        this.system = undefined;
+        //The Time Of Interest
+        this.toi = undefined;
+
+        this.boundsVal = {
+            start: undefined,
+            end: undefined
+        };
+
+        //Default to fixed mode
+        this.followMode = false;
+    }
+
+    TimeConductor.prototype = Object.create(EventEmitter.prototype);
+
+    /**
+     * Validate the given bounds. This can be used for pre-validation of
+     * bounds, for example by views validating user inputs.
+     * @param bounds The start and end time of the conductor.
+     * @returns {string | true} A validation error, or true if valid
+     */
+    TimeConductor.prototype.validateBounds = function (bounds) {
+        if ((bounds.start === undefined) ||
+            (bounds.end === undefined) ||
+            isNaN(bounds.start) ||
+            isNaN(bounds.end)
+        ) {
+            return "Start and end must be specified as integer values";
+        } else if (bounds.start > bounds.end) {
+            return "Specified start date exceeds end bound";
+        }
+        return true;
+    };
+
+    function throwOnError(validationResult) {
+        if (validationResult !== true) {
+            throw new Error(validationResult);
+        }
+    }
+
+    /**
+     * Get or set the follow mode of the time conductor. In follow mode the
+     * time conductor ticks, regularly updating the bounds from a timing
+     * source appropriate to the selected time system and mode of the time
+     * conductor.
+     * @fires TimeConductor#follow
+     * @param {boolean} followMode
+     * @returns {boolean}
+     */
+    TimeConductor.prototype.follow = function (followMode) {
+        if (arguments.length > 0) {
+            this.followMode = followMode;
+            /**
+             * @event TimeConductor#follow The TimeConductor has toggled
+             * into or out of follow mode.
+             * @property {boolean} followMode true if follow mode is
+             * enabled, otherwise false.
+             */
+            this.emit('follow', this.followMode);
+        }
+        return this.followMode;
+    };
+
+    /**
+     * @typedef {Object} TimeConductorBounds
+     * @property {number} start The start time displayed by the time conductor in ms since epoch. Epoch determined by current time system
+     * @property {number} end The end time displayed by the time conductor in ms since epoch.
+     */
+    /**
+     * Get or set the start and end time of the time conductor. Basic validation
+     * of bounds is performed.
+     *
+     * @param {TimeConductorBounds} newBounds
+     * @throws {Error} Validation error
+     * @fires TimeConductor#bounds
+     * @returns {TimeConductorBounds}
+     */
+    TimeConductor.prototype.bounds = function (newBounds) {
+        if (arguments.length > 0) {
+            throwOnError(this.validateBounds(newBounds));
+            //Create a copy to avoid direct mutation of conductor bounds
+            this.boundsVal = JSON.parse(JSON.stringify(newBounds));
+            /**
+             * @event TimeConductor#bounds The start time, end time, or
+             * both have been updated
+             * @property {TimeConductorBounds} bounds
+             */
+            this.emit('bounds', this.boundsVal);
+        }
+        //Return a copy to prevent direct mutation of time conductor bounds.
+        return JSON.parse(JSON.stringify(this.boundsVal));
+    };
+
+    /**
+     * Get or set the time system of the TimeConductor. Time systems determine
+     * units, epoch, and other aspects of time representation. When changing
+     * the time system in use, new valid bounds must also be provided.
+     * @param {TimeSystem} newTimeSystem
+     * @param {TimeConductorBounds} bounds
+     * @fires TimeConductor#timeSystem
+     * @returns {TimeSystem} The currently applied time system
+     */
+    TimeConductor.prototype.timeSystem = function (newTimeSystem, bounds) {
+        if (arguments.length >= 2) {
+            this.system = newTimeSystem;
+            /**
+             * @event TimeConductor#timeSystem The time system used by the time
+             * conductor has changed. A change in Time System will always be
+             * followed by a bounds event specifying new query bounds
+             * @property {TimeSystem} The value of the currently applied
+             * Time System
+             * */
+            this.emit('timeSystem', this.system);
+            // Do something with bounds here. Try and convert between
+            // time systems? Or just set defaults when time system changes?
+            // eg.
+            this.bounds(bounds);
+        } else if (arguments.length === 1) {
+            throw new Error('Must set bounds when changing time system');
+        }
+        return this.system;
+    };
+
+    /**
+     * Get or set the Time of Interest. The Time of Interest is the temporal
+     * focus of the current view. It can be manipulated by the user from the
+     * time conductor or from other views.
+     * @fires TimeConductor#timeOfInterest
+     * @param newTOI
+     * @returns {number} the current time of interest
+     */
+    TimeConductor.prototype.timeOfInterest = function (newTOI) {
+        if (arguments.length > 0) {
+            this.toi = newTOI;
+            /**
+             * @event TimeConductor#timeOfInterest The Time of Interest has moved.
+             * @property {number} Current time of interest
+             */
+            this.emit('timeOfInterest', this.toi);
+        }
+        return this.toi;
+    };
+
+    return TimeConductor;
+});