#279 removed extra text

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

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:

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"
@@ -72,7 +73,7 @@
 
                         <div class="split-pane-component t-inspect pane right mobile-hide">
                             <mct-representation key="'object-inspector'"
-                                                mct-object="domainObject"
+                                                mct-object="navigatedObject"
                                                 ng-model="treeModel">
                             </mct-representation>
                             <a class="mini-tab-icon anchor-right mobile-hide toggle-pane toggle-inspect"

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,9 @@ define(
                     ((domainObject && domainObject.useCapability('view')) || [])
                         .forEach(selectViewIfMatching);
                 }
+                //$scope.editMode = domainObject.hasCapability('editor') ?
+                // true : false;
+                navigatedObject = domainObject;
             }
 
             function updateQueryParam(viewKey) {
@@ -67,6 +73,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

@@ -21,6 +21,11 @@
                 "key": "EditPanesController",
                 "implementation": "controllers/EditPanesController.js",
                 "depends": [ "$scope" ]
+            },
+            {
+                "key": "ElementsController",
+                "implementation": "controllers/ElementsController.js",
+                "depends": [ "$scope" ]
             }
         ],
         "directives": [
@@ -38,7 +43,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 +72,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 +83,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/res/templates/elements.html

@@ -19,14 +19,20 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="current-elements abs" style="height: 100%;">
-    <!--p class="hint">Drop objects here to add them...</p-->
-    <ul class="tree">
-        <li ng-repeat="containedObject in composition">
-            <span class="tree-item">
-                <mct-representation key="'label'" mct-object="containedObject">
-                </mct-representation>
-            </span>
-        </li>
-    </ul>
+<div ng-controller="ElementsController">
+    <mct-include key="'input-filter'"
+                 class="flex-elem holder"
+                 ng-model="filterBy">
+    </mct-include>
+    <div class="current-elements abs" style="height: 100%;">
+        <!--p class="hint">Drop objects here to add them...</p-->
+        <ul class="tree">
+            <li ng-repeat="containedObject in composition | filter:searchText">
+                <span class="tree-item">
+                    <mct-representation key="'label'" mct-object="containedObject">
+                    </mct-representation>
+                </span>
+            </li>
+        </ul>
+    </div>
 </div>

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/controllers/ElementsController.js

@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The ElementsController prepares the elements view for display
+         *
+         * @constructor
+         */
+        function ElementsController($scope) {
+            function filterBy(text){
+                if (typeof text === 'undefined')
+                    return $scope.searchText;
+                else
+                    $scope.searchText = text;
+            }
+            $scope.filterBy = filterBy;
+        }
+
+        return ElementsController;
+    }
+);

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/edit/src/representers/EditRepresenter.js

