Removing star listeners

index.html

@@ -37,7 +37,6 @@
         const FIVE_MINUTES = 5 * 60 * 1000;
         const THIRTY_MINUTES = 30 * 60 * 1000;
 
-        openmct.install(openmct.plugins.Themes());
         [
             'example/eventGenerator',
             'example/styleguide'

package.json

@@ -27,7 +27,6 @@
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
     "fast-sass-loader": "1.4.6",
-    "fibers": "^4.0.2",
     "file-loader": "^1.1.11",
     "file-saver": "^1.3.8",
     "git-rev-sync": "^1.4.0",
@@ -61,10 +60,8 @@
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "request": "^2.69.0",
-    "sass": "^1.23.7",
-    "sass-loader": "^8.0.0",
     "split": "^1.0.0",
-    "style-loader": "^1.0.1",
+    "style-loader": "^0.21.0",
     "v8-compile-cache": "^1.1.0",
     "vue": "2.5.6",
     "vue-loader": "^15.2.6",

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

@@ -6,7 +6,7 @@ define([], function () {
 
     SaveInProgressDialog.prototype.show = function () {
         this.dialog = this.dialogService.showBlockingMessage({
-            title: "Saving",
+            title: "Saving...",
             hint: "Do not navigate away from this page or close this browser tab while this message is displayed.",
             unknownProgress: true,
             severity: "info",

platform/import-export/bundle.js

@@ -72,8 +72,6 @@ define([
                     ]
                 }
             });
-
-            openmct.legacyRegistry.enable('platform/import-export');
         };
     };
 });

src/MCT.js

