Preview instead of navigate in edit mode + highlight navigated object (#2252)

* Preview instead of navigate when in edit mode.

* Prevent preview of navigated object

* Removed trailing comma

* Observe navigation from tree items instead of mct-tree

* Cleanup of redundant code

* .is-selected -> .is-navigated-object

src/ui/layout/tree-item.vue

@@ -1,7 +1,7 @@
 <template>
     <li class="c-tree__item-h">
         <div class="c-tree__item"
-            :class="{ 'is-alias': isAlias }">
+            :class="{ 'is-alias': isAlias, 'is-navigated-object': isNavigated }">
             <view-control class="c-tree__item__view-control"
                           :enabled="hasChildren"
                           v-model="expanded">
@@ -31,10 +31,13 @@
             node: Object
         },
         data() {
+            this.pathToObject = this.buildPathString(this.node.objectPath);
+
             return {
                 hasChildren: false,
                 isLoading: false,
                 loaded: false,
+                isNavigated: this.pathToObject === this.openmct.router.currentLocation.path,
                 children: [],
                 expanded: false
             }
@@ -47,7 +50,7 @@
                 }
                 let parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
                 return parentKeyString !== this.node.object.location;
-            }
+            },
         },
         mounted() {
             // TODO: should update on mutation.
@@ -65,11 +68,14 @@
             if (this.openmct.composition.get(this.node.object)) {
                 this.hasChildren = true;
             }
+
+            this.openmct.router.on('change:path', this.highlightIfNavigated);
         },
         destroy() {
             if (this.composition) {
                 this.composition.off('add', this.addChild);
                 this.composition.off('remove', this.removeChild);
+                this.openmct.router.off('change:path', this.highlightIfNavigated);
                 delete this.composition;
             }
         },
@@ -102,6 +108,18 @@
             finishLoading () {
                 this.isLoading = false;
                 this.loaded = true;
+            },
+            buildPathString(path) {
+                return '/browse/' + path.map(o => o && this.openmct.objects.makeKeyString(o.identifier))
+                    .reverse()
+                    .join('/');
+            },
+            highlightIfNavigated(newPath, oldPath){
+                if (newPath === this.pathToObject) {
+                    this.isNavigated = true;
+                } else if (oldPath === this.pathToObject) {
+                    this.isNavigated = false;
+                }
             }
         },
         components: {