@@ -48,6 +48,8 @@ define(
         function EditRepresenter($q, $log, scope) {
             var self = this;
 
+            this.scope = scope;
+
             // Mutate and persist a new version of a domain object's model.
             function doPersist(model) {
                 var domainObject = self.domainObject;
@@ -100,6 +102,8 @@ define(
             this.key = (representation || {}).key;
             // Track the represented object
             this.domainObject = representedObject;
+            this.scope.editMode = representedObject.hasCapability("editor");
+
             // Ensure existing watches are released
             this.destroy();
         };

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 {

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/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/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/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,63 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+
 <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-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/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/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 + '%'}"

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/representation/bundle.json

@@ -21,7 +21,8 @@
             {
                 "key": "drop",
                 "implementation": "gestures/DropGesture.js",
-                "depends": [ "dndService", "$q" ]
+                "depends": [ "dndService", "$q", "navigationService",
+                    "objectService", "instantiate", "typeService" ]
             },
             {
                 "key": "menu",

platform/representation/src/MCTRepresentation.js

@@ -96,6 +96,7 @@ define(
                     toClear = [], // Properties to clear out of scope on change
                     counter = 0,
                     couldRepresent = false,
+                    couldEdit = false,
                     lastId,
                     lastKey,
                     changeTemplate = templateLinker.link($scope, element);
@@ -143,11 +144,13 @@ define(
                     });
                 }
 
-                function unchanged(canRepresent, id, key) {
+                function unchanged(canRepresent, canEdit, id, key) {
                     return canRepresent &&
                         couldRepresent &&
                         id === lastId &&
-                        key === lastKey;
+                        key === lastKey &&
+                        canEdit &&
+                        couldEdit;
                 }
 
                 // General-purpose refresh mechanism; should set up the scope
@@ -159,10 +162,11 @@ define(
                         path = representation && getPath(representation),
                         uses = ((representation || {}).uses || []),
                         canRepresent = !!(path && domainObject),
+                        canEdit = !!(domainObject && domainObject.hasCapability('editor')),
                         id = domainObject && domainObject.getId(),
                         key = $scope.key;
 
-                    if (unchanged(canRepresent, id, key)) {
+                    if (unchanged(canRepresent, canEdit, id, key)) {
                         return;
                     }
 
@@ -190,6 +194,7 @@ define(
 
                     // To allow simplified change detection next time around
                     couldRepresent = canRepresent;
+                    couldEdit = canEdit;
                     lastId = id;
                     lastKey = key;
 

platform/representation/src/gestures/DropGesture.js

@@ -25,8 +25,10 @@
  * Module defining DropGesture. Created by vwoeltje on 11/17/14.
  */
 define(
-    ['./GestureConstants'],
-    function (GestureConstants) {
+    ['./GestureConstants',
+     '../../../commonUI/edit/src/objects/EditableDomainObject',
+     'uuid'],
+    function (GestureConstants, EditableDomainObject, uuid) {
         "use strict";
 
         /**
@@ -40,8 +42,9 @@ define(
          * @param {DomainObject} domainObject the domain object whose
          *        composition should be modified as a result of the drop.
          */
-        function DropGesture(dndService, $q, element, domainObject) {
+        function DropGesture(dndService, $q, navigationService, objectService, instantiate, typeService, element, domainObject) {
             var actionCapability = domainObject.getCapability('action'),
+                editableDomainObject,
                 action; // Action for the drop, when it occurs
             
             function broadcastDrop(id, event) {
@@ -66,8 +69,20 @@ define(
                     );
                 }
             }
+            
+            function shouldCreateVirtualPanel(domainObject){
+                return domainObject.useCapability('view').filter(function (view){
+                    return view.key==='plot' && domainObject.getModel().type!== 'telemetry.panel'
+                }).length > 0;
+            }
 
             function dragOver(e) {
+                //Refresh domain object on each dragOver to catch external
+                // updates to the model
+                //Don't use EditableDomainObject for folders, allow immediate persistence
+                editableDomainObject = domainObject.hasCapability('editor') || domainObject.getModel().type==='folder' ? domainObject : new EditableDomainObject(domainObject, $q);
+                actionCapability = editableDomainObject.getCapability('action');
+
                 var event = (e || {}).originalEvent || e,
                     selectedObject = dndService.getData(
                         GestureConstants.MCT_EXTENDED_DRAG_TYPE
@@ -79,8 +94,9 @@ define(
                         key: 'compose',
                         selectedObject: selectedObject
                     })[0];
-
-                    if (action) {
+                    //TODO: Fix this. Define an action for creating new
+                    // virtual panel
+                    if (action || shouldCreateVirtualPanel(domainObject)) {
                         event.dataTransfer.dropEffect = 'move';
 
                         // Indicate that we will accept the drag
@@ -90,25 +106,62 @@ define(
                 }
             }
 
+            function createVirtualPanel(base, overlayId){
+
+                var typeKey = 'telemetry.panel',
+                    type = typeService.getType(typeKey),
+                    model = type.getInitialModel(),
+                    id = uuid(),
+                    newPanel = undefined;
+
+                model.type = typeKey;
+                newPanel = new EditableDomainObject(instantiate(model, id), $q);
+
+                [base.getId(), overlayId].forEach(function(id){
+                    newPanel.getCapability('composition').add(id)
+                });
+
+                newPanel.getCapability('location').setPrimaryLocation(base.getCapability('location').getContextualLocation());
+
+                //var virtualPanel = new EditableDomainObject(newPanel, $q);
+                //virtualPanel.setOriginalObject(base);
+                newPanel.setOriginalObject(base);
+                //return virtualPanel;
+                return newPanel;
+
+            }
+
             function drop(e) {
                 var event = (e || {}).originalEvent || e,
                     id = event.dataTransfer.getData(GestureConstants.MCT_DRAG_TYPE),
-                    domainObjectType = domainObject.getModel().type;
-                
+                    domainObjectType = editableDomainObject.getModel().type,
+                    virtualObj;
+
+                editableDomainObject.getCapability('status').set('editing', true);
+
                 // If currently in edit mode allow drag and drop gestures to the
                 // domain object. An exception to this is folders which have drop
                 // gestures in browse mode.
-                if (domainObjectType === 'folder' || domainObject.hasCapability('editor')) {
+                //if (domainObjectType === 'folder' || domainObject.hasCapability('editor')) {
                 
                     // Handle the drop; add the dropped identifier to the
                     // destination domain object's composition, and persist
                     // the change.
                     if (id) {
-                        $q.when(action && action.perform()).then(function (result) {
+                        if (shouldCreateVirtualPanel(domainObject)){
+                            navigationService.setNavigation(createVirtualPanel(domainObject, id));
                             broadcastDrop(id, event);
-                        });
+                        } else {
+                            $q.when(action && action.perform()).then(function (result) {
+                                //Don't go into edit mode for folders
+                                if (domainObjectType!=='folder') {
+                                    navigationService.setNavigation(editableDomainObject);
+                                }
+                                broadcastDrop(id, event);
+                            });
+                        }
                     }
-                }
+                //}
                 // TODO: Alert user if drag and drop is not allowed
             }
 

platform/search/res/templates/search.html

@@ -20,9 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="l-flex-col flex-elem grows holder holder-search"  ng-controller="SearchController as controller">
-    <div class="search-bar flex-elem" ng-controller="ClickAwayController as toggle">
-        <input class="search-input"
-               type="text"
+    <div class="search-bar search-input l-filter s-filter flex-elem" ng-controller="ClickAwayController as toggle">
+        <input type="search"
                ng-model="ngModel.input"
                ng-keyup="controller.search()" />
         <a class="clear-icon"