Merged from master

open #199
open #278
Comments and empty CSS classes removed;

bundles.json

@@ -16,14 +16,16 @@
     "platform/execution",
     "platform/telemetry",
     "platform/features/clock",
+    "platform/features/events",
     "platform/features/imagery",
     "platform/features/layout",
     "platform/features/pages",
     "platform/features/plot",
     "platform/features/scrolling",
-    "platform/features/events",
+    "platform/features/timeline",
     "platform/forms",
     "platform/identity",
+    "platform/persistence/aggregator",
     "platform/persistence/local",
     "platform/persistence/queue",
     "platform/policy",

circle.yml

@@ -1,3 +1,6 @@
+test:
+  override:
+    - exit 0
 deployment:
   production:
     branch: master
@@ -5,7 +8,7 @@ deployment:
       - ./build-docs.sh
       - git push git@heroku.com:openmctweb-demo.git $CIRCLE_SHA1:refs/heads/master
   openmctweb-staging-un:
-    branch: search
+    branch: open199
     heroku:
       appname: openmctweb-staging-un
   openmctweb-staging-deux:

docs/src/guide/index.md

@@ -677,6 +677,40 @@ If the provided capability has no invoke method, the return value here functions
 as `getCapability` including returning `undefined` if the capability is not 
 exposed.
 
+### Identifier Syntax
+
+For most purposes, a domain object identifier can be treated as a purely
+symbolic string; these are typically generated by Open MCT Web and plug-ins
+should rarely be concerned with its internal structure.
+
+A domain object identifier has one or two parts, separated by a colon.
+
+* If two parts are present, the part before the colon refers to the space
+  in which the domain object resides. This may be a persistence space or
+  a purely symbolic space recognized by a specific model provider. The
+  part after the colon is the key to use when looking up the domain object
+  model within that space.
+* If only one part is present, the domain object has no space specified,
+  and may presume to reside in the application-configured default space
+  defined by the `PERSISTENCE_SPACE` constant.
+* Both the key and the space identifier may consist of any combination
+  of alphanumeric characters, underscores, dashes, and periods.
+
+Some examples:
+
+* A domain object with the identifier `foo:xyz` would have its model
+  loaded using key `xyz` from persistence space `foo`.
+* A domain object with the identifier `bar` would have its model loaded
+  using key `bar` from the space identified by the `PERSISTENCE_SPACE`
+  constant.
+
+```bnf
+<identifier> ::= <space> ":" <key> | <key>
+<space> ::= <id char>+
+<key> ::= <id char>+
+<id char> ::= <letter> | <digit> | "-" | "." | "_"
+```
+
 ## Domain Object Actions
 
 An `Action` is behavior that can be performed upon/using a `DomainObject`. An 
@@ -1254,6 +1288,22 @@ object, or the current view proxy.
 * `all()`: Get an array of all objects in the selection state. Will include 
 either or both of the view proxy and selected object. 
 
+## Workers Category
+
+The `workers` extension category allows scripts to be run as web workers
+using the `workerService`.
+
+An extension of this category has no implementation. The following properties
+are supported:
+
+* `key`: A symbolic string used to identify this worker.
+* `workerUrl`: The path, relative to this bundle's `src` folder, where
+  this worker's source code resides.
+* `shared`: Optional; a boolean flag which, if true, indicates that this
+  worker should be instantiated as a
+  [`SharedWorker`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker).
+  Default value is `false`.
+
 # Directives
 
 Open MCT Web defines several Angular directives that are intended for use both 
@@ -1849,6 +1899,14 @@ the TelemetrySeries itself, in that order.
 * `getSeries(domainObject)`: Get the latest `TelemetrySeries` (as resulted from 
 a previous `request(...)` call) available for this domain object.
 
+### Worker Service
+
+The `workerService` may be used to run web workers defined via the
+`workers` extension category. It has the following method:
+
+* `run(key)`: Run the worker identified by the provided `key`. Returns
+  a `Worker` (or `SharedWorker`, if the specified worker is defined
+  as a shared worker); if the `key` is unknown, returns `undefined`.
 
 # Models
 Domain object models in Open MCT Web are JavaScript objects describing the 
@@ -2353,6 +2411,11 @@ default paths to reach external services are all correct.
 
 ### Configuration Constants
 
+The following constants have global significance:
+* `PERSISTENCE_SPACE`: The space in which domain objects should be persisted
+  (or read from) when not otherwise specified. Typically this will not need
+  to be overridden by other bundles, but persistence adapters may wish to
+  consume this constant in order to provide persistence for that space.
 
 The following configuration constants are recognized by Open MCT Web bundles:
 * Common UI elements - `platform/commonUI/general`

example/scratchpad/README.md

@@ -0,0 +1,2 @@
+Example of using multiple persistence stores by exposing a root
+object with a different space prefix.

example/scratchpad/bundle.json

@@ -0,0 +1,23 @@
+{
+    "extensions": {
+        "roots": [
+            {
+                "id": "scratch:root",
+                "model": {
+                    "type": "folder",
+                    "composition": [],
+                    "name": "Scratchpad"
+                },
+                "priority": "preferred"
+            }
+        ],
+        "components": [
+            {
+                "provides": "persistenceService",
+                "type": "provider",
+                "implementation": "ScratchPersistenceProvider.js",
+                "depends": [ "$q" ]
+            }
+        ]
+    }
+}

example/scratchpad/src/ScratchPersistenceProvider.js

@@ -0,0 +1,79 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*global define,window*/
+
+define(
+    [],
+    function () {
+        'use strict';
+
+        /**
+         * The ScratchPersistenceProvider keeps JSON documents in memory
+         * and provides a persistence interface, but changes are lost on reload.
+         * @memberof example/scratchpad
+         * @constructor
+         * @implements {PersistenceService}
+         * @param q Angular's $q, for promises
+         */
+        function ScratchPersistenceProvider($q) {
+            this.$q = $q;
+            this.table = {};
+        }
+
+        ScratchPersistenceProvider.prototype.listSpaces = function () {
+            return this.$q.when(['scratch']);
+        };
+
+        ScratchPersistenceProvider.prototype.listObjects = function (space) {
+            return this.$q.when(
+                space === 'scratch' ? Object.keys(this.table) : []
+            );
+        };
+
+        ScratchPersistenceProvider.prototype.createObject = function (space, key, value) {
+            if (space === 'scratch') {
+                this.table[key] = JSON.stringify(value);
+            }
+            return this.$q.when(space === 'scratch');
+        };
+
+        ScratchPersistenceProvider.prototype.readObject = function (space, key) {
+            return this.$q.when(
+                (space === 'scratch' && this.table[key]) ?
+                        JSON.parse(this.table[key]) : undefined
+            );
+        };
+
+        ScratchPersistenceProvider.prototype.deleteObject = function (space, key, value) {
+            if (space === 'scratch') {
+                delete this.table[key];
+            }
+            return this.$q.when(space === 'scratch');
+        };
+
+        ScratchPersistenceProvider.prototype.updateObject =
+            ScratchPersistenceProvider.prototype.createObject;
+
+        return ScratchPersistenceProvider;
+    }
+);

platform/commonUI/browse/bundle.json

@@ -20,6 +20,7 @@
                     "$scope",
                     "$route",
                     "$location",
+                    "$q",
                     "objectService",
                     "navigationService",
                     "urlService"
