Merge branch 'master' into upgrade-painterro

.gitignore

@@ -37,7 +37,4 @@ protractor/logs
 # npm-debug log
 npm-debug.log
 
-# karma reports
-report.*.json
-
 package-lock.json

index.html

@@ -113,10 +113,7 @@
         openmct.install(openmct.plugins.LADTable());
         openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
         openmct.install(openmct.plugins.ObjectMigration());
-        openmct.install(openmct.plugins.ClearData(
-            ['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
-            {indicator: true}
-        ));
+        openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
         openmct.start();
     </script>
 </html>

karma.conf.js

@@ -23,7 +23,7 @@
 /*global module,process*/
 
 const devMode = process.env.NODE_ENV !== 'production';
-const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'FirefoxHeadless'];
+const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
 const coverageEnabled = process.env.COVERAGE === 'true';
 const reporters = ['progress', 'html'];
 
@@ -82,7 +82,7 @@ module.exports = (config) => {
             reports: ['html', 'lcovonly', 'text-summary'],
             thresholds: {
                 global: {
-                    lines: 63
+                    lines: 62
                 }
             }
         },
@@ -95,7 +95,6 @@ module.exports = (config) => {
             stats: 'errors-only',
             logLevel: 'warn'
         },
-        singleRun: true,
-        browserNoActivityTimeout: 90000
+        singleRun: true
     });
 }

package.json

@@ -41,7 +41,6 @@
     "jsdoc": "^3.3.2",
     "karma": "^2.0.3",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-firefox-launcher": "^1.3.0",
     "karma-cli": "^1.0.1",
     "karma-coverage": "^1.1.2",
     "karma-coverage-istanbul-reporter": "^2.1.1",

platform/commonUI/edit/src/policies/EditPersistableObjectsPolicy.js

@@ -36,6 +36,8 @@ define(
         }
 
         EditPersistableObjectsPolicy.prototype.allow = function (action, context) {
+            var identifier;
+            var provider;
             var domainObject = context.domainObject;
             var key = action.getMetadata().key;
             var category = (context || {}).category;
@@ -44,8 +46,9 @@ define(
             // is also invoked during the create process which should be allowed,
             // because it may be saved elsewhere
             if ((key === 'edit' && category === 'view-control') || key === 'properties') {
-                let newStyleObject = objectUtils.toNewFormat(domainObject, domainObject.getId());
-                return this.openmct.objects.isPersistable(newStyleObject);
+                identifier = objectUtils.parseKeyString(domainObject.getId());
+                provider = this.openmct.objects.getProvider(identifier);
+                return provider.save !== undefined;
             }
 
             return true;

platform/commonUI/edit/test/policies/EditPersistableObjectsSpec.js

@@ -43,7 +43,7 @@ define(
                 );
 
                 mockObjectAPI = jasmine.createSpyObj('objectAPI', [
-                    'isPersistable'
+                    'getProvider'
                 ]);
 
                 mockAPI = {
@@ -69,31 +69,34 @@ define(
             });
 
             it("Applies to edit action", function () {
-                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
+                mockObjectAPI.getProvider.and.returnValue({});
+                expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
 
                 policy.allow(mockEditAction, testContext);
-                expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
+                expect(mockObjectAPI.getProvider).toHaveBeenCalled();
             });
 
             it("Applies to properties action", function () {
-                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
+                mockObjectAPI.getProvider.and.returnValue({});
+                expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
 
                 policy.allow(mockPropertiesAction, testContext);
-                expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
+                expect(mockObjectAPI.getProvider).toHaveBeenCalled();
             });
 
             it("does not apply to other actions", function () {
-                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
+                mockObjectAPI.getProvider.and.returnValue({});
+                expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
 
                 policy.allow(mockOtherAction, testContext);
-                expect(mockObjectAPI.isPersistable).not.toHaveBeenCalled();
+                expect(mockObjectAPI.getProvider).not.toHaveBeenCalled();
             });
 
             it("Tests object provider for editability", function () {
-                mockObjectAPI.isPersistable.and.returnValue(false);
+                mockObjectAPI.getProvider.and.returnValue({});
                 expect(policy.allow(mockEditAction, testContext)).toBe(false);
-                expect(mockObjectAPI.isPersistable).toHaveBeenCalled();
-                mockObjectAPI.isPersistable.and.returnValue(true);
+                expect(mockObjectAPI.getProvider).toHaveBeenCalled();
+                mockObjectAPI.getProvider.and.returnValue({save: function () {}});
                 expect(policy.allow(mockEditAction, testContext)).toBe(true);
             });
         });

platform/commonUI/general/res/templates/label.html

@@ -19,13 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="c-object-label"
-     ng-class="{ 'is-missing': model.status === 'missing' }"
->
-    <div class="c-object-label__type-icon {{type.getCssClass()}}"
-         ng-class="{ 'l-icon-link':location.isLink() }"
-    >
-        <span class="is-missing__indicator" title="This item is missing"></span>
-    </div>
+<div class="c-object-label">
+    <div class="c-object-label__type-icon {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
     <div class='c-object-label__name'>{{model.name}}</div>
 </div>

platform/containment/src/PersistableCompositionPolicy.js

@@ -48,8 +48,9 @@ define(
             // prevents editing of objects that cannot be persisted, so we can assume that this
             // is a new object.
             if (!(parent.hasCapability('editor') && parent.getCapability('editor').isEditContextRoot())) {
-                let newStyleObject = objectUtils.toNewFormat(parent, parent.getId());
-                return this.openmct.objects.isPersistable(newStyleObject);
+                var identifier = objectUtils.parseKeyString(parent.getId());
+                var provider = this.openmct.objects.getProvider(identifier);
+                return provider.save !== undefined;
             }
             return true;
         };

platform/containment/test/PersistableCompositionPolicySpec.js

@@ -33,7 +33,7 @@ define(
 
             beforeEach(function () {
                 objectAPI = jasmine.createSpyObj('objectsAPI', [
-                    'isPersistable'
+                    'getProvider'
                 ]);
 
                 mockOpenMCT = {
@@ -51,6 +51,10 @@ define(
                     'isEditContextRoot'
                 ]);
                 mockParent.getCapability.and.returnValue(mockEditorCapability);
+
+                objectAPI.getProvider.and.returnValue({
+                    save: function () {}
+                });
                 persistableCompositionPolicy = new PersistableCompositionPolicy(mockOpenMCT);
             });
 
@@ -61,22 +65,19 @@ define(
 
             it("Does not allow composition for objects that are not persistable", function () {
                 mockEditorCapability.isEditContextRoot.and.returnValue(false);
-                objectAPI.isPersistable.and.returnValue(true);
                 expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                objectAPI.isPersistable.and.returnValue(false);
+                objectAPI.getProvider.and.returnValue({});
                 expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(false);
             });
 
             it("Always allows composition of objects in edit mode to support object creation", function () {
                 mockEditorCapability.isEditContextRoot.and.returnValue(true);
-                objectAPI.isPersistable.and.returnValue(true);
                 expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                expect(objectAPI.isPersistable).not.toHaveBeenCalled();
+                expect(objectAPI.getProvider).not.toHaveBeenCalled();
 
                 mockEditorCapability.isEditContextRoot.and.returnValue(false);
-                objectAPI.isPersistable.and.returnValue(true);
                 expect(persistableCompositionPolicy.allow(mockParent, mockChild)).toBe(true);
-                expect(objectAPI.isPersistable).toHaveBeenCalled();
+                expect(objectAPI.getProvider).toHaveBeenCalled();
             });
 
         });

platform/core/bundle.js