@@ -215,7 +215,7 @@ define([
          * @memberof module:openmct.MCT#
          * @name objects
          */
-        this.objects = new api.ObjectAPI();
+        this.objects = new api.ObjectAPI(this.types);
 
         /**
          * An interface for retrieving and interpreting telemetry data associated

src/adapter/services/LegacyObjectAPIInterceptor.js

@@ -60,7 +60,8 @@ define([
             var newStyleObject = utils.toNewFormat(legacyObject.getModel(), legacyObject.getId()),
                 keystring = utils.makeKeyString(newStyleObject.identifier);
 
-            this.eventEmitter.emit(keystring + ":*", newStyleObject);
+            this.eventEmitter.emit(keystring + ':$_synchronize_model', newStyleObject);
+            this.eventEmitter.emit(keystring + ':*', newStyleObject);
             this.eventEmitter.emit('mutation', newStyleObject);
         }.bind(this);
 

src/api/composition/CompositionCollection.js

@@ -21,9 +21,11 @@
  *****************************************************************************/
 
 define([
-    'lodash'
+    'lodash',
+    '../objects/MutableDomainObject'
 ], function (
-    _
+    _,
+    MutableDomainObject
 ) {
     /**
      * A CompositionCollection represents the list of domain objects contained
@@ -60,6 +62,17 @@ define([
         };
         this.onProviderAdd = this.onProviderAdd.bind(this);
         this.onProviderRemove = this.onProviderRemove.bind(this);
+        this.mutables = {};
+
+        if (this.domainObject instanceof MutableDomainObject.default &&
+            this.publicAPI.objects.isMutable(this.domainObject)) {
+            this.returnMutables = true;
+            this.domainObject.$observe('$_destroy', () => {
+                Object.values(this.mutables).forEach(mutable => {
+                    mutable.$destroy();
+                });
+            });
+        }
     }
 
     /**
@@ -74,9 +87,6 @@ define([
         if (!this.listeners[event]) {
             throw new Error('Event not supported by composition: ' + event);
         }
-        if (!this.mutationListener) {
-            this._synchronize();
-        }
         if (this.provider.on && this.provider.off) {
             if (event === 'add') {
                 this.provider.on(
@@ -132,8 +142,6 @@ define([
 
         this.listeners[event].splice(index, 1);
         if (this.listeners[event].length === 0) {
-            this._destroy();
-
             // Remove provider listener if this is the last callback to
             // be removed.
             if (this.provider.off && this.provider.on) {
@@ -182,6 +190,13 @@ define([
             }
             this.provider.add(this.domainObject, child.identifier);
         } else {
+            if (this.returnMutables && this.publicAPI.objects.isMutable(child)) {
+                let keyString = this.publicAPI.objects.makeKeyString(child.identifier);
+                if (this.publicAPI.objects.isMutable(child)) {
+                    child = this.publicAPI.objects.mutable(child);
+                    this.mutables[keyString] = child;
+                }
+            }
             this.emit('add', child);
         }
     };
@@ -195,6 +210,7 @@ define([
      * @name load
      */
     CompositionCollection.prototype.load = function () {
+        this.cleanUpMutables();
         return this.provider.load(this.domainObject)
             .then(function (children) {
                 return Promise.all(children.map((c) => this.publicAPI.objects.get(c)));
@@ -225,6 +241,13 @@ define([
         if (!skipMutate) {
             this.provider.remove(this.domainObject, child.identifier);
         } else {
+            if (this.returnMutables && this.publicAPI.objects.isMutable(child)) {
+                let keyString = this.publicAPI.objects.makeKeyString(child);
+                if (this.mutables[keyString] !== undefined) {
+                    this.mutables[keyString].$destroy();
+                    delete this.mutables[keyString];
+                }
+            }
             this.emit('remove', child);
         }
     };
@@ -271,19 +294,6 @@ define([
         this.remove(child, true);
     };
 
-    CompositionCollection.prototype._synchronize = function () {
-        this.mutationListener = this.publicAPI.objects.observe(this.domainObject, '*', (newDomainObject) => {
-            this.domainObject = JSON.parse(JSON.stringify(newDomainObject));
-        });
-    };
-
-    CompositionCollection.prototype._destroy = function () {
-        if (this.mutationListener) {
-            this.mutationListener();
-            delete this.mutationListener;
-        }
-    };
-
     /**
      * Emit events.
      * @private
@@ -298,5 +308,11 @@ define([
         });
     };
 
+    CompositionCollection.prototype.cleanUpMutables = function () {
+        Object.values(this.mutables).forEach(mutable => {
+            mutable.$destroy();
+        });
+    }
+
     return CompositionCollection;
 });

src/api/objects/MutableDomainObject.js

@@ -0,0 +1,105 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import _ from 'lodash';
+import utils from './object-utils.js';
+
+const ANY_OBJECT_EVENT = 'mutation';
+
+class MutableDomainObject {
+    constructor(eventEmitter) {
+        Object.defineProperties(this, {
+            _eventEmitter: {
+                value: eventEmitter,
+                // Property should not be serialized
+                enumerable: false
+            },
+            _observers: {
+                value: [],
+                // Property should not be serialized
+                enumerable: false
+            },
+            isMutable: {
+                value: true,
+                // Property should not be serialized
+                enumerable: false
+            }
+        });
+    }
+    $observe(path, callback) {
+        var fullPath = qualifiedEventName(this, path);
+        var eventOff =
+            this._eventEmitter.off.bind(this._eventEmitter, fullPath, callback);
+
+        this._eventEmitter.on(fullPath, callback);
+        this._observers.push(eventOff);
+
+        return eventOff;
+    }
+    $set(path, value) {
+        _.set(this, path, value);
+        _.set(this, 'modified', Date.now());
+
+        //Emit secret synchronization event first, so that all objects are in sync before subsequent events fired.
+        this._eventEmitter.emit(qualifiedEventName(this, '$_synchronize_model'), this);
+
+        //Emit a general "any object" event
+        this._eventEmitter.emit(ANY_OBJECT_EVENT, this);
+        //Emit wildcard event, with path so that callback knows what changed
+        this._eventEmitter.emit(qualifiedEventName(this, '*'), this, path, value);
+
+        //Emit events specific to properties affected
+        let parentPropertiesList = path.split('.');
+        for (let index = parentPropertiesList.length; index > 0; index--) {
+            let parentPropertyPath = parentPropertiesList.slice(0, index).join('.');
+            this._eventEmitter.emit(qualifiedEventName(this, parentPropertyPath), _.get(this, parentPropertyPath));
+        }
+
+        //TODO: Emit events for listeners of child properties when parent changes.
+        // Do it at observer time - also register observers for parent attribute path.
+    }
+    $destroy() {
+        this._observers.forEach(observer => observer());
+        delete this._eventEmitter;
+        delete this._observers;
+        this._eventEmitter.emit(qualifiedEventName(this, '$_destroy'));
+    }
+
+    static createMutable(object, mutationTopic) {
+        let mutable = Object.create(new MutableDomainObject(mutationTopic));
+        Object.assign(mutable, object);
+        mutable.$observe('$_synchronize_model', (updatedObject) => {
+            let clone = JSON.parse(JSON.stringify(updatedObject));
+            let deleted = _.difference(Object.keys(updatedObject), Object.keys(updatedObject));
+            deleted.forEach((propertyName) => delete mutable[propertyName]);
+            Object.assign(mutable, clone);
+        })
+        return mutable;
+    }
+}
+
+function qualifiedEventName(object, eventName) {
+    var keystring = utils.makeKeyString(object.identifier);
+
+    return [keystring, eventName].join(':');
+}
+
+export default MutableDomainObject;

src/api/objects/MutableObject.js

@@ -1,102 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './object-utils.js',
-    'lodash'
-], function (
-    utils,
-    _
-) {
-    var ANY_OBJECT_EVENT = "mutation";
-
-    /**
-     * The MutableObject wraps a DomainObject and provides getters and
-     * setters for
-     * @param eventEmitter
-     * @param object
-     * @interface MutableObject
-     */
-    function MutableObject(eventEmitter, object) {
-        this.eventEmitter = eventEmitter;
-        this.object = object;
-        this.unlisteners = [];
-    }
-
-    function qualifiedEventName(object, eventName) {
-        var keystring = utils.makeKeyString(object.identifier);
-
-        return [keystring, eventName].join(':');
-    }
-
-    MutableObject.prototype.stopListening = function () {
-        this.unlisteners.forEach(function (unlisten) {
-            unlisten();
-        });
-        this.unlisteners = [];
-    };
-
-    /**
-     * Observe changes to this domain object.
-     * @param {string} path the property to observe
-     * @param {Function} callback a callback to invoke when new values for
-     *        this property are observed
-     * @method on
-     * @memberof module:openmct.MutableObject#
-     */
-    MutableObject.prototype.on = function (path, callback) {
-        var fullPath = qualifiedEventName(this.object, path);
-        var eventOff =
-            this.eventEmitter.off.bind(this.eventEmitter, fullPath, callback);
-
-        this.eventEmitter.on(fullPath, callback);
-        this.unlisteners.push(eventOff);
-    };
-
-    /**
-     * Modify this domain object.
-     * @param {string} path the property to modify
-     * @param {*} value the new value for this property
-     * @method set
-     * @memberof module:openmct.MutableObject#
-     */
-    MutableObject.prototype.set = function (path, value) {
-        _.set(this.object, path, value);
-        _.set(this.object, 'modified', Date.now());
-
-        var handleRecursiveMutation = function (newObject) {
-            this.object = newObject;
-        }.bind(this);
-
-        //Emit wildcard event
-        this.eventEmitter.emit(qualifiedEventName(this.object, '*'), this.object);
-        //Emit a general "any object" event
-        this.eventEmitter.emit(ANY_OBJECT_EVENT, this.object);
-
-        this.eventEmitter.on(qualifiedEventName(this.object, '*'), handleRecursiveMutation);
-        //Emit event specific to property
-        this.eventEmitter.emit(qualifiedEventName(this.object, path), value);
-        this.eventEmitter.off(qualifiedEventName(this.object, '*'), handleRecursiveMutation);
-    };
-
-    return MutableObject;
-});

src/api/objects/ObjectAPI.js

@@ -23,14 +23,14 @@
 define([
     'lodash',
     './object-utils',
-    './MutableObject',
+    './MutableDomainObject',
     './RootRegistry',
     './RootObjectProvider',
     'EventEmitter'
 ], function (
     _,
     utils,
-    MutableObject,
+    MutableDomainObject,
     RootRegistry,
     RootObjectProvider,
     EventEmitter
@@ -43,7 +43,8 @@ define([
      * @memberof module:openmct
      */
 
-    function ObjectAPI() {
+    function ObjectAPI(typeRegistry) {
+        this.typeRegistry = typeRegistry;
         this.eventEmitter = new EventEmitter();
         this.providers = {};
         this.rootRegistry = new RootRegistry();
@@ -157,6 +158,19 @@ define([
         return provider.get(identifier);
     };
 
+    /**
+     * Will fetch object, returning it as a MutableDomainObject IF the object is mutable.
+     */
+    ObjectAPI.prototype.getAsMutable = function (identifier) {
+        return this.get(identifier).then((object) => {
+            if (this.isMutable(object)) {
+                return this.mutable(object);
+            } else {
+                return object;
+            }
+        });
+    }
+
     ObjectAPI.prototype.delete = function () {
         throw new Error('Delete not implemented');
     };
@@ -177,6 +191,20 @@ define([
         this.rootRegistry.addRoot(key);
     };
 
+    ObjectAPI.prototype.mutable = function (object) {
+        if (!this.isMutable) {
+            throw `Error: Attempted to create mutable from immutable object ${object.name}`;
+        }
+        return MutableDomainObject.default.createMutable(object, this.eventEmitter);
+    }
+
+    ObjectAPI.prototype.isMutable = function (object) {
+        // Checking for mutability is a bit broken right now. This is an 80% solution,
+        // but does not work in many cases.
+        const type = this.typeRegistry.get(object.type);
+        return type && type.definition.creatable === true;
+    }
+
     /**
      * Modify a domain object.
      * @param {module:openmct.DomainObject} object the object to mutate
@@ -186,9 +214,17 @@ define([
      * @memberof module:openmct.ObjectAPI#
      */
     ObjectAPI.prototype.mutate = function (domainObject, path, value) {
-        var mutableObject =
-            new MutableObject(this.eventEmitter, domainObject);
-        return mutableObject.set(path, value);
+        if (!this.isMutable(domainObject)) {
+            throw `Error: Attempted to mutate immutable object ${domainObject.name}`;
+        }
+        console.warn('DEPRECATION WARNING: The .mutate() function in the Object API is now deprecated. Please use mutable() ');
+        if (domainObject instanceof MutableDomainObject.default) {
+            domainObject.$set(path, value);
+        } else {
+            let mutable = this.mutable(domainObject);
+            mutable.$set(path, value);
+            mutable.$destroy();
+        }
     };
 
     /**
@@ -201,10 +237,14 @@ define([
      * @memberof module:openmct.ObjectAPI#
      */
     ObjectAPI.prototype.observe = function (domainObject, path, callback) {
-        var mutableObject =
-            new MutableObject(this.eventEmitter, domainObject);
-        mutableObject.on(path, callback);
-        return mutableObject.stopListening.bind(mutableObject);
+        console.warn('DEPRECATION WARNING: The .observe() function in the Object API is now deprecated. Please use mutable() ');
+        if (domainObject instanceof MutableDomainObject.default) {
+            return domainObject.$observe(path, callback);
+        } else {
+            let mutable = this.mutable(domainObject);
+            mutable.$observe(path, callback);
+            return () => mutable.$destroy();
+        }
     };
 
     /**

src/api/objects/ObjectAPISpec.js

@@ -0,0 +1,121 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    './ObjectAPI'
+], function (
+    ObjectAPI
+) {
+    fdescribe('The Object API', function () {
+        describe('Mutable Object', function () {
+            let testObject;
+            let mutable;
+            let objectAPI;
+
+            beforeEach(function () {
+                objectAPI = new ObjectAPI();
+                testObject = {
+                    identifier: {
+                        namespace: 'test-namespace',
+                        key: 'test-key'
+                    },
+                    otherAttribute: 'other-attribute-value',
+                    objectAttribute: {
+                        embeddedObject: {
+                            embeddedKey: 'embedded-value'
+                        }
+                    }
+                };
+                mutable = objectAPI.mutable(testObject);
+            });
+
+            it('retains own properties', function () {
+                expect(mutable.hasOwnProperty('identifier')).toBe(true);
+                expect(mutable.hasOwnProperty('otherAttribute')).toBe(true);
+                expect(mutable.identifier).toEqual(testObject.identifier);
+                expect(mutable.otherAttribute).toEqual(testObject.otherAttribute);
+            });
+
+            it('is identical to original object when serialized', function () {
+                expect(JSON.stringify(mutable)).toEqual(JSON.stringify(testObject));
+            });
+
+            it('is identical to original object when serialized', function () {
+                expect(JSON.stringify(mutable)).toEqual(JSON.stringify(testObject));
+            });
+
+            describe('uses events', function () {
+                let testObjectDuplicate;
+                let mutableSecondInstance;
+
+                beforeEach(function () {
+                    // Duplicate object to guarantee we are not sharing object instance, which would invalidate test
+                    testObjectDuplicate = JSON.parse(JSON.stringify(testObject));
+                    mutableSecondInstance = objectAPI.mutable(testObjectDuplicate);
+                });
+
+                it('to stay synchronized when mutated', function () {
+                    mutable.$set('otherAttribute', 'new-attribute-value');
+                    expect(mutableSecondInstance.otherAttribute).toBe('new-attribute-value');
+                });
+
+                it('to indicate when a property changes', function () {
+                    let mutationCallback = jasmine.createSpy('mutation-callback');
+
+                    return new Promise(function (resolve) {
+                        mutationCallback.and.callFake(resolve);
+                        mutableSecondInstance.observe('otherAttribute', mutationCallback);
+                        mutable.$set('otherAttribute', 'some-new-value')
+                    }).then(function () {
+                        expect(mutationCallback).toHaveBeenCalledWith('some-new-value');
+                    });
+                });
+
+                it('to indicate when a child property has changed', function () {
+                    let embeddedKeyCallback = jasmine.createSpy('embeddedKeyCallback');
+                    let embeddedObjectCallback = jasmine.createSpy('embeddedObjectCallback');
+                    let objectAttributeCallback = jasmine.createSpy('objectAttribute');
+
+                    return new Promise(function (resolve) {
+                        objectAttributeCallback.and.callFake(resolve);
+
+                        mutableSecondInstance.observe('objectAttribute.embeddedObject.embeddedKey', embeddedKeyCallback);
+                        mutableSecondInstance.observe('objectAttribute.embeddedObject', embeddedObjectCallback);
+                        mutableSecondInstance.observe('objectAttribute', objectAttributeCallback);
+
+                        mutable.$set('objectAttribute.embeddedObject.embeddedKey', 'updated-embedded-value');
+                    }).then(function () {
+                        expect(embeddedKeyCallback).toHaveBeenCalledWith('updated-embedded-value');
+                        expect(embeddedObjectCallback).toHaveBeenCalledWith({
+                            embeddedKey: 'updated-embedded-value'
+                        });
+                        expect(objectAttributeCallback).toHaveBeenCalledWith({
+                            embeddedObject: {
+                                embeddedKey: 'updated-embedded-value'
+                            }
+                        });
+                    });
+                });
+            });
+        });
+    })
+});

src/api/overlays/ProgressDialog.js

@@ -1,31 +1,25 @@
-import ProgressDialogComponent from './components/ProgressDialogComponent.vue';
+import ProgressComponent from '../../ui/components/ProgressBar.vue';
 import Overlay from './Overlay';
 import Vue from 'vue';
 
 var component;
 
 class ProgressDialog extends Overlay {
-    constructor({progressPerc, progressText, iconClass, message, title, hint, timestamp, ...options}) {
+    constructor({progressPerc, progressText, ...options}) {
+
         component = new Vue({
-            provide: {
-                iconClass,
-                message,
-                title,
-                hint,
-                timestamp
-            },
             components: {
-                ProgressDialogComponent: ProgressDialogComponent
+                ProgressComponent: ProgressComponent
             },
             data() {
                 return {
                     model: {
                         progressPerc: progressPerc || 0,
-                        progressText
+                        progressText: progressText
                     }
                 }
             },
-            template: '<progress-dialog-component :model="model"></progress-dialog-component>'
+            template: '<progress-component :model="model"></progress-component>'
         }).$mount();
 
         super({

src/api/overlays/components/DialogComponent.vue

@@ -20,12 +20,13 @@
                  v-if="message">
                 {{message}}
             </div>
-            <slot></slot>
         </div>
     </div>
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     @mixin legacyMessage() {
         flex: 0 1 auto;
         font-family: symbolsfont;
@@ -43,7 +44,7 @@
 
         &__icon {
             // Holds a background SVG graphic
-            $s: 80px;
+            $s: 50px;
             flex: 0 0 auto;
             min-width: $s;
             min-height: $s;
@@ -60,13 +61,9 @@
         }
 
         // __text elements
+        &__title,
         &__action-text {
-            font-size: 1.2em;
-        }
-
-        &__title {
-            font-size: 1.5em;
-            font-weight: bold;
+            font-size: 1.2em; // TEMP
         }
 
         &--simple {

src/api/overlays/components/OverlayComponent.vue

@@ -8,15 +8,12 @@
                 v-if="dismissable"
                 @click="destroy">
             </button>
-            <div class="c-overlay__contents" ref="element" tabindex="0"></div>
+            <div class="c-overlay__contents" ref="element"></div>
             <div class="c-overlay__button-bar" v-if="buttons">
                 <button class="c-button"
-                        tabindex="0"
-                        ref="buttons"
                         v-for="(button, index) in buttons"
                         :key="index"
-                        @focus="focusIndex=index"
-                        :class="{'c-button--major': focusIndex===index}"
+                        :class="{'c-button--major': button.emphasis}"
                         @click="buttonClickHandler(button.callback)">
                     {{button.label}}
                 </button>
@@ -26,6 +23,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     @mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
         position: absolute;
         top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;
@@ -70,7 +69,6 @@
             flex: 1 1 auto;
             display: flex;
             flex-direction: column;
-            outline: none;
             overflow: hidden;
         }
 
@@ -173,19 +171,9 @@
 
 <script>
     export default {
-        data: function () {
-            return {
-                focusIndex: -1
-            };
-        },
         inject: ['dismiss', 'element', 'buttons', 'dismissable'],
         mounted() {
-            const element = this.$refs.element;
-            element.appendChild(this.element);
-            const elementForFocus = this.getElementForFocus() || element;
-            this.$nextTick(() => {
-                elementForFocus.focus();
-            });
+            this.$refs.element.appendChild(this.element);
         },
         methods: {
             destroy: function () {
@@ -196,25 +184,6 @@
             buttonClickHandler: function (method) {
                 method();
                 this.$emit('destroy');
-            },
-            getElementForFocus: function () {
-                const defaultElement = this.$refs.element;;
-                if (!this.$refs.buttons) {
-                    return defaultElement;
-                }
-
-                const focusButton = this.$refs.buttons.filter((button, index) => {
-                    if (this.buttons[index].emphasis) {
-                        this.focusIndex = index;
-                    }
-                    return this.buttons[index].emphasis;
-                });
-
-                if (!focusButton.length) {
-                    return defaultElement;
-                }
-
-                return focusButton[0];
             }
         }
     }

src/api/overlays/components/ProgressDialogComponent.vue

@@ -1,22 +0,0 @@
-<template>
-    <dialog-component>
-        <progress-component :model="model"></progress-component>
-    </dialog-component>
-</template>
-
-<style lang="scss">
-</style>
-
-<script>
-import ProgressComponent from '../../../ui/components/ProgressBar.vue';
-import DialogComponent from './DialogComponent.vue';
-
-export default {
-    components: {
-        DialogComponent: DialogComponent,
-        ProgressComponent: ProgressComponent,
-    },
-    inject:['iconClass', 'title', 'hint', 'timestamp', 'message'],
-    props:['model']
-}
-</script>

src/plugins/LADTable/LADTableSetViewProvider.js

@@ -38,7 +38,7 @@ define([
             canEdit: function (domainObject) {
                 return domainObject.type === 'LadTableSet';
             },
-            view: function (domainObject, objectPath) {
+            view: function (domainObject, isEditing, objectPath) {
                 let component;
 
                 return {

src/plugins/LADTable/LADTableViewProvider.js

@@ -38,7 +38,7 @@ define([
             canEdit: function (domainObject) {
                 return domainObject.type === 'LadTable';
             },
-            view: function (domainObject, objectPath) {
+            view: function (domainObject, isEditing, objectPath) {
                 let component;
 
                 return {

src/plugins/LADTable/components/LADRow.vue

@@ -23,7 +23,7 @@
 
 <template>
     <tr @contextmenu.prevent="showContextMenu">
-        <td>{{name}}</td>
+        <td>{{domainObject.name}}</td>
         <td>{{timestamp}}</td>
         <td :class="valueClass">
             {{value}}
@@ -50,7 +50,6 @@ export default {
         currentObjectPath.unshift(this.domainObject);
 
         return {
-            name: this.domainObject.name,
             timestamp: '---',
             value: '---',
             valueClass: '',
@@ -70,9 +69,6 @@ export default {
                 this.valueClass = '';
             }
         },
-        updateName(name){
-            this.name = name;
-        },
         updateTimeSystem(timeSystem) {
             this.value = '---';
             this.timestamp = '---';
@@ -98,14 +94,6 @@ export default {
             .telemetry
             .limitEvaluator(this.domainObject);
 
-        this.stopWatchingMutation = openmct
-            .objects
-            .observe(
-                this.domainObject,
-                '*',
-                this.updateName
-            );
-
         this.openmct.time.on('timeSystem', this.updateTimeSystem);
 
         this.timestampKey = this.openmct.time.timeSystem().key;
@@ -126,7 +114,6 @@ export default {
             .then((array) => this.updateValues(array[array.length - 1]));
     },
     destroyed() {
-        this.stopWatchingMutation();
         this.unsubscribe();
         this.openmct.off('timeSystem', this.updateTimeSystem);
     }

src/plugins/displayLayout/AlphanumericFormatViewProvider.js

@@ -46,7 +46,7 @@ define([
 
                 return selection.every(isTelemetryObject);
             },
-            view: function (domainObject, objectPath) {
+            view: function (domainObject, isEditing, objectPath) {
                 let component;
                 return {
                     show: function (element) {

src/plugins/displayLayout/components/BoxView.vue

@@ -32,6 +32,8 @@
  </template>
 
 <style lang="scss">
+    @import '~styles/sass-base';
+
     .c-box-view {
         display: flex;
         align-items: stretch;

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -60,6 +60,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     @mixin displayMarquee($c) {
         > .c-frame-edit {
             // All other frames
@@ -174,9 +176,8 @@
 
     export default {
         data() {
-            let domainObject = JSON.parse(JSON.stringify(this.domainObject));
             return {
-                internalDomainObject: domainObject,
+                internalDomainObject: this.domainObject,
                 initSelectIndex: undefined,
                 selection: []
             };
@@ -564,9 +565,6 @@
             }
         },
         mounted() {
-            this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) {
-                this.internalDomainObject = JSON.parse(JSON.stringify(obj));
-            }.bind(this));
             this.openmct.selection.on('change', this.setSelection);
             this.initializeItems();
             this.composition = this.openmct.composition.get(this.internalDomainObject);
@@ -578,7 +576,6 @@
             this.openmct.selection.off('change', this.setSelection);
             this.composition.off('add', this.addChild);
             this.composition.off('remove', this.removeChild);
-            this.unlisten();
         }
     }
 </script>

src/plugins/displayLayout/components/EditMarquee.vue

@@ -35,6 +35,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-frame-edit {
         // In Layouts, this is the editing rect and handles
         display: none; // Set to display: block in DisplayLayout.vue

src/plugins/displayLayout/components/ImageView.vue

@@ -32,6 +32,7 @@
  </template>
 
 <style lang="scss">
+    @import '~styles/sass-base';
 
     .c-image-view {
         background-size: cover;

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -37,6 +37,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     /******************* FRAME */
     .c-frame {
         display: flex;

src/plugins/displayLayout/components/SubobjectView.vue

@@ -113,10 +113,13 @@
             }
         },
         mounted() {
-            this.openmct.objects.get(this.item.identifier)
+            this.openmct.objects.getAsMutable(this.item.identifier)
                 .then(this.setObject);
         },
         destroyed() {
+            if (this.domainObject.$destroy) {
+                this.domainObject.$destroy();
+            }
             if (this.removeSelectable) {
                 this.removeSelectable();
             }

src/plugins/displayLayout/components/TelemetryView.vue

@@ -45,6 +45,7 @@
  </template>
 
 <style lang="scss">
+    @import '~styles/sass-base';
 
     .c-telemetry-view {
         display: flex;
@@ -247,12 +248,13 @@
             }
         },
         mounted() {
-            this.openmct.objects.get(this.item.identifier)
+            this.openmct.objects.getAsMutable(this.item.identifier)
                 .then(this.setObject);
             this.openmct.time.on("bounds", this.refreshData);
         },
         destroyed() {
             this.removeSubscription();
+            this.domainObject.$destroy();
 
             if (this.removeSelectable) {
                 this.removeSelectable();

src/plugins/displayLayout/components/TextView.vue

@@ -33,6 +33,7 @@
  </template>
 
 <style lang="scss">
+    @import '~styles/sass-base';
 
     .c-text-view {
         display: flex;

src/plugins/displayLayout/plugin.js

@@ -37,7 +37,7 @@ export default function DisplayLayoutPlugin(options) {
             canEdit: function (domainObject) {
                 return domainObject.type === 'layout';
             },
-            view: function (domainObject, objectPath) {
+            view: function (domainObject, isEditing, objectPath) {
                 let component;
                 return {
                     show(container) {

src/plugins/filters/components/FiltersView.vue

@@ -20,6 +20,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-inspector {
         .c-filter-indication {
             border-radius: $smallCr;
@@ -150,24 +152,25 @@
             },
             getGlobalFiltersToRemove(keyString) {
                 let filtersToRemove = new Set();
+                if (this.children[keyString]){
+                    this.children[keyString].metadataWithFilters.forEach(metadatum => {
+                        let keepFilter = false
+                        Object.keys(this.children).forEach(childKeyString => {
+                            if (childKeyString !== keyString) {
+                                let filterMatched = this.children[childKeyString].metadataWithFilters.some(childMetadatum => childMetadatum.key === metadatum.key);
 
-                this.children[keyString].metadataWithFilters.forEach(metadatum => {
-                    let keepFilter = false
-                    Object.keys(this.children).forEach(childKeyString => {
-                        if (childKeyString !== keyString) {
-                            let filterMatched = this.children[childKeyString].metadataWithFilters.some(childMetadatum => childMetadatum.key === metadatum.key);
-
-                            if (filterMatched) {
-                                keepFilter = true;
-                                return;
+                                if (filterMatched) {
+                                    keepFilter = true;
+                                    return;
+                                }
                             }
+                        });
+
+                        if (!keepFilter) {
+                            filtersToRemove.add(metadatum.key);
                         }
                     });
-
-                    if (!keepFilter) {
-                        filtersToRemove.add(metadatum.key);
-                    }
-                });
+                }
 
                 return Array.from(filtersToRemove);
             },
@@ -232,16 +235,14 @@
             this.composition.on('add', this.addChildren);
             this.composition.on('remove', this.removeChildren);
             this.composition.load();
-            this.unobserve = this.openmct.objects.observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
-            this.unobserveGlobalFilters = this.openmct.objects.observe(this.providedObject, 'configuration.globalFilters', this.updateGlobalFilters);
-            this.unobserveAllMutation = this.openmct.objects.observe(this.providedObject, '*', (mutatedObject) => this.providedObject = mutatedObject);
+            this.unobserve = this.providedObject.$observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
+            this.unobserveGlobalFilters = this.providedObject.$observe(this.providedObject, 'configuration.globalFilters', this.updateGlobalFilters);
         },
         beforeDestroy() {
             this.composition.off('add', this.addChildren);
             this.composition.off('remove', this.removeChildren);
             this.unobserve();
             this.unobserveGlobalFilters();
-            this.unobserveAllMutation();
         }
     }
 </script>

src/plugins/filters/components/GlobalFilters.vue

@@ -26,7 +26,9 @@
     </li>
 </template>
 
-<style lang="scss">    .c-filter-indication {
+<style lang="scss">
+    @import "~styles/sass-base";
+    .c-filter-indication {
         // Appears as a block element beneath tables
         @include userSelectNone();
         background: $colorFilterBg;

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -85,6 +85,7 @@
 </template>
 
 <style lang="scss">
+    @import '~styles/sass-base';
     
     @mixin containerGrippy($headerSize, $dir) {
         position: absolute;
@@ -628,9 +629,6 @@ export default {
                 return size;
             }
         },
-        updateDomainObject(newDomainObject) {
-            this.domainObject = newDomainObject;
-        },
         moveContainer(toIndex, event) {
             let containerId = event.dataTransfer.getData('containerid');
             let container = this.containers.filter(c => c.id === containerId)[0];
@@ -663,14 +661,10 @@ export default {
         this.composition.on('add', this.addFrame);
 
         this.RemoveAction = new RemoveAction(this.openmct);
-
-        this.unobserve = this.openmct.objects.observe(this.domainObject, '*', this.updateDomainObject);
     },
     beforeDestroy() {
         this.composition.off('remove', this.removeChildObject);
         this.composition.off('add', this.addFrame);
-
-        this.unobserve();
     }
 }
 </script>

src/plugins/flexibleLayout/components/frame.vue

@@ -108,7 +108,7 @@ export default {
     },
     mounted() {
         if (this.frame.domainObjectIdentifier) {
-            this.openmct.objects.get(this.frame.domainObjectIdentifier).then((object)=>{
+            this.openmct.objects.getAsMutable(this.frame.domainObjectIdentifier).then((object)=>{
                 this.setDomainObject(object);
             });
         }
@@ -116,6 +116,10 @@ export default {
         this.dragGhost = document.getElementById('js-fl-drag-ghost');
     },
     beforeDestroy() {
+        if (this.domainObject.$destroy) {
+            this.domainObject.$destroy();
+        }
+
         if (this.unsubscribeSelection) {
             this.unsubscribeSelection();
         }

src/plugins/folderView/components/GridItem.vue

@@ -23,6 +23,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     /******************************* GRID ITEMS */
     .c-grid-item {
         // Mobile-first

src/plugins/folderView/components/GridView.vue

@@ -9,6 +9,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     /******************************* GRID VIEW */
     .l-grid-view {
         display: flex;

src/plugins/folderView/components/ListItem.vue

@@ -15,6 +15,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     /******************************* LIST ITEM */
     .c-list-item {
         &__name a {

src/plugins/folderView/components/ListView.vue

@@ -53,6 +53,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     /******************************* LIST VIEW */
     .c-list-view {
         overflow-x: auto !important;

src/plugins/plot/res/templates/mct-plot.html

@@ -20,97 +20,94 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
-    <div class="c-plot-legend gl-plot-legend"
+    <div class="gl-plot-legend"
          ng-class="{ 'hover-on-plot': !!highlights.length }"
          ng-show="legend.get('position') !== 'hidden'">
-        <div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
+        <div class="gl-plot-legend__view-control c-disclosure-triangle is-enabled"
             ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
             ng-click="legend.set('expanded', !legend.get('expanded'));">
         </div>
 
-        <div class="c-plot-legend__wrapper">
+        <!-- COLLAPSED PLOT LEGEND -->
+        <div class="plot-wrapper-collapsed-legend"
+             ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
+            <div class="plot-legend-item"
+                  ng-repeat="series in series track by $index">
+                <div class="plot-series-swatch-and-name">
+                    <span class="plot-series-color-swatch"
+                          ng-style="{ 'background-color': series.get('color').asHexString() }">
+                    </span>
+                    <span class="plot-series-name">{{ series.get('name') }}</span>
+                </div>
+                <div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
+                     ng-class="{ 'cursor-hover': (legend.get('valueToShowWhenCollapsed').indexOf('nearest') != -1) }"
+                     ng-show="!!highlights.length && legend.get('valueToShowWhenCollapsed') !== 'none'">
+                    {{ legend.get('valueToShowWhenCollapsed') === 'nearestValue' ?
+                        series.formatY(series.closest) :
+                        legend.get('valueToShowWhenCollapsed') === 'nearestTimestamp' ?
+                             series.closest && series.formatX(series.closest) :
+                             series.formatY(series.get('stats')[legend.get('valueToShowWhenCollapsed') + 'Point']);
+                    }}
+                </div>
+            </div>
+        </div>
 
-            <!-- COLLAPSED PLOT LEGEND -->
-            <div class="plot-wrapper-collapsed-legend"
-                 ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
-                <div class="plot-legend-item"
-                      ng-repeat="series in series track by $index">
-                    <div class="plot-series-swatch-and-name">
+        <!-- EXPANDED PLOT LEGEND -->
+        <div class="plot-wrapper-expanded-legend">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th ng-if="legend.get('showTimestampWhenExpanded')">
+                            Timestamp
+                        </th>
+                        <th ng-if="legend.get('showValueWhenExpanded')">
+                            Value
+                        </th>
+                        <th ng-if="legend.get('showMinimumWhenExpanded')"
+                            class="mobile-hide">
+                            Min
+                        </th>
+                        <th ng-if="legend.get('showMaximumWhenExpanded')"
+                            class="mobile-hide">
+                            Max
+                        </th>
+                    </tr>
+                </thead>
+                <tr ng-repeat="series in series" class="plot-legend-item">
+                    <td class="plot-series-swatch-and-name"
+                        ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
                         <span class="plot-series-color-swatch"
                               ng-style="{ 'background-color': series.get('color').asHexString() }">
                         </span>
                         <span class="plot-series-name">{{ series.get('name') }}</span>
-                    </div>
-                    <div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
-                         ng-class="{ 'cursor-hover': (legend.get('valueToShowWhenCollapsed').indexOf('nearest') != -1) }"
-                         ng-show="!!highlights.length && legend.get('valueToShowWhenCollapsed') !== 'none'">
-                        {{ legend.get('valueToShowWhenCollapsed') === 'nearestValue' ?
-                            series.formatY(series.closest) :
-                            legend.get('valueToShowWhenCollapsed') === 'nearestTimestamp' ?
-                                 series.closest && series.formatX(series.closest) :
-                                 series.formatY(series.get('stats')[legend.get('valueToShowWhenCollapsed') + 'Point']);
-                        }}
-                    </div>
-                </div>
-            </div>
+                    </td>
 
-            <!-- EXPANDED PLOT LEGEND -->
-            <div class="plot-wrapper-expanded-legend">
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th ng-if="legend.get('showTimestampWhenExpanded')">
-                                Timestamp
-                            </th>
-                            <th ng-if="legend.get('showValueWhenExpanded')">
-                                Value
-                            </th>
-                            <th ng-if="legend.get('showMinimumWhenExpanded')"
-                                class="mobile-hide">
-                                Min
-                            </th>
-                            <th ng-if="legend.get('showMaximumWhenExpanded')"
-                                class="mobile-hide">
-                                Max
-                            </th>
-                        </tr>
-                    </thead>
-                    <tr ng-repeat="series in series" class="plot-legend-item">
-                        <td class="plot-series-swatch-and-name"
-                            ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
-                            <span class="plot-series-color-swatch"
-                                  ng-style="{ 'background-color': series.get('color').asHexString() }">
-                            </span>
-                            <span class="plot-series-name">{{ series.get('name') }}</span>
-                        </td>
-
-                        <td ng-if="legend.get('showTimestampWhenExpanded')">
-                            <span class="plot-series-value cursor-hover hover-value-enabled">
-                                {{ series.closest && series.formatX(series.closest) }}
-                            </span>
-                        </td>
-                        <td ng-if="legend.get('showValueWhenExpanded')">
-                            <span class="plot-series-value cursor-hover hover-value-enabled"
-                                  ng-class="series.closest.mctLimitState.cssClass">
-                                {{ series.formatY(series.closest) }}
-                            </span>
-                        </td>
-                        <td ng-if="legend.get('showMinimumWhenExpanded')"
-                            class="mobile-hide">
-                            <span class="plot-series-value">
-                                {{ series.formatY(series.get('stats').minPoint) }}
-                            </span>
-                        </td>
-                        <td ng-if="legend.get('showMaximumWhenExpanded')"
-                            class="mobile-hide">
-                            <span class="plot-series-value">
-                                {{ series.formatY(series.get('stats').maxPoint) }}
-                            </span>
-                        </td>
-                    </tr>
-                </table>
-            </div>
+                    <td ng-if="legend.get('showTimestampWhenExpanded')">
+                        <span class="plot-series-value cursor-hover hover-value-enabled">
+                            {{ series.closest && series.formatX(series.closest) }}
+                        </span>
+                    </td>
+                    <td ng-if="legend.get('showValueWhenExpanded')">
+                        <span class="plot-series-value cursor-hover hover-value-enabled"
+                              ng-class="series.closest.mctLimitState.cssClass">
+                            {{ series.formatY(series.closest) }}
+                        </span>
+                    </td>
+                    <td ng-if="legend.get('showMinimumWhenExpanded')"
+                        class="mobile-hide">
+                        <span class="plot-series-value">
+                            {{ series.formatY(series.get('stats').minPoint) }}
+                        </span>
+                    </td>
+                    <td ng-if="legend.get('showMaximumWhenExpanded')"
+                        class="mobile-hide">
+                        <span class="plot-series-value">
+                            {{ series.formatY(series.get('stats').maxPoint) }}
+                        </span>
+                    </td>
+                </tr>
+            </table>
         </div>
     </div>
 

src/plugins/plot/src/configuration/PlotSeries.js

@@ -161,7 +161,7 @@ define([
                     var newPoints = _(this.data)
                         .concat(points)
                         .sortBy(this.getXVal)
-                        .uniq(true, point => [this.getXVal(point), this.getYVal(point)].join())
+                        .uniq(true, this.getXVal)
                         .value();
                     this.reset(newPoints);
                 }.bind(this));

src/plugins/plugins.js

@@ -22,7 +22,6 @@
 
 define([
     'lodash',
-    './themes/plugin',
     './utcTimeSystem/plugin',
     './localTimeSystem/plugin',
     '../../example/generator/plugin',
@@ -48,7 +47,6 @@ define([
     './clearData/plugin'
 ], function (
     _,
-    ThemesPlugin,
     UTCTimeSystem,
     LocalTimeSystem,
     GeneratorPlugin,
@@ -87,7 +85,6 @@ define([
         };
     });
 
-    plugins.Themes = ThemesPlugin.default;
     plugins.UTCTimeSystem = UTCTimeSystem;
     plugins.LocalTimeSystem = LocalTimeSystem;
 

src/plugins/tabs/components/tabs.vue

@@ -42,6 +42,8 @@
 </template>
 
 <style lang="scss">
+    @import '~styles/sass-base.scss';
+
     .c-tabs-view {
         $h: 20px;
         @include abs();

src/plugins/telemetryTable/TelemetryTableConfiguration.js

@@ -34,11 +34,8 @@ define([
             this.columns = {};
 
             this.removeColumnsForObject = this.removeColumnsForObject.bind(this);
-            this.objectMutated = this.objectMutated.bind(this);
-            //Make copy of configuration, otherwise change detection is impossible if shared instance is being modified.
-            this.oldConfiguration = JSON.parse(JSON.stringify(this.getConfiguration()));
 
-            this.unlistenFromMutation = openmct.objects.observe(domainObject, '*', this.objectMutated);
+            this.unlistenFromMutation = domainObject.$observe('configuration', configuration => this.updateListeners(configuration));
         }
 
         getConfiguration() {
@@ -60,15 +57,8 @@ define([
          * @private
          * @param {*} object
          */
-        objectMutated(object) {
-            //Synchronize domain object reference. Duplicate object otherwise change detection becomes impossible.
-            this.domainObject = object;
-            //Was it the configuration that changed?
-            if (object.configuration !== undefined && !_.eq(object.configuration, this.oldConfiguration)) {
-                //Make copy of configuration, otherwise change detection is impossible if shared instance is being modified.
-                this.oldConfiguration = JSON.parse(JSON.stringify(this.getConfiguration()));
-                this.emit('change', object.configuration);
-            }
+        updateListeners(configuration) {
+            this.emit('change', configuration);
         }
 
         addSingleColumnForObject(telemetryObject, column, position) {

src/plugins/telemetryTable/TelemetryTableViewProvider.js

@@ -48,7 +48,7 @@ define([
             canEdit(domainObject) {
                 return domainObject.type === 'table';
             },
-            view(domainObject, objectPath) {
+            view(domainObject, isEditing, objectPath) {
                 let table = new TelemetryTable(domainObject, openmct);
                 let component;
                 return {

src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue

@@ -11,7 +11,9 @@
     </div>
 </template>
 
-<style lang="scss">    .c-filter-indication {
+<style lang="scss">
+    @import "~styles/sass-base";
+    .c-filter-indication {
         @include userSelectNone();
         background: $colorFilterBg;
         color: $colorFilterFg;

src/plugins/telemetryTable/components/table.vue

@@ -152,6 +152,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-telemetry-table__drop-target {
         position: absolute;
         width: 2px;

src/plugins/themes/plugin.js

@@ -1,35 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2019, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-import core from '../../styles/core.scss';
-import styles from '../../styles/theme-espresso.scss';
-
-export default function ThemesPlugin(options) {
-    return function (openmct) {
-        console.log(styles)
-        core.use();
-        styles.use();
-        // setTimeout(() => {
-        //     styles.unuse();
-        // }, 3000)
-        ThemesPlugin._installed = true;
-    };
-}

src/plugins/timeConductor/Conductor.vue

@@ -104,6 +104,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-input--submit {
         // Can't use display: none because some browsers will pretend the input doesn't exist, and enter won't work
         visibility: none;

src/plugins/timeConductor/ConductorAxis.vue

@@ -27,6 +27,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-conductor-axis {
         $h: 18px;
         $tickYPos: ($h / 2) + 12px;

src/plugins/timeConductor/ConductorMode.vue

@@ -50,6 +50,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-conductor__mode-menu {
         max-height: 80vh;
         max-width: 500px;

src/plugins/timeConductor/ConductorModeIcon.vue

@@ -27,6 +27,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     @keyframes clock-hands {
         0% { transform: translate(-50%, -50%) rotate(0deg); }
         100% { transform: translate(-50%, -50%) rotate(360deg);  }

src/plugins/timeConductor/DatePicker.vue

@@ -58,6 +58,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     /******************************************************** PICKER */
     .c-datetime-picker {
         @include userSelectNone();

src/selection/Selection.js

@@ -23,11 +23,13 @@
 define(
     [
         'EventEmitter',
-        'lodash'
+        'lodash',
+        '../api/objects/MutableDomainObject.js'
     ],
     function (
         EventEmitter,
-        _
+        _,
+        MutableDomainObject
     ) {
 
         /**
@@ -75,6 +77,10 @@ define(
                 this.selected = [selectable];
             }
 
+            if (this.temporaryMutables) {
+                this.temporaryMutables.forEach(mutable => mutable.$destroy());
+            }
+
             this.emit('change', this.selected);
         };
 
@@ -233,12 +239,6 @@ define(
             element.addEventListener('click', capture, true);
             element.addEventListener('click', selectCapture);
 
-            if (context.item) {
-                var unlisten = this.openmct.objects.observe(context.item, "*", function (newItem) {
-                    context.item = newItem;
-                });
-            }
-
             if (select) {
                 element.click();
             }
@@ -246,10 +246,6 @@ define(
             return function () {
                 element.removeEventListener('click', capture, true);
                 element.removeEventListener('click', selectCapture);
-
-                if (unlisten) {
-                    unlisten();
-                }
             };
         };
 

src/styles/_constants-espresso.scss

@@ -339,7 +339,6 @@ $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
-$legendTableHeadBg: rgba($colorBodyFg, 0.15);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-maelstrom.scss

@@ -343,7 +343,6 @@ $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
-$legendTableHeadBg: rgba($colorBodyFg, 0.15);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-snow.scss

@@ -339,7 +339,6 @@ $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
-$legendTableHeadBg: rgba($colorBodyFg, 0.15);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants.scss

@@ -60,7 +60,7 @@ $plotXBarH: 35px;
 $plotLegendH: 20px;
 $plotLegendWidthCollapsed: 20%;
 $plotLegendWidthExpanded: 50%;
-$plotSwatchD: 10px;
+$plotSwatchD: 8px;
 $plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
 $plotMinH: 95px;
 $controlBarH: 25px;
@@ -196,7 +196,6 @@ $glyph-icon-import: '\ea2d';
 $glyph-icon-export: '\ea2e';
 $glyph-icon-font-size: '\ea2f';
 $glyph-icon-clear-data: '\ea30';
-$glyph-icon-history: '\ea31';
 $glyph-icon-activity: '\eb00';
 $glyph-icon-activity-mode: '\eb01';
 $glyph-icon-autoflow-tabular: '\eb02';
@@ -233,9 +232,6 @@ $glyph-icon-flexible-layout: '\eb20';
 $glyph-icon-generator-telemetry: '\eb21';
 $glyph-icon-generator-events: '\eb22';
 $glyph-icon-gauge: '\eb23';
-$glyph-icon-spectra: '\eb24';
-$glyph-icon-spectra-telemetry: '\eb25';
-$glyph-icon-command: '\eb26';
 
 /************************** GLYPHS AS DATA URI */
 // Only objects have been converted, for use in Create menu and folder views
@@ -282,6 +278,3 @@ $bg-icon-flexible-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='ht
 $bg-icon-generator-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M76 236.9c5.4-2.1 20.4-17.8 34.9-54.7C126.8 141.5 154.5 93 196 93c19.7 0 38 10.9 54.6 32.5 14 18.2 24.4 40.8 30.5 56.7 14.5 36.9 29.5 52.6 34.9 54.7 5.4-2.1 20.4-17.8 34.9-54.7S388 104.5 421.7 95A192 192 0 0 0 256 0C150 0 64 86 64 192a197.2 197.2 0 0 0 3.7 37.9c3.6 4 6.5 6.3 8.3 7zM442.3 238.5A192.9 192.9 0 0 0 448 192a197.2 197.2 0 0 0-3.7-37.9c-3.6-4-6.5-6.3-8.3-7-5.4 2.1-20.4 17.8-34.9 54.7-10.9 27.9-27.3 59.5-50 76.6z'/%3e%3cpath d='M256 320l67.5-29.5a60.3 60.3 0 0 1-7.5.5c-19.7 0-38-10.9-54.6-32.5-14-18.2-24.4-40.8-30.5-56.7-14.5-36.9-29.5-52.6-34.9-54.7-5.4 2.1-20.4 17.8-34.9 54.7-8.2 21.1-19.6 44.2-34.4 61.6z'/%3e%3cpath d='M512 240L256 352 0 240v160l256 112 256-112V240z'/%3e%3c/svg%3e");
 $bg-icon-generator-events: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M160 96h192v32H160zM160 224h192v32H160zM160 160h160v32H160z'/%3e%3cpath d='M128 64.1h256V264l64-28V64a64.2 64.2 0 0 0-64-64H128a64.2 64.2 0 0 0-64 64v172l64 28zM329.1 288H182.9l73.1 32 73.1-32z'/%3e%3cpath d='M256 352L0 240v160l256 112 256-112V240L256 352z'/%3e%3c/svg%3e");
 $bg-icon-gauge: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M256 0C114.6 0 0 114.6 0 256c0 113.2 73.5 209.2 175.3 243L304 256v251.5C422.4 485 512 381 512 256 512 114.6 397.4 0 256 0zm121.4 263.9a159.8 159.8 0 0 0-242.8 0l-73-62.5c4.3-5 8.7-9.8 13.4-14.4a255.9 255.9 0 0 1 362 0c4.7 4.6 9.1 9.4 13.4 14.4z'/%3e%3c/svg%3e");
-$bg-icon-spectra: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M384 352H128l51.2-89.6L0 288v127c0 53.3 43.7 97 97 97h318c53.4 0 97-43.7 97-97v-31l-162.9-93.1zM415 0H97C43.7 0 0 43.6 0 97v159l200-30.1 56-97.9 54.9 96H512V97a97.2 97.2 0 00-97-97zM512 320v-32l-192-32 192 64z'/%3e%3c/svg%3e");
-$bg-icon-spectra-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 128l54.9 96H510C494.3 97.7 386.5 0 256 0 114.6 0 0 114.6 0 256l200-30.1zM384 352H128l51.2-89.6L2 287.7C17.6 414.1 125.4 512 256 512c100.8 0 188-58.3 229.8-143l-136.7-78.1zM320 256l192 64v-32l-192-32z'/%3e%3c/svg%3e");
-$bg-icon-command: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M185.1 229.7a96.5 96.5 0 0015.8 11.7A68.5 68.5 0 01192 208c0-19.8 8.9-38.8 25.1-53.7 18.5-17 43.7-26.3 70.9-26.3 20.1 0 39.1 5.1 55.1 14.6a81.3 81.3 0 00-16.2-20.3C308.4 105.3 283.2 96 256 96s-52.4 9.3-70.9 26.3C168.9 137.2 160 156.2 160 176s8.9 38.8 25.1 53.7z'/%3e%3cpath d='M442.7 134.8C422.4 57.5 346.5 0 256 0S89.6 57.5 69.3 134.8C26.3 174.8 0 228.7 0 288c0 123.7 114.6 224 256 224s256-100.3 256-224c0-59.3-26.3-113.2-69.3-153.2zM256 64c70.6 0 128 50.2 128 112s-57.4 112-128 112-128-50.2-128-112S185.4 64 256 64zm0 352c-87.7 0-159.2-63.9-160-142.7 34.4 47.4 93.2 78.7 160 78.7s125.6-31.3 160-78.7c-.8 78.8-72.3 142.7-160 142.7z'/%3e%3c/svg%3e");

src/styles/_glyphs.scss

@@ -130,7 +130,6 @@
 .icon-export {  @include glyphBefore($glyph-icon-export); }
 .icon-font-size {  @include glyphBefore($glyph-icon-font-size); }
 .icon-clear-data {  @include glyphBefore($glyph-icon-clear-data); }
-.icon-history {  @include glyphBefore($glyph-icon-history); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
@@ -167,9 +166,6 @@
 .icon-generator-telemetry {  @include glyphBefore($glyph-icon-generator-telemetry); }
 .icon-generator-events {  @include glyphBefore($glyph-icon-generator-events); }
 .icon-gauge {  @include glyphBefore($glyph-icon-gauge); }
-.icon-spectra {  @include glyphBefore($glyph-icon-spectra); }
-.icon-spectra-telemetry {  @include glyphBefore($glyph-icon-spectra-telemetry); }
-.icon-command {  @include glyphBefore($glyph-icon-command); }
 
 /************************** 12 PX CLASSES */
 // TODO: sync with 16px redo as of 10/25/18
@@ -224,6 +220,3 @@
 .bg-icon-generator-telemetry { @include glyphBg($bg-icon-generator-telemetry); }
 .bg-icon-generator-events { @include glyphBg($bg-icon-generator-events); }
 .bg-icon-gauge { @include glyphBg($bg-icon-gauge); }
-.bg-icon-spectra { @include glyphBg($bg-icon-spectra); }
-.bg-icon-spectra-telemetry { @include glyphBg($bg-icon-spectra-telemetry); }
-.bg-icon-command { @include glyphBg($bg-icon-command); }

src/styles/_legacy-plots.scss

@@ -394,28 +394,15 @@ mct-plot {
 }
 
 /****************** _LEGEND.SCSS */
-.gl-plot-legend,
-.c-plot-legend {
-    &__wrapper {
-        // Holds view-control and both collapsed and expanded legends
-        flex: 1 1 auto;
-    }
+.gl-plot-legend {
+    display: flex;
+    align-items: flex-start;
 
     &__view-control {
         padding-top: 2px;
         margin-right: $interiorMarginSm;
     }
 
-    &__header {
-        @include propertiesHeader();
-        margin-bottom: $interiorMarginSm;
-    }
-}
-
-.gl-plot-legend {
-    display: flex;
-    align-items: flex-start;
-
     table {
         table-layout: fixed;
         th,
@@ -424,9 +411,7 @@ mct-plot {
             padding: 1px 3px; // Tighter than standard tabular padding
         }
     }
-}
 
-*[class*="-legend"] {
     &.hover-on-plot {
         // User is hovering over the plot to get a value at a point
         .hover-value-enabled {
@@ -514,7 +499,6 @@ mct-plot {
 
         .plot-wrapper-expanded-legend {
             overflow-y: auto;
-            table thead th { background: $legendTableHeadBg; }
         }
     }
 

src/styles/_mixins.scss

@@ -231,6 +231,7 @@
     background-color: $colorInspectorSectionHeaderBg;
     color: $colorInspectorSectionHeaderFg;
     font-weight: normal;
+    margin: $interiorMarginSm 0;
     padding: $interiorMarginSm $interiorMargin;
     text-transform: uppercase;
 }

src/styles/core-espresso.scss

@@ -1,46 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
- @import "vendor/normalize-min";
- // Imports only constants, mixins, etc.
- // Meant for use as a single line import in Vue SFC's.
- // Do not include anything that renders to CSS!
- @import "constants";
- @import "constants-mobile.scss";
- @import "constants-espresso";
- 
- @import "mixins";
- @import "animations";
- 
- /******************** RENDERS CSS */
- @import "about";
- @import "glyphs";
- @import "global";
- @import "status";
- @import "controls";
- @import "forms";
- @import "table";
- @import "legacy";
- @import "legacy-plots";
- @import "plotly";
- @import "legacy-messages";
- 

src/styles/core-snow.scss

@@ -1,46 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
- @import "vendor/normalize-min";
- // Imports only constants, mixins, etc.
- // Meant for use as a single line import in Vue SFC's.
- // Do not include anything that renders to CSS!
- @import "constants";
- @import "constants-mobile.scss";
- @import "constants-snow";
- 
- @import "mixins";
- @import "animations";
- 
- /******************** RENDERS CSS */
- @import "about";
- @import "glyphs";
- @import "global";
- @import "status";
- @import "controls";
- @import "forms";
- @import "table";
- @import "legacy";
- @import "legacy-plots";
- @import "plotly";
- @import "legacy-messages";
- 

src/styles/core.scss

@@ -21,17 +21,16 @@
  *****************************************************************************/
 
 @import "vendor/normalize-min";
-// @import "sass-base";
+@import "sass-base";
 
 /******************** RENDERS CSS */
-// @import "about";
-// @import "glyphs";
-// @import "global";
-// @import "status";
-// @import "controls";
-// @import "forms";
-// @import "table";
-// @import "legacy";
-// @import "legacy-plots";
-// @import "plotly";
-// @import "legacy-messages";
+@import "about";
+@import "glyphs";
+@import "global";
+@import "status";
+@import "controls";
+@import "forms";
+@import "table";
+@import "legacy";
+@import "legacy-plots";
+@import "legacy-messages";

src/styles/fonts/Open MCT Symbols 16px.json

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "Open MCT Symbols 16px",
     "lastOpened": 0,
-    "created": 1574106570211
+    "created": 1567791159617
   },
   "iconSets": [
     {
@@ -735,21 +735,13 @@
           "code": 59952,
           "tempChar": ""
         },
-        {
-          "order": 173,
-          "id": 149,
-          "name": "icon-history",
-          "prevSize": 24,
-          "code": 59953,
-          "tempChar": ""
-        },
         {
           "order": 144,
           "id": 97,
           "name": "icon-activity",
           "prevSize": 24,
           "code": 60160,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 104,
@@ -757,7 +749,7 @@
           "name": "icon-activity-mode",
           "prevSize": 24,
           "code": 60161,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 137,
@@ -765,7 +757,7 @@
           "name": "icon-autoflow-tabular",
           "prevSize": 24,
           "code": 60162,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -773,7 +765,7 @@
           "name": "icon-clock",
           "prevSize": 24,
           "code": 60163,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 2,
@@ -781,7 +773,7 @@
           "name": "icon-database",
           "prevSize": 24,
           "code": 60164,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 3,
@@ -789,7 +781,7 @@
           "name": "icon-database-query",
           "prevSize": 24,
           "code": 60165,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
@@ -797,7 +789,7 @@
           "name": "icon-dataset",
           "prevSize": 24,
           "code": 60166,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -805,7 +797,7 @@
           "name": "icon-datatable",
           "prevSize": 24,
           "code": 60167,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 136,
@@ -813,7 +805,7 @@
           "name": "icon-dictionary",
           "prevSize": 24,
           "code": 60168,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 51,
@@ -821,7 +813,7 @@
           "name": "icon-folder",
           "prevSize": 24,
           "code": 60169,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 147,
@@ -829,7 +821,7 @@
           "name": "icon-image",
           "prevSize": 24,
           "code": 60170,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 4,
@@ -837,7 +829,7 @@
           "name": "icon-layout",
           "prevSize": 24,
           "code": 60171,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -845,7 +837,7 @@
           "name": "icon-object",
           "prevSize": 24,
           "code": 60172,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -853,7 +845,7 @@
           "name": "icon-object-unknown",
           "prevSize": 24,
           "code": 60173,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 105,
@@ -861,7 +853,7 @@
           "name": "icon-packet",
           "prevSize": 24,
           "code": 60174,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -869,7 +861,7 @@
           "name": "icon-page",
           "prevSize": 24,
           "code": 60175,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 130,
@@ -877,7 +869,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 24,
           "code": 60176,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -885,7 +877,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 24,
           "code": 60177,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 134,
@@ -893,7 +885,7 @@
           "name": "icon-session",
           "prevSize": 24,
           "code": 60178,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
@@ -901,7 +893,7 @@
           "name": "icon-tabular",
           "prevSize": 24,
           "code": 60179,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 107,
@@ -909,7 +901,7 @@
           "name": "icon-tabular-lad",
           "prevSize": 24,
           "code": 60180,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 106,
@@ -917,7 +909,7 @@
           "name": "icon-tabular-lad-set",
           "prevSize": 24,
           "code": 60181,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 70,
@@ -925,7 +917,7 @@
           "name": "icon-tabular-realtime",
           "prevSize": 24,
           "code": 60182,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
@@ -933,7 +925,7 @@
           "name": "icon-tabular-scrolling",
           "prevSize": 24,
           "code": 60183,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 131,
@@ -941,7 +933,7 @@
           "name": "icon-telemetry",
           "prevSize": 24,
           "code": 60184,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 108,
@@ -949,7 +941,7 @@
           "name": "icon-timeline",
           "prevSize": 24,
           "code": 60185,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
@@ -957,7 +949,7 @@
           "name": "icon-timer",
           "prevSize": 24,
           "code": 60186,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 69,
@@ -965,7 +957,7 @@
           "name": "icon-topic",
           "prevSize": 24,
           "code": 60187,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -973,7 +965,7 @@
           "name": "icon-box-with-dashed-lines-v2",
           "prevSize": 24,
           "code": 60188,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -981,7 +973,7 @@
           "name": "icon-summary-widget",
           "prevSize": 24,
           "code": 60189,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
@@ -989,7 +981,7 @@
           "name": "icon-notebook",
           "prevSize": 24,
           "code": 60190,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 168,
@@ -997,7 +989,7 @@
           "name": "icon-tabs-view",
           "prevSize": 24,
           "code": 60191,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 117,
@@ -1005,7 +997,7 @@
           "name": "icon-flexible-layout",
           "prevSize": 24,
           "code": 60192,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 166,
@@ -1013,7 +1005,7 @@
           "name": "icon-generator-sine",
           "prevSize": 24,
           "code": 60193,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 167,
@@ -1021,7 +1013,7 @@
           "name": "icon-generator-event",
           "prevSize": 24,
           "code": 60194,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 165,
@@ -1029,38 +1021,14 @@
           "name": "icon-gauge-v2",
           "prevSize": 24,
           "code": 60195,
-          "tempChar": ""
-        },
-        {
-          "order": 170,
-          "id": 148,
-          "name": "icon-spectra",
-          "prevSize": 24,
-          "code": 60196,
-          "tempChar": ""
-        },
-        {
-          "order": 171,
-          "id": 147,
-          "name": "icon-telemetry-spectra",
-          "prevSize": 24,
-          "code": 60197,
-          "tempChar": ""
-        },
-        {
-          "order": 172,
-          "id": 146,
-          "name": "icon-pushbutton",
-          "prevSize": 24,
-          "code": 60198,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
       "metadata": {
         "name": "Open MCT Symbols 16px",
         "importSize": {
-          "width": 512,
+          "width": 384,
           "height": 512
         },
         "designer": "Charles Hacskaylo"
@@ -2225,23 +2193,6 @@
             "icon-clear-data"
           ]
         },
-        {
-          "id": 149,
-          "paths": [
-            "M576 64c-247.4 0-448 200.6-448 448h-128l192 192 192-192h-128c0-85.4 33.2-165.8 93.8-226.2 60.4-60.6 140.8-93.8 226.2-93.8s165.8 33.2 226.2 93.8c60.6 60.4 93.8 140.8 93.8 226.2s-33.2 165.8-93.8 226.2c-60.4 60.6-140.8 93.8-226.2 93.8s-165.8-33.2-226.2-93.8l-90.6 90.6c81 81 193 131.2 316.8 131.2 247.4 0 448-200.6 448-448s-200.6-448-448-448z",
-            "M576 272c-26.6 0-48 21.4-48 48v211.8l142 142c9.4 9.4 21.6 14 34 14s24.6-4.6 34-14c18.8-18.8 18.8-49.2 0-67.8l-114-114v-172c0-26.6-21.4-48-48-48z"
-          ],
-          "attrs": [
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-history"
-          ]
-        },
         {
           "id": 97,
           "paths": [
@@ -2716,61 +2667,6 @@
           "tags": [
             "icon-gauge-v2"
           ]
-        },
-        {
-          "id": 148,
-          "paths": [
-            "M768 704h-512l102.4-179.2-358.4 51.2v254c0 106.6 87.4 194 194 194h636c106.8 0 194-87.4 194-194v-62l-325.8-186.2z",
-            "M830 0h-636c-106.6 0-194 87.2-194 194v318l400-60.2 112-195.8 109.8 192h402.2v-254c-0.227-107.052-86.948-193.773-193.978-194l-0.022-0z",
-            "M1024 640v-64l-384-64 384 128z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-spectra"
-          ]
-        },
-        {
-          "id": 147,
-          "paths": [
-            "M512 256l109.8 192h398.2c-31.4-252.6-247-448-508-448-282.8 0-512 229.2-512 512l400-60.2z",
-            "M768 704h-512l102.4-179.2-354.4 50.6c31.2 252.8 246.8 448.6 508 448.6 201.6 0 376-116.6 459.6-286l-273.4-156.2z",
-            "M640 512l384 128v-64l-384-64z"
-          ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-telemetry-spectra"
-          ]
-        },
-        {
-          "id": 146,
-          "paths": [
-            "M370.2 459.4c9.326 8.53 19.666 16.261 30.729 22.914l0.871 0.486c-11.077-19.209-17.664-42.221-17.8-66.76l-0-0.040c0-39.6 17.8-77.6 50.2-107.4 37-34 87.4-52.6 141.8-52.6 40.2 0 78.2 10.2 110.2 29.2-8.918-15.653-19.693-29.040-32.268-40.482l-0.132-0.118c-37-34-87.4-52.6-141.8-52.6s-104.8 18.6-141.8 52.6c-32.4 29.8-50.2 67.8-50.2 107.4s17.8 77.6 50.2 107.4z",
-            "M885.4 269.6c-40.6-154.6-192.4-269.6-373.4-269.6s-332.8 115-373.4 269.6c-86 80-138.6 187.8-138.6 306.4 0 247.4 229.2 448 512 448s512-200.6 512-448c0-118.6-52.6-226.4-138.6-306.4zM512 128c141.2 0 256 100.4 256 224s-114.8 224-256 224-256-100.4-256-224 114.8-224 256-224zM512 832c-175.4 0-318.4-127.8-320-285.4 68.8 94.8 186.4 157.4 320 157.4s251.2-62.6 320-157.4c-1.6 157.6-144.6 285.4-320 285.4z"
-          ],
-          "attrs": [
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 16,
-          "tags": [
-            "icon-pushbutton"
-          ]
         }
       ],
       "invisible": false,

src/styles/fonts/Open-MCT-Symbols-16px.svg

@@ -98,7 +98,6 @@
 <glyph unicode="&#xea2e;" glyph-name="icon-export" d="M192 0.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 320l-384 384v-192h-192v-384h192v-192l384 384z" />
 <glyph unicode="&#xea2f;" glyph-name="icon-font-size" d="M842.841 451.952h-120.956l-52.382-139.676 52.918-141.12 59.942 159.84 62.361-166.314h-119.884l34.019-90.717h119.884l39.695-105.836h105.836l-181.434 483.823zM263.903 671.871l-263.903-703.742h153.944l57.729 153.944h280.397l57.729-153.944h153.944l-263.903 703.742zM261.154 254.024l90.717 241.911 90.717-241.911z" />
 <glyph unicode="&#xea30;" glyph-name="icon-clear-data" d="M632 520l-120-120-120 120-80-80 120-120-120-120 80-80 120 120 120-120 80 80-120 120 120 120-80 80zM512 832c-282.76 0-512-86-512-192v-640c0-106 229.24-192 512-192s512 86 512 192v640c0 106-229.24 192-512 192zM512 0c-176.731 0-320 143.269-320 320s143.269 320 320 320c176.731 0 320-143.269 320-320v0c0-176.731-143.269-320-320-320v0z" />
-<glyph unicode="&#xea31;" glyph-name="icon-history" d="M576 768c-247.4 0-448-200.6-448-448h-128l192-192 192 192h-128c0 85.4 33.2 165.8 93.8 226.2 60.4 60.6 140.8 93.8 226.2 93.8s165.8-33.2 226.2-93.8c60.6-60.4 93.8-140.8 93.8-226.2s-33.2-165.8-93.8-226.2c-60.4-60.6-140.8-93.8-226.2-93.8s-165.8 33.2-226.2 93.8l-90.6-90.6c81-81 193-131.2 316.8-131.2 247.4 0 448 200.6 448 448s-200.6 448-448 448zM576 560c-26.6 0-48-21.4-48-48v-211.8l142-142c9.4-9.4 21.6-14 34-14s24.6 4.6 34 14c18.8 18.8 18.8 49.2 0 67.8l-114 114v172c0 26.6-21.4 48-48 48z" />
 <glyph unicode="&#xeb00;" glyph-name="icon-activity" d="M576 768h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xeb01;" glyph-name="icon-activity-mode" d="M512 832c-214.8 0-398.8-132.4-474.8-320h90.8c56.8 0 108-24.8 143-64h241l-192 192h256l320-320-320-320h-256l192 192h-241c-35-39.2-86.2-64-143-64h-90.8c76-187.6 259.8-320 474.8-320 282.8 0 512 229.2 512 512s-229.2 512-512 512z" />
 <glyph unicode="&#xeb02;" glyph-name="icon-autoflow-tabular" d="M192 832c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 832h256v-1024h-256v1024zM832 832h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
@@ -135,7 +134,4 @@
 <glyph unicode="&#xeb21;" glyph-name="icon-generator-sine" d="M152 358.2c10.8 4.2 40.8 35.6 69.8 109.4 31.8 81.4 87.2 178.4 170.2 178.4 39.4 0 76-21.8 109.2-65 28-36.4 48.8-81.6 61-113.4 29-73.8 59-105.2 69.8-109.4 10.8 4.2 40.8 35.6 69.8 109.4s74.2 155.4 141.6 174.4c-67.89 114.467-190.82 190-331.391 190-0.003 0-0.007 0-0.010 0h0.001c-212 0-384-172-384-384 0.017-26.829 2.71-53.018 7.827-78.329l-0.427 2.529c7.2-8 13-12.6 16.6-14zM884.6 355c7.235 27.919 11.392 59.972 11.4 92.995v0.005c-0.017 26.829-2.71 53.018-7.827 78.329l0.427-2.529c-7.2 8-13 12.6-16.6 14-10.8-4.2-40.8-35.6-69.8-109.4-21.8-55.8-54.6-119-100-153.2zM512 192l135 59c-4.485-0.614-9.689-0.977-14.972-1h-0.028c-39.4 0-76 21.8-109.2 65-28 36.4-48.8 81.6-61 113.4-29 73.8-59 105.2-69.8 109.4-10.8-4.2-40.8-35.6-69.8-109.4-16.4-42.2-39.2-88.4-68.8-123.2zM1024 352l-512-224-512 224v-320l512-224 512 224v320z" />
 <glyph unicode="&#xeb22;" glyph-name="icon-generator-event" d="M320 640h384v-64h-384v64zM320 384h384v-64h-384v64zM320 512h320v-64h-320v64zM256 703.8h512v-399.8l128 56v344c-0.227 70.601-57.399 127.773-127.978 128h-512.022c-70.601-0.227-127.773-57.399-128-127.978v-344.022l128-56zM658.2 256h-292.4l146.2-64 146.2 64zM512 128l-512 224v-320l512-224 512 224v320l-512-224z" />
 <glyph unicode="&#xeb23;" glyph-name="icon-gauge-v2" d="M512 832c-282.8 0-512-229.2-512-512 0-226.4 147-418.4 350.6-486l257.4 486v-503c236.8 45 416 253 416 503 0 282.8-229.2 512-512 512zM754.8 304.2c-58.967 68.597-145.842 111.772-242.8 111.772s-183.833-43.176-242.445-111.35l-0.355-0.422-146 125c8.6 10 17.4 19.6 26.8 28.8 92.628 92.679 220.619 150.006 362 150.006s269.372-57.326 361.997-150.003l0.003-0.003c9.4-9.2 18.2-18.8 26.8-28.8z" />
-<glyph unicode="&#xeb24;" glyph-name="icon-spectra" d="M768 128h-512l102.4 179.2-358.4-51.2v-254c0-106.6 87.4-194 194-194h636c106.8 0 194 87.4 194 194v62l-325.8 186.2zM830 832h-636c-106.6 0-194-87.2-194-194v-318l400 60.2 112 195.8 109.8-192h402.2v254c-0.227 107.052-86.948 193.773-193.978 194h-0.022zM1024 192v64l-384 64 384-128z" />
-<glyph unicode="&#xeb25;" glyph-name="icon-telemetry-spectra" d="M512 576l109.8-192h398.2c-31.4 252.6-247 448-508 448-282.8 0-512-229.2-512-512l400 60.2zM768 128h-512l102.4 179.2-354.4-50.6c31.2-252.8 246.8-448.6 508-448.6 201.6 0 376 116.6 459.6 286l-273.4 156.2zM640 320l384-128v64l-384 64z" />
-<glyph unicode="&#xeb26;" glyph-name="icon-pushbutton" d="M370.2 372.6c9.326-8.53 19.666-16.261 30.729-22.914l0.871-0.486c-11.077 19.209-17.664 42.221-17.8 66.76v0.040c0 39.6 17.8 77.6 50.2 107.4 37 34 87.4 52.6 141.8 52.6 40.2 0 78.2-10.2 110.2-29.2-8.918 15.653-19.693 29.040-32.268 40.482l-0.132 0.118c-37 34-87.4 52.6-141.8 52.6s-104.8-18.6-141.8-52.6c-32.4-29.8-50.2-67.8-50.2-107.4s17.8-77.6 50.2-107.4zM885.4 562.4c-40.6 154.6-192.4 269.6-373.4 269.6s-332.8-115-373.4-269.6c-86-80-138.6-187.8-138.6-306.4 0-247.4 229.2-448 512-448s512 200.6 512 448c0 118.6-52.6 226.4-138.6 306.4zM512 704c141.2 0 256-100.4 256-224s-114.8-224-256-224-256 100.4-256 224 114.8 224 256 224zM512 0c-175.4 0-318.4 127.8-320 285.4 68.8-94.8 186.4-157.4 320-157.4s251.2 62.6 320 157.4c-1.6-157.6-144.6-285.4-320-285.4z" />
 </font></defs></svg>

src/styles/plotly.scss

@@ -1,51 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2019, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/***************** PLOTLY OVERRIDES */
-.plot-container.plotly {
-    .bglayer .bg {
-        fill: $colorPlotBg !important;
-        fill-opacity: 1 !important;
-        stroke: $colorInteriorBorder;
-        stroke-width: 1 !important;
-    }
-
-    .cartesianlayer .gridlayer {
-        .x,
-        .y {
-            path {
-                opacity: $opacityPlotHash;
-                stroke: $colorPlotHash !important;
-            }
-        }
-    }
-
-    .xtick,
-    .ytick,
-    .g-xtitle,
-    .g-ytitle {
-        text {
-            fill: $colorPlotFg !important;
-            font-size: 12px !important;
-        }
-    }
-}

src/styles/sass-base.scss

@@ -26,7 +26,7 @@
 @import "constants";
 @import "constants-mobile.scss";
 //@import "constants-espresso"; // TEMP
-// @import "constants-snow"; // TEMP
+@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
-// @import "mixins";
-// @import "animations";
+@import "mixins";
+@import "animations";

src/styles/test-a.scss

@@ -1,3 +0,0 @@
-body {
-    background: purple !important;
-}

src/styles/theme-espresso.scss

@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-// Imports only constants, mixins, etc.
-// Meant for use as a single line import in Vue SFC's.
-// Do not include anything that renders to CSS!
-// @import "constants";
-// @import "constants-mobile.scss";
-@import "constants-espresso"; // TEMP
-// @import "constants-snow"; // TEMP
-//@import "constants-maelstrom";
-@import "mixins";
-@import "animations";
-@import "about";
-@import "glyphs";
-@import "global";
-@import "status";
-@import "controls";
-@import "forms";
-@import "table";
-@import "legacy";
-@import "legacy-plots";
-@import "plotly";
-@import "legacy-messages";

src/ui/components/ObjectFrame.vue

@@ -51,6 +51,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-so-view {
         display: flex;
         flex-direction: column;

src/ui/components/ObjectLabel.vue

@@ -10,7 +10,9 @@
 </a>
 </template>
 
-<style lang="scss">    .c-object-label {
+<style lang="scss">
+    @import "~styles/sass-base";
+    .c-object-label {
         // <a> tag and draggable element that holds type icon and name.
         // Used mostly in trees and lists
         border-radius: $controlCr;
@@ -66,12 +68,6 @@ export default {
         };
     },
     mounted() {
-        if (this.observedObject) {
-            let removeListener = this.openmct.objects.observe(this.observedObject, '*', (newObject) => {
-                this.observedObject = newObject;
-            });
-            this.$once('hook:destroyed', removeListener);
-        }
         this.previewAction = new PreviewAction(this.openmct);
     },
     computed: {

src/ui/components/ObjectView.vue

@@ -59,10 +59,6 @@ export default {
                 delete this.removeSelectable;
             }
 
-            if (this.composition) {
-                this.composition._destroy();
-            }
-
             this.openmct.objectViews.off('clearData', this.clearData);
         },
         invokeEditModeHandler(editMode) {
@@ -77,10 +73,9 @@ export default {
             if (!this.currentObject) {
                 return;
             }
-
+            
             this.composition = this.openmct.composition.get(this.currentObject);
             if (this.composition) {
-                this.composition._synchronize();
                 this.loadComposition();
             }
 
@@ -98,13 +93,13 @@ export default {
                 if (this.openmct.editor.isEditing()) {
                     this.currentView = provider.edit(this.currentObject, true, objectPath);
                 } else {
-                    this.currentView = provider.view(this.currentObject, objectPath);
+                    this.currentView = provider.view(this.currentObject, false, objectPath);    
                 }
 
                 this.openmct.editor.on('isEditing', this.toggleEditView);
                 this.releaseEditModeHandler = () => this.openmct.editor.off('isEditing', this.toggleEditView);
             } else {
-                this.currentView = provider.view(this.currentObject, objectPath);
+                this.currentView = provider.view(this.currentObject, this.openmct.editor.isEditing(), objectPath);
 
                 if (this.currentView.onEditModeChange) {
                     this.openmct.editor.on('isEditing', this.invokeEditModeHandler);
@@ -130,20 +125,17 @@ export default {
                 delete this.removeSelectable;
             }
 
-            if (this.composition) {
-                this.composition._destroy();
-            }
-
             this.currentObject = object;
 
+            this.composition = this.openmct.composition.get(this.currentObject);
+            if (this.composition) {
+                this.loadComposition();
+            }
+
             if (currentObjectPath) {
                 this.currentObjectPath = currentObjectPath;
             }
 
-            this.unlisten = this.openmct.objects.observe(this.currentObject, '*', (mutatedObject) => {
-                this.currentObject = mutatedObject;
-            });
-
             this.viewKey = viewKey;
             this.updateView(immediatelySelect);
         },
@@ -186,7 +178,7 @@ export default {
         },
         editIfEditable(event) {
             let provider = this.getViewProvider();
-            if (provider &&
+            if (provider && 
                 provider.canEdit &&
                 provider.canEdit(this.currentObject) &&
                 !this.openmct.editor.isEditing()) {
@@ -204,7 +196,7 @@ export default {
             if (domainObject) {
                 let clearKeyString = this.openmct.objects.makeKeyString(domainObject.identifier),
                     currentObjectKeyString = this.openmct.objects.makeKeyString(this.currentObject.identifier);
-
+                
                 if (clearKeyString === currentObjectKeyString) {
                     if (this.currentView.onClearData) {
                         this.currentView.onClearData();

src/ui/components/ProgressBar.vue

@@ -2,19 +2,21 @@
     <div class="c-progress-bar">
         <div class="c-progress-bar__holder">
             <div class="c-progress-bar__bar"
-                 :class="{'--indeterminate': model.progressPerc === 'unknown'}"
+                 :class="{'--indeterminate': model.progressPerc === 'unknown' }"
                  :style="`width: ${model.progressPerc}%;`">
             </div>
         </div>
         <div class="c-progress-bar__text"
              v-if="model.progressText !== undefined">
-            <span v-if="model.progressPerc > 0">{{model.progressPerc}}% complete.</span>
+            <span v-if="model.progressPerc > 0">{{model.progressPerc}}% complete. </span>
             {{model.progressText}}
         </div>
     </div>
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     /******************************************************** PROGRESS BAR */
     @keyframes progress {
         100% { background-position: $progressAnimW center; }

src/ui/components/ToggleSwitch.vue

@@ -9,6 +9,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-toggle-switch {
         $d: 12px;
         $m: 2px;

src/ui/components/search.vue

@@ -13,6 +13,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-search {
         @include wrappedInput();
 

src/ui/inspector/Elements.vue

@@ -28,6 +28,8 @@
 </div>
 </template>
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-elements-pool {
         display: flex;
         flex-direction: column;
@@ -116,9 +118,6 @@ export default {
             }
 
             if (this.parentObject) {
-                this.mutationUnobserver = this.openmct.objects.observe(this.parentObject, '*', (updatedModel) => {
-                    this.parentObject = updatedModel;
-                });
                 this.composition = this.openmct.composition.get(this.parentObject);
 
                 if (this.composition) {
@@ -139,8 +138,7 @@ export default {
         },
         addElement(element) {
             let keyString = this.openmct.objects.makeKeyString(element.identifier);
-            this.elementsCache[keyString] = 
-                JSON.parse(JSON.stringify(element));
+            this.elementsCache[keyString] = element;
             this.applySearch(this.currentSearch);
         },
         reorderElements() {
@@ -180,9 +178,6 @@ export default {
         this.openmct.editor.off('isEditing', this.setEditState);
         this.openmct.selection.off('change', this.showSelection);
 
-        if (this.mutationUnobserver) {
-            this.mutationUnobserver();
-        }
         if (this.compositionUnlistener) {
             this.compositionUnlistener();
         }

src/ui/inspector/Inspector.vue

@@ -15,6 +15,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-inspector {
         > [class*="__"] {
             min-height: 50px;

src/ui/inspector/Location.vue

@@ -20,6 +20,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-location {
         display: flex;
         flex-wrap: wrap;

src/ui/layout/BrowseBar.vue

@@ -77,8 +77,9 @@ const PLACEHOLDER_OBJECT = {};
                 this.showSaveMenu = false;
             },
             updateName(event) {
+                // TODO: handle isssues with contenteditable text escaping.
                 if (event.target.innerText !== this.domainObject.name && event.target.innerText.match(/\S/)) {
-                    this.openmct.objects.mutate(this.domainObject, 'name', event.target.innerText);
+                    this.domainObject.$set('name', event.target.innerText);
                 } else {
                     event.target.innerText = this.domainObject.name;
                 }
@@ -129,20 +130,17 @@ const PLACEHOLDER_OBJECT = {};
             saveAndFinishEditing() {
                 let dialog = this.openmct.overlays.progressDialog({
                     progressPerc: 'unknown',
-                    message: 'Do not navigate away from this page or close this browser tab while this message is displayed.',
-                    iconClass: 'info',
-                    title: 'Saving',
+                    progressText: 'Saving...',
                 });
 
-                return this.openmct.editor.save()
-                    .then(()=> {
-                        dialog.dismiss();
-                        this.openmct.notifications.info('Save successful');
-                    }).catch((error) => {
-                        dialog.dismiss();
-                        this.openmct.notifications.error('Error saving objects');
-                        console.error(error);
-                    });
+                return this.openmct.editor.save().then(()=> {
+                    dialog.dismiss();
+                    this.openmct.notifications.info('Save successful');
+                }).catch((error) => {
+                    dialog.dismiss();
+                    this.openmct.notifications.error('Error saving objects');
+                    console.error(error);
+                });
             },
             saveAndContinueEditing() {
                 this.saveAndFinishEditing().then(() => {
@@ -226,20 +224,7 @@ const PLACEHOLDER_OBJECT = {};
                 this.isEditing = isEditing;
             });
         },
-        watch: {
-            domainObject() {
-                if (this.mutationObserver) {
-                    this.mutationObserver();
-                }
-                this.mutationObserver = this.openmct.objects.observe(this.domainObject, '*', (domainObject) => {
-                    this.domainObject = domainObject;
-                });
-            }
-        },
         beforeDestroy: function () {
-            if (this.mutationObserver) {
-                this.mutationObserver();
-            }
             document.removeEventListener('click', this.closeViewAndSaveMenu);
             window.removeEventListener('click', this.promptUserbeforeNavigatingAway);
         }
@@ -247,6 +232,8 @@ const PLACEHOLDER_OBJECT = {};
 </script>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .l-browse-bar {
         display: flex;
         align-items: center;

src/ui/layout/CreateButton.vue

@@ -28,6 +28,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-create-button,
     .c-create-menu {
         font-size: 1.1em;

src/ui/layout/Layout.vue

@@ -58,6 +58,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     /******************************* SHELL */
     .l-shell {
         position: absolute;

src/ui/layout/mct-tree.vue

@@ -42,6 +42,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-tree-and-search {
         display: flex;
         flex-direction: column;
@@ -205,6 +207,7 @@
             getAllChildren() {
                 this.isLoading = true;
                 this.openmct.objects.get('ROOT')
+                    .then(root => this.openmct.objects.mutable(root))
                     .then(root => {
                         return this.openmct.composition.get(root).load()
                     })
@@ -221,8 +224,18 @@
                     });
             },
             getFilteredChildren() {
+                if (this.filteredTreeItems) {
+                    this.filteredTreeItems.forEach(filteredTreeItem => filteredTreeItem.destroy());
+                }
+
                 this.searchService.query(this.searchValue).then(children => {
-                    this.filteredTreeItems = children.hits.map(child => {
+                    this.filteredTreeItems = children.hits
+                        .map(child => { 
+                            if (this.openmct.objects.isMutable(child)) {
+                                this.openmct.objects.mutable(child);
+                            }
+                        })
+                        .map(child => {
                         
                         let context = child.object.getCapability('context'),
                             object = child.object.useCapability('adapter'),

src/ui/layout/pane.vue

@@ -27,6 +27,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     /**************************** BASE - MOBILE AND DESKTOP */
     .l-multipane {
         display: flex;

src/ui/layout/status-bar/Indicators.vue

@@ -20,6 +20,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-indicator {
         @include cControl();
         @include cClickIconButtonLayout();

src/ui/layout/status-bar/NotificationBanner.vue

@@ -37,6 +37,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
         $bgPb: 10%;
         $bgPbD: 10%;

src/ui/layout/tree-item.vue

@@ -66,11 +66,7 @@
             // TODO: set isAlias per tree-item
 
             this.domainObject = this.node.object;
-            let removeListener = this.openmct.objects.observe(this.domainObject, '*', (newObject) => {
-                this.domainObject = newObject;
-            });
 
-            this.$once('hook:destroyed', removeListener);
             if (this.openmct.composition.get(this.node.object)) {
                 this.hasChildren = true;
             }
@@ -82,6 +78,7 @@
             if (this.composition) {
                 this.composition.off('add', this.addChild);
                 this.composition.off('remove', this.removeChild);
+                this.children.forEach(child => child.object.$destroy());
                 delete this.composition;
             }
         },
@@ -101,6 +98,9 @@
         },
         methods: {
             addChild (child) {
+                if (this.openmct.objects.isMutable(child)) {
+                    child = this.openmct.objects.mutable(child);
+                }
                 this.children.push({
                     id: this.openmct.objects.makeKeyString(child.identifier),
                     object: child,
@@ -110,8 +110,16 @@
             },
             removeChild(identifier) {
                 let removeId = this.openmct.objects.makeKeyString(identifier);
+                let removed = [];
                 this.children = this.children
-                    .filter(c => c.id !== removeId);
+                    .filter(c => {
+                        if(c.id !== removeId) {
+                            removed.push(c);
+                            return true
+                        }
+                        return false;
+                    });
+                removed.forEach(removedChild => removedChild.object.$destroy());
             },
             finishLoading () {
                 this.isLoading = false;

src/ui/preview/Preview.vue

@@ -39,8 +39,8 @@
                         @setView="setView">
                     </view-switcher>
                     <button v-if="notebookEnabled"
-                        class="l-browse-bar__actions__edit c-button icon-notebook"
-                        title="New Notebook entry"
+                        class="l-browse-bar__actions__edit c-button icon-notebook" 
+                        title="New Notebook entry" 
                         @click="snapshot">
                     </button>
                 </div>
@@ -52,6 +52,7 @@
     </div>
 </template>
 <style lang="scss">
+    @import '~styles/sass-base';
 
     .l-preview-window {
         display: flex;
@@ -122,13 +123,13 @@
             },
             setView(view) {
                 this.clear();
-
+            
                 this.viewKey = view.key;
                 this.viewContainer = document.createElement('div');
                 this.viewContainer.classList.add('c-object-view','u-contents');
                 this.$refs.objectView.append(this.viewContainer);
 
-                this.view = this.currentView.view(this.domainObject, this.objectPath);
+                this.view = this.currentView.view(this.domainObject, false, this.objectPath);
                 this.view.show(this.viewContainer, false);
             }
         },

src/ui/registries/ViewRegistry.js

@@ -225,6 +225,7 @@ define(['EventEmitter'], function (EventEmitter) {
      *
      * When called by Open MCT, the following arguments will be passed to it:
      * @param {object} domainObject - the domainObject that the view is provided for
+     * @param {boolean} isEditing - A boolean value indicating wether openmct is in a global edit mode
      * @param {array} objectPath - The current contextual object path of the view object
      *                             eg current domainObject is located under MyItems which is under Root
      *

src/ui/router/Browse.js

@@ -7,13 +7,14 @@ define([
     return function install(openmct) {
         let navigateCall = 0;
         let browseObject;
-        let unobserve = undefined;
+        let mutable;
         let currentObjectPath;
 
         openmct.router.route(/^\/browse\/?$/, navigateToFirstChildOfRoot);
 
         openmct.router.route(/^\/browse\/(.*)$/, (path, results, params) => {
             let navigatePath = results[1];
+            clearMutationListeners();
             navigateToPath(navigatePath, params.view);
         });
 
@@ -27,10 +28,17 @@ define([
         });
 
         function viewObject(object, viewProvider) {
+            if (mutable) {
+                mutable.$destroy();
+                mutable = undefined;
+            }
+            if (openmct.objects.isMutable(object)) {
+                mutable = openmct.objects.mutable(object);
+            }
             currentObjectPath = openmct.router.path;
 
-            openmct.layout.$refs.browseObject.show(object, viewProvider.key, true, currentObjectPath);
-            openmct.layout.$refs.browseBar.domainObject = object;
+            openmct.layout.$refs.browseObject.show(mutable || object, viewProvider.key, true, currentObjectPath);
+            openmct.layout.$refs.browseBar.domainObject = mutable || object;
             openmct.layout.$refs.browseBar.viewKey = viewProvider.key;
         }
 
@@ -38,37 +46,26 @@ define([
             navigateCall++;
             let currentNavigation = navigateCall;
 
-            if (unobserve) {
-                unobserve();
-                unobserve = undefined;
-            }
-
             //Split path into object identifiers
             if (!Array.isArray(path)) {
                 path = path.split('/');
             }
 
-            return pathToObjects(path).then((objects)=>{
+            return pathToObjects(path).then((objects) => {
                 if (currentNavigation !== navigateCall) {
                     return; // Prevent race.
                 }
-
-                let navigatedObject = objects[objects.length - 1];
-
                 // FIXME: this is a hack to support create action, intended to
                 // expose the current routed path.  We need to rewrite the
                 // navigation service and router to expose a clear and minimal
                 // API for this.
-                openmct.router.path = objects.reverse();
+                objects = objects.reverse();
+                openmct.router.path = objects;
 
-                unobserve = this.openmct.objects.observe(openmct.router.path[0], '*', (newObject) => {
-                    openmct.router.path[0] = newObject;
-                });
+                browseObject = objects[0];
+                openmct.layout.$refs.browseBar.domainObject = browseObject;
 
-                openmct.layout.$refs.browseBar.domainObject = navigatedObject;
-                browseObject = navigatedObject;
-
-                if (!navigatedObject) {
+                if (!browseObject) {
                     openmct.layout.$refs.browseObject.clear();
                     return;
                 }
@@ -78,12 +75,12 @@ define([
 
                 document.title = browseObject.name; //change document title to current object in main view
 
-                if (currentProvider && currentProvider.canView(navigatedObject)) {
-                    viewObject(navigatedObject,  currentProvider);
+                if (currentProvider && currentProvider.canView(browseObject)) {
+                    viewObject(browseObject,  currentProvider);
                     return;
                 }
 
-                let defaultProvider = openmct.objectViews.get(navigatedObject)[0];
+                let defaultProvider = openmct.objectViews.get(browseObject)[0];
                 if (defaultProvider) {
                     openmct.router.updateParams({
                         view: defaultProvider.key
@@ -99,7 +96,7 @@ define([
 
         function pathToObjects(path) {
             return Promise.all(path.map((keyString)=>{
-                return openmct.objects.get(keyString);
+                return openmct.objects.getAsMutable(keyString);
             }));
         }
 
@@ -117,5 +114,15 @@ define([
                     });
             });
         }
+
+        function clearMutationListeners() {
+            if (openmct.router.path !== undefined) {
+                openmct.router.path.forEach((pathObject) => {
+                    if (pathObject.$destroy) {
+                        pathObject.$destroy();
+                    }
+                });
+            }
+        }
     }
 });

src/ui/toolbar/Toolbar.vue

@@ -81,8 +81,8 @@
                 }
             },
             observeObject(domainObject, id) {
-                let unobserveObject = this.openmct.objects.observe(domainObject, '*', function(newObject) {
-                    this.domainObjectsById[id].newObject = JSON.parse(JSON.stringify(newObject));
+                let unobserveObject = domainObject.$observe('*', function(newObject) {
+                    this.domainObjectsById[id].newObject = newObject;
                     this.updateToolbarAfterMutation();
                 }.bind(this));
                 this.unObserveObjects.push(unobserveObject);

src/ui/toolbar/components/toolbar-checkbox.vue

@@ -17,6 +17,8 @@
 </template>
 
 <style lang="scss">
+    @import "~styles/sass-base";
+
     .c-custom-checkbox {
         $d: 14px;
         display: flex;

webpack.config.js

@@ -20,8 +20,6 @@ const webpackConfig = {
     mode: devMode ? 'development' : 'production',
     entry: {
         openmct: './openmct.js',
-        espresso: './src/styles/core-espresso.scss',
-        snow: './src/styles/core-snow.scss'
     },
     output: {
         filename: '[name].js',
@@ -73,14 +71,14 @@ const webpackConfig = {
             {
                 test: /\.(sc|sa|c)ss$/,
                 use: [
+                    devMode ? 'style-loader': MiniCssExtractPlugin.loader,
+                    'css-loader',
                     {
-                        loader: devMode ? 'style-loader': MiniCssExtractPlugin.loader,
+                        loader: 'fast-sass-loader',
                         options: {
-                            injectType: 'lazyStyleTag' // change to lazyStyleTag and use styles in themes plugin
+                            includePaths: bourbon.includePaths
                         }
-                    },
-                    {loader: 'css-loader'},
-                    {loader: 'sass-loader'}
+                    }
                 ]
             },
             {