@@ -34,7 +35,8 @@
             {
                 "key": "BrowseObjectController",
                 "implementation": "BrowseObjectController.js",
-                "depends": [ "$scope", "$location", "$route" ]
+                "depends": [ "$scope", "$location", "$route", "$q",
+                    "navigationService" ]
             },
             {
                 "key": "CreateMenuController",
@@ -62,6 +64,7 @@
             {
                 "key": "browse-object",
                 "templateUrl": "templates/browse-object.html",
+                "gestures": ["drop"],
                 "uses": [ "view" ]
             },
             {
@@ -147,7 +150,8 @@
                 "provides": "actionService",
                 "type": "provider",
                 "implementation": "creation/CreateActionProvider.js",
-                "depends": [ "typeService", "dialogService", "creationService", "policyService" ]
+                "depends": ["$q", "typeService",
+                    "navigationService"]
             },
             {
                 "key": "CreationService",

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

@@ -19,8 +19,9 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span ng-controller="BrowseObjectController">
-    <div class="object-browse-bar l-flex-row">
+<div ng-controller="BrowseObjectController" class="abs l-flex-col"
+     ng-class="editMode ? 'edit-mode' : 'browse-mode'">
+    <div class="holder flex-elem l-flex-row object-browse-bar ">
         <div class="items-select left flex-elem l-flex-row grows">
             <mct-representation key="'back-arrow'"
                                 mct-object="domainObject"
@@ -43,8 +44,27 @@
             </mct-representation>
         </div>
     </div>
-    <mct-representation key="representation.selected.key"
-                        mct-object="representation.selected.key && domainObject"
-                        class="abs object-holder">
-    </mct-representation>
-</span>
+    <div class="holder l-flex-col flex-elem grows l-object-wrapper" ng-class="{ active:editMode, 'edit-main':editMode}">
+        <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"
+                 ng-class="{ active:editMode }">
+                <mct-toolbar name="mctToolbar"
+                             structure="toolbar.structure"
+                             ng-model="toolbar.state"
+                             class="flex-elem grows">
+                </mct-toolbar>
+                <mct-representation key="'edit-action-buttons'"
+                                    mct-object="domainObject"
+                                    class='flex-elem conclude-editing'>
+                </mct-representation>
+
+            </div>
+            <mct-representation key="representation.selected.key"
+                                mct-object="representation.selected.key && domainObject"
+                                class="abs flex-elem grows object-holder-main scroll"
+                                toolbar="toolbar">
+            </mct-representation>
+        </div><!--/ l-object-wrapper-inner -->
+    </div>
+</div>

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

@@ -20,7 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div class="abs holder-all browse-mode" ng-controller="BrowseController">
+<div class="abs holder-all" ng-controller="BrowseController"
+     mct-before-unload="beforeUnloadWarning()">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="abs holder holder-main browse-area s-browse-area browse-wrapper"
          ng-controller="PaneController as modelPaneTree"

platform/commonUI/browse/src/BrowseController.js

@@ -26,12 +26,16 @@
  * @namespace platform/commonUI/browse
  */
 define(
-    [],
-    function () {
+    [
+        '../../../representation/src/gestures/GestureConstants',
+        '../../edit/src/objects/EditableDomainObject'
+    ],
+    function (GestureConstants, EditableDomainObject) {
         "use strict";
 
         var ROOT_ID = "ROOT",
-            DEFAULT_PATH = "mine";
+            DEFAULT_PATH = "mine",
+            CONFIRM_MSG = "Unsaved changes will be lost if you leave this page.";
 
         /**
          * The BrowseController is used to populate the initial scope in Browse
@@ -43,7 +47,7 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function BrowseController($scope, $route, $location, objectService, navigationService, urlService) {
+        function BrowseController($scope, $route, $location, $q, objectService, navigationService, urlService) {
             var path = [ROOT_ID].concat(
                 ($route.current.params.ids || DEFAULT_PATH).split("/")
             );
@@ -64,10 +68,21 @@ define(
                 // urlService.urlForLocation used to adjust current
                 // path to new, addressed, path based on
                 // domainObject
-                $location.path(urlService.urlForLocation("browse", domainObject));
+                $location.path(urlService.urlForLocation("browse", domainObject.hasCapability('editor') ? domainObject.getOriginalObject() : domainObject));
 
             }
 
+            function setSelectedObject(domainObject) {
+                if (domainObject !== $scope.navigatedObject && isDirty() && !confirm(CONFIRM_MSG)) {
+                        $scope.treeModel.selectedObject = $scope.navigatedObject;
+                } else {
+                    if (domainObject !== $scope.navigatedObject && $scope.navigatedObject.hasCapability('editor')){
+                        $scope.navigatedObject.getCapability('action').perform('cancel');
+                    }
+                    setNavigation(domainObject);
+                }
+            }
+
             // Callback for updating the in-scope reference to the object
             // that is currently navigated-to.
             function setNavigation(domainObject) {
@@ -78,6 +93,7 @@ define(
             }
 
             function navigateTo(domainObject) {
+
                 // Check if an object has been navigated-to already...
                 // If not, or if an ID path has been explicitly set in the URL,
                 // navigate to the URL-specified object.
@@ -143,12 +159,25 @@ define(
                 selectedObject: navigationService.getNavigation()
             };
 
+            function isDirty(){
+                var editorCapability = $scope.navigatedObject &&
+                        $scope.navigatedObject.getCapability("editor"),
+                    hasChanges = editorCapability && editorCapability.dirty();
+                return hasChanges;
+            }
+
+            $scope.beforeUnloadWarning = function() {
+                return isDirty() ?
+                    "Unsaved changes will be lost if you leave this page." :
+                    undefined;
+            }
+
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
             // Also listen for changes which come from the tree
-            $scope.$watch("treeModel.selectedObject", setNavigation);
-
+            $scope.$watch("treeModel.selectedObject", setSelectedObject);
+            
             // Clean up when the scope is destroyed
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);

platform/commonUI/browse/src/BrowseObjectController.js

@@ -22,8 +22,9 @@
 /*global define,Promise*/
 
 define(
-    [],
-    function () {
+    ['../../../representation/src/gestures/GestureConstants', 
+        '../../edit/src/objects/EditableDomainObject'],
+    function (GestureConstants, EditableDomainObject) {
         "use strict";
 
         /**
@@ -32,8 +33,10 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function BrowseObjectController($scope, $location, $route) {
+        function BrowseObjectController($scope, $location, $route, $q, navigationService) {
+            var navigatedObject;
             function setViewForDomainObject(domainObject) {
+                
                 var locationViewKey = $location.search().view;
 
                 function selectViewIfMatching(view) {
@@ -47,6 +50,8 @@ define(
                     ((domainObject && domainObject.useCapability('view')) || [])
                         .forEach(selectViewIfMatching);
                 }
+                $scope.editMode = domainObject.hasCapability('editor') ? true : false;
+                navigatedObject = domainObject;
             }
 
             function updateQueryParam(viewKey) {
@@ -67,6 +72,15 @@ define(
 
             $scope.$watch('domainObject', setViewForDomainObject);
             $scope.$watch('representation.selected.key', updateQueryParam);
+
+            $scope.cancelEditing = function() {
+                navigationService.setNavigation($scope.domainObject.getDomainObject());
+            }
+
+            $scope.doAction = function (action){
+                $scope[action] && $scope[action]();
+            }
+
         }
 
         return BrowseObjectController;

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

@@ -25,8 +25,10 @@
  * Module defining CreateAction. Created by vwoeltje on 11/10/14.
  */
 define(
-    ['./CreateWizard'],
-    function (CreateWizard) {
+    ['./CreateWizard',
+    'uuid',
+    '../../../edit/src/objects/EditableDomainObject'],
+    function (CreateWizard, uuid, EditableDomainObject) {
         "use strict";
 
         /**
@@ -45,13 +47,11 @@ define(
          *        override this)
          * @param {ActionContext} context the context in which the
          *        action is being performed
-         * @param {DialogService} dialogService the dialog service
-         *        to use when requesting user input
-         * @param {CreationService} creationService the creation service,
-         *        which handles the actual instantiation and persistence
-         *        of the newly-created domain object
+         * @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, dialogService, creationService, policyService) {
+        function CreateAction(type, parent, context, $q, navigationService) {
             this.metadata = {
                 key: 'create',
                 glyph: type.getGlyph(),
@@ -63,9 +63,8 @@ define(
 
             this.type = type;
             this.parent = parent;
-            this.policyService = policyService;
-            this.dialogService = dialogService;
-            this.creationService = creationService;
+            this.navigationService = navigationService;
+            this.$q = $q;
         }
 
         /**
@@ -73,45 +72,24 @@ define(
          * This will prompt for user input first.
          */
         CreateAction.prototype.perform = function () {
-            /*
-             Overview of steps in object creation:
+            var newModel = this.type.getInitialModel(),
+                parentObject = this.navigationService.getNavigation(),
+                newObject,
+                editableObject;
 
-             1. Show dialog
-             a. Prepare dialog contents
-             b. Invoke dialogService
-             2. Create new object in persistence service
-             a. Generate UUID
-             b. Store model
-             3. Mutate destination container
-             a. Get mutation capability
-             b. Add new id to composition
-             4. Persist destination container
-             a. ...use persistence capability.
-             */
+            newModel.type = this.type.getKey();
+            newObject = parentObject.useCapability('instantiation', newModel);
+            editableObject = new EditableDomainObject(newObject, this.$q);
+            editableObject.setOriginalObject(parentObject);
+            editableObject.useCapability('mutation', function(model){
+                model.location = parentObject.getId();
+            });
 
-            // The wizard will handle creating the form model based
-            // on the type...
-            var wizard =
-                new CreateWizard(this.type, this.parent, this.policyService),
-                self = this;
-
-            // Create and persist the new object, based on user
-            // input.
-            function persistResult(formValue) {
-                var parent = wizard.getLocation(formValue),
-                    newModel = wizard.createModel(formValue);
-                return self.creationService.createObject(newModel, parent);
+            if (newObject.hasCapability('composition') && this.type.getKey()!=='folder') {
+                this.navigationService.setNavigation(editableObject);
+            } else {
+                return editableObject.getCapability('action').perform('save');
             }
-
-            function doNothing() {
-                // Create cancelled, do nothing
-                return false;
-            }
-
-            return this.dialogService.getUserInput(
-                wizard.getFormStructure(),
-                wizard.getInitialFormValue()
-            ).then(persistResult, doNothing);
         };
 
 

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

@@ -46,11 +46,10 @@ define(
          *        introduced in this bundle), responsible for handling actual
          *        object creation.
          */
-        function CreateActionProvider(typeService, dialogService, creationService, policyService) {
+        function CreateActionProvider($q, typeService, navigationService) {
             this.typeService = typeService;
-            this.dialogService = dialogService;
-            this.creationService = creationService;
-            this.policyService = policyService;
+            this.navigationService = navigationService;
+            this.$q = $q;
         }
 
         CreateActionProvider.prototype.getActions = function (actionContext) {
@@ -75,9 +74,8 @@ define(
                     type,
                     destination,
                     context,
-                    self.dialogService,
-                    self.creationService,
-                    self.policyService
+                    self.$q,
+                    self.navigationService
                 );
             });
         };

platform/commonUI/browse/src/creation/CreateWizard.js

@@ -34,9 +34,9 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function CreateWizard(type, parent, policyService) {
+        function CreateWizard(type, parent, policyService, initialModel) {
             this.type = type;
-            this.model = type.getInitialModel();
+            this.model = initialModel || type.getInitialModel();
             this.properties = type.getProperties();
             this.parent = parent;
             this.policyService = policyService;

platform/commonUI/edit/bundle.json

@@ -38,7 +38,7 @@
             {
                 "key": "edit",
                 "implementation": "actions/EditAction.js",
-                "depends": [ "$location", "navigationService", "$log" ],
+                "depends": [ "$location", "navigationService", "$log", "$q" ],
                 "description": "Edit this object.",
                 "category": "view-control",
                 "glyph": "p"
@@ -67,7 +67,9 @@
                 "implementation": "actions/SaveAction.js",
                 "name": "Save",
                 "description": "Save changes made to these objects.",
-                "depends": [ "$location", "urlService" ],
+                "depends": [ "$q", "$location", "$injector",  "urlService",
+                    "navigationService", "policyService", "dialogService",
+                    "creationService" ],
                 "priority": "mandatory"
             },
             {
@@ -76,7 +78,7 @@
                 "implementation": "actions/CancelAction.js",
                 "name": "Cancel",
                 "description": "Discard changes made to these objects.",
-                "depends": [ "$location", "urlService" ]
+                "depends": ["$injector", "navigationService"]
             }
         ],
         "policies": [

platform/commonUI/edit/res/templates/edit-action-buttons.html

@@ -21,10 +21,11 @@
 -->
 <span ng-controller="EditActionController">
     <span ng-repeat="currentAction in editActions">
-        <a class='s-btn'
+        <a class='s-btn t-{{currentAction.getMetadata().key}}'
+           title='{{currentAction.getMetadata().name}}'
            ng-click="currentAction.perform()"
-           ng-class="{ major: $index === 0, subtle: $index !== 0 }">
-            {{currentAction.getMetadata().name}}
+           ng-class="{ major: $index === 0 }">
+            <span class="title-label">{{currentAction.getMetadata().name}}</span>
         </a>
     </span>
 </span>

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

@@ -33,10 +33,10 @@ define(
          * @memberof platform/commonUI/edit
          * @implements {Action}
          */
-        function CancelAction($location, urlService, context) {
+        function CancelAction($injector, navigationService, context) {
             this.domainObject = context.domainObject;
-            this.$location = $location;
-            this.urlService = urlService;
+            this.navigationService = navigationService;
+            this.objectService = $injector.get('objectService');
         }
 
         /**
@@ -47,8 +47,7 @@ define(
          */
         CancelAction.prototype.perform = function () {
             var domainObject = this.domainObject,
-                $location = this.$location,
-                urlService = this.urlService;
+                self = this;
 
             // Look up the object's "editor.completion" capability;
             // this is introduced by EditableDomainObject which is
@@ -64,13 +63,10 @@ define(
                 return editor.cancel();
             }
 
-            // Discard the current root view (which will be the editing
-            // UI, which will have been pushed atop the Browise UI.)
+            //Discard current 'editable' object, and retrieve original
+            // un-edited object.
             function returnToBrowse() {
-                $location.path($location.path(urlService.urlForLocation(
-                    "browse",
-                    domainObject
-                )));
+                return self.navigationService.setNavigation(self.domainObject.getOriginalObject());
             }
 
             return doCancel(getEditorCapability())

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

@@ -25,8 +25,8 @@
  * Module defining EditAction. Created by vwoeltje on 11/14/14.
  */
 define(
-    [],
-    function () {
+    ['../objects/EditableDomainObject'],
+    function (EditableDomainObject) {
         "use strict";
 
         // A no-op action to return in the event that the action cannot
@@ -46,7 +46,7 @@ define(
          * @constructor
          * @implements {Action}
          */
-        function EditAction($location, navigationService, $log, context) {
+        function EditAction($location, navigationService, $log, $q, context) {
             var domainObject = (context || {}).domainObject;
 
             // We cannot enter Edit mode if we have no domain object to
@@ -65,14 +65,20 @@ define(
             this.domainObject = domainObject;
             this.$location = $location;
             this.navigationService = navigationService;
+            this.$q = $q;
         }
 
         /**
          * Enter edit mode.
          */
         EditAction.prototype.perform = function () {
-            this.navigationService.setNavigation(this.domainObject);
-            this.$location.path("/edit");
+            var editableObject;
+            if (!this.domainObject.hasCapability("editor")) {
+                editableObject = new EditableDomainObject(this.domainObject, this.$q);
+                editableObject.getCapability('status').set('editing', true);
+                this.navigationService.setNavigation(editableObject);
+            }
+            //this.$location.path("/edit");
         };
 
         /**
@@ -83,10 +89,11 @@ define(
          */
         EditAction.appliesTo = function (context) {
             var domainObject = (context || {}).domainObject,
-                type = domainObject && domainObject.getCapability('type');
+                type = domainObject && domainObject.getCapability('type'),
+                isEditMode = domainObject && domainObject.getDomainObject ? true : false;
 
             // Only allow creatable types to be edited
-            return type && type.hasFeature('creation');
+            return type && type.hasFeature('creation') && !isEditMode;
         };
 
         return EditAction;

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

@@ -23,7 +23,8 @@
 
 
 define(
-    function () {
+    ['../../../browse/src/creation/CreateWizard'],
+    function (CreateWizard) {
         'use strict';
 
         /**
@@ -34,10 +35,26 @@ define(
          * @implements {Action}
          * @memberof platform/commonUI/edit
          */
-        function SaveAction($location, urlService, context) {
+        function SaveAction($q, $location, $injector, urlService, navigationService, policyService, dialogService, creationService, context) {
             this.domainObject = (context || {}).domainObject;
             this.$location = $location;
+            this.injectObjectService = function(){
+                this.objectService = $injector.get("objectService");
+            }
             this.urlService = urlService;
+            this.navigationService = navigationService;
+            this.policyService = policyService;
+            this.dialogService = dialogService;
+            this.creationService = creationService;
+            this.$q = $q;
+        }
+
+        SaveAction.prototype.getObjectService = function(){
+            // Lazily acquire object service (avoids cyclical dependency)
+            if (!this.objectService) {
+                this.injectObjectService();
+            }
+            return this.objectService;
         }
 
         /**
@@ -50,25 +67,138 @@ define(
         SaveAction.prototype.perform = function () {
             var domainObject = this.domainObject,
                 $location = this.$location,
-                urlService = this.urlService;
+                urlService = this.urlService,
+                self = this;
+
+            function resolveWith(object){
+                return function() {return object};
+            }
+
+            function doWizardSave(parent) {
+                var context = domainObject.getCapability("context");
+                var wizard = new CreateWizard(domainObject.useCapability('type'), parent, self.policyService, domainObject.getModel());
+
+                function mergeObjects(fromObject, toObject){
+                    Object.keys(fromObject).forEach(function(key) {
+                        toObject[key] = fromObject[key];
+                    });
+                }
+
+                // Create and persist the new object, based on user
+                // input.
+                function buildObjectFromInput(formValue) {
+                    var parent = wizard.getLocation(formValue),
+                        formModel = wizard.createModel(formValue);
+
+                        formModel.location = parent.getId();
+                        //Replace domain object model with model collected
+                        // from user form.
+                        domainObject.useCapability("mutation", function(){
+                            //Replace object model with the model from the form
+                            return formModel;
+                        });
+                        return domainObject;
+                }
+
+                function doNothing() {
+                    // Create cancelled, do nothing
+                    return false;
+                }
+
+                function getAllComposees(domainObject){
+                    return domainObject.useCapability('composition');
+                }
+
+                function addComposeesToObject(object){
+                    return function(composees){
+                        return self.$q.all(composees.map(function (composee) {
+                            return object.getCapability('composition').add(composee);
+                        })).then(resolveWith(object));
+                    }
+                }
+
+                /**
+                 * Add the composees of the 'virtual' object to the
+                 * persisted object
+                 * @param object
+                 * @returns {*}
+                 */
+                function composeNewObject(object){
+                    if (self.$q.when(object.hasCapability('composition') && domainObject.hasCapability('composition'))) {
+                        return getAllComposees(domainObject)
+                            .then(addComposeesToObject(object))
+                    }
+                }
+
+                return self.dialogService
+                    .getUserInput(wizard.getFormStructure(), wizard.getInitialFormValue())
+                    .then(buildObjectFromInput, doNothing)
+                    //.then(composeNewObject)
+                    //.then(object.getCapability("persistence"));
+            }
+
+
+            function persistObject(object){
+
+                return (object.hasCapability('editor') && object.getCapability('editor').save(true) || object.getCapability('persistence').persist())
+                    .then(resolveWith(object));
+                /*
+                if (object.hasCapability('editor')){
+                    return object.getCapability('editor').save(true)
+                        .then(resolveWith(object));
+                } else {
+                    return object.useCapability(persistence);
+                }*/
+            }
+
+            function fetchObject(objectId){
+                return self.getObjectService().getObjects([objectId]).then(function(objects){
+                    return objects[objectId];
+                })
+            }
+
+            function getParent(object){
+                return fetchObject(object.getModel().location);
+            }
+
+            function locateObjectInParent(parent){
+                parent.getCapability('composition').add(domainObject.getId());
+                return parent;
+            }
 
             // Invoke any save behavior introduced by the editor capability;
             // this is introduced by EditableDomainObject which is
             // used to insulate underlying objects from changes made
             // during editing.
             function doSave() {
-                return domainObject.getCapability("editor").save();
+                //WARNING: HACK
+                //This is a new 'virtual object' that has not been persisted
+                // yet.
+                if (!domainObject.getModel().persisted){
+                    return getParent(domainObject)
+                            .then(doWizardSave)
+                            .then(persistObject)
+                            .then(getParent)//Parent may have changed based
+                                            // on user selection
+                            .then(locateObjectInParent)
+                            .then(persistObject)
+                            .then(function(){return fetchObject(domainObject.getId());})
+                } else {
+                    return domainObject.getCapability("editor").save()
+                        .then(resolveWith(domainObject.getOriginalObject()));
+                }
             }
 
             // Discard the current root view (which will be the editing
-            // UI, which will have been pushed atop the Browise UI.)
-            function returnToBrowse() {
-                return $location.path(urlService.urlForLocation(
-                    "browse",
-                    domainObject
-                ));
+            // UI, which will have been pushed atop the Browse UI.)
+            function returnToBrowse(object) {
+                if (object) {
+                    self.navigationService.setNavigation(object);
+                }
+                return object;
             }
 
+            //return doSave().then(returnToBrowse);
             return doSave().then(returnToBrowse);
         };
 

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

@@ -80,6 +80,7 @@ define(
         EditorCapability.prototype.save = function (nonrecursive) {
             var domainObject = this.domainObject,
                 editableObject = this.editableObject,
+                self = this,
                 cache = this.cache;
 
             // Update the underlying, "real" domain object's model
@@ -95,8 +96,10 @@ define(
                 return domainObject.getCapability('persistence').persist();
             }
 
+            editableObject.getCapability("status").set("editing", false);
+
             return nonrecursive ?
-                resolvePromise(doMutate()).then(doPersist) :
+                resolvePromise(doMutate()).then(doPersist).then(function(){self.cancel()}) :
                 resolvePromise(cache.saveAll());
         };
 
@@ -109,6 +112,8 @@ define(
          * @memberof platform/commonUI/edit.EditorCapability#
          */
         EditorCapability.prototype.cancel = function () {
+            this.editableObject.getCapability("status").set("editing", false);
+            //TODO: Reset the cache as well here.
             return resolvePromise(undefined);
         };
 

platform/commonUI/edit/src/objects/EditableDomainObject.js

@@ -78,7 +78,9 @@ define(
             // different versions of the same editable domain object
             // are not shown in different sections of the same Edit
             // UI, which might thereby fall out of sync.
-            var cache;
+            var cache,
+                originalObject = domainObject,
+                cachedObject;
 
             // Constructor for EditableDomainObject, which adheres
             // to the same shared cache.
@@ -102,12 +104,22 @@ define(
                             capability;
                 };
 
+
+                editableObject.setOriginalObject = function(object) {
+                    originalObject = object;
+                };
+
+                editableObject.getOriginalObject = function() {
+                    return originalObject;
+                };
+
                 return editableObject;
             }
 
             cache = new EditableDomainObjectCache(EditableDomainObjectImpl, $q);
+            cachedObject = cache.getEditableObject(domainObject);
 
-            return cache.getEditableObject(domainObject);
+            return cachedObject;
         }
 
         return EditableDomainObject;

platform/commonUI/edit/src/objects/EditableDomainObjectCache.js

@@ -69,7 +69,9 @@ define(
          */
         EditableDomainObjectCache.prototype.getEditableObject = function (domainObject) {
             var type = domainObject.getCapability('type'),
-                EditableDomainObject = this.EditableDomainObject;
+                EditableDomainObject = this.EditableDomainObject,
+                editableObject,
+                statusListener;
 
             // Track the top-level domain object; this will have
             // some special behavior for its context capability.
@@ -86,10 +88,12 @@ define(
             }
 
             // Provide an editable form of the object
-            return new EditableDomainObject(
+            editableObject = new EditableDomainObject(
                 domainObject,
                 this.cache.getCachedModel(domainObject)
             );
+
+            return editableObject;
         };
 
         /**

platform/commonUI/general/bundle.json

@@ -76,7 +76,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout" ]
+                "depends": [ "$scope", "$timeout", "navigationService" ]
             },
             {
                 "key": "ActionGroupController",

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

@@ -51,14 +51,11 @@ a.disabled {
 	@include animation-name(pulse, 0.2);
 }
 
-@include keyframes(pulse) {
-	0%   { opacity: 0.5; }
-	100% { opacity: 1; }
-}
-
-
-@mixin pulse($dur: 500ms, $iteration: infinite) {
-	//@include customKeyframes(pulse, 0.2);
+@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
+    @include keyframes(pulse) {
+        0%   { opacity: $opacity0; }
+        100% { opacity: $opacity100; }
+    }
 	@include animation-name(pulse);
 	@include animation-duration($dur);
 	@include animation-direction(alternate);
@@ -66,6 +63,19 @@ a.disabled {
 	@include animation-timing-function(ease-in-out);
 }
 
+@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); }
+	}
+	@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);
+}
+
 .pulse {
 	@include pulse(750ms);
 }

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

@@ -121,7 +121,12 @@ mct-container {
 	text-align: center;
 }
 
-.scrolling {
+.ellipsis {
+    @include ellipsize();
+}
+
+.scrolling,
+.scroll {
 	overflow: auto;
 }
 

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

@@ -23,7 +23,7 @@
 
 .l-inspect,
 .l-inspect table tr td {
-    font-size: 0.7rem;
+    font-size: 0.75rem;
 }
 
 .l-inspect {
@@ -31,6 +31,9 @@
     background: $colorInspectorBg;
     color: $colorInspectorFg;
     line-height: 140%;
+
+    .flex-elem.holder:not(:last-child) { margin-bottom: $interiorMargin; }
+
     .pane-header {
         color: pushBack($colorInspectorFg, 20%);
         font-size: 0.8rem;
@@ -43,6 +46,16 @@
             vertical-align: bottom;
         }
     }
+
+    .split-layout {
+        .split-pane-component.pane {
+            &.bottom {
+                height: 30%;
+                min-height: 20%;
+                max-height: 80%;
+            }
+        }
+    }
     
     ul {
         @include box-sizing(border-box);
@@ -109,4 +122,23 @@
             width: 4px;
         }
     }
-}
+    .holder-elements {
+        .current-elements {
+            position: relative;
+            .tree-item {
+                .t-object-label {
+                    // Elements pool is a flat list, so don't indent items.
+                    left: 0;
+                    .t-item-icon {
+                        font-size: 1em;
+                        width: 1em;
+                    }
+                    .t-title-label {
+                        left: 20px + $interiorMargin;
+                    }
+                }
+            }
+        }
+    }
+}
+

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

@@ -64,6 +64,12 @@
     }
 }
 
+@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
+    @include transition-property(height, width, top, right, bottom, left, opacity);
+    @include transition-duration($t);
+    @include transition-timing-function($tf);
+}
+
 @mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
     @include transition-property(height, bottom, top);
     @include transition-duration($dur);
@@ -309,11 +315,11 @@
 	}
 }
 
-@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
 	@include appearance(none);
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.4) 0 1px 3px);
+	@include box-shadow(inset $shdw);
 	background: $bg;
 	border: none;
 	color: $fg;
@@ -323,7 +329,7 @@
 	}
 }
 
-@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
 	@include input-base($bg, $fg);
 	padding: 0 $interiorMarginSm;
 }

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

@@ -35,6 +35,7 @@ $pad: $interiorMargin * $baseRatio;
     @include box-sizing(border-box);
     padding: 0 $pad;
     font-size: 0.7rem;
+    vertical-align: top;
 
     .icon {
         font-size: 0.8rem;
@@ -70,6 +71,18 @@ $pad: $interiorMargin * $baseRatio;
     &.pause-play {
 
     }
+    &.t-save:before {
+        content:'\e612';
+        font-family: symbolsfont;
+        margin-right: $interiorMarginSm;
+    }
+    &.t-cancel {
+        .title-label { display: none; }
+        &:before {
+            content:'\78';
+            font-family: symbolsfont;
+        }
+    }
 
     &.pause-play {
         .icon:before {
@@ -95,10 +108,7 @@ $pad: $interiorMargin * $baseRatio;
 
 .s-icon-btn {
     @extend .ui-symbol;
-    color: $colorBtnIcon;
-    &:hover {
-        color: lighten($colorBtnIcon, $ltGamma);
-    }
+    // Color and styling additionally in _controls.scss
 }
 
 .mini-tab {

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

@@ -187,7 +187,8 @@ label.checkbox.custom {
     }
 }
 
-.context-available {
+.context-available,
+.s-icon-btn {
     $c: $colorKey;
     color: $c;
     &:hover {

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

@@ -6,10 +6,6 @@
 	}
 }
 
-.l-time-controller-visible {
-
-}
-
 mct-include.l-time-controller {
 	$minW: 500px;
 	$knobHOffset: 0px;
@@ -22,10 +18,10 @@ mct-include.l-time-controller {
 	$r2H: nth($ueTimeControlH,2);
 	$r3H: nth($ueTimeControlH,3);
 
-    @include absPosDefault();
+    //@include absPosDefault();
     //@include test();
     display: block;
-    top: auto;
+    //top: auto;
 	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
     min-width: $minW;
     font-size: 0.8rem;

platform/commonUI/general/res/sass/features/_time-display.scss

@@ -1,46 +1,32 @@
 .l-time-display {
 	$transTime: 200ms;
-	// Layout
+    line-height: 140%;
 	&:hover {
 		.l-btn.control {
 			opacity: 1;
 		}
 	}
-	.l-elem-wrapper {
-		position: relative;
-	}
-	.l-elem {
-		display: inline-block;
-	}
 
 	&.l-timer {
-		.l-elem.l-value {
-			@include trans-prop-nice(left, $transTime);
-			position: absolute;
-			left: 0;
-			z-index: 1;
-			.ui-symbol.direction {
-				font-size: 0.8em;
-			}
-		}
-		&:hover .l-elem.l-value {
-			left: 20px;
+        .control {
+            @include trans-prop-nice((width, opacity), $transTime);
+            line-height: inherit;
+            margin-right: 0;
+            opacity: 0;
+            width: 0;
+        }
+		&:hover .control {
+            margin-right: $interiorMargin;
+            opacity: 1;
+			width: 1em;
 		}
 	}
 
-	// Look-and-feel
-	.l-elem {
-		.value.active,
-		&.value.active {
-			color: $colorKeyFg;
-		}
-	}
-	.l-btn.control {
-		@include trans-prop-nice-fade($transTime);
-		opacity: 0;
-		font-size: 0.65em;
-		vertical-align: top;
-		//line-height: 1em;
-	}
-
+    .value {
+        color: pullForward($colorBodyFg, 50%);
+        font-weight: 400;
+        .direction {
+            font-size: 0.8em;
+        }
+    }
 }

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -31,7 +31,6 @@
 }
 
 .form {
-//	@include test(orange);
 	color: $colorFormText;
 	.form-section {
 		position: relative;
@@ -112,12 +111,8 @@
 
 		.selector-list {
 			// Used in create overlay to display tree view
-			@include nice-input($colorInputBg, $colorInputFg);
+			@include nice-input();
 			$h: 150px;
-			//@include border-radius($basicCr);
-			//@include box-sizing(border-box);
-			//background: rgba(black, 0.2);
-			//padding: $interiorMargin;
 			position: relative;
 			height: $h;
 //			max-width: 50%;
@@ -162,13 +157,9 @@ label.form-control.checkbox {
 	}
 }
 
-input[type="text"] {
-	@include nice-input($colorInputBg, $colorInputFg);
-	&.filter {
-		&.ng-dirty {
-			//            background: red;
-		}
-	}
+input[type="text"],
+input[type="search"] {
+	@include nice-input();
 	&.numeric {
 		text-align: right;
 	}
@@ -176,7 +167,6 @@ input[type="text"] {
 
 textarea {
 	@include nice-textarea($colorInputBg, $colorInputFg);
-	//	font-size: 0.9em;
 	position: absolute;
 	height: 100%;
 	width: 100%;

platform/commonUI/general/res/sass/forms/_filter.scss

@@ -21,20 +21,7 @@
  *****************************************************************************/
 .filter,
 .t-filter {
-	input.filter,
 	input.t-filter-input {
-		@include subdued-input();
-	}
-	input.t-filter-input {
-		height: $formInputH;
-		width: 200px;
-		&:not(.ng-dirty) {
-//			TO-DO: Update compass install to support this
-//			@include input-placeholder {
-//				color: rgba(#fff, 0.3);
-//				font-style: italic;
-//			}
-		}
 		&:not(.ng-dirty) + .t-a-clear {
 			display: none;
 		}
@@ -76,13 +63,6 @@
 			background-color: $colorKey;
 		}
 	}
-//	&:not(ng-dirty)
-}
-
-.l-filter {
-	// Holds an input and a clear button
-	display:inline-block;
-	position: relative;
 }
 
 .top-bar {
@@ -100,4 +80,75 @@
 	.icon-filter {
 		font-size: 1.4em;
 	}
+}
+
+.l-filter {
+    $iconEdgeM: 4px;
+    $iconD: $formInputH - ($iconEdgeM * 2);
+    // Adds a magnifying glass before, holds an input and a clear button
+    display: inline-block;
+    position: relative;
+
+    input[type="search"] {
+        padding: 2px ($iconD + $interiorMargin);
+    }
+    .clear-icon,
+    .menu-icon,
+    &:before {
+        @include box-sizing(border-box);
+        display: inline-block;
+        line-height: inherit;
+        position: absolute;
+        top: 50%;
+        @include transform(translateY(-50%));
+        z-index: 1;
+    }
+
+    &:before {
+        // Magnify glass icon
+        content:'\4d';
+        left: $interiorMargin;
+        @include trans-prop-nice(color, 250ms);
+        pointer-events: none;
+    }
+
+    .clear-icon {
+        right: $iconEdgeM;
+        // Icon is visible only when there is text input
+        visibility: hidden;
+        opacity: 0;
+        &.show {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        &:hover {
+            color: pullForward($colorInputIcon, 10%);
+        }
+    }
+}
+
+.s-filter {
+    input[type="search"] {
+        @include input-base();
+    }
+    .clear-icon,
+    .menu-icon,
+    &:before {
+        color: $colorInputIcon;
+        cursor: pointer;
+        font-family: symbolsfont;
+        @include trans-prop-nice((opacity, color), 150ms);
+    }
+    // Make icon lighten when hovering over search bar
+    &:hover:before {
+        color: pullForward($colorInputIcon, 10%);
+    }
+
+    .clear-icon {
+        // 'x' in circle icon
+        &:before {
+            content: '\e607';
+        }
+    }
 }

platform/commonUI/general/res/sass/forms/_selects.scss

@@ -25,7 +25,6 @@
 	    margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
     }
 	padding: 0 $interiorMargin;
-    overflow: hidden;
 	position: relative;
     line-height: $formInputH;
 	select {

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

@@ -34,51 +34,31 @@ $mobileTreeItemH: 35px;
 $mobileTreeItemIndent: 20px;
 $mobileTreeRightArrowW: 30px;
 
-/************************** WINDOW DIMENSIONS FOR RWD */
+/************************** DEVICE WIDTHS */
+// IMPORTANT! Usage assumes that ranges are mutually exclusive and have no gaps
 $phoMaxW: 514px;
-$phoMaxH: 740px;
-
 $tabMinW: 515px;
-$tabMaxW: 799px;
-
-$tabMinH: 741px;
-$tabMaxH: 1024px;
-
-$compMinW: 800px;
-$compMinH: 1025px;
+$tabMaxW: 1280px;
+$desktopMinW: 1281px;
 
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $screenPortrait: "screen and (orientation: portrait)";
 $screenLandscape: "screen and (orientation: landscape)";
 
-$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
-$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
+$mobileDevice: "(max-device-width: #{$tabMaxW})";
 
-$phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
-$phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
-
-$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
-$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
-$tabletPortraitCheck: "#{$tabWidPorCheck} and #{$tabHeiPorCheck}";
-
-$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
-$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
-$tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
-
-$desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
-$desktopLandscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
+$phoneCheck: "(max-device-width: #{$phoMaxW})";
+$tabletCheck: $mobileDevice;
+$desktopCheck: "(min-device-width: #{$desktopMinW})";
 
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-$phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
-$phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
-$phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
+$phonePortrait: "#{$screenPortrait} and #{$phoneCheck} and #{$mobileDevice}";
+$phoneLandscape: "#{$screenLandscape} and #{$phoneCheck} and #{$mobileDevice}";
 
-$tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDevice}";
-$tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
-$tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
+$tabletPortrait: "#{$screenPortrait} and #{$tabletCheck} and #{$mobileDevice}";
+$tabletLandscape: "#{$screenLandscape} and #{$tabletCheck} and #{$mobileDevice}";
 
-$desktopPortrait: "screen and #{$desktopPortraitCheck}";
-$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
+$desktop: "screen and #{$desktopCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 $proporMenuOnly: 90%;

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -102,7 +102,7 @@
     }
 
     .object-browse-bar {
-        left: 45px !important;
+        margin-left: 45px;
         .context-available {
             opacity: 1 !important;
         }

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

@@ -25,8 +25,7 @@
 // Phones in any orientation
 @mixin phone {
     @media #{$phonePortrait},
-           #{$phoneLandscape},
-           #{$phoneLandscapeEmu} {
+           #{$phoneLandscape} {
         @content
     }
 }
@@ -40,8 +39,7 @@
 
 // Phones in landscape orientation
 @mixin phoneLandscape {
-    @media #{$phoneLandscape},
-           #{$phoneLandscapeEmu} {
+    @media #{$phoneLandscape} {
         @content
     }
 }
@@ -49,8 +47,7 @@
 // Tablets in any orientation
 @mixin tablet {
     @media #{$tabletPortrait},
-           #{$tabletLandscape},
-           #{$tabletLandscapeEmu} {
+           #{$tabletLandscape} {
         @content
     }
 }
@@ -64,8 +61,7 @@
 
 // Tablets in landscape orientation
 @mixin tabletLandscape {
-    @media #{$tabletLandscape},
-           #{$tabletLandscapeEmu} {
+    @media #{$tabletLandscape} {
         @content
     }
 }
@@ -74,10 +70,8 @@
 @mixin phoneandtablet {
     @media #{$phonePortrait},
            #{$phoneLandscape},
-           #{$phoneLandscapeEmu},
            #{$tabletPortrait},
-           #{$tabletLandscape},
-           #{$tabletLandscapeEmu} {
+           #{$tabletLandscape} {
         @content
     }
 }
@@ -86,17 +80,14 @@
 @mixin desktopandtablet {
     @media #{$tabletPortrait},
            #{$tabletLandscape},
-           #{$tabletLandscapeEmu},
-           #{$desktopPortrait},
-           #{$desktopLandscape} {
+           #{$desktop} {
         @content
     }
 }
 
 // Desktop monitors in any orientation
 @mixin desktop {
-    @media #{$desktopPortrait},
-           #{$desktopLandscape} {
+    @media #{$desktop} {
         @content
     }
 }

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

@@ -20,11 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 $yBarW: 60px;
-$yLabelW: auto;
+$yLabelW: 10px;
 $xBarH: 32px;
 $legendH: 20px;
-//$colorHash: rgba(white, 0.3); // MOVED INTO CONSTANTS
-//$styleHash: dashed; // MOVED INTO CONSTANTS
 $swatchD: 8px;
 $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left
 
@@ -36,7 +34,6 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	height: 100%;
 
 	.gl-plot-axis-area {
-		//		@include test(green);
 		position: absolute;
 		&.gl-plot-x {
 			top: auto;
@@ -59,7 +56,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	.gl-plot-coords {
 		@include box-sizing(border-box);
 		@include border-radius($controlCr);
-		background: black; //rgba($colorKey, 0.5);
+		background: black;
 		color: lighten($colorBodyFg, 30%);
 		padding: 2px 5px;
 		position: absolute;
@@ -88,11 +85,9 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 	.gl-plot-label,
 	.l-plot-label {
-		//		@include test(yellow);
 		color: $colorPlotLabelFg;
 		position: absolute;
 		text-align: center;
-//		text-transform: uppercase;
 
 		&.gl-plot-x-label,
 		&.l-plot-x-label {
@@ -117,20 +112,26 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		}
 	}
 
-	.gl-plot-y-options {
+	.gl-plot-x-options,
+    .gl-plot-y-options {
 		$h: 32px;
-//		@include test();
 		position: absolute;
-		top: 50%;
-		right: auto;
-		bottom: auto;
-		left: $yLabelW + $interiorMargin;
-		margin-top: $h / -2;
 		height: auto;
 		min-height: $h;
-		width: $h;
+        z-index: 2;
 	}
 
+    .gl-plot-x-options {
+        top: $interiorMargin;
+    }
+
+    .gl-plot-y-options {
+        @include transform(translateY(-50%));
+        min-width: 150px; // Need this due to enclosure of .select
+        top: 50%;
+        left: $yLabelW + $interiorMargin * 2;
+    }
+
 	.gl-plot-hash {
 		position: absolute;
 		border: 0 $colorPlotHash $stylePlotHash;
@@ -214,21 +215,13 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 			display: inline-block;
 			height: $swatchD;
 			width: $swatchD;
-			//margin-right: $interiorMarginSm;
-		}
-		&[class*='s-limit'] {
-			.title-label {
-				//color: #fff;
-			}
 		}
 	}
 }
 
 .gl-plot-legend {
 	.plot-legend-item {
-		//@include test();
 		@include border-radius($smallCr);
-		//color: #fff;
 		line-height: 1.5em;
 		padding: 0px $itemPadLR;
 		.plot-color-swatch {
@@ -250,7 +243,6 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 .gl-plot-tick,
 .tick-label {
-	//			@include test(red);
 	font-size: 0.7rem;
 	position: absolute;
 	overflow: hidden;
@@ -277,7 +269,6 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 }
 
 .gl-plot-tick {
-	//			@include test(red);
 	&.gl-plot-x-tick-label {
 		top: $interiorMargin;
 	}

platform/commonUI/general/res/sass/search/_search.scss

@@ -20,91 +20,33 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-.clear-icon,
-.menu-icon {
-    cursor: pointer;
-    font-family: symbolsfont;
-    @include trans-prop-nice((opacity, color), 150ms);
-}
-
-.clear-icon {
-    // 'x' in circle icon
-    &:before {
-        content: '\e607';
-    }
-}
-
 .holder-search {
+    // Moved a lot of stuff in here to _filter.scss
+    // to generalize approach to search input controls.
+
 	$iconWidth: 20px;
+    $textInputHeight: 19px;
+    $iconEdgeM: 4px;
+    $iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 
 	.search-bar {
-		$textInputHeight: 19px; // This is equal to the default value, 19px
-		$iconEdgeM: 4px;
-		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 		font-size: 0.8em;
 		max-width: 250px;
 		position: relative;
 
-		.search-input {
+		input[type="search"] {
 			height: $treeSearchInputBarH;
 			line-height: $treeSearchInputBarH;
+            position: relative;
+            width: 100%;
+            padding-left: $iconD + $interiorMargin !important;
+            padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
 		}
 		
-		&:before,
-		.clear-icon,
-		.menu-icon {
-			@include box-sizing(border-box);
-			color: $colorInputIcon;
-			height: $iconD;
-            width: $iconD;
-			line-height: $iconD;
-			position: absolute;
-			text-align: center;
-			top: $iconEdgeM;
-		}
-
-		.search-input {
-			position: relative;
-			width: 100%;
-			padding-left: $iconD + $interiorMargin !important;
-			padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
-
-			// Make work for mct-control textfield
-			input {
-				width: inherit; // was 100%
-			}
-		}
-
-		&:before {
-            // Magnify glass icon
-            content:'\4d';
-            font-family: symbolsfont;
-            left: $interiorMarginSm;
-            @include trans-prop-nice(color, 250ms);
-            pointer-events: none;
+        .clear-icon {
+            right: $iconD + $interiorMargin;
         }
 
-		// Make icon lighten when hovering over search bar
-		&:hover:before {
-			color: pullForward($colorInputIcon, 10%);
-		}
-
-		.clear-icon {
-			right: $iconD + $interiorMargin;
-
-			// Icon is visible only when there is text input
-            visibility: hidden;
-			opacity: 0;
-			&.show {
-                visibility: visible;
-				opacity: 1;
-			}
-
-			&:hover {
-				color: pullForward($colorInputIcon, 10%);
-			}
-		}
-
 		.menu-icon {
             // 'v' invoke menu icon
             &:before { content: '\76'; }

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -143,6 +143,31 @@ ul.tree {
 		}
 	}
 
+    &.active {
+        // The item is being edited
+        background: $colorItemTreeEditingBg; //rgba($colorItemTreeSelectedBg, 0.2) !important;
+        pointer-events: none;
+        &:before {
+            // Pencil icon
+            @extend .ui-symbol;
+            @include pulse($dur: 1s, $opacity0: 0.25);
+            color: $colorItemTreeEditingFg;
+            content: '\70';
+            margin-left: $interiorMarginSm;
+        }
+        .t-object-label {
+            .t-item-icon,
+            .t-title-label {
+                color: $colorItemTreeEditingFg;
+                @include text-shadow(none);
+            }
+            .t-title-label {
+                font-style: italic;
+            }
+        }
+        .view-control, + .tree-item-subtree { display: none; }
+    }
+
 	&:not(.loading) {
 		cursor: pointer;
 	}
@@ -160,8 +185,9 @@ ul.tree {
 	}
 }
 
-.tree-item {
+.tree-item,
+.search-result-item.active {
 	.t-object-label {
 		left: $interiorMargin + $treeVCW;
 	}
-}
+}

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

@@ -77,7 +77,6 @@
         }
     }
 
-	// from _bottom-bar.scss
 	.ue-bottom-bar {
 		@include absPosDefault(0);// New status bar design
 		top: auto;
@@ -208,25 +207,64 @@
             top: $bodyMargin;
             bottom: $bodyMargin;
         }
-        .holder-inspector-elements {
+        .holder-inspector {
             top: $bodyMargin;
             bottom: $bodyMargin;
             left: $bodyMargin;
             right: $bodyMargin;
         }
+        .holder-elements {
+            top: 0;
+            bottom: $bodyMargin;
+            left: $bodyMargin;
+            right: $bodyMargin;
+        }
     }
 }
 
 .object-holder {
     @include absPosDefault(0, auto);
     top: $ueTopBarH + $interiorMarginLg;
-    &.l-controls-visible {
-        &.l-time-controller-visible {
-            bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
+}
+
+.l-object-wrapper {
+    @extend .abs;
+
+    .object-holder-main {
+        @extend .abs;
+    }
+
+    &.active {
+        @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
+        @include border-radius($controlCr);
+        background-color: $colorEditAreaBg;
+        border-color: $colorEditAreaFg;
+        border-width: 2px;
+        border-style: dotted;
+        .l-object-wrapper-inner {
+            @include absPosDefault(3px, hidden);
         }
     }
 }
 
+.l-object-wrapper-inner {
+    @include trans-prop-nice-resize(0.25s);
+}
+
+.l-edit-controls {
+    @include trans-prop-nice((opacity, height), 0.25s);
+    border-bottom: 1px solid $colorInteriorBorder;
+    line-height: $ueEditToolBarH;
+    height: 0px;
+    opacity: 0;
+    overflow: hidden;
+    &.active {
+        height: $ueEditToolBarH + $interiorMargin;
+        margin-bottom: $interiorMargin;
+        opacity: 1;
+    }
+}
+
 .object-browse-bar .s-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .s-menu-btn,
@@ -247,7 +285,7 @@
 
 /***************************************************** OBJECT BROWSE BAR */
 .object-browse-bar {
-    @include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
+    // Converting to use flexbox layout
     @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
@@ -261,9 +299,7 @@
     }
 }
 
-// When the tree is hidden, these are the
-// classes used for the left menu and the
-// right representation.
+// When the tree is hidden, these are the classes used for the left menu and the right representation.
 .pane-tree-hidden {
     // Sets the left tree menu when the tree is hidden.
     .tree-holder,
@@ -298,9 +334,6 @@
 
 .pane-inspect-hidden {
     .l-object-and-inspector {
-        .t-inspect {
-            z-index: 1 !important; // Move down so that primary pane elements are clickable
-        }
         .l-inspect,
         .splitter-inspect {
             opacity: 0;

platform/commonUI/general/res/sass/user-environ/_tool-bar.scss

@@ -20,7 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .tool-bar {
-	border-bottom: 1px solid $colorInteriorBorder;
 	.l-control-group {
 		height: $btnToolbarH;
 	}

platform/commonUI/general/res/templates/controls/input-filter.html

@@ -20,15 +20,13 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- look at action-button for example -->
-<span class="t-filter l-filter"
+<span class="t-filter l-filter s-filter"
       ng-controller="GetterSetterController">
 	<input type="search"
            class="t-filter-input"
-           ng-model="getterSetter.value"
-           placeholder="Filter..."/>
-	<a class="ui-symbol t-a-clear s-a-clear"
-       ng-show="getterSetter.value !== ''"
+           ng-model="getterSetter.value"/>
+	<a class="clear-icon"
+       ng-class="{show: !(getterSetter.value === '' || getterSetter.value === undefined)}"
        ng-click="getterSetter.value = ''">
-        x
     </a>
 </span>

platform/commonUI/general/res/templates/object-inspector.html

@@ -19,45 +19,68 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+<!-- TO-DO: get rid of this ng-init and replace with a live state value -->
+<div ng-init="editMode = true;"></div>
+
 <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
-    <div class="abs holder holder-inspector-elements l-flex-col">
-    <div class="pane-header flex-elem">Inspection</div>
-    <ul class="flex-elem grows vscroll">
-        <li>
-            <em>Properties</em>
-            <div class="inspector-properties"
-                 ng-repeat="data in metadata"
-                 ng-class="{ first:$index === 0 }">
-                <div class="label">{{ data.name }}</div>
-                <div class="value">{{ data.value }}</div>
+    <div ng-controller="PaneController as modelPaneEdit">
+        <mct-split-pane class='abs contents split-layout' anchor='bottom'>
+            <div class="split-pane-component pane top">
+                <div class="abs holder holder-inspector l-flex-col">
+                    <div class="pane-header flex-elem">Inspection</div>
+                    <ul class="flex-elem grows vscroll">
+                        <li>
+                            <em>Properties</em>
+                            <div class="inspector-properties"
+                                 ng-repeat="data in metadata"
+                                 ng-class="{ first:$index === 0 }">
+                                <div class="label">{{ data.name }}</div>
+                                <div class="value">{{ data.value }}</div>
+                            </div>
+                        </li>
+                        <li ng-if="contextutalParents.length > 0">
+                            <em title="The location of this linked object.">Location</em>
+                            <span class="inspector-location"
+                                  ng-repeat="parent in contextutalParents"
+                                  ng-class="{ last:($index + 1) === contextualParents.length }">
+                                <mct-representation key="'label'"
+                                                    mct-object="parent"
+                                                    ng-model="ngModel"
+                                                    ng-click="ngModel.selectedObject = parent"
+                                                    class="location-item">
+                                </mct-representation>
+                            </span>
+                        </li>
+                        <li ng-if="primaryParents.length > 0">
+                            <em title="The location of the original object that this was linked from.">Original Location</em>
+                            <span class="inspector-location"
+                                  ng-repeat="parent in primaryParents"
+                                  ng-class="{ last:($index + 1) === primaryParents.length }">
+                                <mct-representation key="'label'"
+                                                    mct-object="parent"
+                                                    ng-model="ngModel"
+                                                    ng-click="ngModel.selectedObject = parent"
+                                                    class="location-item">
+                                </mct-representation>
+                            </span>
+                        </li>
+                    </ul>
+                </div><!--/ holder-inspector -->
+            </div><!--/ split-pane-component -->
+            <mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
+            <div class="split-pane-component pane bottom" ng-show="editMode">
+                <div class="abs holder holder-elements l-flex-col">
+                    <em class="flex-elem">Elements</em>
+                    <mct-include key="'input-filter'"
+                                class="flex-elem holder">
+                    </mct-include>
+                    <mct-representation
+                            key="'edit-elements'"
+                            mct-object="domainObject"
+                            class="flex-elem holder grows vscroll current-elements">
+                    </mct-representation>
+                </div>
             </div>
-        </li>
-        <li ng-if="contextutalParents.length > 0">
-            <em title="The location of this linked object.">Location</em>
-            <span class="inspector-location"
-                  ng-repeat="parent in contextutalParents"
-                  ng-class="{ last:($index + 1) === contextualParents.length }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
-                                    class="location-item">
-                </mct-representation>
-            </span>
-        </li>
-        <li ng-if="primaryParents.length > 0">
-            <em title="The location of the original object that this was linked from.">Original Location</em>
-            <span class="inspector-location"
-                  ng-repeat="parent in primaryParents"
-                  ng-class="{ last:($index + 1) === primaryParents.length }">
-                <mct-representation key="'label'"
-                                    mct-object="parent"
-                                    ng-model="ngModel"
-                                    ng-click="ngModel.selectedObject = parent"
-                                    class="location-item">
-                </mct-representation>
-            </span>
-        </li>
-    </ul>
-    </div>
+        </mct-split-pane>
+    </div><!--/ PaneController -->
 </span>

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

@@ -6,6 +6,8 @@ $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
+$colorEditAreaBg: #31363e;
+$colorEditAreaFg: #587ab5;
 $colorInteriorBorder: rgba($colorBodyFg, 0.1);
 $colorA: #ccc;
 $colorAHov: #fff;
@@ -43,8 +45,6 @@ $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
-$colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.2);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
@@ -69,8 +69,8 @@ $colorFormValid: #33cc33;
 $colorFormError: #cc0000;
 $colorFormInvalid: #ff3300;
 $colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.2);
-$colorInputBg: rgba(#fff, 0.1);
+$colorFormSectionHeader: rgba(#fff, 0.1);
+$colorInputBg: rgba(#000, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
@@ -80,7 +80,7 @@ $colorInspectorBg: pullForward($colorBodyBg, 3%);
 $colorInspectorFg: $colorBodyFg;
 $colorInspectorPropName: pushBack($colorBodyFg, 15%);
 $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
+$colorInspectorSectionHeaderBg: $colorFormSectionHeader;
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Status colors, mainly used for messaging and item ancillary symbols
@@ -109,8 +109,8 @@ $colorLimitRedBg: rgba(red, 0.3);
 $colorLimitRedIc: red;
 
 // Bubble colors
-$colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: #ddd;
+$colorInfoBubbleFg: #666;
 $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
 $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
@@ -126,7 +126,7 @@ $colorItemBg: lighten($colorBodyBg, 5%);
 $colorItemBgHov: pullForward($colorItemBg, 15%);
 $colorItemFg: lighten($colorItemBg, 50%);
 $colorItemFgDetails: lighten($colorItemBg, 30%);
-$colorItemIc: $colorKey; //pullForward($colorItemFg, 20%);
+$colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
 $shdwItemText: rgba(black, 0.1) 0 1px 2px;
@@ -153,12 +153,14 @@ $colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeVCHover: $colorAlt1;
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
+$colorItemTreeEditingBg: #344154;
+$colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: rgba(#fff, 0.3);
 $colorItemTreeSelectedVC: $colorItemTreeVC;
-$colorItemTreeVCHover: $colorAlt1;
 $shdwItemTreeIcon: 0.6;
 
 // Scrollbar
@@ -171,7 +173,7 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
 // Splitter
 $splitterD: 25px; // splitterD and HandleD should both be odd, or even
 $splitterHandleD: 1px;
-$colorSplitterBg: pullForward($colorBodyBg, 5%);
+$colorSplitterBg: rgba(#fff, 0.1); //pullForward($colorBodyBg, 5%);
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $splitterEndCr: none;
 $colorSplitterHover: pullForward($colorBodyBg, 15%);
@@ -191,5 +193,5 @@ $colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
 $colorAboutLink: #84b3ff;
 
 // Loading
-$colorLoadingBg: rgba($colorBodyFg, 0.2);
 $colorLoadingFg: $colorAlt1;
+$colorLoadingBg: rgba($colorBodyFg, 0.2);

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

@@ -6,6 +6,8 @@ $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
+$colorEditAreaBg: #eafaff;
+$colorEditAreaFg: #4bb1c7; //587ab5;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
@@ -55,10 +57,10 @@ $colorMenuIc: $colorKey;
 $colorMenuHovBg: pullForward($colorMenuBg, 10%);
 $colorMenuHovFg: $colorMenuFg;
 $colorMenuHovIc: $colorMenuIc;
-$colorCreateMenuLgIcon: $colorKey;
-$colorCreateMenuText: $colorBodyFg;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
 $shdwMenuText: none;
+$colorCreateMenuLgIcon: $colorKey;
+$colorCreateMenuText: $colorBodyFg;
 
 // Form colors
 $colorCheck: $colorKey;
@@ -107,8 +109,8 @@ $colorLimitRedBg: rgba(red, 0.3);
 $colorLimitRedIc: red;
 
 // Bubble colors
-$colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleFg: #666;
 $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
 $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
@@ -127,12 +129,11 @@ $colorItemFgDetails: pushBack($colorItemFg, 15%);
 $colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
-$shdwItemText: none; //rgba(black, 0.2) 0 1px 2px;
+$shdwItemText: none;
 $colorItemBgSelected: $colorKey;
 
 // Tabular
 $colorTabBorder: pullForward($colorBodyBg, 10%);
-$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
 $colorTabHeaderBg: pullForward($colorBodyBg, 10%);
@@ -149,12 +150,15 @@ $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 
 // Tree
 $colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
+$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
 $colorItemTreeVCHover: $colorKey;
 $colorItemTreeFg: $colorBodyFg;
 $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
 $colorItemTreeSelectedFg: $colorBodyBg;
+$colorItemTreeEditingBg: #caf1ff; //#c6e3ff;
+$colorItemTreeEditingFg: $colorEditAreaFg;
 $colorItemTreeVC: $colorBodyFg;
 $colorItemTreeSelectedVC: $colorBodyBg;
 $shdwItemTreeIcon: none;

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

@@ -1,4 +1,4 @@
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
 	@include containerBase($bg, $fg);
 	@include boxShdw($shdwBtns);
 }

platform/core/bundle.json

@@ -72,8 +72,7 @@
                     "persistenceService",
                     "$q",
                     "now",
-                    "PERSISTENCE_SPACE",
-                    "ADDITIONAL_PERSISTENCE_SPACES"
+                    "PERSISTENCE_SPACE"
                 ]
             },
             {
@@ -115,6 +114,12 @@
                 "type": "provider",
                 "implementation": "views/ViewProvider.js",
                 "depends": [ "views[]", "$log" ]
+            },
+            {
+                "provides": "identifierService",
+                "type": "provider",
+                "implementation": "identifiers/IdentifierProvider.js",
+                "depends": [ "PERSISTENCE_SPACE" ]
             }
         ],
         "types": [
@@ -183,7 +188,7 @@
             {
                 "key": "persistence",
                 "implementation": "capabilities/PersistenceCapability.js",
-                "depends": [ "persistenceService", "PERSISTENCE_SPACE" ]
+                "depends": [ "persistenceService", "identifierService" ]
             },
             {
                 "key": "metadata",
@@ -202,7 +207,7 @@
             {
                 "key": "instantiation",
                 "implementation": "capabilities/InstantiationCapability.js",
-                "depends": [ "$injector" ]
+                "depends": [ "$injector", "identifierService" ]
             }
         ],
         "services": [
@@ -245,11 +250,6 @@
             {
                 "key": "PERSISTENCE_SPACE",
                 "value": "mct"
-            },
-            {
-                "key": "ADDITIONAL_PERSISTENCE_SPACES",
-                "value": [],
-                "description": "An array of additional persistence spaces to load models from."
             }
         ],
         "licenses": [

platform/core/src/capabilities/InstantiationCapability.js

@@ -22,8 +22,8 @@
 /*global define,Promise*/
 
 define(
-    ['../objects/DomainObjectImpl', 'uuid'],
-    function (DomainObjectImpl, uuid) {
+    ['../objects/DomainObjectImpl'],
+    function (DomainObjectImpl) {
         'use strict';
 
         /**
@@ -33,9 +33,12 @@ define(
          * @constructor
          * @memberof platform/core
          * @param $injector Angular's `$injector`
+         * @implements {Capability}
          */
-        function InstantiationCapability($injector) {
+        function InstantiationCapability($injector, identifierService, domainObject) {
             this.$injector = $injector;
+            this.identifierService = identifierService;
+            this.domainObject = domainObject;
         }
 
         /**
@@ -45,19 +48,26 @@ define(
          * have been persisted, nor will it have been added to the
          * composition of the object which exposed this capability.
          *
+         * @param {object} the model for the new domain object
          * @returns {DomainObject} the new domain object
          */
         InstantiationCapability.prototype.instantiate = function (model) {
+            var parsedId =
+                    this.identifierService.parse(this.domainObject.getId()),
+                space = parsedId.getDefinedSpace(),
+                id = this.identifierService.generate(space);
+
             // Lazily initialize; instantiate depends on capabilityService,
             // which depends on all capabilities, including this one.
             this.instantiateFn = this.instantiateFn ||
                 this.$injector.get("instantiate");
-            return this.instantiateFn(model);
+
+            return this.instantiateFn(model, id);
         };
 
         /**
-         * Alias of `create`.
-         * @see {platform/core.CreationCapability#create}
+         * Alias of `instantiate`.
+         * @see {platform/core.CreationCapability#instantiate}
          */
         InstantiationCapability.prototype.invoke =
             InstantiationCapability.prototype.instantiate;

platform/core/src/capabilities/PersistenceCapability.js

@@ -44,12 +44,16 @@ define(
          * @constructor
          * @implements {Capability}
          */
-        function PersistenceCapability(persistenceService, space, domainObject) {
+        function PersistenceCapability(
+            persistenceService,
+            identifierService,
+            domainObject
+        ) {
             // Cache modified timestamp
             this.modified = domainObject.getModel().modified;
 
             this.domainObject = domainObject;
-            this.space = space;
+            this.identifierService = identifierService;
             this.persistenceService = persistenceService;
         }
 
@@ -63,6 +67,11 @@ define(
             };
         }
 
+        function getKey(id) {
+            var parts = id.split(":");
+            return parts.length > 1 ? parts.slice(1).join(":") : id;
+        }
+
         /**
          * Persist any changes which have been made to this
          * domain object's model.
@@ -87,7 +96,7 @@ define(
             // ...and persist
             return persistenceFn.apply(persistenceService, [
                 this.getSpace(),
-                domainObject.getId(),
+                getKey(domainObject.getId()),
                 domainObject.getModel()
             ]);
         };
@@ -130,7 +139,8 @@ define(
          *          be used to persist this object
          */
         PersistenceCapability.prototype.getSpace = function () {
-            return this.space;
+            var id = this.domainObject.getId();
+            return this.identifierService.parse(id).getSpace();
         };
 
         return PersistenceCapability;

platform/core/src/identifiers/Identifier.js

@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        'use strict';
+
+        var SEPARATOR = ":";
+
+        /**
+         * Provides an interface for interpreting domain object identifiers;
+         * in particular, parses out persistence space/key pairs associated
+         * with the domain object.
+         *
+         * @memberof platform/core
+         * @constructor
+         * @param {string} id the domain object identifier
+         * @param {string} defaultSpace the persistence space to use if
+         *        one is not encoded in the identifier
+         */
+        function Identifier(id, defaultSpace) {
+            var separatorIndex = id.indexOf(SEPARATOR);
+
+            if (separatorIndex > -1) {
+                this.key = id.substring(separatorIndex + 1);
+                this.space = id.substring(0, separatorIndex);
+                this.definedSpace = this.space;
+            } else {
+                this.key = id;
+                this.space = defaultSpace;
+                this.definedSpace = undefined;
+            }
+        }
+
+        /**
+         * Get the key under which the identified domain object's model
+         * should be persisted, within its persistence space.
+         * @returns {string} the key within its persistence space
+         */
+        Identifier.prototype.getKey = function () {
+            return this.key;
+        };
+
+        /**
+         * Get the space in which the identified domain object's model should
+         * be persisted.
+         * @returns {string} the persistence space
+         */
+        Identifier.prototype.getSpace = function () {
+            return this.space;
+        };
+
+        /**
+         * Get the persistence space, if any, which has been explicitly
+         * encoded in this domain object's identifier. Returns undefined
+         * if no such space has been specified.
+         * @returns {string} the persistence space, or undefined
+         */
+        Identifier.prototype.getDefinedSpace = function () {
+            return this.definedSpace;
+        };
+
+        return Identifier;
+    }
+);

platform/core/src/identifiers/IdentifierProvider.js

@@ -0,0 +1,66 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    ["uuid", "./Identifier"],
+    function (uuid, Identifier) {
+        'use strict';
+
+        /**
+         * Parses and generates domain object identifiers.
+         * @param {string} defaultSpace the default persistence space
+         * @constructor
+         * @memberof {platform/core}
+         */
+        function IdentifierProvider(defaultSpace) {
+            this.defaultSpace = defaultSpace;
+        }
+
+        /**
+         * Generate a new domain object identifier. A persistence space
+         * may optionally be included; if not specified, no space will
+         * be encoded into the identifier.
+         * @param {string} [space] the persistence space to encode
+         *        in this identifier
+         * @returns {string} a new domain object identifier
+         */
+        IdentifierProvider.prototype.generate = function (space) {
+            var id = uuid();
+            if (space !== undefined) {
+                id = space + ":" + id;
+            }
+            return id;
+        };
+
+        /**
+         * Parse a domain object identifier to examine its component
+         * parts (e.g. its persistence space.)
+         * @returns {platform/core.Identifier} the parsed identifier
+         */
+        IdentifierProvider.prototype.parse = function (id) {
+            return new Identifier(id, this.defaultSpace);
+        };
+
+        return IdentifierProvider;
+    }
+);

platform/core/src/models/PersistedModelProvider.js

@@ -33,6 +33,15 @@ define(
          * A model service which reads domain object models from an external
          * persistence service.
          *
+         * Identifiers will be interpreted as follows:
+         * * If no colon is present, the model will be read from the default
+         *   persistence space.
+         * * If a colon is present, everything before the first colon will be
+         *   taken to refer to the persistence space, and everything after
+         *   will be taken to be that model's key within this space. (If
+         *   no such space exists within the `persistenceService`, that
+         *   identifier will simply be ignored.)
+         *
          * @memberof platform/core
          * @constructor
          * @implements {ModelService}
@@ -41,39 +50,26 @@ define(
          * @param $q Angular's $q service, for working with promises
          * @param {function} now a function which provides the current time
          * @param {string} space the name of the persistence space(s)
-         *        from which models should be retrieved.
-         * @param {string} spaces additional persistence spaces to use
+         *        from which models should be retrieved by default
          */
-        function PersistedModelProvider(persistenceService, $q, now, space, spaces) {
+        function PersistedModelProvider(persistenceService, $q, now, space) {
             this.persistenceService = persistenceService;
             this.$q = $q;
-            this.spaces = [space].concat(spaces || []);
             this.now = now;
-        }
-
-        // Take the most recently modified model, for cases where
-        // multiple persistence spaces return models.
-        function takeMostRecent(modelA, modelB) {
-            return (!modelB || modelB.modified === undefined) ? modelA :
-                    (!modelA || modelA.modified === undefined) ? modelB :
-                            modelB.modified > modelA.modified ? modelB :
-                                    modelA;
+            this.defaultSpace = space;
         }
 
         PersistedModelProvider.prototype.getModels = function (ids) {
             var persistenceService = this.persistenceService,
                 $q = this.$q,
-                spaces = this.spaces,
-                space = this.space,
-                now = this.now;
+                now = this.now,
+                defaultSpace = this.defaultSpace,
+                parsedIds;
 
             // Load a single object model from any persistence spaces
-            function loadModel(id) {
-                return $q.all(spaces.map(function (space) {
-                    return persistenceService.readObject(space, id);
-                })).then(function (models) {
-                    return models.reduce(takeMostRecent);
-                });
+            function loadModel(parsedId) {
+                return persistenceService
+                        .readObject(parsedId.space, parsedId.key);
             }
 
             // Ensure that models read from persistence have some
@@ -88,24 +84,43 @@ define(
             }
 
             // Package the result as id->model
-            function packageResult(models) {
+            function packageResult(parsedIds, models) {
                 var result = {};
-                ids.forEach(function (id, index) {
+                parsedIds.forEach(function (parsedId, index) {
+                    var id = parsedId.id;
                     if (models[index]) {
-                        result[id] = addPersistedTimestamp(models[index]);
+                        result[id] = models[index];
                     }
                 });
                 return result;
             }
 
-            // Filter out "namespaced" identifiers; these are
-            // not expected to be found in database. See WTD-659.
-            ids = ids.filter(function (id) {
-                return id.indexOf(":") === -1;
+            function loadModels(parsedIds) {
+                return $q.all(parsedIds.map(loadModel))
+                    .then(function (models) {
+                        return packageResult(
+                            parsedIds,
+                            models.map(addPersistedTimestamp)
+                        );
+                    });
+            }
+
+            function restrictToSpaces(spaces) {
+                return parsedIds.filter(function (parsedId) {
+                    return spaces.indexOf(parsedId.space) !== -1;
+                });
+            }
+
+            parsedIds = ids.map(function (id) {
+                var parts = id.split(":");
+                return (parts.length > 1) ?
+                        { id: id, space: parts[0], key: parts.slice(1).join(":") } :
+                        { id: id, space: defaultSpace, key: id };
             });
 
-            // Give a promise for all persistence lookups...
-            return $q.all(ids.map(loadModel)).then(packageResult);
+            return persistenceService.listSpaces()
+                .then(restrictToSpaces)
+                .then(loadModels);
         };
 
         return PersistedModelProvider;

platform/core/src/services/Instantiate.js

@@ -22,8 +22,8 @@
 /*global define,Promise*/
 
 define(
-    ['../objects/DomainObjectImpl', 'uuid'],
-    function (DomainObjectImpl, uuid) {
+    ['../objects/DomainObjectImpl'],
+    function (DomainObjectImpl) {
         'use strict';
 
         /**
@@ -39,12 +39,15 @@ define(
          *
          * @constructor
          * @memberof platform/core
-         * @param $injector Angular's `$injector`
+         * @param {CapabilityService} capabilityService the service which will
+         *        provide instantiated domain objects with their capabilities
+         * @param {IdentifierService} identifierService service to generate
+         *        new identifiers
          */
-        function Instantiate(capabilityService) {
+        function Instantiate(capabilityService, identifierService) {
             return function (model, id) {
                 var capabilities = capabilityService.getCapabilities(model);
-                id = id || uuid();
+                id = id || identifierService.generate();
                 return new DomainObjectImpl(id, model, capabilities);
             };
         }

platform/core/test/capabilities/InstantiationCapabilitySpec.js

@@ -28,19 +28,40 @@ define(
 
         describe("The 'instantiation' capability", function () {
             var mockInjector,
+                mockIdentifierService,
                 mockInstantiate,
+                mockIdentifier,
+                mockDomainObject,
                 instantiation;
 
             beforeEach(function () {
                 mockInjector = jasmine.createSpyObj("$injector", ["get"]);
                 mockInstantiate = jasmine.createSpy("instantiate");
+                mockIdentifierService = jasmine.createSpyObj(
+                    'identifierService',
+                    [ 'parse', 'generate' ]
+                );
+                mockIdentifier = jasmine.createSpyObj(
+                    'identifier',
+                    [ 'getSpace', 'getKey', 'getDefinedSpace' ]
+                );
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    [ 'getId', 'getCapability', 'getModel' ]
+                );
 
                 mockInjector.get.andCallFake(function (key) {
                     return key === 'instantiate' ?
                             mockInstantiate : undefined;
                 });
+                mockIdentifierService.parse.andReturn(mockIdentifier);
+                mockIdentifierService.generate.andReturn("some-id");
 
-                instantiation = new InstantiationCapability(mockInjector);
+                instantiation = new InstantiationCapability(
+                    mockInjector,
+                    mockIdentifierService,
+                    mockDomainObject
+                );
             });
 
 
@@ -59,7 +80,8 @@ define(
                 mockInstantiate.andReturn(mockDomainObject);
                 expect(instantiation.instantiate(testModel))
                     .toBe(mockDomainObject);
-                expect(mockInstantiate).toHaveBeenCalledWith(testModel);
+                expect(mockInstantiate)
+                    .toHaveBeenCalledWith(testModel, jasmine.any(String));
             });
 
         });

platform/core/test/capabilities/PersistenceCapabilitySpec.js

@@ -31,7 +31,9 @@ define(
 
         describe("The persistence capability", function () {
             var mockPersistenceService,
+                mockIdentifierService,
                 mockDomainObject,
+                mockIdentifier,
                 id = "object id",
                 model = { someKey: "some value"},
                 SPACE = "some space",
@@ -50,6 +52,14 @@ define(
                     "persistenceService",
                     [ "updateObject", "readObject", "createObject", "deleteObject" ]
                 );
+                mockIdentifierService = jasmine.createSpyObj(
+                    'identifierService',
+                    [ 'parse', 'generate' ]
+                );
+                mockIdentifier = jasmine.createSpyObj(
+                    'identifier',
+                    [ 'getSpace', 'getKey', 'getDefinedSpace' ]
+                );
                 mockDomainObject = {
                     getId: function () { return id; },
                     getModel: function () { return model; },
@@ -61,9 +71,11 @@ define(
                         model = mutator(model) || model;
                     }
                 });
+                mockIdentifierService.parse.andReturn(mockIdentifier);
+                mockIdentifier.getSpace.andReturn(SPACE);
                 persistence = new PersistenceCapability(
                     mockPersistenceService,
-                    SPACE,
+                    mockIdentifierService,
                     mockDomainObject
                 );
             });

platform/core/test/identifiers/IdentifierProviderSpec.js

@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../../src/identifiers/IdentifierProvider"],
+    function (IdentifierProvider) {
+        'use strict';
+
+        describe("IdentifierProvider", function () {
+            var defaultSpace,
+                provider;
+
+            beforeEach(function () {
+                defaultSpace = "some-default-space";
+                provider = new IdentifierProvider(defaultSpace);
+            });
+
+            it("generates unique identifiers", function () {
+                expect(provider.generate())
+                    .not.toEqual(provider.generate());
+            });
+
+            it("allows spaces to be specified for generated identifiers", function () {
+                var specificSpace = "some-specific-space",
+                    id = provider.generate(specificSpace);
+                expect(id).toEqual(jasmine.any(String));
+                expect(provider.parse(id).getDefinedSpace())
+                    .toEqual(specificSpace);
+            });
+
+            it("parses identifiers using the default space", function () {
+                expect(provider.parse("some-unprefixed-id").getSpace())
+                    .toEqual(defaultSpace);
+            });
+
+        });
+    }
+);

platform/core/test/identifiers/IdentifierSpec.js

@@ -0,0 +1,82 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../../src/identifiers/Identifier"],
+    function (Identifier) {
+        'use strict';
+
+        describe("A parsed domain object identifier", function () {
+            var id,
+                defaultSpace,
+                identifier;
+
+            beforeEach(function () {
+                defaultSpace = "someDefaultSpace";
+            });
+
+            describe("when space is encoded", function () {
+                var idSpace, idKey, spacedId;
+
+                beforeEach(function () {
+                    idSpace = "a-specific-space";
+                    idKey = "a-specific-key";
+                    id = idSpace + ":" + idKey;
+                    identifier = new Identifier(id, defaultSpace);
+                });
+
+                it("provides the encoded space", function () {
+                    expect(identifier.getSpace()).toEqual(idSpace);
+                });
+
+                it("provides the key within that space", function () {
+                    expect(identifier.getKey()).toEqual(idKey);
+                });
+
+                it("provides the defined space", function () {
+                    expect(identifier.getDefinedSpace()).toEqual(idSpace);
+                });
+            });
+
+            describe("when space is not encoded", function () {
+                beforeEach(function () {
+                    id = "a-generic-id";
+                    identifier = new Identifier(id, defaultSpace);
+                });
+
+                it("provides the default space", function () {
+                    expect(identifier.getSpace()).toEqual(defaultSpace);
+                });
+
+                it("provides the id as the key", function () {
+                    expect(identifier.getKey()).toEqual(id);
+                });
+
+                it("provides no defined space", function () {
+                    expect(identifier.getDefinedSpace()).toEqual(undefined);
+                });
+            });
+
+        });
+    }
+);

platform/core/test/models/PersistedModelProviderSpec.js

@@ -33,13 +33,12 @@ define(
             var mockQ,
                 mockPersistenceService,
                 SPACE = "space0",
-                spaces = [ "space1" ],
                 modTimes,
                 mockNow,
                 provider;
 
             function mockPromise(value) {
-                return {
+                return (value || {}).then ? value : {
                     then: function (callback) {
                         return mockPromise(callback(value));
                     },
@@ -78,13 +77,14 @@ define(
                             persisted: 0
                         });
                     });
+                mockPersistenceService.listSpaces
+                    .andReturn(mockPromise([SPACE]));
 
                 provider = new PersistedModelProvider(
                     mockPersistenceService,
                     mockQ,
                     mockNow,
-                    SPACE,
-                    spaces
+                    SPACE
                 );
             });
 
@@ -103,25 +103,6 @@ define(
             });
 
 
-            it("reads object models from multiple spaces", function () {
-                var models;
-
-                modTimes.space1 = {
-                    'x': 12321
-                };
-
-                provider.getModels(["a", "x", "zz"]).then(function (m) {
-                    models = m;
-                });
-
-                expect(models).toEqual({
-                    a: { space: SPACE, id: "a", persisted: 0 },
-                    x: { space: 'space1', id: "x", modified: 12321, persisted: 0 },
-                    zz: { space: SPACE, id: "zz", persisted: 0 }
-                });
-            });
-
-
             it("ensures that persisted timestamps are present", function () {
                 var mockCallback = jasmine.createSpy("callback"),
                     testModels = {

platform/core/test/objects/DomainObjectProviderSpec.js

@@ -90,6 +90,15 @@ define(
                 expect(result.a.getModel()).toEqual(model);
             });
 
+            it("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/core/test/services/InstantiateSpec.js

@@ -29,18 +29,27 @@ define(
         describe("The 'instantiate' service", function () {
 
             var mockCapabilityService,
+                mockIdentifierService,
                 mockCapabilityConstructor,
                 mockCapabilityInstance,
                 mockCapabilities,
+                mockIdentifier,
+                idCounter,
                 testModel,
                 instantiate,
                 domainObject;
 
             beforeEach(function () {
+                idCounter = 0;
+
                 mockCapabilityService = jasmine.createSpyObj(
                     'capabilityService',
                     ['getCapabilities']
                 );
+                mockIdentifierService = jasmine.createSpyObj(
+                    'identifierService',
+                    [ 'parse', 'generate' ]
+                );
                 mockCapabilityConstructor = jasmine.createSpy('capability');
                 mockCapabilityInstance = {};
                 mockCapabilityService.getCapabilities.andReturn({
@@ -48,9 +57,17 @@ define(
                 });
                 mockCapabilityConstructor.andReturn(mockCapabilityInstance);
 
+                mockIdentifierService.generate.andCallFake(function (space) {
+                    return (space ? (space + ":") : "") +
+                            "some-id-" + (idCounter += 1);
+                });
+
                 testModel = { someKey: "some value" };
 
-                instantiate = new Instantiate(mockCapabilityService);
+                instantiate = new Instantiate(
+                    mockCapabilityService,
+                    mockIdentifierService
+                );
                 domainObject = instantiate(testModel);
             });
 

platform/core/test/suite.json

@@ -15,6 +15,9 @@
     "capabilities/PersistenceCapability",
     "capabilities/RelationshipCapability",
 
+    "identifiers/Identifier",
+    "identifiers/IdentifierProvider",
+
     "models/ModelAggregator",
     "models/MissingModelDecorator",
     "models/PersistedModelProvider",

platform/entanglement/bundle.json

@@ -11,7 +11,7 @@
                 "glyph": "f",
                 "category": "contextual",
                 "implementation": "actions/MoveAction.js",
-                "depends": ["locationService", "moveService"]
+                "depends": ["policyService", "locationService", "moveService"]
             },
             {
                 "key": "copy",
@@ -20,7 +20,7 @@
                 "glyph": "+",
                 "category": "contextual",
                 "implementation": "actions/CopyAction.js",
-                "depends": ["$log", "locationService", "copyService",
+                "depends": ["$log", "policyService", "locationService", "copyService",
                     "dialogService", "notificationService"]
             },
             {
@@ -30,7 +30,7 @@
                 "glyph": "\u00E8",
                 "category": "contextual",
                 "implementation": "actions/LinkAction.js",
-                "depends": ["locationService", "linkService"]
+                "depends": ["policyService", "locationService", "linkService"]
             },
             {
                 "key": "follow",
@@ -54,7 +54,11 @@
                 "depends": ["contextualize", "$q", "$log"]
             }
         ],
-        "controllers": [
+        "policies": [
+            {
+                "category": "action",
+                "implementation": "policies/CrossSpacePolicy.js"
+            }
         ],
         "capabilities": [
             {

platform/entanglement/src/actions/AbstractComposeAction.js

@@ -62,6 +62,8 @@ define(
          * @constructor
          * @private
          * @memberof platform/entanglement
+         * @param {PolicyService} policyService the policy service to use to
+         *        verify that variants of this action are allowed
          * @param {platform/entanglement.LocationService} locationService a
          *        service to request destinations from the user
          * @param {platform/entanglement.AbstractComposeService} composeService
@@ -71,7 +73,14 @@ define(
          * @param {string} [suffix] a string to display in the dialog title;
          *        default is "to a new location"
          */
-        function AbstractComposeAction(locationService, composeService, context, verb, suffix) {
+        function AbstractComposeAction(
+            policyService,
+            locationService,
+            composeService,
+            context,
+            verb,
+            suffix
+        ) {
             if (context.selectedObject) {
                 this.newParent = context.domainObject;
                 this.object = context.selectedObject;
@@ -83,16 +92,27 @@ define(
                 .getCapability('context')
                 .getParent();
 
+            this.context = context;
+            this.policyService = policyService;
             this.locationService = locationService;
             this.composeService = composeService;
             this.verb = verb || "Compose";
             this.suffix = suffix || "to a new location";
         }
 
+        AbstractComposeAction.prototype.cloneContext = function () {
+            var clone = {}, original = this.context;
+            Object.keys(original).forEach(function (k) {
+                clone[k] = original[k];
+            });
+            return clone;
+        };
+
         AbstractComposeAction.prototype.perform = function () {
             var dialogTitle,
                 label,
                 validateLocation,
+                self = this,
                 locationService = this.locationService,
                 composeService = this.composeService,
                 currentParent = this.currentParent,
@@ -109,7 +129,11 @@ define(
             label = this.verb + " To";
 
             validateLocation = function (newParent) {
-                return composeService.validate(object, newParent);
+                var newContext = self.cloneContext();
+                newContext.selectedObject =  object;
+                newContext.domainObject = newParent;
+                return composeService.validate(object, newParent) &&
+                    self.policyService.allow("action", self, newContext);
             };
 
             return locationService.getLocationFromUser(

platform/entanglement/src/actions/CopyAction.js

@@ -34,18 +34,34 @@ define(
          * @constructor
          * @memberof platform/entanglement
          */
-        function CopyAction($log, locationService, copyService, dialogService,
-                            notificationService, context) {
+        function CopyAction(
+            $log,
+            policyService,
+            locationService,
+            copyService,
+            dialogService,
+            notificationService,
+            context
+        ) {
             this.dialog = undefined;
             this.notification = undefined;
             this.dialogService = dialogService;
             this.notificationService = notificationService;
             this.$log = $log;
             //Extend the behaviour of the Abstract Compose Action
-            AbstractComposeAction.call(this, locationService, copyService,
-                context, "Duplicate", "to a location");
+            AbstractComposeAction.call(
+                this,
+                policyService,
+                locationService,
+                copyService,
+                context,
+                "Duplicate",
+                "to a location"
+            );
         }
 
+        CopyAction.prototype = Object.create(AbstractComposeAction.prototype);
+
         /**
          * Updates user about progress of copy. Should not be invoked by
          * client code under any circumstances.

platform/entanglement/src/actions/LinkAction.js

@@ -34,10 +34,10 @@ define(
          * @constructor
          * @memberof platform/entanglement
          */
-        function LinkAction(locationService, linkService, context) {
+        function LinkAction(policyService, locationService, linkService, context) {
             AbstractComposeAction.apply(
                 this,
-                [locationService, linkService, context, "Link"]
+                [policyService, locationService, linkService, context, "Link"]
             );
         }
 

platform/entanglement/src/actions/MoveAction.js

@@ -34,12 +34,11 @@ define(
          * @constructor
          * @memberof platform/entanglement
          */
-        function MoveAction(locationService, moveService, context) {
+        function MoveAction(policyService, locationService, moveService, context) {
             AbstractComposeAction.apply(
                 this,
-                [locationService, moveService, context, "Move"]
+                [policyService, locationService, moveService, context, "Move"]
             );
-
         }
 
         MoveAction.prototype = Object.create(AbstractComposeAction.prototype);

platform/entanglement/src/policies/CrossSpacePolicy.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.
+ *****************************************************************************/
+
+/*global define */
+define(
+    [],
+    function () {
+        'use strict';
+
+        var DISALLOWED_ACTIONS = [
+            "move",
+            "copy",
+            "link",
+            "compose"
+        ];
+
+        /**
+         * This policy prevents performing move/copy/link actions across
+         * different persistence spaces (e.g. linking to an object in
+         * a private space from an object in a public space.)
+         * @memberof {platform/entanglement}
+         * @constructor
+         * @implements {Policy}
+         */
+        function CrossSpacePolicy() {
+        }
+
+        function lookupSpace(domainObject) {
+            var persistence = domainObject &&
+                domainObject.getCapability("persistence");
+            return persistence && persistence.getSpace();
+        }
+
+        function isCrossSpace(context) {
+            var domainObject = context.domainObject,
+                selectedObject = context.selectedObject,
+                spaces = [ domainObject, selectedObject ].map(lookupSpace);
+            return selectedObject !== undefined &&
+                domainObject !== undefined &&
+                lookupSpace(domainObject) !== lookupSpace(selectedObject);
+        }
+
+        CrossSpacePolicy.prototype.allow = function (action, context) {
+            var key = action.getMetadata().key;
+
+            if (DISALLOWED_ACTIONS.indexOf(key) !== -1) {
+                return !isCrossSpace(context);
+            }
+
+            return true;
+        };
+
+        return CrossSpacePolicy;
+
+    }
+);

platform/entanglement/test/actions/AbstractComposeActionSpec.js

@@ -34,6 +34,7 @@ define(
         describe("Move/copy/link Actions", function () {
 
             var action,
+                policyService,
                 locationService,
                 locationServicePromise,
                 composeService,
@@ -44,6 +45,11 @@ define(
                 newParent;
 
             beforeEach(function () {
+                policyService = jasmine.createSpyObj(
+                    'policyService',
+                    [ 'allow' ]
+                );
+
                 selectedObjectContextCapability = jasmine.createSpyObj(
                     'selectedObjectContextCapability',
                     [
@@ -87,6 +93,8 @@ define(
                     ]
                 );
 
+                policyService.allow.andReturn(true);
+
                 locationService
                     .getLocationFromUser
                     .andReturn(locationServicePromise);
@@ -124,6 +132,7 @@ define(
                     };
 
                     action = new AbstractComposeAction(
+                        policyService,
                         locationService,
                         composeService,
                         context,
@@ -164,6 +173,30 @@ define(
                         expect(composeService.perform)
                             .toHaveBeenCalledWith(selectedObject, newParent);
                     });
+
+                    describe("provides a validator which", function () {
+                        var validator;
+
+                        beforeEach(function () {
+                            validator = locationService.getLocationFromUser
+                                .mostRecentCall.args[2];
+                            composeService.validate.andReturn(true);
+                            policyService.allow.andReturn(true);
+                        });
+
+                        it("is sensitive to policy", function () {
+                            expect(validator()).toBe(true);
+                            policyService.allow.andReturn(false);
+                            expect(validator()).toBe(false);
+                        });
+
+                        it("is sensitive to service-specific validation", function () {
+                            expect(validator()).toBe(true);
+                            composeService.validate.andReturn(false);
+                            expect(validator()).toBe(false);
+                        });
+
+                    });
                 });
             });
 
@@ -175,6 +208,7 @@ define(
                     };
 
                     action = new AbstractComposeAction(
+                        policyService,
                         locationService,
                         composeService,
                         context,

platform/entanglement/test/actions/CopyActionSpec.js

@@ -34,6 +34,7 @@ define(
         describe("Copy Action", function () {
 
             var copyAction,
+                policyService,
                 locationService,
                 locationServicePromise,
                 copyService,
@@ -50,6 +51,12 @@ define(
                 progress = {phase: "copying", totalObjects: 10, processed: 1};
 
             beforeEach(function () {
+                policyService = jasmine.createSpyObj(
+                    'policyService',
+                    [ 'allow' ]
+                );
+                policyService.allow.andReturn(true);
+
                 selectedObjectContextCapability = jasmine.createSpyObj(
                     'selectedObjectContextCapability',
                     [
@@ -142,6 +149,7 @@ define(
 
                     copyAction = new CopyAction(
                         mockLog,
+                        policyService,
                         locationService,
                         copyService,
                         dialogService,
@@ -201,6 +209,7 @@ define(
 
                     copyAction = new CopyAction(
                         mockLog,
+                        policyService,
                         locationService,
                         copyService,
                         dialogService,

platform/entanglement/test/actions/LinkActionSpec.js

@@ -34,6 +34,7 @@ define(
         describe("Link Action", function () {
 
             var linkAction,
+                policyService,
                 locationService,
                 locationServicePromise,
                 linkService,
@@ -44,6 +45,12 @@ define(
                 newParent;
 
             beforeEach(function () {
+                policyService = jasmine.createSpyObj(
+                    'policyService',
+                    [ 'allow' ]
+                );
+                policyService.allow.andReturn(true);
+
                 selectedObjectContextCapability = jasmine.createSpyObj(
                     'selectedObjectContextCapability',
                     [
@@ -102,6 +109,7 @@ define(
                     };
 
                     linkAction = new LinkAction(
+                        policyService,
                         locationService,
                         linkService,
                         context
@@ -152,6 +160,7 @@ define(
                     };
 
                     linkAction = new LinkAction(
+                        policyService,
                         locationService,
                         linkService,
                         context

platform/entanglement/test/actions/MoveActionSpec.js

@@ -34,6 +34,7 @@ define(
         describe("Move Action", function () {
 
             var moveAction,
+                policyService,
                 locationService,
                 locationServicePromise,
                 moveService,
@@ -44,6 +45,12 @@ define(
                 newParent;
 
             beforeEach(function () {
+                policyService = jasmine.createSpyObj(
+                    'policyService',
+                    [ 'allow' ]
+                );
+                policyService.allow.andReturn(true);
+
                 selectedObjectContextCapability = jasmine.createSpyObj(
                     'selectedObjectContextCapability',
                     [
@@ -102,6 +109,7 @@ define(
                     };
 
                     moveAction = new MoveAction(
+                        policyService,
                         locationService,
                         moveService,
                         context
@@ -152,6 +160,7 @@ define(
                     };
 
                     moveAction = new MoveAction(
+                        policyService,
                         locationService,
                         moveService,
                         context

platform/entanglement/test/policies/CrossSpacePolicySpec.js

@@ -0,0 +1,120 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*global define,describe,beforeEach,it,jasmine,expect,spyOn */
+define(
+    [
+        '../../src/policies/CrossSpacePolicy',
+        '../DomainObjectFactory'
+    ],
+    function (CrossSpacePolicy, domainObjectFactory) {
+        "use strict";
+
+        describe("CrossSpacePolicy", function () {
+            var mockAction,
+                testActionMetadata,
+                sameSpaceContext,
+                crossSpaceContext,
+                policy;
+
+            function makeObject(space) {
+                var mockPersistence = jasmine.createSpyObj(
+                    'persistence',
+                    ['getSpace']
+                );
+                mockPersistence.getSpace.andReturn(space);
+                return domainObjectFactory({
+                    id: space + ":foo",
+                    model: {},
+                    capabilities: { persistence: mockPersistence }
+                });
+            }
+
+            beforeEach(function () {
+                testActionMetadata = {};
+
+                // Policy should only call passive methods, so
+                // only define those in mocks.
+                mockAction = jasmine.createSpyObj(
+                    'action',
+                    [ 'getMetadata' ]
+                );
+                mockAction.getMetadata.andReturn(testActionMetadata);
+
+                sameSpaceContext = {
+                    domainObject: makeObject('a'),
+                    selectedObject: makeObject('a')
+                };
+                crossSpaceContext = {
+                    domainObject: makeObject('a'),
+                    selectedObject: makeObject('b')
+                };
+
+                policy = new CrossSpacePolicy();
+            });
+
+            ['move', 'copy', 'link', 'compose'].forEach(function (key) {
+                describe("for " + key + " actions", function () {
+                    beforeEach(function () {
+                        testActionMetadata.key = key;
+                    });
+
+                    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("allows actions with no selectedObject", function () {
+                        expect(policy.allow(mockAction, {
+                            domainObject: makeObject('a')
+                        })).toBe(true);
+                    });
+                });
+            });
+
+            describe("for other actions", function () {
+                beforeEach(function () {
+                    testActionMetadata.key = "some-other-action";
+                });
+
+                it("allows same-space and cross-space changes", function () {
+                    expect(policy.allow(mockAction, crossSpaceContext))
+                        .toBe(true);
+                    expect(policy.allow(mockAction, sameSpaceContext))
+                        .toBe(true);
+                });
+
+                it("allows actions with no selectedObject", function () {
+                    expect(policy.allow(mockAction, {
+                        domainObject: makeObject('a')
+                    })).toBe(true);
+                });
+            });
+
+        });
+    }
+);

platform/entanglement/test/suite.json

@@ -4,6 +4,7 @@
     "actions/GoToOriginalAction",
     "actions/LinkAction",
     "actions/MoveAction",
+    "policies/CrossSpacePolicy",
     "services/CopyService",
     "services/LinkService",
     "services/MoveService",

platform/execution/src/WorkerService.js

@@ -38,7 +38,8 @@ define(
          * @constructor
          */
         function WorkerService($window, workers) {
-            var workerUrls = {};
+            var workerUrls = {},
+                sharedWorkers = {};
 
             function addWorker(worker) {
                 var key = worker.key;
@@ -48,12 +49,15 @@ define(
                         worker.bundle.sources,
                         worker.scriptUrl
                     ].join("/");
+                    sharedWorkers[key] = worker.shared;
                 }
             }
 
             (workers || []).forEach(addWorker);
             this.workerUrls = workerUrls;
+            this.sharedWorkers = sharedWorkers;
             this.Worker = $window.Worker;
+            this.SharedWorker = $window.SharedWorker;
         }
 
         /**
@@ -61,12 +65,17 @@ define(
          * that has been registered under the `workers` category
          * of extension.
          *
+         * This will return either a Worker or a SharedWorker,
+         * depending on whether a `shared` flag has been specified
+         * on the the extension definition for the referenced worker.
+         *
          * @param {string} key symbolic identifier for the worker
-         * @returns {Worker} the running Worker
+         * @returns {Worker | SharedWorker} the running Worker
          */
         WorkerService.prototype.run = function (key) {
             var scriptUrl = this.workerUrls[key],
-                Worker = this.Worker;
+                Worker = this.sharedWorkers[key] ?
+                        this.SharedWorker : this.Worker;
             return scriptUrl && Worker && new Worker(scriptUrl);
         };
 

platform/execution/test/WorkerServiceSpec.js

@@ -30,10 +30,14 @@ define(
             var mockWindow,
                 testWorkers,
                 mockWorker,
+                mockSharedWorker,
                 service;
 
             beforeEach(function () {
-                mockWindow = jasmine.createSpyObj('$window', ['Worker']);
+                mockWindow = jasmine.createSpyObj(
+                    '$window',
+                    ['Worker', 'SharedWorker']
+                );
                 testWorkers = [
                     {
                         key: 'abc',
@@ -49,11 +53,19 @@ define(
                         key: 'xyz',
                         scriptUrl: 'bad.js',
                         bundle: { path: 'bad', sources: 'bad' }
+                    },
+                    {
+                        key: 'a-shared-worker',
+                        shared: true,
+                        scriptUrl: 'c.js',
+                        bundle: { path: 'a', sources: 'b' }
                     }
                 ];
                 mockWorker = {};
+                mockSharedWorker = {};
 
                 mockWindow.Worker.andReturn(mockWorker);
+                mockWindow.SharedWorker.andReturn(mockSharedWorker);
 
                 service = new WorkerService(mockWindow, testWorkers);
             });
@@ -68,6 +80,12 @@ define(
                 expect(mockWindow.Worker).toHaveBeenCalledWith('x/y/z.js');
             });
 
+            it("allows workers to be shared", function () {
+                expect(service.run('a-shared-worker')).toBe(mockSharedWorker);
+                expect(mockWindow.SharedWorker)
+                    .toHaveBeenCalledWith('a/b/c.js');
+            });
+
             it("returns undefined for unknown workers", function () {
                 expect(service.run('def')).toBeUndefined();
             });

platform/features/clock/res/templates/timer.html

@@ -20,15 +20,15 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="l-time-display l-digital l-timer s-timer" ng-controller="TimerController as timer">
-	<div class="l-elem-wrapper">
+	<div class="l-elem-wrapper l-flex-row">
 		<a
 			ng-click="timer.clickButton()"
 			title="{{timer.buttonText()}}"
-			class="l-elem l-btn s-btn s-icon-btn s-very-subtle vsm control"
+			class="flex-elem s-icon-btn control"
 			>
-			<span class="ui-symbol icon">{{timer.buttonGlyph()}}</span>
+			{{timer.buttonGlyph()}}
 		</a>
-	    <span class="l-elem l-value">
+	    <span class="flex-elem l-value">
 		    <span class="ui-symbol direction">{{timer.sign()}}</span>
 	        <span
 		        class="value"
@@ -36,7 +36,6 @@
 		        >{{timer.text() || "--:--:--"}}
 		        </span>
 	    </span>
-	    <span ng-controller="RefreshingController">
-	    </span>
+	    <span ng-controller="RefreshingController"></span>
 	</div>
 </div>

platform/features/conductor/src/ConductorRepresenter.js

@@ -30,7 +30,7 @@ define(
                 "<mct-include key=\"'time-conductor'\" ",
                 "ng-model='ngModel' ",
                 "parameters='parameters' ",
-                "class='l-time-controller'>",
+                "class='holder flex-elem flex-fixed l-time-controller'>",
                 "</mct-include>"
             ].join(''),
             THROTTLE_MS = 200,
@@ -159,8 +159,8 @@ define(
                 this.wireScope();
                 this.conductorElement =
                     this.$compile(TEMPLATE)(this.conductorScope());
-                this.element.after(this.conductorElement[0]);
-                this.element.addClass('l-controls-visible l-time-controller-visible');
+                this.element.parent().parent().after(this.conductorElement[0]);
+                this.element.parent().parent().addClass('l-controls-visible l-time-controller-visible');
                 GLOBAL_SHOWING = true;
             }
         };

platform/features/layout/res/templates/layout.html

@@ -31,7 +31,6 @@
                                 mct-object="childObject">
             </mct-representation>
         </div>
-
         <!-- Drag handles -->
         <span ng-show="domainObject.hasCapability('editor')">
 

platform/features/plot/res/templates/plot.html

@@ -20,7 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="PlotController as plot"
-      ng-mouseleave="representation.showControls = false">
+      ng-mouseleave="representation.showControls = false"
+      class="abs holder holder-plot">
 
     <div class="gl-plot"
          ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
@@ -62,7 +63,7 @@
                  ng-show="representation.showControls"
                  ng-if="axes[1].options.length > 0">
                 <div class='form-control shell select'>
-                    <select class="form-control input shell select"
+                    <select class="form-control input shell"
                             ng-model="axes[1].active"
                             ng-options="option.name for option in axes[1].options">
                     </select>
@@ -160,12 +161,11 @@
                 {{axes[0].active.name}}
             </div>
 
-
             <div class="gl-plot-x-options gl-plot-local-controls"
                  ng-show="representation.showControls"
                  ng-if="axes[0].options.length > 0">
                 <div class='form-control shell select'>
-                    <select class="form-control input shell select"
+                    <select class="form-control input shell"
                             ng-model="axes[0].active"
                             ng-options="option.name for option in axes[0].options">
                     </select>

platform/features/scrolling/res/templates/scrolling.html

@@ -23,7 +23,7 @@
 	<div class="w2"
 	     ng-controller="ScrollingListController">
 		<!-- To add filtering, add class 'filterable' to <table> and uncomment 2nd <tr> in <thead> -->
-		<table class="tabular fixed-header">
+		<table class="tabular">
 			<thead>
 			<tr>
 				<th ng-repeat="header in headers">

platform/features/timeline/bundle.json

@@ -57,7 +57,7 @@
                 "properties": [
                     {
                         "name": "Start date/time",
-                        "control": "datetime",
+                        "control": "timeline-datetime",
                         "required": true,
                         "property": [ "start" ],
                         "options": [ "SET" ]
@@ -83,7 +83,7 @@
                 "properties": [
                     {
                         "name": "Start date/time",
-                        "control": "datetime",
+                        "control": "timeline-datetime",
                         "required": true,
                         "property": [ "start" ],
                         "options": [ "SET" ]
@@ -217,6 +217,19 @@
                 }
             }
         ],
+        "stylesheets": [
+            {
+                "stylesheetUrl": "css/timeline.css"
+            },
+            {
+                "stylesheetUrl": "css/timeline-espresso.css",
+                "theme": "espresso"
+            },
+            {
+                "stylesheetUrl": "css/timeline-snow.css",
+                "theme": "snow"
+            }
+        ],
         "representations": [
             {
                 "key": "gantt",
@@ -258,7 +271,7 @@
         ],
         "controls": [
             {
-                "key": "datetime",
+                "key": "timeline-datetime",
                 "templateUrl": "templates/controls/datetime.html"
             },
             {

platform/features/timeline/res/config.rb

@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+# require "compass-growl"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# :expanded, :compressed, :nested
+output_style = :nested
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass

platform/features/timeline/res/css/timeline-espresso.css

@@ -0,0 +1,291 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** FEATURES */
+/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** RATIOS */
+/************************** LAYOUT */
+/************************** CONTROLS */
+/************************** PATHS */
+/************************** TIMINGS */
+/************************** LIMITS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*********************************************** CONTROLS, FORM ELEMENTS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/* line 26, ../sass/_timeline-thematic.scss */
+.l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-legend .l-legend-items {
+  color: #999; }
+
+/* line 36, ../sass/_timeline-thematic.scss */
+.s-timeline-gantt .bar {
+  color: #fff;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3NzdiYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU1NTVhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7777bb), color-stop(100%, #5555aa));
+  background-image: -moz-linear-gradient(#7777bb, #5555aa);
+  background-image: -webkit-linear-gradient(#7777bb, #5555aa);
+  background-image: linear-gradient(#7777bb, #5555aa);
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px;
+  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px; }
+  /* line 41, ../sass/_timeline-thematic.scss */
+  .s-timeline-gantt .bar.expanded {
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-bottomleft: 0;
+    -webkit-border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0;
+    -moz-border-radius-bottomright: 0;
+    -webkit-border-bottom-right-radius: 0;
+    border-bottom-right-radius: 0; }
+  /* line 45, ../sass/_timeline-thematic.scss */
+  .s-timeline-gantt .bar.leaf {
+    -moz-border-radius-topleft: 0;
+    -webkit-border-top-left-radius: 0;
+    border-top-left-radius: 0;
+    -moz-border-radius-topright: 0;
+    -webkit-border-top-right-radius: 0;
+    border-top-right-radius: 0;
+    -moz-border-radius-bottomleft: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px; }
+  /* line 49, ../sass/_timeline-thematic.scss */
+  .s-timeline-gantt .bar .s-toggle {
+    color: #0099cc; }
+
+/* line 57, ../sass/_timeline-thematic.scss */
+.s-timeline-tabular .l-header .l-cols .l-col {
+  border-left: 1px solid #666666; }
+/* line 65, ../sass/_timeline-thematic.scss */
+.s-timeline-tabular .l-pane-l .l-cols .s-label .ui-symbol.icon {
+  color: #8594ff; }
+
+/* line 74, ../sass/_timeline-thematic.scss */
+.edit-mode .s-timeline-gantt .bar:hover {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk5OTljYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc3NzdiYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9999cc), color-stop(100%, #7777bb));
+  background-image: -moz-linear-gradient(#9999cc, #7777bb);
+  background-image: -webkit-linear-gradient(#9999cc, #7777bb);
+  background-image: linear-gradient(#9999cc, #7777bb); }
+
+/* line 81, ../sass/_timeline-thematic.scss */
+.s-timeline {
+  font-size: 0.75rem; }
+  /* line 83, ../sass/_timeline-thematic.scss */
+  .s-timeline .s-header {
+    background-color: #404040; }
+  /* line 86, ../sass/_timeline-thematic.scss */
+  .s-timeline .s-swimlane {
+    border-bottom: 1px solid #4d4d4d;
+    line-height: 20px; }
+    /* line 89, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-swimlane.exceeded {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
+      background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
+      background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
+      background-repeat: repeat;
+      background-size: 22px 22px; }
+    /* line 93, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-swimlane.selected {
+      background-color: #222;
+      color: #ccc; }
+      /* line 97, ../sass/_timeline-thematic.scss */
+      .s-timeline .s-swimlane.selected .s-timeline-gantt .bar {
+        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+        background-size: 100%;
+        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #cccccc));
+        background-image: -moz-linear-gradient(#e6e6e6, #cccccc);
+        background-image: -webkit-linear-gradient(#e6e6e6, #cccccc);
+        background-image: linear-gradient(#e6e6e6, #cccccc);
+        color: #333; }
+    /* line 103, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-swimlane.drop-into {
+      background-color: rgba(85, 85, 170, 0.7); }
+      /* line 105, ../sass/_timeline-thematic.scss */
+      .s-timeline .s-swimlane.drop-into .s-timeline-gantt {
+        opacity: 0.7; }
+    /* line 109, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-swimlane.drop-after {
+      background-color: rgba(0, 0, 0, 0.2);
+      border-bottom-color: #5555aa; }
+  /* line 115, ../sass/_timeline-thematic.scss */
+  .s-timeline .s-ticks {
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiM1OTU5NTkiLz48c3RvcCBvZmZzZXQ9IjFweCIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+    background-size: 100%;
+    background-image: -moz-linear-gradient(0deg, #595959 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+    background-image: -webkit-linear-gradient(0deg, #595959 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+    background-image: linear-gradient(90deg, #595959 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+    background-repeat: repeat-x; }
+  /* line 118, ../sass/_timeline-thematic.scss */
+  .s-timeline .s-hover-btns-holder {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -moz-linear-gradient(180deg, #404040, #404040 70%, rgba(64, 64, 64, 0) 100%);
+    background-image: -webkit-linear-gradient(180deg, #404040, #404040 70%, rgba(64, 64, 64, 0) 100%);
+    background-image: linear-gradient(-90deg, #404040, #404040 70%, rgba(64, 64, 64, 0) 100%); }
+    /* line 124, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-hover-btns-holder .s-btn {
+      height: 16px;
+      line-height: 16px; }
+      /* line 127, ../sass/_timeline-thematic.scss */
+      .s-timeline .s-hover-btns-holder .s-btn .icon {
+        font-size: 0.7rem !important; }
+  /* line 134, ../sass/_timeline-thematic.scss */
+  .s-timeline .l-timeline-resource-graph .l-graph {
+    background: rgba(0, 0, 0, 0.2); }
+  /* line 137, ../sass/_timeline-thematic.scss */
+  .s-timeline .l-timeline-resource-graph .l-title {
+    color: #999; }
+
+/* line 143, ../sass/_timeline-thematic.scss */
+.edit-mode .s-swimlane {
+  cursor: pointer; }
+  /* line 145, ../sass/_timeline-thematic.scss */
+  .edit-mode .s-swimlane .t-object-label {
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    cursor: move;
+    padding: 2px 5px; }
+    /* line 149, ../sass/_timeline-thematic.scss */
+    .edit-mode .s-swimlane .t-object-label:hover {
+      background: rgba(153, 153, 153, 0.3);
+      color: #cccccc; }

platform/features/timeline/res/css/timeline-snow.css

@@ -0,0 +1,291 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** FEATURES */
+/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** RATIOS */
+/************************** LAYOUT */
+/************************** CONTROLS */
+/************************** PATHS */
+/************************** TIMINGS */
+/************************** LIMITS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*********************************************** CONTROLS, FORM ELEMENTS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/* line 26, ../sass/_timeline-thematic.scss */
+.l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-legend .l-legend-items {
+  color: #666; }
+
+/* line 36, ../sass/_timeline-thematic.scss */
+.s-timeline-gantt .bar {
+  color: #fff;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3NzdiYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU1NTVhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7777bb), color-stop(100%, #5555aa));
+  background-image: -moz-linear-gradient(#7777bb, #5555aa);
+  background-image: -webkit-linear-gradient(#7777bb, #5555aa);
+  background-image: linear-gradient(#7777bb, #5555aa);
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px; }
+  /* line 41, ../sass/_timeline-thematic.scss */
+  .s-timeline-gantt .bar.expanded {
+    -moz-border-radius-topleft: 4px;
+    -webkit-border-top-left-radius: 4px;
+    border-top-left-radius: 4px;
+    -moz-border-radius-topright: 4px;
+    -webkit-border-top-right-radius: 4px;
+    border-top-right-radius: 4px;
+    -moz-border-radius-bottomleft: 0;
+    -webkit-border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0;
+    -moz-border-radius-bottomright: 0;
+    -webkit-border-bottom-right-radius: 0;
+    border-bottom-right-radius: 0; }
+  /* line 45, ../sass/_timeline-thematic.scss */
+  .s-timeline-gantt .bar.leaf {
+    -moz-border-radius-topleft: 0;
+    -webkit-border-top-left-radius: 0;
+    border-top-left-radius: 0;
+    -moz-border-radius-topright: 0;
+    -webkit-border-top-right-radius: 0;
+    border-top-right-radius: 0;
+    -moz-border-radius-bottomleft: 4px;
+    -webkit-border-bottom-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    -moz-border-radius-bottomright: 4px;
+    -webkit-border-bottom-right-radius: 4px;
+    border-bottom-right-radius: 4px; }
+  /* line 49, ../sass/_timeline-thematic.scss */
+  .s-timeline-gantt .bar .s-toggle {
+    color: #0099cc; }
+
+/* line 57, ../sass/_timeline-thematic.scss */
+.s-timeline-tabular .l-header .l-cols .l-col {
+  border-left: 1px solid #c9c9c9; }
+/* line 65, ../sass/_timeline-thematic.scss */
+.s-timeline-tabular .l-pane-l .l-cols .s-label .ui-symbol.icon {
+  color: #8594ff; }
+
+/* line 74, ../sass/_timeline-thematic.scss */
+.edit-mode .s-timeline-gantt .bar:hover {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk5OTljYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc3NzdiYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9999cc), color-stop(100%, #7777bb));
+  background-image: -moz-linear-gradient(#9999cc, #7777bb);
+  background-image: -webkit-linear-gradient(#9999cc, #7777bb);
+  background-image: linear-gradient(#9999cc, #7777bb); }
+
+/* line 81, ../sass/_timeline-thematic.scss */
+.s-timeline {
+  font-size: 0.75rem; }
+  /* line 83, ../sass/_timeline-thematic.scss */
+  .s-timeline .s-header {
+    background-color: #efefef; }
+  /* line 86, ../sass/_timeline-thematic.scss */
+  .s-timeline .s-swimlane {
+    border-bottom: 1px solid #e3e3e3;
+    line-height: 20px; }
+    /* line 89, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-swimlane.exceeded {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
+      background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
+      background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
+      background-repeat: repeat;
+      background-size: 22px 22px; }
+    /* line 93, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-swimlane.selected {
+      background-color: rgba(85, 85, 170, 0.25);
+      color: #4d4d4d; }
+      /* line 97, ../sass/_timeline-thematic.scss */
+      .s-timeline .s-swimlane.selected .s-timeline-gantt .bar {
+        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3NzdiYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU1NTVhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+        background-size: 100%;
+        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7777bb), color-stop(100%, #5555aa));
+        background-image: -moz-linear-gradient(#7777bb, #5555aa);
+        background-image: -webkit-linear-gradient(#7777bb, #5555aa);
+        background-image: linear-gradient(#7777bb, #5555aa);
+        color: #fff; }
+    /* line 103, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-swimlane.drop-into {
+      background-color: rgba(85, 85, 170, 0.7); }
+      /* line 105, ../sass/_timeline-thematic.scss */
+      .s-timeline .s-swimlane.drop-into .s-timeline-gantt {
+        opacity: 0.7; }
+    /* line 109, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-swimlane.drop-after {
+      background-color: rgba(0, 0, 0, 0.2);
+      border-bottom-color: #5555aa; }
+  /* line 115, ../sass/_timeline-thematic.scss */
+  .s-timeline .s-ticks {
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiLz48c3RvcCBvZmZzZXQ9IjFweCIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+    background-size: 100%;
+    background-image: -moz-linear-gradient(0deg, #d6d6d6 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+    background-image: -webkit-linear-gradient(0deg, #d6d6d6 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+    background-image: linear-gradient(90deg, #d6d6d6 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+    background-repeat: repeat-x; }
+  /* line 118, ../sass/_timeline-thematic.scss */
+  .s-timeline .s-hover-btns-holder {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmZWZlZiIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjZWZlZmVmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWZlZmVmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -moz-linear-gradient(180deg, #efefef, #efefef 70%, rgba(239, 239, 239, 0) 100%);
+    background-image: -webkit-linear-gradient(180deg, #efefef, #efefef 70%, rgba(239, 239, 239, 0) 100%);
+    background-image: linear-gradient(-90deg, #efefef, #efefef 70%, rgba(239, 239, 239, 0) 100%); }
+    /* line 124, ../sass/_timeline-thematic.scss */
+    .s-timeline .s-hover-btns-holder .s-btn {
+      height: 16px;
+      line-height: 16px; }
+      /* line 127, ../sass/_timeline-thematic.scss */
+      .s-timeline .s-hover-btns-holder .s-btn .icon {
+        font-size: 0.7rem !important; }
+  /* line 134, ../sass/_timeline-thematic.scss */
+  .s-timeline .l-timeline-resource-graph .l-graph {
+    background: rgba(0, 0, 0, 0.05); }
+  /* line 137, ../sass/_timeline-thematic.scss */
+  .s-timeline .l-timeline-resource-graph .l-title {
+    color: #666; }
+
+/* line 143, ../sass/_timeline-thematic.scss */
+.edit-mode .s-swimlane {
+  cursor: pointer; }
+  /* line 145, ../sass/_timeline-thematic.scss */
+  .edit-mode .s-swimlane .t-object-label {
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    cursor: move;
+    padding: 2px 5px; }
+    /* line 149, ../sass/_timeline-thematic.scss */
+    .edit-mode .s-swimlane .t-object-label:hover {
+      background: rgba(102, 102, 102, 0.3);
+      color: #333333; }

platform/features/timeline/res/css/timeline.css

@@ -0,0 +1,565 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/************************** FEATURES */
+/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** RATIOS */
+/************************** LAYOUT */
+/************************** CONTROLS */
+/************************** PATHS */
+/************************** TIMINGS */
+/************************** LIMITS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*********************************************** CONTROLS, FORM ELEMENTS */
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/* line 1, ../sass/_activities.scss */
+.l-timeline-gantt {
+  position: absolute;
+  top: 2px;
+  bottom: 2px; }
+  /* line 5, ../sass/_activities.scss */
+  .l-timeline-gantt .bar {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 17px;
+    line-height: 19px;
+    padding: 0 5px; }
+    /* line 11, ../sass/_activities.scss */
+    .l-timeline-gantt .bar span {
+      display: inline; }
+      /* line 15, ../sass/_activities.scss */
+      .l-timeline-gantt .bar span.s-activity-type.timeline:before {
+        content: "S"; }
+      /* line 20, ../sass/_activities.scss */
+      .l-timeline-gantt .bar span.s-activity-type.activity:before {
+        content: "A"; }
+      /* line 25, ../sass/_activities.scss */
+      .l-timeline-gantt .bar span.s-title {
+        text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
+      /* line 28, ../sass/_activities.scss */
+      .l-timeline-gantt .bar span.duration {
+        left: auto;
+        opacity: 0.75;
+        right: 0;
+        text-align: right;
+        width: 60px; }
+      /* line 35, ../sass/_activities.scss */
+      .l-timeline-gantt .bar span.handle {
+        top: 0;
+        bottom: 0;
+        height: auto;
+        width: 15px; }
+        /* line 40, ../sass/_activities.scss */
+        .l-timeline-gantt .bar span.handle.left {
+          right: auto; }
+        /* line 43, ../sass/_activities.scss */
+        .l-timeline-gantt .bar span.handle.middle {
+          right: 15px;
+          left: 15px;
+          width: auto; }
+        /* line 48, ../sass/_activities.scss */
+        .l-timeline-gantt .bar span.handle.right {
+          right: 0;
+          left: auto; }
+
+/* line 58, ../sass/_activities.scss */
+.edit-mode .s-timeline-gantt .handle {
+  cursor: col-resize; }
+  /* line 60, ../sass/_activities.scss */
+  .edit-mode .s-timeline-gantt .handle.mid {
+    cursor: ew-resize; }
+
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/* line 23, ../sass/_timelines.scss */
+.l-timeline-holder {
+  overflow: hidden;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  width: auto;
+  height: auto; }
+  /* line 26, ../sass/_timelines.scss */
+  .l-timeline-holder .l-timeline-pane {
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto; }
+    /* line 29, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane .l-width-control {
+      position: relative; }
+    /* line 33, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane .l-swimlanes-holder {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      top: 31px; }
+    /* line 40, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.s-timeline-tabular .t-pane-v {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto; }
+      /* line 43, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.t-pane-h.s-timeline-tabular .t-pane-v.l-tabular-l {
+        right: auto;
+        width: 266px; }
+      /* line 48, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.t-pane-h.s-timeline-tabular .t-pane-v.l-tabular-r {
+        overflow-x: auto;
+        overflow-y: hidden;
+        left: 266px; }
+        /* line 52, ../sass/_timelines.scss */
+        .l-timeline-holder .l-timeline-pane.t-pane-h.s-timeline-tabular .t-pane-v.l-tabular-r .l-width {
+          overflow: visible;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          width: auto;
+          height: auto;
+          min-width: 590px;
+          width: 100%; }
+    /* line 60, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-gantt .l-swimlanes-holder {
+      overflow-x: hidden;
+      overflow-y: scroll; }
+    /* line 64, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-legend {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      padding: 5px 0;
+      white-space: nowrap; }
+      /* line 69, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-legend .l-legend-items {
+        overflow: hidden;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        width: auto;
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+        top: 25px; }
+      /* line 74, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-legend .legend-item {
+        display: block;
+        margin-bottom: 3px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap; }
+        /* line 81, ../sass/_timelines.scss */
+        .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-legend .legend-item .color-swatch {
+          vertical-align: baseline; }
+        /* line 84, ../sass/_timelines.scss */
+        .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-legend .legend-item .title-label {
+          vertical-align: baseline; }
+    /* line 93, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graphs-holder {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      bottom: 10px; }
+      /* line 97, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graphs-holder .l-graphs {
+        overflow: hidden;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        width: auto;
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: scroll; }
+      /* line 102, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graphs-holder .l-graph-labels-holder {
+        overflow: hidden;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        width: auto;
+        height: auto;
+        overflow: hidden;
+        right: auto;
+        width: 400px; }
+    /* line 110, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-scroll-control {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      top: auto;
+      right: 10px;
+      height: 10px; }
+      /* line 116, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-scroll-control .l-width-control {
+        height: 10px; }
+    /* line 121, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graph,
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graph-labels {
+      height: 80px;
+      margin-bottom: 3px;
+      position: relative; }
+    /* line 128, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      top: 5px;
+      left: 5px;
+      position: absolute; }
+    /* line 134, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graph {
+      width: 100%; }
+      /* line 137, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graph .l-graph-area canvas {
+        width: 100%;
+        height: 100%; }
+    /* line 144, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graph-labels {
+      z-index: 10; }
+    /* line 148, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graph-area {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      top: 20px;
+      bottom: 5px; }
+      /* line 151, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graph-area .l-labels-holder {
+        overflow: hidden;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        width: auto;
+        height: auto;
+        left: 5px; }
+        /* line 154, ../sass/_timelines.scss */
+        .l-timeline-holder .l-timeline-pane.t-pane-h.l-timeline-resource-graph .l-graph-area .l-labels-holder .tick-label.tick-label-y {
+          text-align: left; }
+    /* line 162, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.l-pane-l {
+      right: auto;
+      min-width: 50px;
+      max-width: 90%;
+      width: 30%; }
+    /* line 169, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.l-pane-r {
+      left: 0; }
+      /* line 172, ../sass/_timelines.scss */
+      .l-timeline-holder .l-timeline-pane.l-pane-r:hover .l-hover-btns-holder {
+        -moz-transition-property: opacity, background-color, border-color, color;
+        -o-transition-property: opacity, background-color, border-color, color;
+        -webkit-transition-property: opacity, background-color, border-color, color;
+        transition-property: opacity, background-color, border-color, color;
+        -moz-transition-duration: 100ms;
+        -o-transition-duration: 100ms;
+        -webkit-transition-duration: 100ms;
+        transition-duration: 100ms;
+        -moz-transition-timing-function: ease-in-out;
+        -o-transition-timing-function: ease-in-out;
+        -webkit-transition-timing-function: ease-in-out;
+        transition-timing-function: ease-in-out;
+        -moz-transition-delay: 0;
+        -o-transition-delay: 0;
+        -webkit-transition-delay: 0;
+        transition-delay: 0;
+        opacity: 1; }
+    /* line 179, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.l-pane-top {
+      bottom: 30%; }
+    /* line 182, ../sass/_timelines.scss */
+    .l-timeline-holder .l-timeline-pane.l-pane-btm {
+      top: auto;
+      min-height: 20px;
+      max-height: 80%;
+      height: 30%; }
+  /* line 190, ../sass/_timelines.scss */
+  .l-timeline-holder .l-swimlane {
+    height: 21px;
+    position: relative; }
+  /* line 196, ../sass/_timelines.scss */
+  .l-timeline-holder .s-timeline-tabular .l-header,
+  .l-timeline-holder .s-timeline-gantt .l-header {
+    overflow: visible;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto;
+    bottom: auto;
+    height: 30px; }
+    /* line 201, ../sass/_timelines.scss */
+    .l-timeline-holder .s-timeline-tabular .l-header .l-header-elem,
+    .l-timeline-holder .s-timeline-gantt .l-header .l-header-elem {
+      overflow: visible;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      bottom: 5px;
+      left: 5px;
+      width: auto;
+      height: auto;
+      display: block; }
+      /* line 205, ../sass/_timelines.scss */
+      .l-timeline-holder .s-timeline-tabular .l-header .l-header-elem.l-labels .l-label,
+      .l-timeline-holder .s-timeline-gantt .l-header .l-header-elem.l-labels .l-label {
+        position: absolute;
+        width: 140px;
+        margin-left: -70px;
+        text-align: center; }
+  /* line 215, ../sass/_timelines.scss */
+  .l-timeline-holder .l-hover-btns-holder {
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-transition-property: opacity, background-color, border-color, color;
+    -o-transition-property: opacity, background-color, border-color, color;
+    -webkit-transition-property: opacity, background-color, border-color, color;
+    transition-property: opacity, background-color, border-color, color;
+    -moz-transition-duration: 500ms;
+    -o-transition-duration: 500ms;
+    -webkit-transition-duration: 500ms;
+    transition-duration: 500ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    -moz-transition-delay: 0;
+    -o-transition-delay: 0;
+    -webkit-transition-delay: 0;
+    transition-delay: 0;
+    opacity: 0;
+    height: 30px;
+    width: 100px;
+    left: auto;
+    padding: 5px;
+    text-align: right;
+    z-index: 10; }
+  /* line 228, ../sass/_timelines.scss */
+  .l-timeline-holder .l-cols {
+    overflow: visible;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto;
+    text-wrap: none;
+    white-space: nowrap; }
+    /* line 232, ../sass/_timelines.scss */
+    .l-timeline-holder .l-cols .l-col {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block;
+      height: 100%;
+      padding: 0 5px;
+      position: relative;
+      text-wrap: none;
+      white-space: nowrap; }
+      /* line 242, ../sass/_timelines.scss */
+      .l-timeline-holder .l-cols .l-col.l-col-icon {
+        width: 16px;
+        text-align: center;
+        padding: 0; }
+        /* line 246, ../sass/_timelines.scss */
+        .l-timeline-holder .l-cols .l-col.l-col-icon .ui-symbol {
+          color: #0099cc; }
+      /* line 251, ../sass/_timelines.scss */
+      .l-timeline-holder .l-cols .l-col.l-plot-resource {
+        border-left: none !important;
+        cursor: pointer;
+        padding-left: 0; }
+      /* line 257, ../sass/_timelines.scss */
+      .l-timeline-holder .l-cols .l-col.l-title {
+        width: 250px; }
+      /* line 261, ../sass/_timelines.scss */
+      .l-timeline-holder .l-cols .l-col.l-start, .l-timeline-holder .l-cols .l-col.l-end, .l-timeline-holder .l-cols .l-col.l-duration {
+        width: 110px; }
+      /* line 267, ../sass/_timelines.scss */
+      .l-timeline-holder .l-cols .l-col.l-activity-modes {
+        display: none;
+        width: 250px; }
+  /* line 275, ../sass/_timelines.scss */
+  .l-timeline-holder .s-timeline-tabular .l-header .l-cols {
+    top: 5px;
+    bottom: 5px; }
+  /* line 281, ../sass/_timelines.scss */
+  .l-timeline-holder .s-timeline-tabular .l-pane-l .l-cols {
+    left: 5px; }
+  /* line 287, ../sass/_timelines.scss */
+  .l-timeline-holder .splitter {
+    top: 0; }
+  /* line 293, ../sass/_timelines.scss */
+  .l-timeline-holder .l-ticks,
+  .l-timeline-holder .l-subticks {
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    top: auto;
+    bottom: 3px; }
+  /* line 299, ../sass/_timelines.scss */
+  .l-timeline-holder .l-ticks {
+    height: 10px; }
+  /* line 303, ../sass/_timelines.scss */
+  .l-timeline-holder .l-subticks {
+    height: 5px; }

platform/features/timeline/res/sass-compile.sh

@@ -0,0 +1,4 @@
+date
+
+echo "*** Compiling sass"
+compass compile --force

platform/features/timeline/res/sass/_activities.scss

@@ -0,0 +1,64 @@
+.l-timeline-gantt {
+	position: absolute;
+	top: $timelineSwimlaneGanttVM; bottom: $timelineSwimlaneGanttVM;
+
+	.bar {
+		@include ellipsize();
+		height: $activityBarH;
+		line-height: $activityBarH + 2;
+		padding: 0 $interiorMargin;
+
+		span {
+			display: inline;
+			&.s-activity-type {
+				&.timeline {
+					&:before {
+						content:"S";
+					}
+				}
+				&.activity {
+					&:before {
+						content:"A";
+					}
+				}
+			}
+			&.s-title {
+				@include text-shadow(rgba(black, 0.1) 0 1px 2px);
+			}
+			&.duration {
+				left: auto;
+				opacity: 0.75;
+				right: 0;
+				text-align: right;
+				width: 60px;
+			}
+			&.handle {
+				top: 0;
+				bottom: 0;
+				height: auto;
+				width: 15px;
+				&.left {
+					right: auto;
+				}
+				&.middle {
+					right: 15px;
+					left: 15px;
+					width: auto;
+				}
+				&.right {
+					right: 0;
+					left: auto;
+				}
+			}
+		}
+	}
+}
+
+.edit-mode .s-timeline-gantt {
+	.handle {
+		cursor: col-resize;
+		&.mid {
+			cursor: ew-resize;
+		}
+	}
+}

platform/features/timeline/res/sass/_constants-espresso.scss

@@ -0,0 +1,42 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+// General
+$timelineHeaderColorBg: pullForward($colorBodyBg, 5%);
+$timelineColorAlt1: pullForward($timelineHeaderColorBg, 10%);
+$colorGanttBarBg: #5555aa;
+$colorGanttBarFg: #fff;
+$colorGanttBarSelectedBg: #ccc;
+$colorGanttBarSelectedFg: #333;
+$colorGanttBarTabularFgIcon: #8594ff;
+
+// Swimlane colors
+$colorDropTarg: rgba($colorGanttBarBg, 0.4);
+$colorSwimlaneSelectedBg: #222;
+$colorSwimlaneSelectedFg: #ccc;
+$colorGanttToggle: $colorKey;
+$shdwGanttBar: rgba(black, 0.4) 0 1px 3px;
+
+// Resource graphs
+$timelineResourceGraphBg: rgba(black, 0.2);
+$timelineResourceGraphFg: $colorBodyFg;
+$timelineResourceGraphLegendFg: $colorBodyFg;

platform/features/timeline/res/sass/_constants-snow.scss

@@ -0,0 +1,42 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+// General
+$timelineHeaderColorBg: pullForward($colorBodyBg, 5%);
+$timelineColorAlt1: pullForward($timelineHeaderColorBg, 10%);
+$colorGanttBarBg: #5555aa;
+$colorGanttBarFg: #fff;
+$colorGanttBarSelectedBg: $colorGanttBarBg;
+$colorGanttBarSelectedFg: $colorGanttBarFg;
+$colorGanttBarTabularFgIcon: #8594ff;
+
+// Swimlane colors
+$colorDropTarg: rgba($colorGanttBarBg, 0.4);
+$colorSwimlaneSelectedBg: rgba($colorGanttBarBg, 0.25);
+$colorSwimlaneSelectedFg: pullForward($colorBodyFg, 10%);
+$colorGanttToggle: $colorKey;
+$shdwGanttBar: rgba(black, 0.1) 0 1px 3px;
+
+// Resource graphs
+$timelineResourceGraphBg: $colorPlotBg;
+$timelineResourceGraphFg: $colorBodyFg;
+$timelineResourceGraphLegendFg: $colorBodyFg;

platform/features/timeline/res/sass/_constants.scss

@@ -0,0 +1,63 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@mixin activityBg($bg, $gamma: 10) {
+    @include background-image(linear-gradient(lighten($bg, $gamma), $bg));
+}
+
+// Timeline constants
+$activityBarH: 17px;
+$timelinePaneLeftW: 30%;
+$timelinePaneBtmH: 30%;
+$timelineResourceGraphYLabelsMargin: 70px;
+$timelineTopPaneHeaderH: 30px;
+
+$timelineSwimlaneGanttVM: 2px; // The vertical space above and below the gantt bars
+$timelineSwimlaneH: $activityBarH + ($timelineSwimlaneGanttVM * 2);
+$timelineTopPaneHeaderElemMargin: $interiorMargin;
+
+// Timeline Tabular constants
+$timelineColIconW: 16px;
+$timelineColResourcePlotW: $timelineColIconW;
+$timelineColTitleW: 250px;
+$timelineColDatetimeW: 110px;
+$timelineColDurationW: 70px;
+$timelineColActivityModesW: $timelineColTitleW;
+$timelineColPadR: 50px;
+$timelineTabularTitleW: $timelineColResourcePlotW + $timelineColTitleW;
+$timelineTabularDataW: ($timelineColDatetimeW * 2) + $timelineColDurationW + $timelineColActivityModesW + $timelineColPadR;
+
+
+// // Ported from legacy timelines SASS
+$activitiesHolderM: 30px;
+$scenarioTopPad: 25px;
+$swimlaneVM: 2px;
+$timelineVM: 10px;
+$timelineBPad: $interiorMargin * 2;
+$graphResourceSummaryH: 200px;
+$graphResourceSummaryLegendH: 20px;
+$scenarioTimelineSummaryH: 20px;
+$scenarioTimelineSummaryHExpanded: $graphResourceSummaryH + 30px;
+$scenarioPanZoomSliderH: 16px;
+$scenarioTicksH: 7px;
+$scenarioTickLabelsH: 10px;
+
+

platform/features/timeline/res/sass/_timeline-thematic.scss

@@ -0,0 +1,154 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+.l-timeline-holder {
+    .l-timeline-pane {
+        &.t-pane-h {
+            &.l-timeline-resource-legend {
+                .l-legend-items {
+                    color: $timelineResourceGraphLegendFg;
+                }
+            }
+        }
+    }
+}
+
+.s-timeline-gantt {
+    $br: $controlCr;
+    .bar {
+        color: $colorGanttBarFg;
+        @include activityBg($colorGanttBarBg);
+        @include border-radius($br);
+        @include box-shadow($shdwGanttBar);
+        &.expanded {
+            @include border-top-radius($br);
+            @include border-bottom-radius(0);
+        }
+        &.leaf {
+            @include border-top-radius(0);
+            @include border-bottom-radius($br);
+        }
+        .s-toggle {
+            color: $colorGanttToggle;
+        }
+    }
+}
+
+.s-timeline-tabular {
+    .l-header .l-cols {
+        .l-col {
+            border-left: 1px solid pullForward($timelineHeaderColorBg, 15%);
+        }
+    }
+
+    .l-pane-l {
+        // Left pane of the tabular area
+        .l-cols {
+            .s-label .ui-symbol.icon {
+                color: $colorGanttBarTabularFgIcon;
+            }
+        }
+    }
+}
+
+.edit-mode .s-timeline-gantt {
+    .bar {
+        &:hover {
+            @include background-image(linear-gradient(lighten($colorGanttBarBg, 20), lighten($colorGanttBarBg, 10)));
+        }
+    }
+}
+
+//*************************************************************** STYLING
+.s-timeline {
+    font-size: 0.75rem;
+    .s-header {
+        background-color: $timelineHeaderColorBg;
+    }
+    .s-swimlane {
+        border-bottom: 1px solid pullForward($colorBodyBg, 10%);
+        line-height: $activityBarH + 2 + 1;
+        &.exceeded {
+            @include bgDiagonalStripes(#fff, 0.05, $timelineSwimlaneH + 1);
+        }
+
+        &.selected {
+            background-color: $colorSwimlaneSelectedBg;
+            color: $colorSwimlaneSelectedFg;
+
+            .s-timeline-gantt .bar {
+                @include activityBg($colorGanttBarSelectedBg, 10);
+                color: $colorGanttBarSelectedFg;
+            }
+        }
+
+        &.drop-into {
+            background-color: rgba($colorDropTarg, 0.7);
+            .s-timeline-gantt {
+                opacity: 0.7;
+            }
+        }
+        &.drop-after {
+            background-color: rgba(#000, 0.2);
+            border-bottom-color: rgba($colorDropTarg, 1.0);
+        }
+    }
+
+    .s-ticks {
+        @include bgTicks($timelineColorAlt1);
+    }
+    .s-hover-btns-holder {
+        $bg: $timelineHeaderColorBg;
+        $bga: 1;
+        $l: 5%;
+        @include user-select(none);
+        @include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%));
+        .s-btn {
+            height: 16px;
+            line-height: 16px;
+            .icon {
+                font-size: 0.7rem !important;
+            }
+        }
+    }
+
+    .l-timeline-resource-graph {
+        .l-graph {
+            background: $timelineResourceGraphBg;
+        }
+        .l-title {
+            color: $timelineResourceGraphFg;
+        }
+    }
+}
+
+.edit-mode .s-swimlane {
+    cursor: pointer;
+    .t-object-label {
+        @include border-radius($controlCr);
+        cursor: move;
+        padding: 2px 5px;
+        &:hover {
+            background: rgba($colorBodyFg, 0.3);
+            color: pullForward($colorBodyFg, 20%);
+        }
+    }
+}

platform/features/timeline/res/sass/_timelines.scss

@@ -0,0 +1,306 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+//*************************************************************** LAYOUT
+.l-timeline-holder {
+    @include absPosDefault();
+
+    .l-timeline-pane {
+        @include absPosDefault();
+
+	    .l-width-control {
+		    position: relative;
+	    }
+
+	    .l-swimlanes-holder {
+		    @include absPosDefault();
+		    top: $timelineTopPaneHeaderH + 1;
+	    }
+
+	    // Overall layout
+        &.t-pane-h {
+            &.s-timeline-tabular .t-pane-v {
+                // Vertical panes within tabular area
+                @include absPosDefault();
+                &.l-tabular-l {
+                    // Tree area with item title
+                    right: auto; // Set this to auto and uncomment width below when additional tabular columns are added
+                    width: $timelineTabularTitleW;
+                }
+                &.l-tabular-r {
+                    // Start, end, duration, activity modes columns
+                    @include scrollH();
+                    left: $timelineTabularTitleW;
+	                .l-width {
+		                @include absPosDefault(0, visible);
+		                min-width: $timelineTabularDataW;
+		                width: 100%;
+	                }
+                }
+            }
+            &.l-timeline-gantt {
+                .l-swimlanes-holder {
+                    @include scrollV(scroll);
+                }
+            }
+	        &.l-timeline-resource-legend {
+		        @include box-sizing(border-box);
+		        padding: $interiorMargin 0;
+		        white-space: nowrap;
+
+		        .l-legend-items {
+			        @include absPosDefault();
+			        @include scrollV();
+			        top: 25px;
+		        }
+		        .legend-item {
+			        // Inherits from /platform/commonUI/general/res/sass/plots/_plots-main.scss
+			        display: block;
+			        margin-bottom: $interiorMarginSm;
+			        overflow: hidden;
+			        text-overflow: ellipsis;
+			        white-space: nowrap;
+			        .color-swatch {
+				        vertical-align: baseline;
+			        }
+			        .title-label {
+				        vertical-align: baseline;
+			        }
+		        }
+	        }
+
+            &.l-timeline-resource-graph {
+	            $m: $interiorMargin;
+
+                .l-graphs-holder {
+                    @include absPosDefault();
+                    bottom: $scrollbarTrackSize;
+
+                    .l-graphs {
+                        @include absPosDefault();
+                        @include scrollV(scroll);
+                    }
+
+                    .l-graph-labels-holder {
+                        @include absPosDefault();
+                        overflow: hidden;
+                        right: auto;
+                        width: 400px;
+                    }
+                }
+
+                .l-scroll-control {
+                    @include absPosDefault();
+                    overflow-x: scroll;
+                    overflow-y: hidden;
+                    top: auto; right: $scrollbarTrackSize;
+                    height: $scrollbarTrackSize;
+                    .l-width-control {
+                        height: 10px; // Need to add height to force scrollbar to appear
+                    }
+                }
+
+	            .l-graph,
+	            .l-graph-labels {
+		            height: 80px;
+		            margin-bottom: $interiorMarginSm;
+		            position: relative;
+	            }
+
+	            .l-title {
+		            @include ellipsize();
+		            top: $m; left: $m;
+		            position: absolute;
+	            }
+
+	            .l-graph {
+                    width: 100%;
+		            .l-graph-area {
+			            canvas {
+				            width: 100%;
+				            height: 100%;
+			            }
+		            }
+	            }
+
+	            .l-graph-labels {
+		            z-index: 10;
+	            }
+
+	            .l-graph-area {
+		            @include absPosDefault();
+		            top: 20px; bottom: 5px;
+		            .l-labels-holder {
+			            @include absPosDefault();
+			            left: $m;
+			            .tick-label.tick-label-y {
+				            text-align: left;
+			            }
+		            }
+	            }
+            }
+        }
+
+        &.l-pane-l {
+            right: auto;
+			min-width: 50px;
+			max-width: 90%;
+            width: $timelinePaneLeftW;
+        }
+
+        &.l-pane-r {
+            left: 0;
+			&:hover {
+				.l-hover-btns-holder {
+					@include trans-prop-nice-fade(100ms);
+					opacity: 1;
+				}
+			}
+        }
+
+        &.l-pane-top {
+            bottom: $timelinePaneBtmH;
+        }
+        &.l-pane-btm {
+            top: auto;
+			min-height: 20px;
+			max-height: 80%;
+            height: $timelinePaneBtmH;
+        }
+    }
+
+    .l-swimlane {
+	    height: $timelineSwimlaneH;
+	    position: relative;
+    }
+
+	// Header
+    .s-timeline-tabular .l-header,
+    .s-timeline-gantt .l-header {
+	    @include absPosDefault(0, visible);
+        bottom: auto; height: $timelineTopPaneHeaderH;
+
+        .l-header-elem {
+		    @include absPosDefault($timelineTopPaneHeaderElemMargin, visible);
+		    display: block;
+		    &.l-labels {
+			    .l-label {
+				    position: absolute;
+				    width: 140px;
+				    margin-left: -70px;
+				    text-align: center;
+			    }
+		    }
+	    }
+    }
+
+	.l-hover-btns-holder {
+		@include absPosDefault();
+		@include box-sizing(border-box);
+		@include trans-prop-nice-fade(500ms);
+		opacity: 0;
+		height: $timelineTopPaneHeaderH;
+		width: 100px; left: auto;
+		padding: $interiorMargin;
+		text-align: right;
+		z-index: 10;
+	}
+
+	// Tabular Columns
+	.l-cols {
+		@include absPosDefault(0, visible);
+		text-wrap: none;
+		white-space: nowrap;
+		.l-col {
+			@include box-sizing(border-box);
+			@include ellipsize();
+			display: inline-block;
+			height: 100%;
+			padding: 0 $interiorMargin;
+			position: relative;
+			text-wrap: none;
+			white-space: nowrap;
+
+			&.l-col-icon {
+				width: $timelineColIconW;
+                text-align: center;
+                padding: 0;
+				.ui-symbol {
+					color: $colorKey;
+				}
+			}
+
+			&.l-plot-resource {
+				border-left: none !important;
+				cursor: pointer;
+				padding-left: 0;
+			}
+
+			&.l-title {
+				width: $timelineColTitleW;
+			}
+
+			&.l-start,
+			&.l-end,
+			&.l-duration {
+				width: $timelineColDatetimeW;
+			}
+
+			&.l-activity-modes {
+				display: none; // Temp, until modes can be displayed
+				width: $timelineColActivityModesW;
+			}
+		}
+	}
+
+	.s-timeline-tabular {
+		.l-header .l-cols {
+			top: $timelineTopPaneHeaderElemMargin; bottom: $timelineTopPaneHeaderElemMargin;
+		}
+
+		.l-pane-l {
+			// Left pane of the tabular area
+			.l-cols {
+				left: $timelineTopPaneHeaderElemMargin;
+			}
+		}
+	}
+
+    .splitter {
+        // Top of splitter within Timelines should be 0
+        top: 0;
+    }
+
+	// Ticks
+	.l-ticks,
+	.l-subticks {
+		@include absPosDefault();
+		top: auto; bottom: $interiorMarginSm;
+	}
+
+	.l-ticks {
+		height: 10px
+	}
+
+	.l-subticks {
+		height: 5px
+	}
+}

platform/features/timeline/res/sass/timeline-espresso.scss

@@ -0,0 +1,33 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+@import "compass";
+@import "compass/css3";
+@import "compass/utilities";
+
+@import "../../../../commonUI/general/res/sass/constants";
+@import "../../../../commonUI/general/res/sass/mixins";
+@import "../../../../commonUI/themes/espresso/res/sass/constants";
+@import "../../../../commonUI/themes/espresso/res/sass/mixins";
+@import "constants";
+@import "constants-espresso";
+@import "timeline-thematic";
+

platform/features/timeline/res/sass/timeline-snow.scss

@@ -0,0 +1,32 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+@import "compass";
+@import "compass/css3";
+@import "compass/utilities";
+
+@import "../../../../commonUI/general/res/sass/constants";
+@import "../../../../commonUI/general/res/sass/mixins";
+@import "../../../../commonUI/themes/snow/res/sass/constants";
+@import "../../../../commonUI/themes/snow/res/sass/mixins";
+@import "constants";
+@import "constants-snow";
+@import "timeline-thematic";

platform/features/timeline/res/sass/timeline.scss

@@ -0,0 +1,32 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+@import "compass";
+@import "compass/css3";
+@import "compass/utilities";
+
+@import "../../../../commonUI/general/res/sass/constants";
+@import "../../../../commonUI/general/res/sass/mixins";
+@import "../../../../commonUI/themes/espresso/res/sass/constants";
+@import "../../../../commonUI/themes/espresso/res/sass/mixins";
+@import "constants";
+@import "activities";
+@import "timelines";

platform/features/timeline/res/templates/timeline.html

@@ -109,14 +109,14 @@
         <div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt"
              >
             <div class="l-hover-btns-holder s-hover-btns-holder t-btns-zoom">
-                <a class="t-btn l-btn s-btn s-icon-btn"
+                <a class="t-btn l-btn s-btn"
                    ng-click="zoomController.zoom(-1)"
                    ng-show="true"
                    title="Zoom in">
                     <span class="ui-symbol icon zoom-in">X</span>
                 </a>
 
-                <a class="t-btn l-btn s-btn s-icon-btn"
+                <a class="t-btn l-btn s-btn"
                    ng-click="zoomController.zoom(1)"
                    ng-show="true"
                    title="Zoom out">

platform/forms/res/templates/controls/color.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div
-	class="t-btn l-btn s-btn s-icon-btn s-menu-btn menu-element t-color-palette"
+	class="t-btn l-btn s-btn s-menu-btn menu-element t-color-palette"
     ng-controller="ClickAwayController as toggle"
 	>