@@ -297,8 +297,7 @@ define([
                             "persistenceService",
                             "identifierService",
                             "notificationService",
-                            "$q",
-                            "openmct"
+                            "$q"
                         ]
                     },
                     {

platform/core/src/capabilities/PersistenceCapability.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(["objectUtils"],
-    function (objectUtils) {
+define(
+    function () {
 
         /**
          * Defines the `persistence` capability, used to trigger the
@@ -47,7 +47,6 @@ define(["objectUtils"],
             identifierService,
             notificationService,
             $q,
-            openmct,
             domainObject
         ) {
             // Cache modified timestamp
@@ -59,7 +58,6 @@ define(["objectUtils"],
             this.persistenceService = persistenceService;
             this.notificationService = notificationService;
             this.$q = $q;
-            this.openmct = openmct;
         }
 
         /**
@@ -68,7 +66,7 @@ define(["objectUtils"],
          */
         function rejectIfFalsey(value, $q) {
             if (!value) {
-                return Promise.reject("Error persisting object");
+                return $q.reject("Error persisting object");
             } else {
                 return value;
             }
@@ -100,7 +98,7 @@ define(["objectUtils"],
                 dismissable: true
             });
 
-            return Promise.reject(error);
+            return $q.reject(error);
         }
 
         /**
@@ -112,16 +110,34 @@ define(["objectUtils"],
          */
         PersistenceCapability.prototype.persist = function () {
             var self = this,
-                domainObject = this.domainObject;
+                domainObject = this.domainObject,
+                model = domainObject.getModel(),
+                modified = model.modified,
+                persisted = model.persisted,
+                persistenceService = this.persistenceService,
+                persistenceFn = persisted !== undefined ?
+                    this.persistenceService.updateObject :
+                    this.persistenceService.createObject;
 
-            let newStyleObject = objectUtils.toNewFormat(domainObject.getModel(), domainObject.getId());
-            return this.openmct.objects
-                .save(newStyleObject)
-                .then(function (result) {
-                    return rejectIfFalsey(result, self.$q);
-                }).catch(function (error) {
-                    return notifyOnError(error, domainObject, self.notificationService, self.$q);
-                });
+            if (persisted !== undefined && persisted === modified) {
+                return this.$q.when(true);
+            }
+
+            // Update persistence timestamp...
+            domainObject.useCapability("mutation", function (m) {
+                m.persisted = modified;
+            }, modified);
+
+            // ...and persist
+            return persistenceFn.apply(persistenceService, [
+                this.getSpace(),
+                this.getKey(),
+                domainObject.getModel()
+            ]).then(function (result) {
+                return rejectIfFalsey(result, self.$q);
+            }).catch(function (error) {
+                return notifyOnError(error, domainObject, self.notificationService, self.$q);
+            });
         };
 
         /**

platform/core/test/capabilities/PersistenceCapabilitySpec.js

@@ -19,6 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
 /**
  * PersistenceCapabilitySpec. Created by vwoeltje on 11/6/14.
  */
@@ -39,8 +40,7 @@ define(
                 model,
                 SPACE = "some space",
                 persistence,
-                mockOpenMCT,
-                mockNewStyleDomainObject;
+                happyPromise;
 
             function asPromise(value, doCatch) {
                 return (value || {}).then ? value : {
@@ -56,6 +56,7 @@ define(
             }
 
             beforeEach(function () {
+                happyPromise = asPromise(true);
                 model = { someKey: "some value", name: "domain object"};
 
                 mockPersistenceService = jasmine.createSpyObj(
@@ -93,23 +94,12 @@ define(
                     },
                     useCapability: jasmine.createSpy()
                 };
-
-                mockNewStyleDomainObject = Object.assign({}, model);
-                mockNewStyleDomainObject.identifier = {
-                    namespace: "",
-                    key: id
-                }
-
                 // Simulate mutation capability
                 mockDomainObject.useCapability.and.callFake(function (capability, mutator) {
                     if (capability === 'mutation') {
                         model = mutator(model) || model;
                     }
                 });
-
-                mockOpenMCT = {};
-                mockOpenMCT.objects = jasmine.createSpyObj('Object API', ['save']);
-
                 mockIdentifierService.parse.and.returnValue(mockIdentifier);
                 mockIdentifier.getSpace.and.returnValue(SPACE);
                 mockIdentifier.getKey.and.returnValue(key);
@@ -120,28 +110,51 @@ define(
                     mockIdentifierService,
                     mockNofificationService,
                     mockQ,
-                    mockOpenMCT,
                     mockDomainObject
                 );
             });
 
             describe("successful persistence", function () {
                 beforeEach(function () {
-                    mockOpenMCT.objects.save.and.returnValue(Promise.resolve(true));
+                    mockPersistenceService.updateObject.and.returnValue(happyPromise);
+                    mockPersistenceService.createObject.and.returnValue(happyPromise);
                 });
                 it("creates unpersisted objects with the persistence service", function () {
                     // Verify precondition; no call made during constructor
-                    expect(mockOpenMCT.objects.save).not.toHaveBeenCalled();
+                    expect(mockPersistenceService.createObject).not.toHaveBeenCalled();
 
                     persistence.persist();
 
-                    expect(mockOpenMCT.objects.save).toHaveBeenCalledWith(mockNewStyleDomainObject);
+                    expect(mockPersistenceService.createObject).toHaveBeenCalledWith(
+                        SPACE,
+                        key,
+                        model
+                    );
+                });
+
+                it("updates previously persisted objects with the persistence service", function () {
+                    // Verify precondition; no call made during constructor
+                    expect(mockPersistenceService.updateObject).not.toHaveBeenCalled();
+
+                    model.persisted = 12321;
+                    persistence.persist();
+
+                    expect(mockPersistenceService.updateObject).toHaveBeenCalledWith(
+                        SPACE,
+                        key,
+                        model
+                    );
                 });
 
                 it("reports which persistence space an object belongs to", function () {
                     expect(persistence.getSpace()).toEqual(SPACE);
                 });
 
+                it("updates persisted timestamp on persistence", function () {
+                    model.modified = 12321;
+                    persistence.persist();
+                    expect(model.persisted).toEqual(12321);
+                });
                 it("refreshes the domain object model from persistence", function () {
                     var refreshModel = {someOtherKey: "some other value"};
                     model.persisted = 1;
@@ -152,37 +165,30 @@ define(
 
                 it("does not trigger error notification on successful" +
                     " persistence", function () {
-                    let rejected = false;
-                    return persistence.persist()
-                        .catch(() => rejected = true)
-                        .then(() => {
-                            expect(rejected).toBe(false);
-                            expect(mockNofificationService.error).not.toHaveBeenCalled();
-                        });
+                    persistence.persist();
+                    expect(mockQ.reject).not.toHaveBeenCalled();
+                    expect(mockNofificationService.error).not.toHaveBeenCalled();
                 });
             });
 
             describe("unsuccessful persistence", function () {
+                var sadPromise = {
+                    then: function (callback) {
+                        return asPromise(callback(0), true);
+                    }
+                };
                 beforeEach(function () {
-                    mockOpenMCT.objects.save.and.returnValue(Promise.resolve(false));
+                    mockPersistenceService.createObject.and.returnValue(sadPromise);
                 });
                 it("rejects on falsey persistence result", function () {
-                    let rejected = false;
-                    return persistence.persist()
-                        .catch(() => rejected = true)
-                        .then(() => {
-                            expect(rejected).toBe(true);
-                        });
+                    persistence.persist();
+                    expect(mockQ.reject).toHaveBeenCalled();
                 });
 
                 it("notifies user on persistence failure", function () {
-                    let rejected = false;
-                    return persistence.persist()
-                        .catch(() => rejected = true)
-                        .then(() => {
-                            expect(rejected).toBe(true);
-                            expect(mockNofificationService.error).toHaveBeenCalled();
-                        });
+                    persistence.persist();
+                    expect(mockQ.reject).toHaveBeenCalled();
+                    expect(mockNofificationService.error).toHaveBeenCalled();
                 });
             });
         });

src/adapter/services/LegacyObjectAPIInterceptor.js

@@ -25,11 +25,10 @@ define([
 ], function (
     utils
 ) {
-    function ObjectServiceProvider(eventEmitter, objectService, instantiate, topic, $injector) {
+    function ObjectServiceProvider(eventEmitter, objectService, instantiate, topic) {
         this.eventEmitter = eventEmitter;
         this.objectService = objectService;
         this.instantiate = instantiate;
-        this.$injector = $injector;
 
         this.generalTopic = topic('mutation');
         this.bridgeEventBuses();
@@ -69,53 +68,16 @@ define([
         removeGeneralTopicListener = this.generalTopic.listen(handleLegacyMutation);
     };
 
-    ObjectServiceProvider.prototype.create = async function (object) {
-        let model = utils.toOldFormat(object);
+    ObjectServiceProvider.prototype.save = function (object) {
+        var key = object.key;
 
-        return this.getPersistenceService().createObject(
-            this.getSpace(utils.makeKeyString(object.identifier)),
-            object.identifier.key,
-            model
-        );
-    }
-    ObjectServiceProvider.prototype.update = async function (object) {
-        let model = utils.toOldFormat(object);
-
-        return this.getPersistenceService().updateObject(
-            this.getSpace(utils.makeKeyString(object.identifier)),
-            object.identifier.key,
-            model
-        );
-    }
-
-    /**
-     * Get the space in which this domain object is persisted;
-     * this is useful when, for example, decided which space a
-     * newly-created domain object should be persisted to (by
-     * default, this should be the space of its containing
-     * object.)
-     *
-     * @returns {string} the name of the space which should
-     *          be used to persist this object
-     */
-    ObjectServiceProvider.prototype.getSpace = function (keystring) {
-        return this.getIdentifierService().parse(keystring).getSpace();
+        return object.getCapability('persistence')
+            .persist()
+            .then(function () {
+                return utils.toNewFormat(object, key);
+            });
     };
 
-    ObjectServiceProvider.prototype.getIdentifierService = function () {
-        if (this.identifierService === undefined) {
-            this.identifierService = this.$injector.get('identifierService');
-        }
-        return this.identifierService;
-    };
-
-    ObjectServiceProvider.prototype.getPersistenceService = function () {
-        if (this.persistenceService === undefined) {
-            this.persistenceService = this.$injector.get('persistenceService');
-        }
-        return this.persistenceService;
-    }
-
     ObjectServiceProvider.prototype.delete = function (object) {
         // TODO!
     };
@@ -156,8 +118,7 @@ define([
                 eventEmitter,
                 objectService,
                 instantiate,
-                topic,
-                openmct.$injector
+                topic
             )
         );
 

src/api/objects/ObjectAPI.js

@@ -101,25 +101,14 @@ define([
      */
 
     /**
-     * Create the given domain object in the corresponding persistence store
+     * Save this domain object in its current state.
      *
-     * @method create
+     * @method save
      * @memberof module:openmct.ObjectProvider#
      * @param {module:openmct.DomainObject} domainObject the domain object to
-     *        create
+     *        save
      * @returns {Promise} a promise which will resolve when the domain object
-     *          has been created, or be rejected if it cannot be saved
-     */
-
-    /**
-     * Update this domain object in its persistence store
-     *
-     * @method update
-     * @memberof module:openmct.ObjectProvider#
-     * @param {module:openmct.DomainObject} domainObject the domain object to
-     *        update
-     * @returns {Promise} a promise which will resolve when the domain object
-     *          has been updated, or be rejected if it cannot be saved
+     *          has been saved, or be rejected if it cannot be saved
      */
 
     /**
@@ -172,41 +161,8 @@ define([
         throw new Error('Delete not implemented');
     };
 
-    ObjectAPI.prototype.isPersistable = function (domainObject) {
-        let provider = this.getProvider(domainObject.identifier);
-        return provider !== undefined &&
-            provider.create !== undefined &&
-            provider.update !== undefined;
-    }
-
-    /**
-     * Save this domain object in its current state. EXPERIMENTAL
-     *
-     * @private
-     * @memberof module:openmct.ObjectAPI#
-     * @param {module:openmct.DomainObject} domainObject the domain object to
-     *        save
-     * @returns {Promise} a promise which will resolve when the domain object
-     *          has been saved, or be rejected if it cannot be saved
-     */
-    ObjectAPI.prototype.save = function (domainObject) {
-        let provider = this.getProvider(domainObject.identifier);
-        let result;
-
-        if (!this.isPersistable(domainObject)) {
-            result = Promise.reject('Object provider does not support saving');
-        } else if (hasAlreadyBeenPersisted(domainObject)) {
-            result = Promise.resolve(true);
-        } else {
-            if (domainObject.persisted === undefined) {
-                this.mutate(domainObject, 'persisted', domainObject.modified);
-                result = provider.create(domainObject);
-            } else {
-                this.mutate(domainObject, 'persisted', domainObject.modified);
-                result = provider.update(domainObject);
-            }
-        }
-        return result;
+    ObjectAPI.prototype.save = function () {
+        throw new Error('Save not implemented');
     };
 
     /**
@@ -320,9 +276,5 @@ define([
      * @memberof module:openmct
      */
 
-    function hasAlreadyBeenPersisted(domainObject) {
-        return domainObject.persisted !== undefined &&
-            domainObject.persisted === domainObject.modified;
-    }
     return ObjectAPI;
 });

src/api/objects/ObjectAPISpec.js

@@ -1,60 +0,0 @@
-import ObjectAPI from './ObjectAPI.js';
-
-describe("The Object API", () => {
-    let objectAPI;
-    let mockDomainObject;
-    const TEST_NAMESPACE = "test-namespace";
-    const FIFTEEN_MINUTES = 15 * 60 * 1000;
-
-    beforeEach(() => {
-        objectAPI = new ObjectAPI();
-        mockDomainObject = {
-            identifier: {
-                namespace: TEST_NAMESPACE,
-                key: "test-key"
-            },
-            name: "test object",
-            type: "test-type"
-        };
-    })
-    describe("The save function", () => {
-        it("Rejects if no provider available", () => {
-            let rejected = false;
-            return objectAPI.save(mockDomainObject)
-                .catch(() => rejected = true)
-                .then(() => expect(rejected).toBe(true));
-        });
-        describe("when a provider is available", () => {
-            let mockProvider;
-            beforeEach(() => {
-                mockProvider = jasmine.createSpyObj("mock provider", [
-                    "create",
-                    "update"
-                ]);
-                objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
-            })
-            it("Calls 'create' on provider if object is new", () => {
-                objectAPI.save(mockDomainObject);
-                expect(mockProvider.create).toHaveBeenCalled();
-                expect(mockProvider.update).not.toHaveBeenCalled();
-            });
-            it("Calls 'update' on provider if object is not new", () => {
-                mockDomainObject.persisted = Date.now() - FIFTEEN_MINUTES;
-                mockDomainObject.modified = Date.now();
-
-                objectAPI.save(mockDomainObject);
-                expect(mockProvider.create).not.toHaveBeenCalled();
-                expect(mockProvider.update).toHaveBeenCalled();
-            });
-
-            it("Does not persist if the object is unchanged", () => {
-                mockDomainObject.persisted =
-                    mockDomainObject.modified = Date.now();
-
-                objectAPI.save(mockDomainObject);
-                expect(mockProvider.create).not.toHaveBeenCalled();
-                expect(mockProvider.update).not.toHaveBeenCalled();
-            });
-        });
-    })
-});

src/api/telemetry/TelemetryAPI.js

@@ -334,8 +334,8 @@ define([
             });
             if (subscriber.callbacks.length === 0) {
                 subscriber.unsubscribe();
-                delete this.subscribeCache[keyString];
             }
+            delete this.subscribeCache[keyString];
         }.bind(this);
     };
 

src/api/telemetry/TelemetryAPISpec.js

@@ -156,29 +156,6 @@ define([
                 expect(callbacktwo).not.toHaveBeenCalledWith('anotherValue');
             });
 
-            it('only deletes subscription cache when there are no more subscribers', function () {
-                var unsubFunc = jasmine.createSpy('unsubscribe');
-                telemetryProvider.subscribe.and.returnValue(unsubFunc);
-                telemetryProvider.supportsSubscribe.and.returnValue(true);
-                telemetryAPI.addProvider(telemetryProvider);
-
-                var callback = jasmine.createSpy('callback');
-                var callbacktwo = jasmine.createSpy('callback two');
-                var callbackThree = jasmine.createSpy('callback three');
-                var unsubscribe = telemetryAPI.subscribe(domainObject, callback);
-                var unsubscribeTwo = telemetryAPI.subscribe(domainObject, callbacktwo);
-
-                expect(telemetryProvider.subscribe.calls.count()).toBe(1);
-                unsubscribe();
-                var unsubscribeThree = telemetryAPI.subscribe(domainObject, callbackThree);
-                // Regression test for where subscription cache was deleted on each unsubscribe, resulting in
-                // superfluous additional subscriptions. If the subscription cache is being deleted on each unsubscribe,
-                // then a subsequent subscribe will result in a new subscription at the provider.
-                expect(telemetryProvider.subscribe.calls.count()).toBe(1);
-                unsubscribeTwo();
-                unsubscribeThree();
-            });
-
             it('does subscribe/unsubscribe', function () {
                 var unsubFunc = jasmine.createSpy('unsubscribe');
                 telemetryProvider.subscribe.and.returnValue(unsubFunc);

src/plugins/clearData/plugin.js

@@ -29,28 +29,24 @@ define([
     ClearDataAction,
     Vue
 ) {
-    return function plugin(appliesToObjects, options = {indicator: true}) {
-        let installIndicator = options.indicator;
-
+    return function plugin(appliesToObjects) {
         appliesToObjects = appliesToObjects || [];
 
         return function install(openmct) {
-            if (installIndicator) {
-                let component = new Vue ({
-                        provide: {
-                            openmct
-                        },
-                        components: {
-                            GlobalClearIndicator: GlobaClearIndicator.default
-                        },
-                        template: '<GlobalClearIndicator></GlobalClearIndicator>'
-                    }),
-                    indicator = {
-                        element: component.$mount().$el
-                    };
+            let component = new Vue ({
+                    provide: {
+                        openmct
+                    },
+                    components: {
+                        GlobalClearIndicator: GlobaClearIndicator.default
+                    },
+                    template: '<GlobalClearIndicator></GlobalClearIndicator>'
+                }),
+                indicator = {
+                    element: component.$mount().$el
+                };
 
-                openmct.indicators.add(indicator);
-            }
+            openmct.indicators.add(indicator);
 
             openmct.contextMenu.registerAction(new ClearDataAction.default(openmct, appliesToObjects));
         };

src/plugins/condition/StyleRuleManager.js

@@ -46,7 +46,6 @@ export default class StyleRuleManager extends EventEmitter {
         if (this.isEditing) {
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
             if (this.conditionSetIdentifier) {
                 this.applySelectedConditionStyle();
@@ -67,7 +66,6 @@ export default class StyleRuleManager extends EventEmitter {
     subscribeToConditionSet() {
         if (this.stopProvidingTelemetry) {
             this.stopProvidingTelemetry();
-            delete this.stopProvidingTelemetry;
         }
         this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
             this.openmct.telemetry.request(conditionSetDomainObject)
@@ -156,8 +154,8 @@ export default class StyleRuleManager extends EventEmitter {
         this.applyStaticStyle();
         if (this.stopProvidingTelemetry) {
             this.stopProvidingTelemetry();
-            delete this.stopProvidingTelemetry;
         }
+        delete this.stopProvidingTelemetry;
         this.conditionSetIdentifier = undefined;
     }
 

src/plugins/condition/components/inspector/ConditionalStylesView.vue

@@ -197,7 +197,6 @@ export default {
             }
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
         },
         initialize(conditionSetDomainObject) {
@@ -211,7 +210,6 @@ export default {
             if (this.isEditing) {
                 if (this.stopProvidingTelemetry) {
                     this.stopProvidingTelemetry();
-                    delete this.stopProvidingTelemetry;
                 }
             } else {
                 this.subscribeToConditionSet();
@@ -309,7 +307,6 @@ export default {
             this.persist(domainObjectStyles);
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
         },
         updateDomainObjectItemStyles(newItems) {
@@ -378,7 +375,6 @@ export default {
         subscribeToConditionSet() {
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
             if (this.conditionSetDomainObject) {
                 this.openmct.telemetry.request(this.conditionSetDomainObject)

src/plugins/condition/components/inspector/StylesView.vue

@@ -190,7 +190,6 @@ export default {
             if (this.isEditing) {
                 if (this.stopProvidingTelemetry) {
                     this.stopProvidingTelemetry();
-                    delete this.stopProvidingTelemetry;
                 }
             } else {
                 this.subscribeToConditionSet();
@@ -326,7 +325,6 @@ export default {
 
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
 
             if (this.unObserveObjects) {
@@ -339,7 +337,6 @@ export default {
         subscribeToConditionSet() {
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
             if (this.conditionSetDomainObject) {
                 this.openmct.telemetry.request(this.conditionSetDomainObject)
@@ -497,7 +494,6 @@ export default {
 
             if (this.stopProvidingTelemetry) {
                 this.stopProvidingTelemetry();
-                delete this.stopProvidingTelemetry;
             }
         },
         removeConditionalStyles(domainObjectStyles, itemId) {

src/plugins/displayLayout/components/TelemetryView.vue

@@ -31,16 +31,10 @@
     <div
         v-if="domainObject"
         class="c-telemetry-view"
-        :class="{
-            styleClass,
-            'is-missing': domainObject.status === 'missing'
-        }"
+        :class="styleClass"
         :style="styleObject"
         @contextmenu.prevent="showContextMenu"
     >
-        <div class="is-missing__indicator"
-             title="This item is missing"
-        ></div>
         <div
             v-if="showLabel"
             class="c-telemetry-view__label"

src/plugins/displayLayout/components/telemetry-view.scss

@@ -26,15 +26,4 @@
         @include abs();
         border: 1px solid transparent;
     }
-
-    @include isMissing($absPos: true);
-
-    .is-missing__indicator {
-        top: 0;
-        left: 0;
-    }
-
-    &.is-missing {
-        border: $borderMissing;
-    }
 }

src/plugins/folderView/components/GridItem.vue

@@ -1,18 +1,13 @@
 <template>
 <a
     class="l-grid-view__item c-grid-item"
-    :class="{
-        'is-alias': item.isAlias === true,
-        'is-missing': item.model.status === 'missing',
-        'c-grid-item--unknown': item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1
-    }"
+    :class="{ 'is-alias': item.isAlias === true }"
     :href="objectLink"
 >
     <div
         class="c-grid-item__type-icon"
         :class="(item.type.cssClass != undefined) ? 'bg-' + item.type.cssClass : 'bg-icon-object-unknown'"
-    >
-    </div>
+    ></div>
     <div class="c-grid-item__details">
         <!-- Name and metadata -->
         <div
@@ -27,9 +22,6 @@
         </div>
     </div>
     <div class="c-grid-item__controls">
-        <div class="is-missing__indicator"
-             title="This item is missing"
-        ></div>
         <div
             class="icon-people"
             title="Shared"

src/plugins/folderView/components/ListItem.vue

@@ -7,19 +7,13 @@
     <td class="c-list-item__name">
         <a
             ref="objectLink"
-            class="c-object-label"
-            :class="{ 'is-missing': item.model.status === 'missing' }"
             :href="objectLink"
         >
             <div
-                class="c-object-label__type-icon c-list-item__type-icon"
+                class="c-list-item__type-icon"
                 :class="item.type.cssClass"
-            >
-                <span class="is-missing__indicator"
-                      title="This item is missing"
-                ></span>
-            </div>
-            <div class="c-object-label__name c-list-item__name">{{ item.model.name }}</div>
+            ></div>
+            <div class="c-list-item__name-value">{{ item.model.name }}</div>
         </a>
     </td>
     <td class="c-list-item__type">

src/plugins/folderView/components/grid-view.scss

@@ -38,15 +38,7 @@
         // Object is an alias to an original.
         [class*='__type-icon'] {
             @include isAlias();
-        }
-    }
-
-    &.is-missing {
-        @include isMissing();
-
-        [class*='__type-icon'],
-        [class*='__details'] {
-            opacity: $opacityMissing;
+            color: $colorIconAliasForKeyFilter;
         }
     }
 
@@ -93,14 +85,15 @@
     body.desktop & {
         $transOutMs: 300ms;
         flex-flow: column nowrap;
-        transition: $transOutMs ease-in-out;
+        transition: background $transOutMs ease-in-out;
 
         &:hover {
-            filter: $filterItemHoverFg;
+            background: $colorItemBgHov;
             transition: $transIn;
 
             .c-grid-item__type-icon {
-                transform: scale(1.1);
+                filter: $colorKeyFilterHov;
+                transform: scale(1);
                 transition: $transInBounce;
             }
         }
@@ -110,7 +103,7 @@
         }
 
         &__controls {
-            align-items: baseline;
+            align-items: start;
             flex: 0 0 auto;
             order: 1;
             .c-info-button,
@@ -122,6 +115,7 @@
             font-size: floor($gridItemDesk / 3);
             margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
             order: 2;
+            transform: scale(0.9);
             transform-origin: center;
             transition: all $transOutMs ease-in-out;
         }

src/plugins/folderView/components/list-item.scss

@@ -1,17 +1,37 @@
 /******************************* LIST ITEM */
 .c-list-item {
-    &__type-icon {
-        color: $colorItemTreeIcon;
+    &__name a {
+        display: flex;
+
+        > * + * { margin-left: $interiorMarginSm; }
     }
 
-    &__name {
+    &__type-icon {
+        // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
+        color: $colorKey;
+        display: inline-block;
+        width: 1em;
+        margin-right:$interiorMarginSm;
+    }
+
+    &__name-value {
         @include ellipsize();
     }
 
     &.is-alias {
         // Object is an alias to an original.
         [class*='__type-icon'] {
-            @include isAlias();
+            &:after {
+                color: $colorIconAlias;
+                content: $glyph-icon-link;
+                font-family: symbolsfont;
+                display: block;
+                position: absolute;
+                text-shadow: rgba(black, 0.5) 0 1px 2px;
+                top: auto; left: -1px; bottom: 1px; right: auto;
+                transform-origin: bottom left;
+                transform: scale(0.65);
+            }
         }
     }
 }

src/plugins/folderView/components/list-view.scss

@@ -13,8 +13,7 @@
             cursor: pointer;
 
             &:hover {
-                background: $colorItemTreeHoverBg;
-                filter: $filterHov;
+                background: $colorListItemBgHov;
                 transition: $transIn;
             }
         }

src/plugins/notebook/components/notebook-snapshot-container.vue

@@ -2,16 +2,13 @@
 <div class="c-snapshots-h">
     <div class="l-browse-bar">
         <div class="l-browse-bar__start">
-            <div class="l-browse-bar__object-name--w">
-                <div class="l-browse-bar__object-name c-object-label">
-                    <div class="c-object-label__type-icon icon-notebook"></div>
-                    <div class="c-object-label__name">
-                        Notebook Snapshots
-                        <span v-if="snapshots.length"
-                              class="l-browse-bar__object-details"
-                        >&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
-                        </span>
-                    </div>
+            <div class="l-browse-bar__object-name--w icon-notebook">
+                <div class="l-browse-bar__object-name">
+                    Notebook Snapshots
+                    <span v-if="snapshots.length"
+                          class="l-browse-bar__object-details"
+                    >&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
+                    </span>
                 </div>
                 <PopupMenu v-if="snapshots.length > 0"
                            :popup-menu-items="popupMenuItems"

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

@@ -28,22 +28,17 @@
             ng-click="legend.set('expanded', !legend.get('expanded'));">
         </div>
 
-        <div class="c-plot-legend__wrapper"
-            ng-class="{ 'is-cursor-locked':  !!lockHighlightPoint }">
+        <div class="c-plot-legend__wrapper">
 
             <!-- COLLAPSED PLOT LEGEND -->
             <div class="plot-wrapper-collapsed-legend"
-                 ng-class="{'is-cursor-locked': !!lockHighlightPoint }">
-                <div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" title="Cursor is point locked. Click anywhere in the plot to unlock."></div>
+                 ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
                 <div class="plot-legend-item"
-                     ng-class="{'is-missing': series.domainObject.status === 'missing'}"
-                     ng-repeat="series in series track by $index"
-                >
+                      ng-repeat="series in series track by $index">
                     <div class="plot-series-swatch-and-name">
-                        <span class="plot-series-color-swatch "
+                        <span class="plot-series-color-swatch"
                               ng-style="{ 'background-color': series.get('color').asHexString() }">
                         </span>
-                        <span class="is-missing__indicator" title="This item is missing"></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 }}"
@@ -60,10 +55,7 @@
             </div>
 
             <!-- EXPANDED PLOT LEGEND -->
-            <div class="plot-wrapper-expanded-legend"
-                 ng-class="{'is-cursor-locked': !!lockHighlightPoint }"
-            >
-                <div class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock" title="Click anywhere in the plot to unlock."> Cursor locked to point</div>
+            <div class="plot-wrapper-expanded-legend">
                 <table>
                     <thead>
                         <tr>
@@ -84,15 +76,12 @@
                             </th>
                         </tr>
                     </thead>
-                    <tr ng-repeat="series in series"
-                        class="plot-legend-item"
-                        ng-class="{'is-missing': series.domainObject.status === 'missing'}"
-                    >
-                        <td class="plot-series-swatch-and-name">
+                    <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="is-missing__indicator" title="This item is missing"></span>
                             <span class="plot-series-name">{{ series.get('name') }}</span>
                         </td>
 
@@ -145,7 +134,7 @@
                     {{option.name}}
                 </option>
             </select>
-
+            
 
             <mct-ticks axis="yAxis">
                 <div ng-repeat="tick in ticks track by tick.value"

src/plugins/plot/src/plot/MCTPlotController.js

@@ -71,6 +71,8 @@ define([
         this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
         this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
         this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
+
+        this.watchForMarquee();
     };
 
     MCTPlotController.prototype.initialize = function () {
@@ -81,6 +83,11 @@ define([
         this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
         this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
 
+        this.watchForMarquee();
+
+        this.listenTo(this.$window, 'keydown', this.toggleInteractionMode, this);
+        this.listenTo(this.$window, 'keyup', this.resetInteractionMode, this);
+
         this.$scope.rectangles = [];
         this.$scope.tickWidth = 0;
 
@@ -236,16 +243,12 @@ define([
     };
 
     MCTPlotController.prototype.onMouseDown = function ($event) {
-        // do not monitor drag events on browser context click
-        if (event.ctrlKey) {
-            return;
-        }
-
         this.listenTo(this.$window, 'mouseup', this.onMouseUp, this);
         this.listenTo(this.$window, 'mousemove', this.trackMousePosition, this);
-        if (event.altKey) {
+        if (this.allowPan) {
             return this.startPan($event);
-        } else {
+        }
+        if (this.allowMarquee) {
             return this.startMarquee($event);
         }
     };
@@ -258,11 +261,11 @@ define([
             this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
         }
 
-        if (this.pan) {
+        if (this.allowPan) {
             return this.endPan($event);
         }
 
-        if (this.marquee) {
+        if (this.allowMarquee) {
             return this.endMarquee($event);
         }
     };
@@ -286,9 +289,6 @@ define([
     };
 
     MCTPlotController.prototype.startMarquee = function ($event) {
-        this.$canvas.removeClass('plot-drag');
-        this.$canvas.addClass('plot-marquee');
-
         this.trackMousePosition($event);
         if (this.positionOverPlot) {
             this.freeze();
@@ -444,9 +444,6 @@ define([
     };
 
     MCTPlotController.prototype.startPan = function ($event) {
-        this.$canvas.addClass('plot-drag');
-        this.$canvas.removeClass('plot-marquee');
-
         this.trackMousePosition($event);
         this.freeze();
         this.pan = {
@@ -489,6 +486,32 @@ define([
         this.$scope.$emit('user:viewport:change:end');
     };
 
+    MCTPlotController.prototype.watchForMarquee = function () {
+        this.$canvas.removeClass('plot-drag');
+        this.$canvas.addClass('plot-marquee');
+        this.allowPan = false;
+        this.allowMarquee = true;
+    };
+
+    MCTPlotController.prototype.watchForPan = function () {
+        this.$canvas.addClass('plot-drag');
+        this.$canvas.removeClass('plot-marquee');
+        this.allowPan = true;
+        this.allowMarquee = false;
+    };
+
+    MCTPlotController.prototype.toggleInteractionMode = function (event) {
+        if (event.keyCode === 18) { // control key.
+            this.watchForPan();
+        }
+    };
+
+    MCTPlotController.prototype.resetInteractionMode = function (event) {
+        if (event.keyCode === 18) {
+            this.watchForMarquee();
+        }
+    };
+
     MCTPlotController.prototype.freeze = function () {
         this.config.yAxis.set('frozen', true);
         this.config.xAxis.set('frozen', true);

src/plugins/tabs/README.md

@@ -0,0 +1,7 @@
+# Espresso Theme
+A light colored theme for the Open MCT user interface.
+
+## Installation
+```js
+openmct.install(openmct.plugins.Snow());
+```

src/plugins/tabs/components/tabs.vue

@@ -3,7 +3,7 @@
     <div
         class="c-tabs-view__tabs-holder c-tabs"
         :class="{
-            'is-dragging': isDragging && allowEditing,
+            'is-dragging': isDragging,
             'is-mouse-over': allowDrop
         }"
     >
@@ -22,24 +22,14 @@
         <button
             v-for="(tab,index) in tabsList"
             :key="index"
-            class="c-tab c-tabs-view__tab"
-            :class="{
-                'is-current': isCurrent(tab)
-            }"
+            class="c-tabs-view__tab c-tab"
+            :class="[
+                {'is-current': isCurrent(tab)},
+                tab.type.definition.cssClass
+            ]"
             @click="showTab(tab, index)"
         >
-            <div class="c-object-label"
-                 :class="{'is-missing': tab.domainObject.status === 'missing'}"
-            >
-                <div class="c-object-label__type-icon"
-                     :class="tab.type.definition.cssClass"
-                >
-                    <span class="is-missing__indicator"
-                          title="This item is missing"
-                    ></span>
-                </div>
-                <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
-            </div>
+            <span class="c-button__label">{{ tab.domainObject.name }}</span>
         </button>
     </div>
     <div
@@ -48,6 +38,15 @@
         class="c-tabs-view__object-holder"
         :class="{'c-tabs-view__object-holder--hidden': !isCurrent(tab)}"
     >
+        <div
+            v-if="currentTab"
+            class="c-tabs-view__object-name c-object-label l-browse-bar__object-name--w"
+            :class="currentTab.type.definition.cssClass"
+        >
+            <div class="l-browse-bar__object-name c-object-label__name">
+                {{ currentTab.domainObject.name }}
+            </div>
+        </div>
         <object-view
             v-if="internalDomainObject.keep_alive ? currentTab : isCurrent(tab)"
             class="c-tabs-view__object"
@@ -59,12 +58,6 @@
 
 <script>
 import ObjectView from '../../../ui/components/ObjectView.vue';
-import {
-    getSearchParam,
-    setSearchParam,
-    deleteSearchParam
-} from 'utils/openmctLocation';
-
 
 var unknownObjectType = {
     definition: {
@@ -78,45 +71,26 @@ export default {
     components: {
         ObjectView
     },
-    props: {
-        isEditing: {
-            type: Boolean,
-            required: true
-        }
-    },
     data: function () {
-        let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-
         return {
             internalDomainObject: this.domainObject,
             currentTab: {},
-            currentTabIndex: undefined,
             tabsList: [],
             setCurrentTab: true,
             isDragging: false,
-            allowDrop: false,
-            searchTabKey: `tabs.pos.${keyString}`
+            allowDrop: false
         };
     },
-    computed: {
-        allowEditing() {
-            return !this.internalDomainObject.locked && this.isEditing;
-        }
-    },
     mounted() {
         if (this.composition) {
             this.composition.on('add', this.addItem);
             this.composition.on('remove', this.removeItem);
             this.composition.on('reorder', this.onReorder);
             this.composition.load().then(() => {
-                let currentTabIndexFromURL = getSearchParam(this.searchTabKey);
-                let currentTabIndexFromDomainObject = this.internalDomainObject.currentTabIndex;
+                let currentTabIndex = this.domainObject.currentTabIndex;
 
-                if (currentTabIndexFromURL !== null) {
-                    this.setCurrentTabByIndex(currentTabIndexFromURL);
-                } else if (currentTabIndexFromDomainObject !== undefined) {
-                    this.setCurrentTabByIndex(currentTabIndexFromDomainObject);
-                    this.storeCurrentTabIndexInURL(currentTabIndexFromDomainObject);
+                if (currentTabIndex !== undefined && this.tabsList.length > currentTabIndex) {
+                    this.currentTab = this.tabsList[currentTabIndex];
                 }
             });
         }
@@ -126,29 +100,20 @@ export default {
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
     },
-    beforeDestroy() {
-        this.persistCurrentTabIndex(this.currentTabIndex);
-    },
     destroyed() {
         this.composition.off('add', this.addItem);
         this.composition.off('remove', this.removeItem);
         this.composition.off('reorder', this.onReorder);
 
         this.unsubscribe();
-        this.clearCurrentTabIndexFromURL();
 
         document.removeEventListener('dragstart', this.dragstart);
         document.removeEventListener('dragend', this.dragend);
     },
     methods:{
-        setCurrentTabByIndex(index) {
-            if (this.tabsList[index]) {
-                this.currentTab = this.tabsList[index];
-            }
-        },
         showTab(tab, index) {
             if (index !== undefined) {
-                this.storeCurrentTabIndexInURL(index);
+                this.storeCurrentTabIndex(index);
             }
 
             this.currentTab = tab;
@@ -168,10 +133,6 @@ export default {
                 this.setCurrentTab = false;
             }
         },
-        reset() {
-            this.currentTab = {};
-            this.setCurrentTab = true;
-        },
         removeItem(identifier) {
             let pos = this.tabsList.findIndex(tab =>
                     tab.domainObject.identifier.namespace === identifier.namespace && tab.domainObject.identifier.key === identifier.key
@@ -183,10 +144,6 @@ export default {
             if (this.isCurrent(tabToBeRemoved)) {
                 this.showTab(this.tabsList[this.tabsList.length - 1], this.tabsList.length - 1);
             }
-
-            if (!this.tabsList.length) {
-                this.reset();
-            }
         },
         onReorder(reorderPlan) {
             let oldTabs = this.tabsList.slice();
@@ -197,7 +154,7 @@ export default {
         },
         onDrop(e) {
             this.setCurrentTab = true;
-            this.storeCurrentTabIndexInURL(this.tabsList.length);
+            this.storeCurrentTabIndex(this.tabsList.length);
         },
         dragstart(e) {
             if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
@@ -220,19 +177,8 @@ export default {
         updateInternalDomainObject(domainObject) {
             this.internalDomainObject = domainObject;
         },
-        persistCurrentTabIndex(index) {
+        storeCurrentTabIndex(index) {
             this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
-        },
-        storeCurrentTabIndexInURL(index) {
-            let currentTabIndexInURL = getSearchParam(this.searchTabKey);
-
-            if (index !== currentTabIndexInURL) {
-                setSearchParam(this.searchTabKey, index);
-                this.currentTabIndex = index;
-            }
-        },
-        clearCurrentTabIndexFromURL() {
-            deleteSearchParam(this.searchTabKey);
         }
     }
 }

src/plugins/tabs/tabs.js

@@ -42,28 +42,20 @@ define([
                 let component;
 
                 return {
-                    show: function (element, editMode) {
+                    show: function (element) {
                         component =  new Vue({
                             el: element,
                             components: {
                                 TabsComponent: TabsComponent.default
                             },
-                            data() {
-                                return {
-                                    isEditing: editMode
-                                };
-                            },
                             provide: {
                                 openmct,
                                 domainObject,
                                 composition: openmct.composition.get(domainObject)
                             },
-                            template: '<tabs-component :isEditing="isEditing"></tabs-component>'
+                            template: '<tabs-component></tabs-component>'
                         });
                     },
-                    onEditModeChange(editMode) {
-                        component.isEditing = editMode;
-                    },
                     destroy: function (element) {
                         component.$destroy();
                         component = undefined;

src/styles/_constants-espresso.scss

@@ -151,10 +151,6 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
-$filterItemHoverFg: brightness(1.2) contrast(1.1);
-$filterItemMissing: brightness(0.6) grayscale(1);
-$opacityMissing: 0.5;
-$borderMissing: 1px dashed $colorAlert !important;
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color

src/styles/_constants-maelstrom.scss

@@ -155,10 +155,6 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
-$filterItemHoverFg: brightness(1.2) contrast(1.1);
-$filterItemMissing: contrast(0.2);
-$opacityMissing: 0.5;
-$borderMissing: 1px dashed $colorAlert !important;
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color

src/styles/_constants-snow.scss

@@ -151,10 +151,6 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
-$filterItemHoverFg: brightness(0.9);
-$filterItemMissing: contrast(0.2);
-$opacityMissing: 0.4;
-$borderMissing: 1px dashed $colorAlert !important;
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color

src/styles/_constants.scss

@@ -61,7 +61,7 @@ $plotXBarH: 35px;
 $plotLegendH: 20px;
 $plotLegendWidthCollapsed: 20%;
 $plotLegendWidthExpanded: 50%;
-$plotSwatchD: 12px;
+$plotSwatchD: 10px;
 $plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
 $plotMinH: 95px;
 $controlBarH: 25px;

src/styles/_controls.scss

@@ -411,17 +411,7 @@ select {
 
 .c-tab {
     // Used in Tab View, generic tabs
-    $notchSize: 7px;
-    $clipPath:
-        polygon(
-            0% 0%,
-            calc(100% - #{$notchSize}) 0%,
-            100% #{$notchSize},
-            100% calc(100% - #{$notchSize}),
-            100% 100%,
-            0% 100%
-        );
-    background: rgba($colorBtnBg, 0.7);
+    background: $colorBtnBg;
     color: $colorBtnFg;
     cursor: pointer;
     display: flex;
@@ -430,15 +420,21 @@ select {
     margin: 1px 1px 0 0;
     padding: $interiorMargin $interiorMarginLg;
     white-space: nowrap;
-    clip-path: $clipPath;
-    -webkit-clip-path: $clipPath; // Safari
 
-    > * + * {
-        margin-left: $interiorMargin;
-    }
+    --notchSize: 7px;
+
+    clip-path:
+        polygon(
+            0% 0%,
+            calc(100% - var(--notchSize)) 0%,
+            100% var(--notchSize),
+            100% calc(100% - var(--notchSize)),
+            100% 100%,
+            0% 100%
+        );
 
     @include hover() {
-        filter: $filterHov;
+        background: $colorBtnBgHov;
     }
 
     &.is-current {

src/styles/_legacy-plots.scss

@@ -43,9 +43,7 @@ mct-plot {
 
 .c-plot,
 .gl-plot {
-    overflow: hidden;
-
-        .s-status-taking-snapshot & {
+    .s-status-taking-snapshot & {
         .c-control-bar {
             display: none;
         }
@@ -53,17 +51,6 @@ mct-plot {
             display: none;
         }
     }
-
-    /*********************** MISSING ITEM INDICATORS */
-    .is-missing__indicator {
-        display: none;
-    }
-    .is-missing {
-        @include isMissing();
-        .is-missing__indicator {
-            font-size: 0.8em;
-        }
-    }
 }
 
 .c-plot {
@@ -87,7 +74,6 @@ mct-plot {
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
-        overflow: hidden;
     }
 
     &--stacked {
@@ -116,15 +102,18 @@ mct-plot {
     }
 }
 
+
 .gl-plot {
     display: flex;
-    flex: 1 1 auto;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: $plotMinH;
 
     /*********************** AXIS AND DISPLAY AREA */
     .plot-wrapper-axis-and-display-area {
         position: relative;
         flex: 1 1 auto;
-        min-height: $plotMinH;
     }
 
     .gl-plot-wrapper-display-area-and-x-axis {
@@ -207,6 +196,7 @@ mct-plot {
             left: 0; top: 0; right: auto; bottom: 0;
             padding-left: 5px;
             text-orientation: mixed;
+            //overflow: hidden;
             writing-mode: vertical-lr;
             &:before {
                 // Icon denoting configurability
@@ -378,6 +368,12 @@ mct-plot {
     z-index: -10;
 
     .l-view-section {
+        //$m: $interiorMargin;
+        //top: $m !important;
+        //right: $m;
+        //bottom: $m;
+        //left: $m;
+
         .s-status-timeconductor-unsynced .holder-plot {
             .t-object-alert.t-alert-unsynced {
                 display: none;
@@ -433,18 +429,14 @@ mct-plot {
 /****************** _LEGEND.SCSS */
 .gl-plot-legend,
 .c-plot-legend {
-    overflow: hidden;
-
     &__wrapper {
         // Holds view-control and both collapsed and expanded legends
         flex: 1 1 auto;
-        height: 100%;
-        overflow: auto;
-        padding: 2px;
+        overflow: auto; // Prevents collapsed legend from forcing scrollbars on higher parent containers
     }
 
     &__view-control {
-        padding-top: 4px;
+        padding-top: 2px;
         margin-right: $interiorMarginSm;
     }
 
@@ -489,21 +481,15 @@ mct-plot {
 /***************** GENERAL STYLES, ALL STATES */
 .plot-legend-item {
     // General styles for legend items, both expanded and collapsed legend states
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
-
     .plot-series-color-swatch {
-        border-radius: 30%; //$smallCr;
+        border-radius: $smallCr;
         border: 1px solid $colorBodyBg;
         display: inline-block;
-        flex: 0 0 auto;
         height: $plotSwatchD;
         width: $plotSwatchD;
     }
     .plot-series-name {
         display: inline;
-        @include ellipsize();
     }
 
     .plot-series-value {
@@ -511,16 +497,6 @@ mct-plot {
     }
 }
 
-.plot-series-swatch-and-name {
-    display: flex;
-    flex: 0 1 auto;
-    align-items: center;
-
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
-}
-
 .plot-wrapper-expanded-legend {
     flex: 1 1 auto;
 }
@@ -529,6 +505,9 @@ mct-plot {
     &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
     &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
 
+    &.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; }
+    &.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; }
+
     &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
     &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
     &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
@@ -542,13 +521,19 @@ mct-plot {
             display: flex;
             align-items: center;
             justify-content: stretch;
-
+            &:not(:first-child) {
+                margin-left: $interiorMarginLg;
+            }
             .plot-series-swatch-and-name,
             .plot-series-value {
                 @include ellipsize();
                 flex: 1 1 auto;
             }
 
+            .plot-series-swatch-and-name {
+                margin-right: $interiorMarginSm;
+            }
+
             .plot-series-value {
                 text-align: left;
             }
@@ -558,7 +543,7 @@ mct-plot {
     /***************** GENERAL STYLES, EXPANDED */
     &.plot-legend-expanded {
         .gl-plot-legend {
-             max-height: 70%;
+            // max-height: 70%;
         }
 
         .plot-wrapper-expanded-legend {
@@ -579,11 +564,6 @@ mct-plot {
                 display: flex;
                 flex: 1 1 auto;
                 overflow: hidden;
-
-                > .plot-legend-item + .plot-legend-item {
-                    // Space between plot items
-                    margin-left: $interiorMarginLg;
-                }
             }
         }
     }
@@ -615,17 +595,12 @@ mct-plot {
                 min-width: 0;
                 flex: 1 1 auto;
                 overflow-y: auto;
-
-                > * + * {
-                    // Space between plot items
-                    margin-top: $interiorMarginSm;
-                }
             }
             .plot-legend-item {
+                margin-bottom: 1px;
                 margin-left: 0;
-                flex-wrap: nowrap;
+                flex-wrap: wrap;
                 .plot-series-swatch-and-name {
-                    @include ellipsize();
                     flex: 0 1 auto;
                     min-width: 20%;
                 }
@@ -679,24 +654,3 @@ mct-plot {
         display: inline-block !important;
     }
 }
-
-/*********************** CURSOR LOCK INDICATOR */
-[class*='c-state-indicator__alert-cursor-lock'] {
-    display: none;
-}
-
-[class*='is-cursor-locked'] {
-    background: rgba($colorInfo, 0.1);
-
-    [class*='c-state-indicator__alert-cursor-lock'] {
-        @include userSelectNone();
-        color: $colorInfo;
-        display: block;
-        margin-right: $interiorMarginSm;
-
-        &[class*='--verbose'] {
-            padding: $interiorMarginSm;
-
-        }
-    }
-}

src/styles/_mixins.scss

@@ -117,33 +117,6 @@
     }
 }
 
-@mixin isMissing($absPos: false) {
-    // Common styles to be applied to tree items, object labels, grid and list item views
-    //opacity: 0.7;
-    //pointer-events: none; // Don't think we can do this, as disables title hover on icon element
-
-    .is-missing__indicator {
-        display: none ;
-        text-shadow: $colorBodyBg 0 0 2px;
-        color: $colorAlert;
-        font-family: symbolsfont;
-
-        &:before {
-            content: $glyph-icon-alert-triangle;
-        }
-    }
-
-    @if $absPos {
-        .is-missing__indicator {
-            position: absolute;
-            z-index: 3;
-        }
-    }
-
-    &.is-missing .is-missing__indicator,
-    .is-missing .is-missing__indicator { display: block !important; }
-}
-
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
     background-image: linear-gradient(-45deg,
         rgba($c, $a) 25%, transparent 25%,

src/styles/_table.scss

@@ -49,6 +49,8 @@ table {
     td {
         vertical-align: top;
     }
+
+    a { color: $colorBtnMajorBg; }
 }
 
 .is-editing {

src/styles/vue-styles.scss

@@ -13,6 +13,7 @@
 @import "../plugins/filters/components/filters-view.scss";
 @import "../plugins/filters/components/global-filters.scss";
 @import "../plugins/flexibleLayout/components/flexible-layout.scss";
+@import "../plugins/folderView/components/grid-item.scss";
 @import "../plugins/folderView/components/grid-view.scss";
 @import "../plugins/folderView/components/list-item.scss";
 @import "../plugins/folderView/components/list-view.scss";

src/ui/components/ObjectFrame.vue

@@ -24,24 +24,13 @@
     class="c-so-view has-local-controls"
     :class="{
         'c-so-view--no-frame': !hasFrame,
-        'has-complex-content': complexContent,
-        'is-missing': domainObject.status === 'missing'
+        'has-complex-content': complexContent
     }"
 >
     <div class="c-so-view__header">
         <div class="c-object-label"
-             :class="{
-                 classList,
-                 'is-missing': domainObject.status === 'missing'
-             }"
+             :class="[cssClass, classList]"
         >
-            <div class="c-object-label__type-icon"
-                 :class="cssClass"
-            >
-                <span class="is-missing__indicator"
-                      title="This item is missing"
-                ></span>
-            </div>
             <div class="c-object-label__name">
                 {{ domainObject && domainObject.name }}
             </div>
@@ -57,9 +46,6 @@
             @click="expand"
         ></button>
     </div>
-    <div class="is-missing__indicator"
-         title="This item is missing"
-    ></div>
     <object-view
         ref="objectView"
         class="c-so-view__object-view"

src/ui/components/ObjectLabel.vue

@@ -1,10 +1,7 @@
 <template>
 <a
     class="c-tree__item__label c-object-label"
-    :class="{
-        classList,
-        'is-missing': observedObject.status === 'missing'
-    }"
+    :class="classList"
     draggable="true"
     :href="objectLink"
     @dragstart="dragStart"
@@ -13,14 +10,8 @@
     <div
         class="c-tree__item__type-icon c-object-label__type-icon"
         :class="typeClass"
-    >
-        <span class="is-missing__indicator"
-              title="This item is missing"
-        ></span>
-    </div>
-    <div class="c-tree__item__name c-object-label__name">
-        {{ observedObject.name }}
-    </div>
+    ></div>
+    <div class="c-tree__item__name c-object-label__name">{{ observedObject.name }}</div>
 </a>
 </template>
 

src/ui/components/ObjectView.vue

@@ -53,9 +53,7 @@ export default {
     mounted() {
         this.currentObject = this.object;
         this.updateView();
-        this.$el.addEventListener('dragover', this.onDragOver, {
-            capture: true
-        });
+        this.$el.addEventListener('dragover', this.onDragOver);
         this.$el.addEventListener('drop', this.editIfEditable, {
             capture: true
         });
@@ -271,7 +269,6 @@ export default {
             if (provider &&
                 provider.canEdit &&
                 provider.canEdit(this.currentObject) &&
-                this.isEditingAllowed() &&
                 !this.openmct.editor.isEditing()) {
                 this.openmct.editor.edit();
             }
@@ -304,7 +301,7 @@ export default {
                 objectPath= this.currentObjectPath || this.objectPath,
                 parentObject = objectPath[1];
 
-            return [browseObject, parentObject, this.currentObject].every(object => object && !object.locked);
+            return [browseObject, parentObject, this.currentObject].every(object => !object.locked);
         }
     }
 }

src/ui/components/object-frame.scss

@@ -2,10 +2,6 @@
     display: flex;
     flex-direction: column;
 
-    &.is-missing {
-        border: $borderMissing;
-    }
-
     /*************************** HEADER */
     &__header {
         flex: 0 0 auto;
@@ -43,15 +39,6 @@
         > .c-so-view__local-controls {
             top: $interiorMarginSm; right: $interiorMarginSm;
         }
-
-        &.is-missing {
-            @include isMissing($absPos: true);
-
-            .is-missing__indicator {
-                top: $interiorMargin;
-                left: $interiorMargin;
-            }
-        }
     }
 
     &__local-controls {
@@ -74,9 +61,11 @@
         height: 0; // Chrome 73 overflow bug fix
         overflow: auto;
 
-        .u-fills-container {
-            // Expand component types that fill a container
-            @include abs();
+        .u-angular-object-view-wrapper {
+            .u-fills-container {
+                // Expand component types that fill a container
+                @include abs();
+            }
         }
     }
 
@@ -89,5 +78,8 @@
 }
 
 .u-angular-object-view-wrapper {
-    display: contents;
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
 }

src/ui/components/object-label.scss

@@ -7,33 +7,19 @@
     overflow: hidden;
     white-space: nowrap;
 
-    > * + * { margin-left: $interiorMargin; }
-
     &__name {
         @include ellipsize();
         display: inline;
     }
 
-    &__type-icon {
+    &__type-icon,
+    &:before {
         // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
         display: block;
         flex: 0 0 auto;
         font-size: 1.1em;
-    }
-
-    &.is-missing {
-        @include isMissing($absPos: true);
-
-        [class*='__type-icon']:before,
-        [class*='__type-icon']:after{
-            opacity: $opacityMissing;
-        }
-
-        .is-missing__indicator {
-            right: -3px;
-            top: -3px;
-            transform: scale(0.7);
-        }
+        opacity: 0.6;
+        margin-right: $interiorMargin;
     }
 }
 
@@ -41,8 +27,6 @@
     border-radius: $controlCr;
     padding: $interiorMarginSm 1px;
 
-    > * + * { margin-left: $interiorMarginSm; }
-
     &__name {
         display: inline;
         width: 100%;

src/ui/inspector/ObjectName.vue

@@ -1,24 +1,16 @@
 <template>
 <div class="c-inspector__header">
-    <div v-if="!multiSelect"
+    <div v-if="!multiSelect && !singleSelectNonObject"
          class="c-inspector__selected-w c-object-label"
-         :class="{'is-missing': domainObject.status === 'missing' }"
+         :class="typeCssClass"
     >
-        <div class="c-object-label__type-icon"
-             :class="typeCssClass"
-        >
-            <span class="is-missing__indicator"
-                  title="This item is missing"
-            ></span>
-        </div>
-
-        <span v-if="!singleSelectNonObject"
-              class="c-inspector__selected c-object-label__name"
-        >{{ item.name }}</span>
-        <span v-if="singleSelectNonObject"
-              class="c-inspector__selected  c-object-label__name c-inspector__selected--non-domain-object"
-        >Layout Object</span>
-
+        <span class="c-inspector__selected c-object-label__name">{{ item.name }}</span>
+    </div>
+    <div v-if="singleSelectNonObject"
+         class="c-inspector__selected-w  c-object-label"
+         :class="typeCssClass"
+    >
+        <span class="c-inspector__selected  c-object-label__name c-inspector__selected--non-domain-object">Layout Object</span>
     </div>
     <div v-if="multiSelect"
          class="c-inspector__multiple-selected-w"

src/ui/inspector/inspector.scss

@@ -4,7 +4,7 @@
     flex-direction: column;
 
     > * {
-        // This is on purpose: want extra margin on top object-name element
+        // Thi is on purpose: want extra margin on top object-name element
         margin-top: $interiorMargin;
     }
 
@@ -41,8 +41,6 @@
 
     &__content {
         flex: 1 1 auto;
-        display: flex;
-        flex-direction: column;
     }
 
     &__elements {

src/ui/layout/BrowseBar.vue

@@ -8,18 +8,8 @@
         ></button>
         <div
             class="l-browse-bar__object-name--w c-object-label"
-            :class="{
-                classList,
-                'is-missing': domainObject.status === 'missing'
-            }"
+            :class="[ type.cssClass, classList ]"
         >
-            <div class="c-object-label__type-icon"
-                 :class="type.cssClass"
-            >
-                <span class="is-missing__indicator"
-                      title="This item is missing"
-                ></span>
-            </div>
             <span
                 class="l-browse-bar__object-name c-object-label__name c-input-inline"
                 contenteditable

src/ui/layout/layout.scss

@@ -354,9 +354,9 @@
         @include headerFont(1.4em);
         min-width: 0;
 
-        .is-missing__indicator {
-            right: -5px !important;
-            top: -4px !important;
+        &:before {
+            // Icon
+            margin-right: $interiorMargin;
         }
     }
 

src/ui/layout/mct-tree.scss

@@ -52,13 +52,12 @@
         padding: $interiorMarginSm $interiorMargin;
         transition: background 150ms ease;
 
-        &__type-icon {
-            color: $colorItemTreeIcon;
-        }
-
         &:hover {
             background: $colorItemTreeHoverBg;
-            filter: $filterHov;
+
+            [class*="__name"] {
+                color: $colorItemTreeHoverFg;
+            }
         }
 
         &.is-navigated-object,
@@ -82,6 +81,12 @@
             margin-left: $interiorMarginSm;
         }
 
+        &:hover {
+            .c-tree__item__type-icon:before {
+                color: $colorItemTreeIconHover;
+            }
+        }
+
         &.is-navigated-object,
         &.is-selected {
             .c-tree__item__type-icon:before {
@@ -110,6 +115,10 @@
             color: $colorItemTreeFg;
         }
 
+        &__type-icon {
+            color: $colorItemTreeIcon;
+        }
+
         &.is-alias {
             // Object is an alias to an original.
             [class*='__type-icon'] {

src/ui/layout/status-bar/indicators.scss

@@ -76,23 +76,16 @@
 [class*='minify-indicators'] {
     // All styles for minified Indicators should go in here
     .c-indicator:not(.no-minify) {
-        border: 1px solid transparent; // Hack to make minified sizing work in Safari. Have no idea why this works.
-        overflow: visible;
-        transition: transform;
-
         @include hover() {
             background: $colorIndicatorBgHov;
-            transition: transform 250ms ease-in 200ms; // Go-away transition
-
             .c-indicator__label {
                 box-shadow: $colorIndicatorMenuBgShdw;
                 transform: scale(1.0);
-                overflow: visible;
-                transition: transform 100ms ease-out 100ms; // Appear transition
+                transition: all 100ms ease-out 100ms;
             }
         }
         .c-indicator__label {
-            transition: transform 250ms ease-in 200ms; // Go-away transition
+            transition: all 250ms ease-in 200ms;
             background: $colorIndicatorMenuBg;
             color: $colorIndicatorMenuFg;
             border-radius: $controlCr;
@@ -102,7 +95,7 @@
             position: absolute;
             transform-origin: 90% 0;
             transform: scale(0.0);
-            overflow: hidden;
+            overflow: visible;
             z-index: 50;
 
             &:before {