[Edit Mode] #627 remove edit concerns from browse controller

platform/commonUI/browse/bundle.js

@@ -170,6 +170,10 @@ define([
                 }
             ],
             "representations": [
+                {
+                    "key": "view-region",
+                    "templateUrl": "templates/view-object.html"
+                },
                 {
                     "key": "browse-object",
                     "template": browseObjectTemplate,

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

@@ -47,11 +47,6 @@
         <div ng-if="isEditable" 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">
-                <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'>

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

@@ -63,7 +63,7 @@
                     <mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
                         <div class='split-pane-component t-object pane primary-pane left'>
                             <mct-representation mct-object="navigatedObject"
-                                                key="'browse-object'"
+                                                key="'view-region'"
                                                 class="abs holder holder-object">
                             </mct-representation>
                         </div>
@@ -71,7 +71,7 @@
                         <mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter>
 
                         <div class="split-pane-component t-inspect pane right mobile-hide">
-                            <mct-representation key="'object-inspector'"
+                            <mct-representation key="'inspector-region'"
                                                 mct-object="navigatedObject"
                                                 ng-model="treeModel">
                             </mct-representation>

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

@@ -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.
+-->
+<!--
+ A representation that allows the 'View' region of an object view to change
+ dynamically (eg. between browse and edit modes). Values correspond to a
+ representation key, and currently defaults to 'browse-object'.
+
+ In the case of edit, the EditRepresenter will change this to editable
+ representation of the object as needed.
+ -->
+<mct-representation mct-object="domainObject"
+                    key="viewRegionTemplate || 'browse-object'"
+                    class="abs holder holder-object">
+</mct-representation>

platform/commonUI/browse/src/BrowseController.js

@@ -60,13 +60,6 @@ define(
                 ($route.current.params.ids || defaultPath).split("/")
             );
 
-            function isDirty(){
-                var editorCapability = $scope.navigatedObject &&
-                        $scope.navigatedObject.getCapability("editor"),
-                    hasChanges = editorCapability && editorCapability.dirty();
-                return hasChanges;
-            }
-
             function updateRoute(domainObject) {
                 var priorRoute = $route.current,
                     // Act as if params HADN'T changed to avoid page reload
@@ -83,9 +76,7 @@ define(
                 // urlService.urlForLocation used to adjust current
                 // path to new, addressed, path based on
                 // domainObject
-                $location.path(urlService.urlForLocation("browse",
+                $location.path(urlService.urlForLocation("browse", domainObject));
-                    domainObject.hasCapability('editor') ?
-                        domainObject.getOriginalObject() : domainObject));
 
             }
 
@@ -97,17 +88,15 @@ define(
                     return;
                 }
 
-                if (isDirty() && !confirm(CONFIRM_MSG)) {
+                if (navigationService.setNavigation(domainObject)) {
-                    $scope.treeModel.selectedObject = $scope.navigatedObject;
-                    navigationService.setNavigation($scope.navigatedObject);
-                } else {
-                    if ($scope.navigatedObject && $scope.navigatedObject.hasCapability("editor")){
-                        $scope.navigatedObject.getCapability("editor").cancel();
-                    }
                     $scope.navigatedObject = domainObject;
                     $scope.treeModel.selectedObject = domainObject;
-                    navigationService.setNavigation(domainObject);
                     updateRoute(domainObject);
+                } else {
+                    //If navigation was unsuccessful (ie. blocked), reset
+                    // the selected object in the tree to the currently
+                    // navigated object
+                    $scope.treeModel.selectedObject = $scope.navigatedObject ;
                 }
             }
 
@@ -184,18 +173,13 @@ define(
                 selectedObject: navigationService.getNavigation()
             };
 
-            $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
+            // Also listen for changes which come from the tree. Changes in
+            // the tree will trigger a change in browse navigation state.
             $scope.$watch("treeModel.selectedObject", setNavigation);
-            
+
             // Clean up when the scope is destroyed
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);

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

@@ -37,7 +37,7 @@ define(
          */
         function NavigationService() {
             this.navigated = undefined;
-            this.callbacks = [];
+            this.callbacks = {};
         }
 
         /**
@@ -53,12 +53,20 @@ define(
          * @param {DomainObject} domainObject the domain object to navigate to
          */
         NavigationService.prototype.setNavigation = function (value) {
+            var canNavigate = true;
             if (this.navigated !== value) {
-                this.navigated = value;
+                canNavigate = (this.callbacks['before'] || [])
-                this.callbacks.forEach(function (callback) {
+                    .reduce(function (previous, callback) {
-                    callback(value);
+                        return callback(value) && previous;
-                });
+                    }, true);
+                if (canNavigate) {
+                    this.navigated = value;
+                    this.callbacks['after'].forEach(function (callback) {
+                        callback(value);
+                    });
+                }
             }
+            return canNavigate;
         };
 
         /**
@@ -67,9 +75,13 @@ define(
          * this changes.
          * @param {function} callback the callback to invoke when
          *        navigation state changes
+         * @param {string} [event=after] the navigation event to listen to.
+         * One of 'before' or 'after'.
          */
-        NavigationService.prototype.addListener = function (callback) {
+        NavigationService.prototype.addListener = function (callback, event) {
-            this.callbacks.push(callback);
+            event = event || 'after';
+            this.callbacks[event] = this.callbacks[event] || [];
+            this.callbacks[event].push(callback);
         };
 
         /**
@@ -77,9 +89,12 @@ define(
          * @param {function} callback the callback which should
          *        no longer be invoked when navigation state
          *        changes
+         * @param {string} [event=after] the navigation event to the
+         * callback is registered to. One of 'before' or 'after'.
          */
-        NavigationService.prototype.removeListener = function (callback) {
+        NavigationService.prototype.removeListener = function (callback, event) {
-            this.callbacks = this.callbacks.filter(function (cb) {
+            event = event || 'after';
+            this.callbacks[event] = this.callbacks[event].filter(function (cb) {
                 return cb !== callback;
             });
         };

platform/commonUI/edit/bundle.js

@@ -26,6 +26,7 @@ define([
     "./src/controllers/EditActionController",
     "./src/controllers/EditPanesController",
     "./src/controllers/ElementsController",
+    "./src/controllers/EditObjectController",
     "./src/directives/MCTBeforeUnload",
     "./src/actions/LinkAction",
     "./src/actions/EditAction",
@@ -48,6 +49,7 @@ define([
     EditActionController,
     EditPanesController,
     ElementsController,
+    EditObjectController,
     MCTBeforeUnload,
     LinkAction,
     EditAction,
@@ -106,6 +108,13 @@ define([
                     "depends": [
                         "$scope"
                     ]
+                },
+                {
+                    "key": "EditObjectController",
+                    "implementation": EditObjectController,
+                    "depends": [
+                        "$scope"
+                    ]
                 }
             ],
             "directives": [
@@ -206,6 +215,9 @@ define([
                     "template": editObjectTemplate,
                     "uses": [
                         "view"
+                    ],
+                    "gestures": [
+                        "drop"
                     ]
                 },
                 {

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

@@ -19,50 +19,52 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<mct-representation key="'topbar-edit'"
+<div class="abs l-flex-col" ng-controller="BrowseObjectController">
-                    mct-object="domainObject"
+    <div ng-controller="EditObjectController as editObjectController"
-                    ng-model="representation">
+         mct-before-unload="editObjectController.getUnloadWarning()"
-</mct-representation>
+         class="holder flex-elem l-flex-row object-browse-bar ">
-<div class="holder edit-area abs">
+        <div class="items-select left flex-elem l-flex-row grows">
-    <mct-split-pane class='contents abs' anchor='right'>
+            <mct-representation key="'back-arrow'"
-        <div class='split-pane-component pane left edit-main'>
+                                mct-object="domainObject"
-            <mct-toolbar name="mctToolbar"
+                                class="flex-elem l-back"></mct-representation>
-                         structure="toolbar.structure"
+            <mct-representation key="'object-header'"
-                         ng-model="toolbar.state">
+                                mct-object="domainObject"
-            </mct-toolbar>
+                                class="l-flex-row flex-elem grows object-header">
-            <mct-representation key="representation.selected.key"
-                                toolbar="toolbar"
-                                mct-object="representation.selected.key && domainObject"
-                                class="holder abs object-holder work-area">
             </mct-representation>
         </div>
-        <mct-splitter></mct-splitter>
+        <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
-        <div
+            <mct-representation key="'switcher'"
-            class='split-pane-component pane right edit-objects menus-to-left'
+                                mct-object="domainObject"
-            ng-controller='EditPanesController as editPanes'
+                                ng-model="representation">
-            >
+            </mct-representation>
-            <mct-split-pane class='contents abs' anchor='bottom'>
+            <!-- Temporarily, on mobile, the action buttons are hidden-->
-                <div
+            <mct-representation key="'action-group'"
-                    class="abs pane top accordion"
+                                mct-object="domainObject"
-                    ng-controller="ToggleController as toggle"
+                                parameters="{ category: 'view-control' }"
-                    >
+                                class="mobile-hide">
-                    <mct-container key="accordion" label="Library">
+            </mct-representation>
-                        <mct-representation key="'tree'"
-                                            mct-object="editPanes.getRoot()">
-                        </mct-representation>
-                    </mct-container>
-                </div>
-                <mct-splitter></mct-splitter>
-                <div
-                    class="abs pane bottom accordion"
-                    ng-controller="ToggleController as toggle"
-                    >
-                    <mct-container key="accordion" label="Elements">
-                        <mct-representation key="'edit-elements'" mct-object="domainObject">
-                        </mct-representation>
-                    </mct-container>
-                </div>
-            </mct-split-pane>
         </div>
-    </mct-split-pane>
+    </div>
+    <div class="holder l-flex-col flex-elem grows l-object-wrapper">
+        <div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
+            <!-- Toolbar and Save/Cancel buttons -->
+            <div class="l-edit-controls flex-elem l-flex-row flex-align-end">
+                <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/edit/res/templates/edit.html

@@ -21,7 +21,7 @@
 -->
 <div content="jquery-wrapper"
      class="abs holder-all edit-mode"
-     ng-controller="EditController as editMode"
+     ng-controller="EditObjectController as editMode"
      mct-before-unload="editMode.getUnloadWarning()">
 
     <mct-representation key="'edit-object'" mct-object="editMode.navigatedObject()">

platform/commonUI/edit/res/templates/inspector-edit.html

@@ -0,0 +1,80 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
+    <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-panel mobile-hide"></mct-splitter>
+            <div class="split-pane-component pane bottom">
+                <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>
+        </mct-split-pane>
+    </div><!--/ PaneController -->
+</span>

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

@@ -72,13 +72,26 @@ define(
          * Enter edit mode.
          */
         EditAction.prototype.perform = function () {
-            var editableObject;
+            var self = this;
             if (!this.domainObject.hasCapability("editor")) {
-                editableObject = new EditableDomainObject(this.domainObject, this.$q);
+                //TODO: This is only necessary because the drop gesture is
-                editableObject.getCapability('status').set('editing', true);
+                // wrapping the object itself, need to refactor this later.
-                this.navigationService.setNavigation(editableObject);
+                // All responsibility for switching into edit mode should be
+                // in the edit action, and not duplicated in the gesture
+                this.domainObject = new EditableDomainObject(this.domainObject, this.$q);
             }
-            //this.$location.path("/edit");
+            this.navigationService.setNavigation(this.domainObject);
+            this.domainObject.getCapability('status').set('editing', true);
+
+            //Register a listener to automatically cancel this edit action
+            //if the user navigates away from this object.
+            function cancelEditing(navigatedTo){
+                if (!navigatedTo || navigatedTo.getId() !== self.domainObject.getId()) {
+                    self.domainObject.getCapability('editor').cancel();
+                    self.navigationService.removeListener(cancelEditing);
+                }
+            }
+            this.navigationService.addListener(cancelEditing);
         };
 
         /**

platform/commonUI/edit/src/controllers/EditObjectController.js

@@ -0,0 +1,65 @@
+/*****************************************************************************
+ * 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*/
+
+/**
+ * This bundle implements Edit mode.
+ * @namespace platform/commonUI/edit
+ */
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * Controller which is responsible for populating the scope for
+         * Edit mode
+         * @memberof platform/commonUI/edit
+         * @constructor
+         */
+        function EditObjectController($scope) {
+            this.scope = $scope;
+        }
+
+        /**
+         * Get the warning to show if the user attempts to navigate
+         * away from Edit mode while unsaved changes are present.
+         * @returns {string} the warning to show, or undefined if
+         *          there are no unsaved changes
+         */
+        EditObjectController.prototype.getUnloadWarning = function () {
+            var navigatedObject = this.scope.domainObject,
+                editorCapability = navigatedObject &&
+                    navigatedObject.getCapability("editor"),
+                statusCapability = navigatedObject &&
+                    navigatedObject.getCapability("status"),
+                hasChanges = statusCapability && statusCapability.get('editing')
+                    && editorCapability && editorCapability.dirty();
+
+            return hasChanges ?
+                "Unsaved changes will be lost if you leave this page." :
+                undefined;
+        };
+
+        return EditObjectController;
+    }
+);

platform/commonUI/edit/src/directives/MCTBeforeUnload.js

@@ -35,7 +35,7 @@ define(
          * @constructor
          * @param $window the window
          */
-        function MCTBeforeUnload($window) {
+        function MCTBeforeUnload($window, navigationService) {
             var unloads = [],
                 oldBeforeUnload = $window.onbeforeunload;
 
@@ -57,6 +57,7 @@ define(
 
                 // Stop using this unload expression
                 function removeUnload() {
+                    navigationService.removeListener(checkNavigationEvent, "before");
                     unloads = unloads.filter(function (callback) {
                         return callback !== unload;
                     });
@@ -65,17 +66,28 @@ define(
                     }
                 }
 
-                // Show a dialog before allowing a location change
+                function shouldAllowNavigation(){
-                function checkLocationChange(event) {
                     // Get an unload message (if any)
                     var warning = unload();
                     // Prompt the user if there's an unload message
-                    if (warning && !$window.confirm(warning)) {
+                    return !warning || $window.confirm(warning);
-                        // ...and prevent the route change if it was confirmed
+                }
+
+                // Show a dialog before allowing a location change
+                function checkLocationChange(event) {
+                    if (!shouldAllowNavigation()) {
+                        // Prevent the route change if it was confirmed
                         event.preventDefault();
                     }
                 }
 
+                // Show a dialog before allowing a location change
+                function checkNavigationEvent(event) {
+                    // Return a false value to the navigationService to
+                    // indicate that the navigation event should be prevented
+                    return shouldAllowNavigation();
+                }
+
                 // If this is the first active instance of this directive,
                 // register as the window's beforeunload handler
                 if (unloads.length === 0) {
@@ -90,6 +102,8 @@ define(
 
                 // Also handle route changes
                 scope.$on("$locationChangeStart", checkLocationChange);
+
+                navigationService.addListener(checkNavigationEvent, "before");
             }
 
             return {

platform/commonUI/edit/src/representers/EditRepresenter.js

@@ -49,6 +49,7 @@ define(
             var self = this;
 
             this.scope = scope;
+            this.listenHandle = undefined;
 
             // Mutate and persist a new version of a domain object's model.
             function doPersist(model) {
@@ -100,10 +101,13 @@ define(
             // Place the "commit" method in the scope
             scope.commit = commit;
             scope.setEditable = setEditable;
+
         }
 
         // Handle a specific representation of a specific domain object
         EditRepresenter.prototype.represent = function represent(representation, representedObject) {
+            var scope = this.scope,
+                self = this;
             // Track the key, to know which view configuration to save to.
             this.key = (representation || {}).key;
             // Track the represented object
@@ -113,11 +117,26 @@ define(
 
             // Ensure existing watches are released
             this.destroy();
+
+            /**
+             * Listen for changes in object state. If the object becomes
+             * editable then change the view and inspector regions
+             * object representation accordingly
+             */
+            this.listenHandle = this.domainObject.getCapability('status').listen(function(statuses){
+                if (statuses.indexOf('editing')!=-1){
+                    scope.viewRegionTemplate = 'edit-object';
+                    scope.inspectorRegionTemplate = 'inspector-edit'
+                } else {
+                    delete scope.viewRegionTemplate;
+                }
+            });
         };
 
         // Respond to the destruction of the current representation.
         EditRepresenter.prototype.destroy = function destroy() {
             // Nothing to clean up
+            this.listenHandle && this.listenHandle();
         };
 
         return EditRepresenter;

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

@@ -0,0 +1,64 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
+    <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><!--/ PaneController -->
+</span>

platform/representation/src/gestures/DropGesture.js

@@ -165,16 +165,18 @@ define(
                     if (shouldCreateVirtualPanel(domainObject, selectedObject)){
                         editableDomainObject = createVirtualPanel(domainObject, selectedObject);
                         if (editableDomainObject) {
-                            navigationService.setNavigation(editableDomainObject);
+                            editableDomainObject.getCapability('action').perform('edit');
+                            //navigationService.setNavigation(editableDomainObject);
                             broadcastDrop(id, event);
-                            editableDomainObject.getCapability('status').set('editing', true);
+                            //editableDomainObject.getCapability('status').set('editing', true);
                         }
                     } else {
                         $q.when(action && action.perform()).then(function (result) {
                             //Don't go into edit mode for folders
                             if (domainObjectType!=='folder') {
-                                navigationService.setNavigation(editableDomainObject);
+                               // navigationService.setNavigation(editableDomainObject);
-                                editableDomainObject.getCapability('status').set('editing', true);
+                                //editableDomainObject.getCapability('status').set('editing', true);
+                                editableDomainObject.getCapability('action').perform('edit');
                             }
                             broadcastDrop(id, event);
                         });