fix lint issues

Merge branch 'three-dot-menu-proto' of https://github.com/nasa/openmct into openmct-status-api
merge latest master
2025-06-27 03:22:04 +00:00 · 2020-11-12 16:02:57 -08:00 · 2020-11-12 15:05:28 -08:00 · 2020-11-12 15:04:09 -08:00 · 2020-11-12 15:01:37 -08:00 · 2020-11-12 14:58:51 -08:00
148 changed files with 4641 additions and 1345 deletions
--- a/example/generator/GeneratorProvider.js
+++ b/example/generator/GeneratorProvider.js
@ -76,6 +76,7 @@ define([
            workerRequest[prop] = Number(workerRequest[prop]);
        });
        workerRequest.name = domainObject.name;
        return workerRequest;
--- a/example/generator/generatorWorker.js
+++ b/example/generator/generatorWorker.js
@ -108,7 +108,6 @@
        for (; nextStep < end && data.length < 5000; nextStep += step) {
            data.push({
                name: request.name,
                utc: nextStep,
                yesterday: nextStep - 60 * 60 * 24 * 1000,
                sin: sin(nextStep, period, amplitude, offset, phase, randomness),
--- a/index.html
+++ b/index.html
@ -30,12 +30,50 @@
        <link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96" type="image/x-icon">
        <link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32" type="image/x-icon">
        <link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16" type="image/x-icon">
        <style type="text/css">
            @keyframes splash-spinner {
                0% {
                    transform: translate(-50%, -50%) rotate(0deg); }
                100% {
                    transform: translate(-50%, -50%) rotate(360deg); } }
            #splash-screen {
                background-color: black;
                position: absolute;
                top: 0; right: 0; bottom: 0; left: 0;
                z-index: 10000;
            }
            #splash-screen:before {
                animation-name: splash-spinner;
                animation-duration: 0.5s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                border-radius: 50%;
                border-color: rgba(255,255,255,0.25);
                border-top-color: white;
                border-style: solid;
                border-width: 10px;
                content: '';
                display: block;
                opacity: 0.25;
                position: absolute;
                left: 50%; top: 50%;
                height: 100px; width: 100px;
            }
        </style>
    </head>
    <body>
    </body>
    <script>
        const THIRTY_SECONDS = 30 * 1000;
-        const THIRTY_MINUTES = THIRTY_SECONDS * 60;
+        const ONE_MINUTE = THIRTY_SECONDS * 2;
        const FIVE_MINUTES = ONE_MINUTE * 5;
        const FIFTEEN_MINUTES = FIVE_MINUTES * 3;
        const THIRTY_MINUTES = FIFTEEN_MINUTES * 2;
        const ONE_HOUR = THIRTY_MINUTES * 2;
        const TWO_HOURS = ONE_HOUR * 2;
        const ONE_DAY = ONE_HOUR * 24;
        [
            'example/eventGenerator'
@ -73,21 +111,21 @@
                        {
                            label: 'Last Day',
                            bounds: {
-                                start: () => Date.now() - 1000 * 60 * 60 * 24,
+                                start: () => Date.now() - ONE_DAY,
                                end: () => Date.now()
                            }
                        },
                        {
                            label: 'Last 2 hours',
                            bounds: {
-                                start: () => Date.now() - 1000 * 60 * 60 * 2,
+                                start: () => Date.now() - TWO_HOURS,
                                end: () => Date.now()
                            }
                        },
                        {
                            label: 'Last hour',
                            bounds: {
-                                start: () => Date.now() - 1000 * 60 * 60,
+                                start: () => Date.now() - ONE_HOUR,
                                end: () => Date.now()
                            }
                        }
@ -96,7 +134,7 @@
                    records: 10,
                    // maximum duration between start and end bounds
                    // for utc-based time systems this is in milliseconds
-                    limit: 1000 * 60 * 60 * 24
+                    limit: ONE_DAY
                },
                {
                    name: "Realtime",
@ -105,7 +143,44 @@
                    clockOffsets: {
                        start: - THIRTY_MINUTES,
                        end: THIRTY_SECONDS
                    },
                    presets: [
                        {
                            label: '1 Hour',
                            bounds: {
                                start: - ONE_HOUR,
                                end: THIRTY_SECONDS
                            }
                        },
                        {
                            label: '30 Minutes',
                            bounds: {
                                start: - THIRTY_MINUTES,
                                end: THIRTY_SECONDS
                            }
                        },
                        {
                            label: '15 Minutes',
                            bounds: {
                                start: - FIFTEEN_MINUTES,
                                end: THIRTY_SECONDS
                            }
                        },
                        {
                            label: '5 Minutes',
                            bounds: {
                                start: - FIVE_MINUTES,
                                end: THIRTY_SECONDS
                            }
                        },
                        {
                            label: '1 Minute',
                            bounds: {
                                start: - ONE_MINUTE,
                                end: THIRTY_SECONDS
                            }
                        }
                    ]
                }
            ]
        }));
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "openmct",
-  "version": "1.3.3-SNAPSHOT",
+  "version": "1.4.1-SNAPSHOT",
  "description": "The Open MCT core platform",
  "dependencies": {},
  "devDependencies": {
--- a/platform/commonUI/browse/bundle.js
+++ b/platform/commonUI/browse/bundle.js
@ -143,8 +143,8 @@ define([
                            "$window"
                        ],
                        "group": "windowing",
-                        "cssClass": "icon-new-window",
+                        "priority": 10,
-                        "priority": "preferred"
+                        "cssClass": "icon-new-window"
                    }
                ],
                "runs": [
--- a/platform/commonUI/edit/bundle.js
+++ b/platform/commonUI/edit/bundle.js
@ -139,7 +139,9 @@ define([
                        ],
                        "description": "Edit",
                        "category": "view-control",
-                        "cssClass": "major icon-pencil"
+                        "cssClass": "major icon-pencil",
                        "group": "action",
                        "priority": 10
                    },
                    {
                        "key": "properties",
@ -150,6 +152,8 @@ define([
                        "implementation": PropertiesAction,
                        "cssClass": "major icon-pencil",
                        "name": "Edit Properties...",
                        "group": "action",
                        "priority": 10,
                        "description": "Edit properties of this object.",
                        "depends": [
                            "dialogService"
--- a/platform/commonUI/general/res/templates/label.html
+++ b/platform/commonUI/general/res/templates/label.html
@ -20,12 +20,12 @@
 at runtime from the About dialog for additional information.
 -->
 <div class="c-object-label"
-     ng-class="{ 'is-missing': model.status === 'missing' }"
+     ng-class="{ 'is-status--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>
+        <span class="is-status__indicator" title="This item is missing or suspect"></span>
    </div>
    <div class='c-object-label__name'>{{model.name}}</div>
 </div>
--- a/platform/entanglement/bundle.js
+++ b/platform/entanglement/bundle.js
@ -66,6 +66,8 @@ define([
                        "description": "Move object to another location.",
                        "cssClass": "icon-move",
                        "category": "contextual",
                        "group": "action",
                        "priority": 9,
                        "implementation": MoveAction,
                        "depends": [
                            "policyService",
@ -79,6 +81,8 @@ define([
                        "description": "Duplicate object to another location.",
                        "cssClass": "icon-duplicate",
                        "category": "contextual",
                        "group": "action",
                        "priority": 8,
                        "implementation": CopyAction,
                        "depends": [
                            "$log",
@ -95,6 +99,8 @@ define([
                        "description": "Create Link to object in another location.",
                        "cssClass": "icon-link",
                        "category": "contextual",
                        "group": "action",
                        "priority": 7,
                        "implementation": LinkAction,
                        "depends": [
                            "policyService",
--- a/platform/features/clock/res/templates/clock.html
+++ b/platform/features/clock/res/templates/clock.html
@ -19,7 +19,7 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class="c-clock l-time-display" ng-controller="ClockController as clock">
+<div class="c-clock l-time-display u-style-receiver js-style-receiver" ng-controller="ClockController as clock">
 	<div class="c-clock__timezone">
 		{{clock.zone()}}
 	</div>
--- a/platform/features/clock/res/templates/timer.html
+++ b/platform/features/clock/res/templates/timer.html
@ -19,7 +19,7 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class="c-timer is-{{timer.timerState}}" ng-controller="TimerController as timer">
+<div class="c-timer u-style-receiver js-style-receiver is-{{timer.timerState}}" ng-controller="TimerController as timer">
    <div class="c-timer__controls">
        <button ng-click="timer.clickStopButton()"
                ng-hide="timer.timerState == 'stopped'"
--- a/platform/import-export/bundle.js
+++ b/platform/import-export/bundle.js
@ -47,6 +47,8 @@ define([
                            "implementation": ExportAsJSONAction,
                            "category": "contextual",
                            "cssClass": "icon-export",
                            "group": "json",
                            "priority": 2,
                            "depends": [
                                "openmct",
                                "exportService",
@ -61,6 +63,8 @@ define([
                            "implementation": ImportAsJSONAction,
                            "category": "contextual",
                            "cssClass": "icon-import",
                            "group": "json",
                            "priority": 2,
                            "depends": [
                                "exportService",
                                "identifierService",
--- a/src/MCT.js
+++ b/src/MCT.js
@ -242,7 +242,11 @@ define([
        this.overlays = new OverlayAPI.default();
-        this.contextMenu = new api.ContextMenuRegistry();
+        this.menus = new api.MenuAPI(this);
        this.actions = new api.ActionsAPI(this);
        this.status = new api.StatusAPI(this);
        this.router = new ApplicationRouter();
@ -271,6 +275,7 @@ define([
        this.install(this.plugins.URLTimeSettingsSynchronizer());
        this.install(this.plugins.NotificationIndicator());
        this.install(this.plugins.NewFolderAction());
        this.install(this.plugins.ViewDatumAction());
    }
    MCT.prototype = Object.create(EventEmitter.prototype);
--- a/src/adapter/actions/LegacyActionAdapter.js
+++ b/src/adapter/actions/LegacyActionAdapter.js
@ -35,5 +35,5 @@ export default function LegacyActionAdapter(openmct, legacyActions) {
    legacyActions.filter(contextualCategoryOnly)
        .map(LegacyAction => new LegacyContextMenuAction(openmct, LegacyAction))
-        .forEach(openmct.contextMenu.registerAction);
+        .forEach(openmct.actions.register);
 }
--- a/src/adapter/actions/LegacyContextMenuAction.js
+++ b/src/adapter/actions/LegacyContextMenuAction.js
@ -31,6 +31,8 @@ export default class LegacyContextMenuAction {
        this.description = LegacyAction.definition.description;
        this.cssClass = LegacyAction.definition.cssClass;
        this.LegacyAction = LegacyAction;
        this.group = LegacyAction.definition.group;
        this.priority = LegacyAction.definition.priority;
    }
    invoke(objectPath) {
--- a/src/api/actions/ActionCollection.js
+++ b/src/api/actions/ActionCollection.js
@ -0,0 +1,178 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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 EventEmitter from 'EventEmitter';
 import _ from 'lodash';
 class ActionCollection extends EventEmitter {
    constructor(applicableActions, objectPath, view, openmct) {
        super();
        this.applicableActions = applicableActions;
        this.openmct = openmct;
        this.objectPath = objectPath;
        this.view = view;
        this.objectUnsubscribes = [];
        let debounceOptions = {
            leading: false,
            trailing: true
        };
        this._updateActions = _.debounce(this._updateActions.bind(this), 150, debounceOptions);
        this._update = _.debounce(this._update.bind(this), 150, debounceOptions);
        this._observeObjectPath();
        this._initializeActions();
        this.openmct.editor.on('isEditing', this._updateActions);
    }
    disable(actionKeys) {
        actionKeys.forEach(actionKey => {
            if (this.applicableActions[actionKey]) {
                this.applicableActions[actionKey].isDisabled = true;
            }
        });
        this._update();
    }
    enable(actionKeys) {
        actionKeys.forEach(actionKey => {
            if (this.applicableActions[actionKey]) {
                this.applicableActions[actionKey].isDisabled = false;
            }
        });
        this._update();
    }
    hide(actionKeys) {
        actionKeys.forEach(actionKey => {
            if (this.applicableActions[actionKey]) {
                this.applicableActions[actionKey].isHidden = true;
            }
        });
        this._update();
    }
    show(actionKeys) {
        actionKeys.forEach(actionKey => {
            if (this.applicableActions[actionKey]) {
                this.applicableActions[actionKey].isHidden = false;
            }
        });
        this._update();
    }
    destroy() {
        this.objectUnsubscribes.forEach(unsubscribe => {
            unsubscribe();
        });
        this.openmct.editor.off('isEditing', this._updateActions);
        this.emit('destroy', this.view);
    }
    getVisibleActions() {
        let actionsArray = Object.keys(this.applicableActions);
        let visibleActions = [];
        actionsArray.forEach(actionKey => {
            let action = this.applicableActions[actionKey];
            if (!action.isHidden) {
                visibleActions.push(action);
            }
        });
        return visibleActions;
    }
    getStatusBarActions() {
        let actionsArray = Object.keys(this.applicableActions);
        let statusBarActions = [];
        actionsArray.forEach(actionKey => {
            let action = this.applicableActions[actionKey];
            if (action.showInStatusBar && !action.isDisabled && !action.isHidden) {
                statusBarActions.push(action);
            }
        });
        return statusBarActions;
    }
    _update() {
        this.emit('update', this.applicableActions);
    }
    _observeObjectPath() {
        let actionCollection = this;
        function updateObject(oldObject, newObject) {
            Object.assign(oldObject, newObject);
            actionCollection._updateActions();
        }
        this.objectPath.forEach(object => {
            if (object) {
                let unsubscribe = this.openmct.objects.observe(object, '*', updateObject.bind(this, object));
                this.objectUnsubscribes.push(unsubscribe);
            }
        });
    }
    _initializeActions() {
        Object.keys(this.applicableActions).forEach(key => {
            this.applicableActions[key].callBack = () => {
                return this.applicableActions[key].invoke(this.objectPath, this.view);
            };
        });
    }
    _updateActions() {
        let newApplicableActions = this.openmct.actions._applicableActions(this.objectPath, this.view);
        this.applicableActions = this._mergeOldAndNewActions(this.applicableActions, newApplicableActions);
        this._initializeActions();
        this._update();
    }
    _mergeOldAndNewActions(oldActions, newActions) {
        let mergedActions = {};
        Object.keys(newActions).forEach(key => {
            if (oldActions[key]) {
                mergedActions[key] = oldActions[key];
            } else {
                mergedActions[key] = newActions[key];
            }
        });
        return mergedActions;
    }
 }
 export default ActionCollection;
--- a/src/api/actions/ActionsAPI.js
+++ b/src/api/actions/ActionsAPI.js
@ -0,0 +1,145 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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 EventEmitter from 'EventEmitter';
 import ActionCollection from './ActionCollection';
 import _ from 'lodash';
 class ActionsAPI extends EventEmitter {
    constructor(openmct) {
        super();
        this._allActions = {};
        this._actionCollections = new WeakMap();
        this._openmct = openmct;
        this._groupOrder = ['windowing', 'undefined', 'view', 'action', 'json'];
        this.register = this.register.bind(this);
        this.get = this.get.bind(this);
        this._applicableActions = this._applicableActions.bind(this);
        this._updateCachedActionCollections = this._updateCachedActionCollections.bind(this);
    }
    register(actionDefinition) {
        this._allActions[actionDefinition.key] = actionDefinition;
    }
    get(objectPath, view) {
        let viewContext = view && view.getViewContext && view.getViewContext() || {};
        if (view && !viewContext.skipCache) {
            let cachedActionCollection = this._actionCollections.get(view);
            if (cachedActionCollection) {
                return cachedActionCollection;
            } else {
                let applicableActions = this._applicableActions(objectPath, view);
                let actionCollection = new ActionCollection(applicableActions, objectPath, view, this._openmct);
                this._actionCollections.set(view, actionCollection);
                actionCollection.on('destroy', this._updateCachedActionCollections);
                return actionCollection;
            }
        } else {
            let applicableActions = this._applicableActions(objectPath, view);
            Object.keys(applicableActions).forEach(key => {
                let action = applicableActions[key];
                action.callBack = () => {
                    return action.invoke(objectPath, view);
                };
            });
            return applicableActions;
        }
    }
    updateGroupOrder(groupArray) {
        this._groupOrder = groupArray;
    }
    _updateCachedActionCollections(key) {
        if (this._actionCollections.has(key)) {
            let actionCollection = this._actionCollections.get(key);
            actionCollection.off('destroy', this._updateCachedActionCollections);
            this._actionCollections.delete(key);
        }
    }
    _applicableActions(objectPath, view) {
        let actionsObject = {};
        let keys = Object.keys(this._allActions).filter(key => {
            let actionDefinition = this._allActions[key];
            if (actionDefinition.appliesTo === undefined) {
                return true;
            } else {
                return actionDefinition.appliesTo(objectPath, view);
            }
        });
        keys.forEach(key => {
            let action = _.clone(this._allActions[key]);
            actionsObject[key] = action;
        });
        return actionsObject;
    }
    _groupAndSortActions(actionsArray) {
        if (!Array.isArray(actionsArray) && typeof actionsArray === 'object') {
            actionsArray = Object.keys(actionsArray).map(key => actionsArray[key]);
        }
        let actionsObject = {};
        let groupedSortedActionsArray = [];
        function sortDescending(a, b) {
            return b.priority - a.priority;
        }
        actionsArray.forEach(action => {
            if (actionsObject[action.group] === undefined) {
                actionsObject[action.group] = [action];
            } else {
                actionsObject[action.group].push(action);
            }
        });
        this._groupOrder.forEach(group => {
            let groupArray = actionsObject[group];
            if (groupArray) {
                groupedSortedActionsArray.push(groupArray.sort(sortDescending));
            }
        });
        return groupedSortedActionsArray;
    }
 }
 export default ActionsAPI;
--- a/src/api/actions/ActionsAPISpec.js
+++ b/src/api/actions/ActionsAPISpec.js
@ -0,0 +1,119 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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 ActionsAPI from './ActionsAPI';
 import { createOpenMct, resetApplicationState } from '../../utils/testing';
 describe('The Actions API', () => {
    let openmct;
    let actionsAPI;
    let mockAction;
    let mockObjectPath;
    let mockViewContext1;
    beforeEach(() => {
        openmct = createOpenMct();
        actionsAPI = new ActionsAPI(openmct);
        mockAction = {
            name: 'Test Action',
            key: 'test-action',
            cssClass: 'test-action',
            description: 'This is a test action',
            group: 'action',
            priority: 9,
            appliesTo: (objectPath, view = {}) => {
                if (view.getViewContext) {
                    let viewContext = view.getViewContext();
                    return viewContext.onlyAppliesToTestCase;
                } else if (objectPath.length) {
                    return objectPath[0].type === 'fake-folder';
                }
                return false;
            },
            invoke: () => {
            }
        };
        mockObjectPath = [
            {
                name: 'mock folder',
                type: 'fake-folder',
                identifier: {
                    key: 'mock-folder',
                    namespace: ''
                }
            },
            {
                name: 'mock parent folder',
                type: 'fake-folder',
                identifier: {
                    key: 'mock-parent-folder',
                    namespace: ''
                }
            }
        ];
        mockViewContext1 = {
            getViewContext: () => {
                return {
                    onlyAppliesToTestCase: true,
                    skipCache: true
                };
            }
        };
    });
    afterEach(() => {
        resetApplicationState(openmct);
    });
    describe("register method", () => {
        it("adds action to ActionsAPI", () => {
            actionsAPI.register(mockAction);
            let action = actionsAPI.get(mockObjectPath, mockViewContext1)[mockAction.key];
            expect(action.key).toEqual(mockAction.key);
            expect(action.name).toEqual(mockAction.name);
        });
    });
    describe("get method", () => {
        beforeEach(() => {
            actionsAPI.register(mockAction);
        });
        it("returns an object with relevant actions when invoked with objectPath only", () => {
            let action = actionsAPI.get(mockObjectPath, mockViewContext1)[mockAction.key];
            expect(action.key).toEqual(mockAction.key);
            expect(action.name).toEqual(mockAction.name);
        });
        it("returns an object with relevant actions when invoked with viewContext and skipCache", () => {
            let action = actionsAPI.get(mockObjectPath, mockViewContext1)[mockAction.key];
            expect(action.key).toEqual(mockAction.key);
            expect(action.name).toEqual(mockAction.name);
        });
    });
 });
--- a/src/api/api.js
+++ b/src/api/api.js
@ -28,9 +28,10 @@ define([
    './telemetry/TelemetryAPI',
    './indicators/IndicatorAPI',
    './notifications/NotificationAPI',
-    './contextMenu/ContextMenuAPI',
+    './Editor',
-    './Editor'
+    './menu/MenuAPI',
-
+    './actions/ActionsAPI',
    './status/StatusAPI'
 ], function (
    TimeAPI,
    ObjectAPI,
@ -39,8 +40,10 @@ define([
    TelemetryAPI,
    IndicatorAPI,
    NotificationAPI,
-    ContextMenuAPI,
+    EditorAPI,
-    EditorAPI
+    MenuAPI,
    ActionsAPI,
    StatusAPI
 ) {
    return {
        TimeAPI: TimeAPI,
@ -51,6 +54,8 @@ define([
        IndicatorAPI: IndicatorAPI,
        NotificationAPI: NotificationAPI.default,
        EditorAPI: EditorAPI,
-        ContextMenuRegistry: ContextMenuAPI.default
+        MenuAPI: MenuAPI.default,
        ActionsAPI: ActionsAPI.default,
        StatusAPI: StatusAPI.default
    };
 });
--- a/src/api/contextMenu/ContextMenu.vue
+++ b/src/api/contextMenu/ContextMenu.vue
@ -1,24 +0,0 @@
 <template>
 <div class="c-menu">
    <ul>
        <li
            v-for="action in actions"
            :key="action.name"
            :class="action.cssClass"
            :title="action.description"
            @click="action.invoke(objectPath)"
        >
            {{ action.name }}
        </li>
        <li v-if="actions.length === 0">
            No actions defined.
        </li>
    </ul>
 </div>
 </template>
 <script>
 export default {
    inject: ['actions', 'objectPath']
 };
 </script>
--- a/src/api/contextMenu/ContextMenuAPI.js
+++ b/src/api/contextMenu/ContextMenuAPI.js
@ -1,159 +0,0 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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 ContextMenuComponent from './ContextMenu.vue';
 import Vue from 'vue';
 /**
 * The ContextMenuAPI allows the addition of new context menu actions, and for the context menu to be launched from
 * custom HTML elements.
 * @interface ContextMenuAPI
 * @memberof module:openmct
 */
 class ContextMenuAPI {
    constructor() {
        this._allActions = [];
        this._activeContextMenu = undefined;
        this._hideActiveContextMenu = this._hideActiveContextMenu.bind(this);
        this.registerAction = this.registerAction.bind(this);
    }
    /**
     * Defines an item to be added to context menus. Allows specification of text, appearance, and behavior when
     * selected. Applicabilioty can be restricted by specification of an `appliesTo` function.
     *
     * @interface ContextMenuAction
     * @memberof module:openmct
     * @property {string} name the human-readable name of this view
     * @property {string} description a longer-form description (typically
     *           a single sentence or short paragraph) of this kind of view
     * @property {string} cssClass the CSS class to apply to labels for this
     *           view (to add icons, for instance)
     * @property {string} key unique key to identify the context menu action
     *           (used in custom context menu eg table rows, to identify which actions to include)
     * @property {boolean} hideInDefaultMenu optional flag to hide action from showing in the default context menu (tree item)
     */
    /**
     * @method appliesTo
     * @memberof module:openmct.ContextMenuAction#
     * @param {DomainObject[]} objectPath the path of the object that the context menu has been invoked on.
     * @returns {boolean} true if the action applies to the objects specified in the 'objectPath', otherwise false.
     */
    /**
     * Code to be executed when the action is selected from a context menu
     * @method invoke
     * @memberof module:openmct.ContextMenuAction#
     * @param {DomainObject[]} objectPath the path of the object to invoke the action on.
     */
    /**
     * @param {ContextMenuAction} actionDefinition
     */
    registerAction(actionDefinition) {
        this._allActions.push(actionDefinition);
    }
    /**
     * @private
     */
    _showContextMenuForObjectPath(objectPath, x, y, actionsToBeIncluded) {
        let applicableActions = this._allActions.filter((action) => {
            if (actionsToBeIncluded) {
                if (action.appliesTo === undefined && actionsToBeIncluded.includes(action.key)) {
                    return true;
                }
                return action.appliesTo(objectPath, actionsToBeIncluded) && actionsToBeIncluded.includes(action.key);
            } else {
                if (action.appliesTo === undefined) {
                    return true;
                }
                return action.appliesTo(objectPath) && !action.hideInDefaultMenu;
            }
        });
        if (this._activeContextMenu) {
            this._hideActiveContextMenu();
        }
        this._activeContextMenu = this._createContextMenuForObject(objectPath, applicableActions);
        this._activeContextMenu.$mount();
        document.body.appendChild(this._activeContextMenu.$el);
        let position = this._calculatePopupPosition(x, y, this._activeContextMenu.$el);
        this._activeContextMenu.$el.style.left = `${position.x}px`;
        this._activeContextMenu.$el.style.top = `${position.y}px`;
        document.addEventListener('click', this._hideActiveContextMenu);
    }
    /**
     * @private
     */
    _calculatePopupPosition(eventPosX, eventPosY, menuElement) {
        let menuDimensions = menuElement.getBoundingClientRect();
        let overflowX = (eventPosX + menuDimensions.width) - document.body.clientWidth;
        let overflowY = (eventPosY + menuDimensions.height) - document.body.clientHeight;
        if (overflowX > 0) {
            eventPosX = eventPosX - overflowX;
        }
        if (overflowY > 0) {
            eventPosY = eventPosY - overflowY;
        }
        return {
            x: eventPosX,
            y: eventPosY
        };
    }
    /**
     * @private
     */
    _hideActiveContextMenu() {
        document.removeEventListener('click', this._hideActiveContextMenu);
        document.body.removeChild(this._activeContextMenu.$el);
        this._activeContextMenu.$destroy();
        this._activeContextMenu = undefined;
    }
    /**
     * @private
     */
    _createContextMenuForObject(objectPath, actions) {
        return new Vue({
            components: {
                ContextMenu: ContextMenuComponent
            },
            provide: {
                actions: actions,
                objectPath: objectPath
            },
            template: '<ContextMenu></ContextMenu>'
        });
    }
 }
 export default ContextMenuAPI;
--- a/src/api/menu/MenuAPI.js
+++ b/src/api/menu/MenuAPI.js
@ -0,0 +1,67 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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 Menu from './menu.js';
 /**
 * The MenuAPI allows the addition of new context menu actions, and for the context menu to be launched from
 * custom HTML elements.
 * @interface MenuAPI
 * @memberof module:openmct
 */
 class MenuAPI {
    constructor(openmct) {
        this.openmct = openmct;
        this.showMenu = this.showMenu.bind(this);
        this._clearMenuComponent = this._clearMenuComponent.bind(this);
        this._showObjectMenu = this._showObjectMenu.bind(this);
    }
    showMenu(x, y, actions) {
        if (this.menuComponent) {
            this.menuComponent.dismiss();
        }
        let options = {
            x,
            y,
            actions
        };
        this.menuComponent = new Menu(options);
        this.menuComponent.once('destroy', this._clearMenuComponent);
    }
    _clearMenuComponent() {
        this.menuComponent = undefined;
        delete this.menuComponent;
    }
    _showObjectMenu(objectPath, x, y, actionsToBeIncluded) {
        let applicableActions = this.openmct.actions._groupedAndSortedObjectActions(objectPath, actionsToBeIncluded);
        this.showMenu(x, y, applicableActions);
    }
 }
 export default MenuAPI;
--- a/src/api/menu/MenuAPISpec.js
+++ b/src/api/menu/MenuAPISpec.js
@ -0,0 +1,125 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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 MenuAPI from './MenuAPI';
 import Menu from './menu';
 import { createOpenMct, resetApplicationState } from '../../utils/testing';
 describe ('The Menu API', () => {
    let openmct;
    let menuAPI;
    let actionsArray;
    let x;
    let y;
    let result;
    beforeEach(() => {
        openmct = createOpenMct();
        menuAPI = new MenuAPI(openmct);
        actionsArray = [
            {
                name: 'Test Action 1',
                cssClass: 'test-css-class-1',
                description: 'This is a test action',
                callBack: () => {
                    result = 'Test Action 1 Invoked';
                }
            },
            {
                name: 'Test Action 2',
                cssClass: 'test-css-class-2',
                description: 'This is a test action',
                callBack: () => {
                    result = 'Test Action 2 Invoked';
                }
            }
        ];
        x = 8;
        y = 16;
    });
    afterEach(() => {
        resetApplicationState(openmct);
    });
    describe("showMenu method", () => {
        it("creates an instance of Menu when invoked", () => {
            menuAPI.showMenu(x, y, actionsArray);
            expect(menuAPI.menuComponent).toBeInstanceOf(Menu);
        });
        describe("creates a menu component", () => {
            let menuComponent;
            let vueComponent;
            beforeEach(() => {
                menuAPI.showMenu(x, y, actionsArray);
                vueComponent = menuAPI.menuComponent.component;
                menuComponent = document.querySelector(".c-menu");
                spyOn(vueComponent, '$destroy');
            });
            it("renders a menu component in the expected x and y coordinates", () => {
                let boundingClientRect = menuComponent.getBoundingClientRect();
                let left = boundingClientRect.left;
                let top = boundingClientRect.top;
                expect(left).toEqual(x);
                expect(top).toEqual(y);
            });
            it("with all the actions passed in", () => {
                expect(menuComponent).toBeDefined();
                let listItems = menuComponent.children[0].children;
                expect(listItems.length).toEqual(actionsArray.length);
            });
            it("with click-able menu items, that will invoke the correct callBacks", () => {
                let listItem1 = menuComponent.children[0].children[0];
                listItem1.click();
                expect(result).toEqual("Test Action 1 Invoked");
            });
            it("dismisses the menu when action is clicked on", () => {
                let listItem1 = menuComponent.children[0].children[0];
                listItem1.click();
                let menu = document.querySelector('.c-menu');
                expect(menu).toBeNull();
            });
            it("invokes the destroy method when menu is dismissed", () => {
                document.body.click();
                expect(vueComponent.$destroy).toHaveBeenCalled();
            });
        });
    });
 });
--- a/src/api/menu/components/Menu.vue
+++ b/src/api/menu/components/Menu.vue
@ -0,0 +1,52 @@
 <template>
 <div class="c-menu">
    <ul v-if="actions.length && actions[0].length">
        <template
            v-for="(actionGroups, index) in actions"
        >
            <li
                v-for="action in actionGroups"
                :key="action.name"
                :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
                :title="action.description"
                @click="action.callBack"
            >
                {{ action.name }}
            </li>
            <div
                v-if="index !== actions.length - 1"
                :key="index"
                class="c-menu__section-separator"
            >
            </div>
            <li
                v-if="actionGroups.length === 0"
                :key="index"
            >
                No actions defined.
            </li>
        </template>
    </ul>
    <ul v-else>
        <li
            v-for="action in actions"
            :key="action.name"
            :class="action.cssClass"
            :title="action.description"
            @click="action.callBack"
        >
            {{ action.name }}
        </li>
        <li v-if="actions.length === 0">
            No actions defined.
        </li>
    </ul>
 </div>
 </template>
 <script>
 export default {
    inject: ['actions']
 };
 </script>
--- a/src/api/menu/menu.js
+++ b/src/api/menu/menu.js
@ -0,0 +1,94 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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 EventEmitter from 'EventEmitter';
 import MenuComponent from './components/Menu.vue';
 import Vue from 'vue';
 class Menu extends EventEmitter {
    constructor(options) {
        super();
        this.options = options;
        this.component = new Vue({
            provide: {
                actions: options.actions
            },
            components: {
                MenuComponent
            },
            template: '<menu-component />'
        });
        if (options.onDestroy) {
            this.once('destroy', options.onDestroy);
        }
        this.dismiss = this.dismiss.bind(this);
        this.show = this.show.bind(this);
        this.show();
    }
    dismiss() {
        this.emit('destroy');
        document.body.removeChild(this.component.$el);
        document.removeEventListener('click', this.dismiss);
        this.component.$destroy();
    }
    show() {
        this.component.$mount();
        document.body.appendChild(this.component.$el);
        let position = this._calculatePopupPosition(this.options.x, this.options.y, this.component.$el);
        this.component.$el.style.left = `${position.x}px`;
        this.component.$el.style.top = `${position.y}px`;
        document.addEventListener('click', this.dismiss);
    }
    /**
     * @private
     */
    _calculatePopupPosition(eventPosX, eventPosY, menuElement) {
        let menuDimensions = menuElement.getBoundingClientRect();
        let overflowX = (eventPosX + menuDimensions.width) - document.body.clientWidth;
        let overflowY = (eventPosY + menuDimensions.height) - document.body.clientHeight;
        if (overflowX > 0) {
            eventPosX = eventPosX - overflowX;
        }
        if (overflowY > 0) {
            eventPosY = eventPosY - overflowY;
        }
        return {
            x: eventPosX,
            y: eventPosY
        };
    }
 }
 export default Menu;
--- a/src/api/overlays/OverlayAPI.js
+++ b/src/api/overlays/OverlayAPI.js
@ -22,6 +22,7 @@ class OverlayAPI {
                this.dismissLastOverlay();
            }
        });
    }
    /**
@ -127,6 +128,7 @@ class OverlayAPI {
        return progressDialog;
    }
 }
 export default OverlayAPI;
--- a/src/api/status/StatusAPI.js
+++ b/src/api/status/StatusAPI.js
@ -0,0 +1,67 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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 EventEmitter from 'EventEmitter';
 export default class StatusAPI extends EventEmitter {
    constructor(openmct) {
        super();
        this._openmct = openmct;
        this._statusCache = {};
        this.get = this.get.bind(this);
        this.set = this.set.bind(this);
        this.observe = this.observe.bind(this);
    }
    get(identifier) {
        let keyString = this._openmct.objects.makeKeyString(identifier);
        return this._statusCache[keyString];
    }
    set(identifier, value) {
        let keyString = this._openmct.objects.makeKeyString(identifier);
        this._statusCache[keyString] = value;
        this.emit(keyString, value);
    }
    delete(identifier) {
        let keyString = this._openmct.objects.makeKeyString(identifier);
        this._statusCache[keyString] = undefined;
        this.emit(keyString, undefined);
        delete this._statusCache[keyString];
    }
    observe(identifier, callback) {
        let key = this._openmct.objects.makeKeyString(identifier);
        this.on(key, callback);
        return () => {
            this.off(key, callback);
        };
    }
 }
--- a/src/api/status/StatusAPISpec.js
+++ b/src/api/status/StatusAPISpec.js
@ -0,0 +1,85 @@
 import StatusAPI from './StatusAPI.js';
 import { createOpenMct, resetApplicationState } from '../../utils/testing';
 describe("The Status API", () => {
    let statusAPI;
    let openmct;
    let identifier;
    let status;
    let status2;
    let callback;
    beforeEach(() => {
        openmct = createOpenMct();
        statusAPI = new StatusAPI(openmct);
        identifier = {
            namespace: "test-namespace",
            key: "test-key"
        };
        status = "test-status";
        status2 = 'test-status-deux';
        callback = jasmine.createSpy('callback', (statusUpdate) => statusUpdate);
    });
    afterEach(() => {
        resetApplicationState(openmct);
    });
    describe("set function", () => {
        it("sets status for identifier", () => {
            statusAPI.set(identifier, status);
            let resultingStatus = statusAPI.get(identifier);
            expect(resultingStatus).toEqual(status);
        });
    });
    describe("get function", () => {
        it("returns status for identifier", () => {
            statusAPI.set(identifier, status2);
            let resultingStatus = statusAPI.get(identifier);
            expect(resultingStatus).toEqual(status2);
        });
    });
    describe("delete function", () => {
        it("deletes status for identifier", () => {
            statusAPI.set(identifier, status);
            let resultingStatus = statusAPI.get(identifier);
            expect(resultingStatus).toEqual(status);
            statusAPI.delete(identifier);
            resultingStatus = statusAPI.get(identifier);
            expect(resultingStatus).toBeUndefined();
        });
    });
    describe("observe function", () => {
        it("allows callbacks to be attached to status set and delete events", () => {
            let unsubscribe = statusAPI.observe(identifier, callback);
            statusAPI.set(identifier, status);
            expect(callback).toHaveBeenCalledWith(status);
            statusAPI.delete(identifier);
            expect(callback).toHaveBeenCalledWith(undefined);
            unsubscribe();
        });
        it("returns a unsubscribe function", () => {
            let unsubscribe = statusAPI.observe(identifier, callback);
            unsubscribe();
            statusAPI.set(identifier, status);
            expect(callback).toHaveBeenCalledTimes(0);
        });
    });
 });
--- a/src/plugins/LADTable/components/LADRow.vue
+++ b/src/plugins/LADTable/components/LADRow.vue
@ -176,7 +176,10 @@ export default {
            this.timestampKey = timeSystem.key;
        },
        showContextMenu(event) {
-            this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
+            let allActions = this.openmct.actions.get(this.currentObjectPath, {}, {viewHistoricalData: true});
            let applicableActions = CONTEXT_MENU_ACTIONS.map(key => allActions[key]);
            this.openmct.menus.showMenu(event.x, event.y, applicableActions);
        },
        resetValues() {
            this.value = '---';
--- a/src/plugins/LADTable/components/LADTable.vue
+++ b/src/plugins/LADTable/components/LADTable.vue
@ -21,7 +21,7 @@
 *****************************************************************************/
 <template>
-<div class="c-lad-table-wrapper">
+<div class="c-lad-table-wrapper u-style-receiver js-style-receiver">
    <table class="c-table c-lad-table">
        <thead>
            <tr>
--- a/src/plugins/clearData/clearDataAction.js
+++ b/src/plugins/clearData/clearDataAction.js
@ -23,6 +23,7 @@
 export default class ClearDataAction {
    constructor(openmct, appliesToObjects) {
        this.name = 'Clear Data for Object';
        this.key = 'clear-data-action';
        this.description = 'Clears current data for object, unsubscribes and resubscribes to data';
        this.cssClass = 'icon-clear-data';
--- a/src/plugins/clearData/plugin.js
+++ b/src/plugins/clearData/plugin.js
@ -53,7 +53,7 @@ define([
                openmct.indicators.add(indicator);
            }
-            openmct.contextMenu.registerAction(new ClearDataAction.default(openmct, appliesToObjects));
+            openmct.actions.register(new ClearDataAction.default(openmct, appliesToObjects));
        };
    };
 });
--- a/src/plugins/clearData/test/clearDataActionSpec.js
+++ b/src/plugins/clearData/test/clearDataActionSpec.js
@ -26,12 +26,12 @@ import ClearDataAction from '../clearDataAction.js';
 describe('When the Clear Data Plugin is installed,', function () {
    const mockObjectViews = jasmine.createSpyObj('objectViews', ['emit']);
    const mockIndicatorProvider = jasmine.createSpyObj('indicators', ['add']);
-    const mockContextMenuProvider = jasmine.createSpyObj('contextMenu', ['registerAction']);
+    const mockActionsProvider = jasmine.createSpyObj('actions', ['register']);
    const openmct = {
        objectViews: mockObjectViews,
        indicators: mockIndicatorProvider,
-        contextMenu: mockContextMenuProvider,
+        actions: mockActionsProvider,
        install: function (plugin) {
            plugin(this);
        }
@ -51,7 +51,7 @@ describe('When the Clear Data Plugin is installed,', function () {
    it('Clear Data context menu action is installed', function () {
        openmct.install(ClearDataActionPlugin([]));
-        expect(mockContextMenuProvider.registerAction).toHaveBeenCalled();
+        expect(mockActionsProvider.register).toHaveBeenCalled();
    });
    it('clear data action emits a clearData event when invoked', function () {
--- a/src/plugins/condition/components/conditionals.scss
+++ b/src/plugins/condition/components/conditionals.scss
@ -50,6 +50,7 @@
 .c-cs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
--- a/src/plugins/condition/components/inspector/StyleEditor.vue
+++ b/src/plugins/condition/components/inspector/StyleEditor.vue
@ -21,9 +21,10 @@
 *****************************************************************************/
 <template>
-<div class="c-style">
+<div class="c-style has-local-controls c-toolbar">
-    <span :class="[
+    <div class="c-style__controls">
-              { 'is-style-invisible': styleItem.style.isStyleInvisible },
+        <div :class="[
                 { 'is-style-invisible': styleItem.style && styleItem.style.isStyleInvisible },
                 { 'c-style-thumb--mixed': mixedStyles.indexOf('backgroundColor') > -1 }
             ]"
             :style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
@ -34,8 +35,8 @@
            >
                ABC
            </span>
-    </span>
+        </div>
-    <span class="c-toolbar">
+
        <toolbar-color-picker v-if="hasProperty(styleItem.style.border)"
                              class="c-style__toolbar-button--border-color u-menu-to--center"
                              :options="borderColorOption"
@ -61,7 +62,14 @@
                               :options="isStyleInvisibleOption"
                               @change="updateStyleValue"
        />
-    </span>
+    </div>
    <!-- Save Styles -->
    <toolbar-button v-if="canSaveStyle"
                    class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major"
                    :options="saveOptions"
                    @click="saveItemStyle()"
    />
 </div>
 </template>
@ -80,12 +88,11 @@ export default {
        ToolbarColorPicker,
        ToolbarToggleButton
    },
-    inject: [
+    inject: ['openmct'],
        'openmct'
    ],
    props: {
        isEditing: {
-            type: Boolean
+            type: Boolean,
            required: true
        },
        mixedStyles: {
            type: Array,
@ -93,6 +100,10 @@ export default {
                return [];
            }
        },
        nonSpecificFontProperties: {
            type: Array,
            required: true
        },
        styleItem: {
            type: Object,
            required: true
@ -182,7 +193,16 @@ export default {
                    }
                ]
            };
-
+        },
        saveOptions() {
            return {
                icon: 'icon-save',
                title: 'Save style',
                isEditing: this.isEditing
            };
        },
        canSaveStyle() {
            return this.isEditing && !this.mixedStyles.length && !this.nonSpecificFontProperties.length;
        }
    },
    methods: {
@ -216,6 +236,9 @@ export default {
            }
            this.$emit('persist', this.styleItem, item.property);
        },
        saveItemStyle() {
            this.$emit('save-style', this.itemStyle);
        }
    }
 };
--- a/src/plugins/condition/components/inspector/StylesView.vue
+++ b/src/plugins/condition/components/inspector/StylesView.vue
@ -31,6 +31,11 @@
        <div class="c-inspect-styles__header">
            Object Style
        </div>
        <FontStyleEditor
            v-if="canStyleFont"
            :font-style="consolidatedFontStyle"
            @set-font-property="setFontProperty"
        />
        <div class="c-inspect-styles__content">
            <div v-if="staticStyle"
                 class="c-inspect-styles__style"
@ -39,7 +44,9 @@
                              :style-item="staticStyle"
                              :is-editing="allowEditing"
                              :mixed-styles="mixedStyles"
                              :non-specific-font-properties="nonSpecificFontProperties"
                              @persist="updateStaticStyle"
                              @save-style="saveStyle"
                />
            </div>
            <button
@ -58,10 +65,11 @@
        </div>
        <div class="c-inspect-styles__content c-inspect-styles__condition-set">
            <a v-if="conditionSetDomainObject"
-               class="c-object-label icon-conditional"
+               class="c-object-label"
               :href="navigateToPath"
               @click="navigateOrPreview"
            >
                <span class="c-object-label__type-icon icon-conditional"></span>
                <span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span>
            </a>
            <template v-if="allowEditing">
@ -80,6 +88,12 @@
            </template>
        </div>
        <FontStyleEditor
            v-if="canStyleFont"
            :font-style="consolidatedFontStyle"
            @set-font-property="setFontProperty"
        />
        <div v-if="conditionsLoaded"
             class="c-inspect-styles__conditions"
        >
@ -97,8 +111,10 @@
                />
                <style-editor class="c-inspect-styles__editor"
                              :style-item="conditionStyle"
                              :non-specific-font-properties="nonSpecificFontProperties"
                              :is-editing="allowEditing"
                              @persist="updateConditionalStyle"
                              @save-style="saveStyle"
                />
            </div>
        </div>
@ -108,6 +124,7 @@
 <script>
 import FontStyleEditor from '@/ui/inspector/styles/FontStyleEditor.vue';
 import StyleEditor from "./StyleEditor.vue";
 import PreviewAction from "@/ui/preview/PreviewAction.js";
 import { getApplicableStylesForItem, getConsolidatedStyleValues, getConditionSetIdentifierForItem } from "@/plugins/condition/utils/styleUtils";
@ -116,16 +133,30 @@ import ConditionError from "@/plugins/condition/components/ConditionError.vue";
 import ConditionDescription from "@/plugins/condition/components/ConditionDescription.vue";
 import Vue from 'vue';
 const NON_SPECIFIC = '??';
 const NON_STYLEABLE_CONTAINER_TYPES = [
    'layout',
    'flexible-layout',
    'tabs'
 ];
 const NON_STYLEABLE_LAYOUT_ITEM_TYPES = [
    'line-view',
    'box-view',
    'image-view'
 ];
 export default {
    name: 'StylesView',
    components: {
        FontStyleEditor,
        StyleEditor,
        ConditionError,
        ConditionDescription
    },
    inject: [
        'openmct',
-        'selection'
+        'selection',
        'stylesManager'
    ],
    data() {
        return {
@ -139,19 +170,80 @@ export default {
            conditionsLoaded: false,
            navigateToPath: '',
            selectedConditionId: '',
-            locked: false
+            items: [],
            domainObject: undefined,
            consolidatedFontStyle: {}
        };
    },
    computed: {
        locked() {
            return this.selection.some(selectionPath => {
                const self = selectionPath[0].context.item;
                const parent = selectionPath.length > 1 ? selectionPath[1].context.item : undefined;
                return (self && self.locked) || (parent && parent.locked);
            });
        },
        allowEditing() {
            return this.isEditing && !this.locked;
        },
        styleableFontItems() {
            return this.selection.filter(selectionPath => {
                const item = selectionPath[0].context.item;
                const itemType = item && item.type;
                const layoutItem = selectionPath[0].context.layoutItem;
                const layoutItemType = layoutItem && layoutItem.type;
                if (itemType && NON_STYLEABLE_CONTAINER_TYPES.includes(itemType)) {
                    return false;
                }
                if (layoutItemType && NON_STYLEABLE_LAYOUT_ITEM_TYPES.includes(layoutItemType)) {
                    return false;
                }
                return true;
            });
        },
        computedconsolidatedFontStyle() {
            let consolidatedFontStyle;
            const styles = [];
            this.styleableFontItems.forEach(styleable => {
                const fontStyle = this.getFontStyle(styleable[0]);
                styles.push(fontStyle);
            });
            if (styles.length) {
                const hasConsolidatedFontSize = styles.length && styles.every((fontStyle, i, arr) => fontStyle.fontSize === arr[0].fontSize);
                const hasConsolidatedFont = styles.length && styles.every((fontStyle, i, arr) => fontStyle.font === arr[0].font);
                consolidatedFontStyle = {
                    fontSize: hasConsolidatedFontSize ? styles[0].fontSize : NON_SPECIFIC,
                    font: hasConsolidatedFont ? styles[0].font : NON_SPECIFIC
                };
            }
            return consolidatedFontStyle;
        },
        nonSpecificFontProperties() {
            if (!this.consolidatedFontStyle) {
                return [];
            }
            return Object.keys(this.consolidatedFontStyle).filter(property => this.consolidatedFontStyle[property] === NON_SPECIFIC);
        },
        canStyleFont() {
            return this.styleableFontItems.length && this.allowEditing;
        }
    },
    destroyed() {
        this.removeListeners();
        this.openmct.editor.off('isEditing', this.setEditState);
        this.stylesManager.off('styleSelected', this.applyStyleToSelection);
    },
    mounted() {
        this.items = [];
        this.previewAction = new PreviewAction(this.openmct);
        this.isMultipleSelection = this.selection.length > 1;
        this.getObjectsAndItemsFromSelection();
@ -166,7 +258,10 @@ export default {
            this.initializeStaticStyle();
        }
        this.setConsolidatedFontStyle();
        this.openmct.editor.on('isEditing', this.setEditState);
        this.stylesManager.on('styleSelected', this.applyStyleToSelection);
    },
    methods: {
        getObjectStyles() {
@ -178,10 +273,10 @@ export default {
                }
            } else if (this.items.length) {
                const itemId = this.items[0].id;
-                if (this.domainObject.configuration && this.domainObject.configuration.objectStyles && this.domainObject.configuration.objectStyles[itemId]) {
+                if (this.domainObject && this.domainObject.configuration && this.domainObject.configuration.objectStyles && this.domainObject.configuration.objectStyles[itemId]) {
                    objectStyles = this.domainObject.configuration.objectStyles[itemId];
                }
-            } else if (this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
+            } else if (this.domainObject && this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
                objectStyles = this.domainObject.configuration.objectStyles;
            }
@ -219,6 +314,18 @@ export default {
        isItemType(type, item) {
            return item && (item.type === type);
        },
        canPersistObject(item) {
            // for now the only way to tell if an object can be persisted is if it is creatable.
            let creatable = false;
            if (item) {
                const type = this.openmct.types.get(item.type);
                if (type && type.definition) {
                    creatable = (type.definition.creatable === true);
                }
            }
            return creatable;
        },
        hasConditionalStyle(domainObject, layoutItem) {
            const id = layoutItem ? layoutItem.id : undefined;
@ -235,13 +342,8 @@ export default {
            this.selection.forEach((selectionItem) => {
                const item = selectionItem[0].context.item;
                const layoutItem = selectionItem[0].context.layoutItem;
                const layoutDomainObject = selectionItem[0].context.item;
                const isChildItem = selectionItem.length > 1;
                if (layoutDomainObject && layoutDomainObject.locked) {
                    this.locked = true;
                }
                if (!isChildItem) {
                    domainObject = item;
                    itemStyle = getApplicableStylesForItem(item);
@ -251,7 +353,7 @@ export default {
                } else {
                    this.canHide = true;
                    domainObject = selectionItem[1].context.item;
-                    if (item && !layoutItem || this.isItemType('subobject-view', layoutItem)) {
+                    if (item && !layoutItem || (this.isItemType('subobject-view', layoutItem) && this.canPersistObject(item))) {
                        subObjects.push(item);
                        itemStyle = getApplicableStylesForItem(item);
                        if (this.hasConditionalStyle(item)) {
@ -275,7 +377,7 @@ export default {
            const {styles, mixedStyles} = getConsolidatedStyleValues(itemInitialStyles);
            this.initialStyles = styles;
            this.mixedStyles = mixedStyles;
-
+            // main layout
            this.domainObject = domainObject;
            this.removeListeners();
            if (this.domainObject) {
@ -298,6 +400,7 @@ export default {
        isKeyItemId(key) {
            return (key !== 'styles')
                && (key !== 'staticStyle')
                && (key !== 'fontStyle')
                && (key !== 'defaultConditionId')
                && (key !== 'selectedConditionId')
                && (key !== 'conditionSetIdentifier');
@ -637,6 +740,124 @@ export default {
        },
        persist(domainObject, style) {
            this.openmct.objects.mutate(domainObject, 'configuration.objectStyles', style);
        },
        applyStyleToSelection(style) {
            if (!this.allowEditing) {
                return;
            }
            this.updateSelectionFontStyle(style);
            this.updateSelectionStyle(style);
        },
        updateSelectionFontStyle(style) {
            const fontSizeProperty = {
                fontSize: style.fontSize
            };
            const fontProperty = {
                font: style.font
            };
            this.setFontProperty(fontSizeProperty);
            this.setFontProperty(fontProperty);
        },
        updateSelectionStyle(style) {
            const foundStyle = this.findStyleByConditionId(this.selectedConditionId);
            if (foundStyle && !this.isStaticAndConditionalStyles) {
                Object.entries(style).forEach(([property, value]) => {
                    if (foundStyle.style[property] !== undefined && foundStyle.style[property] !== value) {
                        foundStyle.style[property] = value;
                    }
                });
                this.getAndPersistStyles();
            } else {
                this.removeConditionSet();
                Object.entries(style).forEach(([property, value]) => {
                    if (this.staticStyle.style[property] !== undefined && this.staticStyle.style[property] !== value) {
                        this.staticStyle.style[property] = value;
                        this.getAndPersistStyles(property);
                    }
                });
            }
        },
        saveStyle(style) {
            const styleToSave = {
                ...style,
                ...this.consolidatedFontStyle
            };
            this.stylesManager.save(styleToSave);
        },
        setConsolidatedFontStyle() {
            const styles = [];
            this.styleableFontItems.forEach(styleable => {
                const fontStyle = this.getFontStyle(styleable[0]);
                styles.push(fontStyle);
            });
            if (styles.length) {
                const hasConsolidatedFontSize = styles.length && styles.every((fontStyle, i, arr) => fontStyle.fontSize === arr[0].fontSize);
                const hasConsolidatedFont = styles.length && styles.every((fontStyle, i, arr) => fontStyle.font === arr[0].font);
                const fontSize = hasConsolidatedFontSize ? styles[0].fontSize : NON_SPECIFIC;
                const font = hasConsolidatedFont ? styles[0].font : NON_SPECIFIC;
                this.$set(this.consolidatedFontStyle, 'fontSize', fontSize);
                this.$set(this.consolidatedFontStyle, 'font', font);
            }
        },
        getFontStyle(selectionPath) {
            const item = selectionPath.context.item;
            const layoutItem = selectionPath.context.layoutItem;
            let fontStyle = item && item.configuration && item.configuration.fontStyle;
            // support for legacy where font styling in layouts only
            if (!fontStyle) {
                fontStyle = {
                    fontSize: layoutItem && layoutItem.fontSize || 'default',
                    font: layoutItem && layoutItem.font || 'default'
                };
            }
            return fontStyle;
        },
        setFontProperty(fontStyleObject) {
            let layoutDomainObject;
            const [property, value] = Object.entries(fontStyleObject)[0];
            this.styleableFontItems.forEach(styleable => {
                if (!this.isLayoutObject(styleable)) {
                    const fontStyle = this.getFontStyle(styleable[0]);
                    fontStyle[property] = value;
                    this.openmct.objects.mutate(styleable[0].context.item, 'configuration.fontStyle', fontStyle);
                } else {
                    // all layoutItems in this context will share same parent layout
                    if (!layoutDomainObject) {
                        layoutDomainObject = styleable[1].context.item;
                    }
                    // save layout item font style to parent layout configuration
                    const layoutItemIndex = styleable[0].context.index;
                    const layoutItemConfiguration = layoutDomainObject.configuration.items[layoutItemIndex];
                    layoutItemConfiguration[property] = value;
                }
            });
            if (layoutDomainObject) {
                this.openmct.objects.mutate(layoutDomainObject, 'configuration.items', layoutDomainObject.configuration.items);
            }
            // sync vue component on font update
            this.$set(this.consolidatedFontStyle, property, value);
        },
        isLayoutObject(selectionPath) {
            const layoutItemType = selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type;
            return layoutItemType && layoutItemType !== 'subobject-view';
        }
    }
 };
--- a/src/plugins/condition/components/inspector/conditional-styles.scss
+++ b/src/plugins/condition/components/inspector/conditional-styles.scss
@ -40,9 +40,11 @@
    }
    &__condition-set {
        align-items: baseline;
        border-bottom: 1px solid $colorInteriorBorder;
        display: flex;
        flex-direction: row;
-        align-items: center;
+        padding-bottom: $interiorMargin;
        .c-object-label {
            flex: 1 1 auto;
@ -53,7 +55,10 @@
        }
    }
-    &__style,
+    &__style {
        padding-bottom: $interiorMargin;
    }
    &__condition {
        padding: $interiorMargin;
    }
--- a/src/plugins/condition/pluginSpec.js
+++ b/src/plugins/condition/pluginSpec.js
@ -146,6 +146,8 @@ describe('the plugin', function () {
        let displayLayoutItem;
        let lineLayoutItem;
        let boxLayoutItem;
        let notCreatableObjectItem;
        let notCreatableObject;
        let selection;
        let component;
        let styleViewComponentObject;
@ -264,6 +266,19 @@ describe('the plugin', function () {
                            "stroke": "#717171",
                            "type": "line-view",
                            "id": "57d49a28-7863-43bd-9593-6570758916f0"
                        },
                        {
                            "width": 32,
                            "height": 18,
                            "x": 36,
                            "y": 8,
                            "identifier": {
                                "key": "~TEST~image",
                                "namespace": "test-space"
                            },
                            "hasFrame": true,
                            "type": "subobject-view",
                            "id": "6d9fe81b-a3ce-4e59-b404-a4a0be1a5d85"
                        }
                    ],
                    "layoutGrid": [
@ -297,6 +312,52 @@ describe('the plugin', function () {
                "type": "box-view",
                "id": "89b88746-d325-487b-aec4-11b79afff9e8"
            };
            notCreatableObjectItem = {
                "width": 32,
                "height": 18,
                "x": 36,
                "y": 8,
                "identifier": {
                    "key": "~TEST~image",
                    "namespace": "test-space"
                },
                "hasFrame": true,
                "type": "subobject-view",
                "id": "6d9fe81b-a3ce-4e59-b404-a4a0be1a5d85"
            };
            notCreatableObject = {
                "identifier": {
                    "key": "~TEST~image",
                    "namespace": "test-space"
                },
                "name": "test~image",
                "location": "test-space:~TEST",
                "type": "test.image",
                "telemetry": {
                    "values": [
                        {
                            "key": "value",
                            "name": "Value",
                            "hints": {
                                "image": 1,
                                "priority": 0
                            },
                            "format": "image",
                            "source": "value"
                        },
                        {
                            "key": "utc",
                            "source": "timestamp",
                            "name": "Timestamp",
                            "format": "iso",
                            "hints": {
                                "domain": 1,
                                "priority": 1
                            }
                        }
                    ]
                }
            };
            selection = [
                [{
                    context: {
@ -316,6 +377,19 @@ describe('the plugin', function () {
                        "index": 0
                    }
                },
                {
                    context: {
                        item: displayLayoutItem,
                        "supportsMultiSelect": true
                    }
                }],
                [{
                    context: {
                        "item": notCreatableObject,
                        "layoutItem": notCreatableObjectItem,
                        "index": 2
                    }
                },
                {
                    context: {
                        item: displayLayoutItem,
@ -344,7 +418,7 @@ describe('the plugin', function () {
        });
        it('initializes the items in the view', () => {
-            expect(styleViewComponentObject.items.length).toBe(2);
+            expect(styleViewComponentObject.items.length).toBe(3);
        });
        it('initializes conditional styles', () => {
@ -363,7 +437,7 @@ describe('the plugin', function () {
            return Vue.nextTick().then(() => {
                expect(styleViewComponentObject.domainObject.configuration.objectStyles).toBeDefined();
-                [boxLayoutItem, lineLayoutItem].forEach((item) => {
+                [boxLayoutItem, lineLayoutItem, notCreatableObjectItem].forEach((item) => {
                    const itemStyles = styleViewComponentObject.domainObject.configuration.objectStyles[item.id].styles;
                    expect(itemStyles.length).toBe(2);
                    const foundStyle = itemStyles.find((style) => {
@ -385,7 +459,7 @@ describe('the plugin', function () {
            return Vue.nextTick().then(() => {
                expect(styleViewComponentObject.domainObject.configuration.objectStyles).toBeDefined();
-                [boxLayoutItem, lineLayoutItem].forEach((item) => {
+                [boxLayoutItem, lineLayoutItem, notCreatableObjectItem].forEach((item) => {
                    const itemStyle = styleViewComponentObject.domainObject.configuration.objectStyles[item.id].staticStyle;
                    expect(itemStyle).toBeDefined();
                    const applicableStyles = getApplicableStylesForItem(styleViewComponentObject.domainObject, item);
--- a/src/plugins/conditionWidget/components/ConditionWidget.vue
+++ b/src/plugins/conditionWidget/components/ConditionWidget.vue
@ -22,7 +22,7 @@
 <template>
 <component :is="urlDefined ? 'a' : 'span'"
-           class="c-condition-widget"
+           class="c-condition-widget u-style-receiver js-style-receiver"
           :href="urlDefined ? internalDomainObject.url : null"
 >
    <div class="c-condition-widget__label">
--- a/src/plugins/displayLayout/AlphanumericFormatViewProvider.js
+++ b/src/plugins/displayLayout/AlphanumericFormatViewProvider.js
@ -64,9 +64,16 @@ define([
                            components: {
                                AlphanumericFormatView: AlphanumericFormatView.default
                            },
-                            template: '<alphanumeric-format-view></alphanumeric-format-view>'
+                            template: '<alphanumeric-format-view ref="alphanumericFormatView"></alphanumeric-format-view>'
                        });
                    },
                    getViewContext() {
                        if (component) {
                            return component.$refs.alphanumericFormatView.getViewContext();
                        } else {
                            return {};
                        }
                    },
                    destroy: function () {
                        component.$destroy();
                        component = undefined;
--- a/src/plugins/displayLayout/DisplayLayoutToolbar.js
+++ b/src/plugins/displayLayout/DisplayLayoutToolbar.js
@ -73,7 +73,6 @@ define(['lodash'], function (_) {
                        ]
                    }
                };
                const VIEW_TYPES = {
                    'telemetry-view': {
                        value: 'telemetry-view',
@ -96,7 +95,6 @@ define(['lodash'], function (_) {
                        class: 'icon-tabular-realtime'
                    }
                };
                const APPLICABLE_VIEWS = {
                    'telemetry-view': [
                        VIEW_TYPES['telemetry.plot.overlay'],
@ -390,29 +388,6 @@ define(['lodash'], function (_) {
                    }
                }
                function getTextSizeMenu(selectedParent, selection) {
                    const TEXT_SIZE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96, 128];
                    return {
                        control: "select-menu",
                        domainObject: selectedParent,
                        applicableSelectedItems: selection.filter(selectionPath => {
                            let type = selectionPath[0].context.layoutItem.type;
                            return type === 'text-view' || type === 'telemetry-view';
                        }),
                        property: function (selectionPath) {
                            return getPath(selectionPath) + ".size";
                        },
                        title: "Set text size",
                        options: TEXT_SIZE.map(size => {
                            return {
                                value: size + "px"
                            };
                        })
                    };
                }
                function getTextButton(selectedParent, selection) {
                    return {
                        control: "button",
@ -423,7 +398,7 @@ define(['lodash'], function (_) {
                        property: function (selectionPath) {
                            return getPath(selectionPath);
                        },
-                        icon: "icon-font",
+                        icon: "icon-pencil",
                        title: "Edit text properties",
                        dialog: DIALOG_FORM.text
                    };
@ -678,7 +653,6 @@ define(['lodash'], function (_) {
                    'display-mode': [],
                    'telemetry-value': [],
                    'style': [],
                    'text-style': [],
                    'position': [],
                    'duplicate': [],
                    'unit-toggle': [],
@ -729,12 +703,6 @@ define(['lodash'], function (_) {
                            toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selectedObjects)];
                        }
                        if (toolbar['text-style'].length === 0) {
                            toolbar['text-style'] = [
                                getTextSizeMenu(selectedParent, selectedObjects)
                            ];
                        }
                        if (toolbar.position.length === 0) {
                            toolbar.position = [
                                getStackOrder(selectedParent, selectionPath),
@ -760,12 +728,6 @@ define(['lodash'], function (_) {
                            }
                        }
                    } else if (layoutItem.type === 'text-view') {
                        if (toolbar['text-style'].length === 0) {
                            toolbar['text-style'] = [
                                getTextSizeMenu(selectedParent, selectedObjects)
                            ];
                        }
                        if (toolbar.position.length === 0) {
                            toolbar.position = [
                                getStackOrder(selectedParent, selectionPath),
--- a/src/plugins/displayLayout/DisplayLayoutType.js
+++ b/src/plugins/displayLayout/DisplayLayoutType.js
@ -56,6 +56,28 @@ define(function () {
                        1
                    ],
                    required: true
                },
                {
                    name: "Horizontal size (px)",
                    control: "numberfield",
                    cssClass: "l-input-sm l-numeric",
                    property: [
                        "configuration",
                        "layoutDimensions",
                        0
                    ],
                    required: false
                },
                {
                    name: "Vertical size (px)",
                    control: "numberfield",
                    cssClass: "l-input-sm l-numeric",
                    property: [
                        "configuration",
                        "layoutDimensions",
                        1
                    ],
                    required: false
                }
            ]
        };
--- a/src/plugins/displayLayout/actions/CopyToClipboardAction.js
+++ b/src/plugins/displayLayout/actions/CopyToClipboardAction.js
@ -0,0 +1,33 @@
 import clipboard from '@/utils/clipboard';
 export default class CopyToClipboardAction {
    constructor(openmct) {
        this.openmct = openmct;
        this.cssClass = 'icon-duplicate';
        this.description = 'Copy to Clipboard action';
        this.group = "action";
        this.key = 'copyToClipboard';
        this.name = 'Copy to Clipboard';
        this.priority = 9;
    }
    invoke(objectPath, viewContext) {
        const formattedValue = viewContext.formattedValueForCopy();
        clipboard.updateClipboard(formattedValue)
            .then(() => {
                this.openmct.notifications.info(`Success : copied to clipboard '${formattedValue}'`);
            })
            .catch(() => {
                this.openmct.notifications.error(`Failed : to copy to clipboard '${formattedValue}'`);
            });
    }
    appliesTo(objectPath, viewContext) {
        if (viewContext && viewContext.getViewKey) {
            return viewContext.getViewKey().includes('alphanumeric-format');
        }
        return false;
    }
 }
--- a/src/plugins/displayLayout/components/BoxView.vue
+++ b/src/plugins/displayLayout/components/BoxView.vue
@ -29,7 +29,7 @@
    @endMove="() => $emit('endMove')"
 >
    <div
-        class="c-box-view"
+        class="c-box-view u-style-receiver js-style-receiver"
        :class="[styleClass]"
        :style="style"
    ></div>
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@ -22,7 +22,7 @@
 <template>
 <div
-    class="l-layout"
+    class="l-layout u-style-receiver js-style-receiver"
    :class="{
        'is-multi-selected': selectedLayoutItems.length > 1,
        'allow-editing': isEditing
@ -36,7 +36,15 @@
        :grid-size="gridSize"
        :show-grid="showGrid"
    />
-
+    <div
        v-if="shouldDisplayLayoutDimensions"
        class="l-layout__dimensions"
        :style="layoutDimensionsStyle"
    >
        <div class="l-layout__dimensions-vals">
            {{ layoutDimensions[0] }},{{ layoutDimensions[1] }}
        </div>
    </div>
    <component
        :is="item.type"
        v-for="(item, index) in layoutItems"
@ -165,6 +173,23 @@ export default {
                return this.itemIsInCurrentSelection(item);
            });
        },
        layoutDimensions() {
            return this.internalDomainObject.configuration.layoutDimensions;
        },
        shouldDisplayLayoutDimensions() {
            return this.layoutDimensions
                && this.layoutDimensions[0] > 0
                && this.layoutDimensions[1] > 0;
        },
        layoutDimensionsStyle() {
            const width = `${this.layoutDimensions[0]}px`;
            const height = `${this.layoutDimensions[1]}px`;
            return {
                width,
                height
            };
        },
        showMarquee() {
            let selectionPath = this.selection[0];
            let singleSelectedLine = this.selection.length === 1
--- a/src/plugins/displayLayout/components/ImageView.vue
+++ b/src/plugins/displayLayout/components/ImageView.vue
@ -81,6 +81,7 @@ export default {
        style() {
            let backgroundImage = 'url(' + this.item.url + ')';
            let border = '1px solid ' + this.item.stroke;
            if (this.itemStyle) {
                if (this.itemStyle.imageUrl !== undefined) {
                    backgroundImage = 'url(' + this.itemStyle.imageUrl + ')';
--- a/src/plugins/displayLayout/components/SubobjectView.vue
+++ b/src/plugins/displayLayout/components/SubobjectView.vue
@ -35,6 +35,8 @@
        :object-path="currentObjectPath"
        :has-frame="item.hasFrame"
        :show-edit-view="false"
        :layout-font-size="item.fontSize"
        :layout-font="item.font"
    />
 </layout-frame>
 </template>
@ -73,6 +75,8 @@ export default {
            y: position[1],
            identifier: domainObject.identifier,
            hasFrame: hasFrameByDefault(domainObject.type),
            fontSize: 'default',
            font: 'default',
            viewKey
        };
    },
@ -138,6 +142,9 @@ export default {
            this.domainObject = domainObject;
            this.currentObjectPath = [this.domainObject].concat(this.objectPath.slice());
            this.$nextTick(() => {
                let reference = this.$refs.objectFrame;
                if (reference) {
                    let childContext = this.$refs.objectFrame.getSelectionContext();
                    childContext.item = domainObject;
                    childContext.layoutItem = this.item;
@ -146,6 +153,7 @@ export default {
                    this.removeSelectable = this.openmct.selection.selectable(
                        this.$el, this.context, this.immediatelySelect || this.initSelect);
                    delete this.immediatelySelect;
                }
            });
        }
    }
--- a/src/plugins/displayLayout/components/TelemetryView.vue
+++ b/src/plugins/displayLayout/components/TelemetryView.vue
@ -31,15 +31,14 @@
    <div
        v-if="domainObject"
        class="c-telemetry-view"
-        :class="{
+        :class="[statusClass]"
            styleClass,
            'is-missing': domainObject.status === 'missing'
        }"
        :style="styleObject"
        :data-font-size="item.fontSize"
        :data-font="item.font"
        @contextmenu.prevent="showContextMenu"
    >
-        <div class="is-missing__indicator"
+        <div class="is-status__indicator"
-             title="This item is missing"
+             title="This item is missing or suspect"
        ></div>
        <div
            v-if="showLabel"
@ -74,10 +73,11 @@
 import LayoutFrame from './LayoutFrame.vue';
 import printj from 'printj';
 import conditionalStylesMixin from "../mixins/objectStyles-mixin";
 import { getDefaultNotebook } from '@/plugins/notebook/utils/notebook-storage.js';
 const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5];
 const DEFAULT_POSITION = [1, 1];
-const CONTEXT_MENU_ACTIONS = ['viewHistoricalData'];
+const CONTEXT_MENU_ACTIONS = ['copyToClipboard', 'copyToNotebook', 'viewHistoricalData'];
 export default {
    makeDefinition(openmct, gridSize, domainObject, position) {
@ -95,7 +95,8 @@ export default {
            stroke: "",
            fill: "",
            color: "",
-            size: "13px"
+            fontSize: 'default',
            font: 'default'
        };
    },
    inject: ['openmct', 'objectPath'],
@ -126,13 +127,18 @@ export default {
    },
    data() {
        return {
            currentObjectPath: undefined,
            datum: undefined,
            formats: undefined,
            domainObject: undefined,
-            currentObjectPath: undefined
+            formats: undefined,
            viewKey: `alphanumeric-format-${Math.random()}`,
            status: ''
        };
    },
    computed: {
        statusClass() {
            return (this.status) ? `is-status--${this.status}` : '';
        },
        showLabel() {
            let displayMode = this.item.displayMode;
@ -150,10 +156,15 @@ export default {
            return unit;
        },
        styleObject() {
-            return Object.assign({}, {
+            let size;
-                fontSize: this.item.size
+            //for legacy size support
-            }, this.itemStyle);
+            if (!this.item.fontSize) {
                size = this.item.size;
            }
            return Object.assign({}, {
                size
            }, this.itemStyle);
        },
        fieldName() {
            return this.valueMetadata && this.valueMetadata.name;
@ -205,9 +216,13 @@ export default {
        this.openmct.objects.get(this.item.identifier)
            .then(this.setObject);
        this.openmct.time.on("bounds", this.refreshData);
        this.status = this.openmct.status.get(this.item.identifier);
        this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
    },
    destroyed() {
        this.removeSubscription();
        this.removeStatusListener();
        if (this.removeSelectable) {
            this.removeSelectable();
@ -216,6 +231,18 @@ export default {
        this.openmct.time.off("bounds", this.refreshData);
    },
    methods: {
        getViewContext() {
            return {
                getViewKey: () => this.viewKey,
                formattedValueForCopy: this.formattedValueForCopy
            };
        },
        formattedValueForCopy() {
            const timeFormatterKey = this.openmct.time.timeSystem().key;
            const timeFormatter = this.formats[timeFormatterKey];
            return `At ${timeFormatter.format(this.datum)} ${this.domainObject.name} had a value of ${this.telemetryValue} ${this.unit}`;
        },
        requestHistoricalData() {
            let bounds = this.openmct.time.bounds();
            let options = {
@ -253,6 +280,16 @@ export default {
                this.requestHistoricalData(this.domainObject);
            }
        },
        getView() {
            return {
                getViewContext() {
                    return {
                        viewHistoricalData: true,
                        skipCache: true
                    };
                }
            };
        },
        setObject(domainObject) {
            this.domainObject = domainObject;
            this.keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
@ -276,12 +313,40 @@ export default {
            this.removeSelectable = this.openmct.selection.selectable(
                this.$el, this.context, this.immediatelySelect || this.initSelect);
            delete this.immediatelySelect;
            let allActions = this.openmct.actions.get(this.currentObjectPath, this.getView());
            this.applicableActions = CONTEXT_MENU_ACTIONS.map(actionKey => {
                return allActions[actionKey];
            });
        },
        updateTelemetryFormat(format) {
            this.$emit('formatChanged', this.item, format);
        },
-        showContextMenu(event) {
+        async getContextMenuActions() {
-            this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
+            const defaultNotebook = getDefaultNotebook();
            const domainObject = defaultNotebook && await this.openmct.objects.get(defaultNotebook.notebookMeta.identifier);
            const actionsObject = this.openmct.actions.get(this.currentObjectPath, this.getViewContext(), { viewHistoricalData: true }).applicableActions;
            let applicableActionKeys = Object.keys(actionsObject)
                .filter(key => {
                    const isCopyToNotebook = actionsObject[key].key === 'copyToNotebook';
                    if (defaultNotebook && isCopyToNotebook) {
                        const defaultPath = domainObject && `${domainObject.name} - ${defaultNotebook.section.name} - ${defaultNotebook.page.name}`;
                        actionsObject[key].name = `Copy to Notebook ${defaultPath}`;
                    }
                    return CONTEXT_MENU_ACTIONS.includes(actionsObject[key].key);
                });
            return applicableActionKeys.map(key => actionsObject[key]);
        },
        async showContextMenu(event) {
            const contextMenuActions = await this.getContextMenuActions();
            this.openmct.menus.showMenu(event.x, event.y, contextMenuActions);
        },
        setStatus(status) {
            this.status = status;
        }
    }
 };
--- a/src/plugins/displayLayout/components/TextView.vue
+++ b/src/plugins/displayLayout/components/TextView.vue
@ -29,7 +29,9 @@
    @endMove="() => $emit('endMove')"
 >
    <div
-        class="c-text-view"
+        class="c-text-view u-style-receiver js-style-receiver"
        :data-font-size="item.fontSize"
        :data-font="item.font"
        :class="[styleClass]"
        :style="style"
    >
@ -47,13 +49,14 @@ export default {
        return {
            fill: '',
            stroke: '',
            size: '13px',
            color: '',
            x: 1,
            y: 1,
            width: 10,
            height: 5,
-            text: element.text
+            text: element.text,
            fontSize: 'default',
            font: 'default'
        };
    },
    inject: ['openmct'],
@ -84,8 +87,14 @@ export default {
    },
    computed: {
        style() {
            let size;
            //legacy size support
            if (!this.item.fontSize) {
                size = this.item.size;
            }
            return Object.assign({
-                fontSize: this.item.size
+                size
            }, this.itemStyle);
        }
    },
--- a/src/plugins/displayLayout/components/display-layout.scss
+++ b/src/plugins/displayLayout/components/display-layout.scss
@ -17,10 +17,29 @@
    flex-direction: column;
    overflow: auto;
-    &__grid-holder {
+    &__grid-holder,
    &__dimensions {
        display: none;
    }
    &__dimensions {
        $b: 1px dashed $editDimensionsColor;
        border-right: $b;
        border-bottom: $b;
        pointer-events: none;
        position: absolute;
        &-vals {
            $p: 2px;
            color: $editDimensionsColor;
            display: inline-block;
            font-style: italic;
            position: absolute;
            bottom: $p; right: $p;
            opacity: 0.7;
        }
    }
    &__frame {
        position: absolute;
    }
@ -34,6 +53,10 @@
            > .l-layout {
                background: $editUIGridColorBg;
                > [class*="__dimensions"] {
                    display: block;
                }
                > [class*="__grid-holder"] {
                    display: block;
                }
@ -42,12 +65,16 @@
    }
    .l-layout__frame {
-        &[s-selected],
+        &[s-selected]:not([multi-select="true"]),
        &[s-selected-parent] {
            // Display grid and allow edit marquee to display in nested layouts when editing
-            > * > * > .l-layout + .allow-editing {
+            > * > * > .l-layout.allow-editing {
                box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
                > [class*="__dimensions"] {
                    display: block;
                }
                > [class*='grid-holder'] {
                    display: block;
                }
--- a/src/plugins/displayLayout/components/telemetry-view.scss
+++ b/src/plugins/displayLayout/components/telemetry-view.scss
@ -29,12 +29,12 @@
    @include isMissing($absPos: true);
-    .is-missing__indicator {
+    .is-status__indicator {
        top: 0;
        left: 0;
    }
-    &.is-missing {
+    &.is-status--missing {
        border: $borderMissing;
    }
 }
--- a/src/plugins/displayLayout/mixins/objectStyles-mixin.js
+++ b/src/plugins/displayLayout/mixins/objectStyles-mixin.js
@ -27,6 +27,7 @@ export default {
    inject: ['openmct'],
    data() {
        return {
            objectStyle: undefined,
            itemStyle: undefined,
            styleClass: ''
        };
--- a/src/plugins/displayLayout/plugin.js
+++ b/src/plugins/displayLayout/plugin.js
@ -26,9 +26,12 @@ import objectUtils from 'objectUtils';
 import DisplayLayoutType from './DisplayLayoutType.js';
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js';
 import AlphaNumericFormatViewProvider from './AlphanumericFormatViewProvider.js';
 import CopyToClipboardAction from './actions/CopyToClipboardAction';
 export default function DisplayLayoutPlugin(options) {
    return function (openmct) {
        openmct.actions.register(new CopyToClipboardAction(openmct));
        openmct.objectViews.addProvider({
            key: 'layout.view',
            canView: function (domainObject) {
--- a/src/plugins/displayLayout/pluginSpec.js
+++ b/src/plugins/displayLayout/pluginSpec.js
@ -341,7 +341,7 @@ describe('the plugin', function () {
        it('provides controls including separators', () => {
            const displayLayoutToolbar = openmct.toolbars.get(selection);
-            expect(displayLayoutToolbar.length).toBe(11);
+            expect(displayLayoutToolbar.length).toBe(9);
        });
    });
 });
--- a/src/plugins/folderView/components/GridItem.vue
+++ b/src/plugins/folderView/components/GridItem.vue
@ -1,11 +1,10 @@
 <template>
 <a
    class="l-grid-view__item c-grid-item"
-    :class="{
+    :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
-    }"
+    }, statusClass]"
    :href="objectLink"
 >
    <div
@ -27,8 +26,8 @@
        </div>
    </div>
    <div class="c-grid-item__controls">
-        <div class="is-missing__indicator"
+        <div class="is-status__indicator"
-             title="This item is missing"
+             title="This item is missing or suspect"
        ></div>
        <div
            class="icon-people"
@ -46,9 +45,10 @@
 <script>
 import contextMenuGesture from '../../../ui/mixins/context-menu-gesture';
 import objectLink from '../../../ui/mixins/object-link';
 import statusListener from './status-listener';
 export default {
-    mixins: [contextMenuGesture, objectLink],
+    mixins: [contextMenuGesture, objectLink, statusListener],
    props: {
        item: {
            type: Object,
--- a/src/plugins/folderView/components/ListItem.vue
+++ b/src/plugins/folderView/components/ListItem.vue
@ -8,18 +8,18 @@
        <a
            ref="objectLink"
            class="c-object-label"
-            :class="{ 'is-missing': item.model.status === 'missing' }"
+            :class="[statusClass]"
            :href="objectLink"
        >
            <div
-                class="c-object-label__type-icon c-list-item__type-icon"
+                class="c-object-label__type-icon c-list-item__name__type-icon"
                :class="item.type.cssClass"
            >
-                <span class="is-missing__indicator"
+                <span class="is-status__indicator"
-                      title="This item is missing"
+                      title="This item is missing or suspect"
                ></span>
            </div>
-            <div class="c-object-label__name c-list-item__name">{{ item.model.name }}</div>
+            <div class="c-object-label__name c-list-item__name__name">{{ item.model.name }}</div>
        </a>
    </td>
    <td class="c-list-item__type">
@ -39,9 +39,10 @@
 import moment from 'moment';
 import contextMenuGesture from '../../../ui/mixins/context-menu-gesture';
 import objectLink from '../../../ui/mixins/object-link';
 import statusListener from './status-listener';
 export default {
-    mixins: [contextMenuGesture, objectLink],
+    mixins: [contextMenuGesture, objectLink, statusListener],
    props: {
        item: {
            type: Object,
--- a/src/plugins/folderView/components/grid-view.scss
+++ b/src/plugins/folderView/components/grid-view.scss
@ -11,6 +11,8 @@
    body.desktop & {
        flex-flow: row wrap;
        align-content: flex-start;
        &__item {
            height: $gridItemDesk;
            width: $gridItemDesk;
@ -41,7 +43,7 @@
        }
    }
-    &.is-missing {
+    &.is-status--missing {
        @include isMissing();
        [class*='__type-icon'],
--- a/src/plugins/folderView/components/list-item.scss
+++ b/src/plugins/folderView/components/list-item.scss
@ -1,11 +1,19 @@
 /******************************* LIST ITEM */
 .c-list-item {
-    &__type-icon {
+    &__name__type-icon {
        color: $colorItemTreeIcon;
    }
-    &__name {
+    &__name__name {
        @include ellipsize();
        a & {
            color: $colorItemFg;
        }
    }
    &:not(.c-list-item__name) {
        color: $colorItemFgDetails;
    }
    &.is-alias {
--- a/src/plugins/folderView/components/list-view.scss
+++ b/src/plugins/folderView/components/list-view.scss
@ -28,9 +28,5 @@
        padding-top: $p;
        padding-bottom: $p;
        width: 25%;
        &:not(.c-list-item__name) {
            color: $colorItemFgDetails;
        }
    }
 }
--- a/src/plugins/folderView/components/status-listener.js
+++ b/src/plugins/folderView/components/status-listener.js
@ -0,0 +1,33 @@
 export default {
    inject: ['openmct'],
    props: {
        item: {
            type: Object,
            required: true
        }
    },
    computed: {
        statusClass() {
            return (this.status) ? `is-status--${this.status}` : '';
        }
    },
    data() {
        return {
            status: ''
        };
    },
    methods: {
        setStatus(status) {
            this.status = status;
        }
    },
    mounted() {
        let identifier = this.item.model.identifier;
        this.status = this.openmct.status.get(identifier);
        this.removeStatusListener = this.openmct.status.observe(identifier, this.setStatus);
    },
    destroyed() {
        this.removeStatusListener();
    }
 };
--- a/src/plugins/goToOriginalAction/goToOriginalAction.js
+++ b/src/plugins/goToOriginalAction/goToOriginalAction.js
@ -25,6 +25,8 @@ export default class GoToOriginalAction {
        this.name = 'Go To Original';
        this.key = 'goToOriginal';
        this.description = 'Go to the original unlinked instance of this object';
        this.group = 'action';
        this.priority = 4;
        this._openmct = openmct;
    }
--- a/src/plugins/goToOriginalAction/plugin.js
+++ b/src/plugins/goToOriginalAction/plugin.js
@ -23,6 +23,6 @@ import GoToOriginalAction from './goToOriginalAction';
 export default function () {
    return function (openmct) {
-        openmct.contextMenu.registerAction(new GoToOriginalAction(openmct));
+        openmct.actions.register(new GoToOriginalAction(openmct));
    };
 }
--- a/src/plugins/imagery/components/ImageryViewLayout.vue
+++ b/src/plugins/imagery/components/ImageryViewLayout.vue
@ -7,34 +7,44 @@
    @mouseover="focusElement"
 >
    <div class="c-imagery__main-image-wrapper has-local-controls">
-        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
+        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover c-image-controls__controls">
-            <span class="holder flex-elem grows c-imagery__lc__sliders">
+            <span class="c-image-controls__sliders"
                  draggable="true"
                  @dragstart="startDrag"
            >
                <div class="c-image-controls__slider-wrapper icon-brightness">
                    <input v-model="filters.brightness"
                       class="icon-brightness"
                           type="range"
                           min="0"
                           max="500"
                    >
                </div>
                <div class="c-image-controls__slider-wrapper icon-contrast">
                    <input v-model="filters.contrast"
                       class="icon-contrast"
                           type="range"
                           min="0"
                           max="500"
                    >
                </div>
            </span>
-            <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
+            <span class="t-reset-btn-holder c-imagery__lc__reset-btn c-image-controls__btn-reset">
                <a class="s-icon-button icon-reset t-btn-reset"
                   @click="filters={brightness: 100, contrast: 100}"
                ></a>
            </span>
        </div>
-        <div class="main-image s-image-main c-imagery__main-image has-local-controls"
+        <div class="c-imagery__main-image__bg"
             :class="{'paused unnsynced': isPaused,'stale':false }"
-             :style="{'background-image': imageUrl ? `url(${imageUrl})` : 'none',
+        >
-                      'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
+            <div class="c-imagery__main-image__image"
                 :style="{
                     'background-image': imageUrl ? `url(${imageUrl})` : 'none',
                     'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`
                 }"
                 :data-openmct-image-timestamp="time"
                 :data-openmct-object-keystring="keyString"
-        >
+            ></div>
        </div>
        <div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
            <button class="c-nav c-nav--prev"
                    title="Previous image"
@ -47,18 +57,17 @@
                    @click="nextImage()"
            ></button>
        </div>
        </div>
        <div class="c-imagery__control-bar">
            <div class="c-imagery__time">
-                <div class="c-imagery__timestamp">{{ time }}</div>
+                <div class="c-imagery__timestamp u-style-receiver js-style-receiver">{{ time }}</div>
                <div
                    v-if="canTrackDuration"
                    :class="{'c-imagery--new': isImageNew && !refreshCSS}"
                    class="c-imagery__age icon-timer"
                >{{ formattedDuration }}</div>
            </div>
-            <div class="h-local-controls flex-elem">
+            <div class="h-local-controls">
                <button
                    class="c-button icon-pause pause-play"
                    :class="{'is-paused': isPaused}"
@ -446,6 +455,10 @@ export default {
                this.setFocusedImage(--index, THUMBNAIL_CLICKED);
            }
        },
        startDrag(e) {
            e.preventDefault();
            e.stopPropagation();
        },
        arrowDownHandler(event) {
            let key = event.keyCode;
--- a/src/plugins/imagery/components/imagery-view-layout.scss
+++ b/src/plugins/imagery/components/imagery-view-layout.scss
@ -1,8 +1,8 @@
 .c-imagery {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    height: 100%;
    &:focus {
        outline: none;
@ -19,16 +19,24 @@
    }
    &__main-image {
-        background-position: center;
+        &__bg {
-        background-repeat: no-repeat;
+            background-color: $colorPlotBg;
-        background-size: contain;
+            border: 1px solid transparent;
-        height: 100%;
+            flex: 1 1 auto;
            &.unnsynced{
                @include sUnsynced();
            }
        }
        &__image {
            @include abs(); // Safari fix
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }
    }
    &__control-bar,
    &__time {
        display: flex;
@ -138,11 +146,6 @@
    }
 }
 .s-image-main {
    background-color: $colorPlotBg;
    border: 1px solid transparent;
 }
 /*************************************** IMAGERY LOCAL CONTROLS*/
 .c-imagery {
    .h-local-controls--overlay-content {
@ -152,7 +155,7 @@
        background: $colorLocalControlOvrBg;
        border-radius: $basicCr;
        max-width: 200px;
-        min-width: 100px;
+        min-width: 70px;
        width: 35%;
        align-items: center;
        padding: $interiorMargin $interiorMarginLg;
@ -173,6 +176,7 @@
    &__lc {
        &__reset-btn {
            $bc: $scrollbarTrackColorBg;
            &:before,
            &:after {
                border-right: 1px solid $bc;
@ -195,6 +199,46 @@
    }
 }
 .c-image-controls {
    // Brightness/contrast
    &__controls {
        // Sliders and reset element
        display: flex;
        align-items: center;
        margin-right: $interiorMargin; // Need some extra space due to proximity to close button
    }
    &__sliders {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        > * + * {
            margin-top: 11px;
        }
    }
    &__slider-wrapper {
        // A wrapper is needed to add the type icon to left of each range input
        display: flex;
        align-items: center;
        &:before {
            color: rgba($colorMenuFg, 0.5);
            margin-right: $interiorMarginSm;
        }
        input[type='range'] {
            width: 100px;
        }
    }
    &__btn-reset {
        flex: 0 0 auto;
    }
 }
 /*************************************** BUTTONS */
 .c-button.pause-play {
    // Pause icon set by default in markup
@ -211,14 +255,13 @@
 }
 .c-imagery__prev-next-buttons {
    //background: rgba(deeppink, 0.2);
    display: flex;
    width: 100%;
    justify-content: space-between;
    pointer-events: none;
    position: absolute;
    top: 50%;
-    transform: translateY(-50%);
+    transform: translateY(-75%);
    .c-nav {
        pointer-events: all;
--- a/src/plugins/newFolderAction/newFolderAction.js
+++ b/src/plugins/newFolderAction/newFolderAction.js
@ -28,6 +28,8 @@ export default class NewFolderAction {
        this.key = 'newFolder';
        this.description = 'Create a new folder';
        this.cssClass = 'icon-folder-new';
        this.group = "action";
        this.priority = 9;
        this._openmct = openmct;
        this._dialogForm = {
--- a/src/plugins/newFolderAction/plugin.js
+++ b/src/plugins/newFolderAction/plugin.js
@ -23,6 +23,6 @@ import NewFolderAction from './newFolderAction';
 export default function () {
    return function (openmct) {
-        openmct.contextMenu.registerAction(new NewFolderAction(openmct));
+        openmct.actions.register(new NewFolderAction(openmct));
    };
 }
--- a/src/plugins/newFolderAction/pluginSpec.js
+++ b/src/plugins/newFolderAction/pluginSpec.js
@ -40,9 +40,7 @@ describe("the plugin", () => {
        openmct.on('start', done);
        openmct.startHeadless();
-        newFolderAction = openmct.contextMenu._allActions.filter(action => {
+        newFolderAction = openmct.actions._allActions.newFolder;
            return action.key === 'newFolder';
        })[0];
    });
    afterEach(() => {
--- a/src/plugins/notebook/actions/CopyToNotebookAction.js
+++ b/src/plugins/notebook/actions/CopyToNotebookAction.js
@ -0,0 +1,39 @@
 import { getDefaultNotebook } from '../utils/notebook-storage';
 import { addNotebookEntry } from '../utils/notebook-entries';
 export default class CopyToNotebookAction {
    constructor(openmct) {
        this.openmct = openmct;
        this.cssClass = 'icon-duplicate';
        this.description = 'Copy to Notebook action';
        this.group = "action";
        this.key = 'copyToNotebook';
        this.name = 'Copy to Notebook';
        this.priority = 9;
    }
    copyToNotebook(entryText) {
        const notebookStorage = getDefaultNotebook();
        this.openmct.objects.get(notebookStorage.notebookMeta.identifier)
            .then(domainObject => {
                addNotebookEntry(this.openmct, domainObject, notebookStorage, null, entryText);
                const defaultPath = `${domainObject.name} - ${notebookStorage.section.name} - ${notebookStorage.page.name}`;
                const msg = `Saved to Notebook ${defaultPath}`;
                this.openmct.notifications.info(msg);
            });
    }
    invoke(objectPath, viewContext) {
        this.copyToNotebook(viewContext.formattedValueForCopy());
    }
    appliesTo(objectPath, viewContext) {
        if (viewContext && viewContext.getViewKey) {
            return viewContext.getViewKey().includes('alphanumeric-format');
        }
        return false;
    }
 }
--- a/src/plugins/notebook/components/Notebook.vue
+++ b/src/plugins/notebook/components/Notebook.vue
@ -111,7 +111,7 @@ import Search from '@/ui/components/search.vue';
 import SearchResults from './SearchResults.vue';
 import Sidebar from './Sidebar.vue';
 import { clearDefaultNotebook, getDefaultNotebook, setDefaultNotebook, setDefaultNotebookSection, setDefaultNotebookPage } from '../utils/notebook-storage';
-import { DEFAULT_CLASS, addNotebookEntry, createNewEmbed, getNotebookEntries } from '../utils/notebook-entries';
+import { addNotebookEntry, createNewEmbed, getNotebookEntries } from '../utils/notebook-entries';
 import objectUtils from 'objectUtils';
 import { throttle } from 'lodash';
@ -416,14 +416,7 @@ export default {
                return;
            }
-            const classList = domainObject.classList || [];
+            this.openmct.status.delete(domainObject.identifier);
            const index = classList.indexOf(DEFAULT_CLASS);
            if (!classList.length || index < 0) {
                return;
            }
            classList.splice(index, 1);
            this.openmct.objects.mutate(domainObject, 'classList', classList);
        },
        searchItem(input) {
            this.search = input;
--- a/src/plugins/notebook/components/NotebookEmbed.vue
+++ b/src/plugins/notebook/components/NotebookEmbed.vue
@ -143,7 +143,8 @@ export default {
                this.openmct.notifications.alert(message);
            }
-            window.location.href = link;
+            const url = new URL(link);
            window.location.href = url.hash;
        },
        formatTime(unixTime, timeFormat) {
            return Moment.utc(unixTime).format(timeFormat);
--- a/src/plugins/notebook/components/NotebookEntry.vue
+++ b/src/plugins/notebook/components/NotebookEntry.vue
@ -12,12 +12,11 @@
        <div class="c-ne__content">
            <div :id="entry.id"
                 class="c-ne__text"
-                 :class="{'c-input-inline' : !readOnly }"
+                 :class="{'c-ne__input' : !readOnly }"
                 :contenteditable="!readOnly"
                 :style="!entry.text.length ? defaultEntryStyle : ''"
                 @blur="updateEntryValue($event, entry.id)"
                 @focus="updateCurrentEntryValue($event, entry.id)"
-            >{{ entry.text.length ? entry.text : defaultText }}</div>
+            >{{ entry.text }}</div>
            <div class="c-snapshots c-ne__embeds">
                <NotebookEmbed v-for="embed in entry.embeds"
                               :key="embed.id"
@ -106,12 +105,7 @@ export default {
    },
    data() {
        return {
-            currentEntryValue: '',
+            currentEntryValue: ''
            defaultEntryStyle: {
                fontStyle: 'italic',
                color: '#6e6e6e'
            },
            defaultText: 'add description'
        };
    },
    computed: {
@ -235,24 +229,13 @@ export default {
            this.entry.embeds.splice(embedPosition, 1);
            this.updateEntry(this.entry);
        },
        selectTextInsideElement(element) {
            const range = document.createRange();
            range.selectNodeContents(element);
            let selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        },
        updateCurrentEntryValue($event) {
            if (this.readOnly) {
                return;
            }
            const target = $event.target;
-            this.currentEntryValue = target ? target.innerText : '';
+            this.currentEntryValue = target ? target.textContent : '';
            if (!this.entry.text.length) {
                this.selectTextInsideElement(target);
            }
        },
        updateEmbed(newEmbed) {
            this.entry.embeds.some(e => {
@ -292,6 +275,8 @@ export default {
            const entryPos = this.entryPosById(entryId);
            const value = target.textContent.trim();
            if (this.currentEntryValue !== value) {
                target.textContent = value;
                const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
                entries[entryPos].text = value;
--- a/src/plugins/notebook/components/NotebookMenuSwitcher.vue
+++ b/src/plugins/notebook/components/NotebookMenuSwitcher.vue
@ -1,29 +1,17 @@
 <template>
 <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
    <button
-        class="c-button--menu icon-notebook"
+        class="c-icon-button c-button--menu icon-camera"
        title="Take a Notebook Snapshot"
-        @click="setNotebookTypes"
+        @click.stop.prevent="showMenu"
        @click.stop="toggleMenu"
    >
-        <span class="c-button__label"></span>
+        <span
            title="Take Notebook Snapshot"
            class="c-icon-button__label"
        >
            Snapshot
        </span>
    </button>
    <div
        v-show="showMenu"
        class="c-menu"
    >
        <ul>
            <li
                v-for="(type, index) in notebookTypes"
                :key="index"
                :class="type.cssClass"
                :title="type.name"
                @click="snapshot(type)"
            >
                {{ type.name }}
            </li>
        </ul>
    </div>
 </div>
 </template>
@ -57,22 +45,20 @@ export default {
    data() {
        return {
            notebookSnapshot: null,
-            notebookTypes: [],
+            notebookTypes: []
            showMenu: false
        };
    },
    mounted() {
        this.notebookSnapshot = new Snapshot(this.openmct);
-
+        this.setDefaultNotebookStatus();
        document.addEventListener('click', this.hideMenu);
    },
    destroyed() {
        document.removeEventListener('click', this.hideMenu);
    },
    methods: {
-        setNotebookTypes() {
+        showMenu(event) {
            const notebookTypes = [];
            const defaultNotebook = getDefaultNotebook();
            const elementBoundingClientRect = this.$el.getBoundingClientRect();
            const x = elementBoundingClientRect.x;
            const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
            if (defaultNotebook) {
                const domainObject = defaultNotebook.domainObject;
@ -83,35 +69,31 @@ export default {
                    notebookTypes.push({
                        cssClass: 'icon-notebook',
                        name: `Save to Notebook ${defaultPath}`,
-                        type: NOTEBOOK_DEFAULT
+                        callBack: () => {
                            return this.snapshot(NOTEBOOK_DEFAULT);
                        }
                    });
                }
            }
            notebookTypes.push({
-                cssClass: 'icon-notebook',
+                cssClass: 'icon-camera',
                name: 'Save to Notebook Snapshots',
-                type: NOTEBOOK_SNAPSHOT
+                callBack: () => {
                    return this.snapshot(NOTEBOOK_SNAPSHOT);
                }
            });
-            this.notebookTypes = notebookTypes;
+            this.openmct.menus.showMenu(x, y, notebookTypes);
        },
        toggleMenu() {
            this.showMenu = !this.showMenu;
        },
        hideMenu() {
            this.showMenu = false;
        },
        snapshot(notebook) {
            this.hideMenu();
            this.$nextTick(() => {
                const element = document.querySelector('.c-overlay__contents')
                    || document.getElementsByClassName('l-shell__main-container')[0];
                const bounds = this.openmct.time.bounds();
                const link = !this.ignoreLink
-                    ? window.location.href
+                    ? window.location.hash
                    : null;
                const objectPath = this.objectPath || this.openmct.router.path;
@ -124,6 +106,15 @@ export default {
                this.notebookSnapshot.capture(snapshotMeta, notebook.type, element);
            });
        },
        setDefaultNotebookStatus() {
            let defaultNotebookObject = getDefaultNotebook();
            if (defaultNotebookObject && defaultNotebookObject.notebookMeta) {
                let notebookIdentifier = defaultNotebookObject.notebookMeta.identifier;
                this.openmct.status.set(notebookIdentifier, 'notebook-default');
            }
        }
    }
 };
--- a/src/plugins/notebook/components/NotebookSnapshotContainer.vue
+++ b/src/plugins/notebook/components/NotebookSnapshotContainer.vue
@ -4,7 +4,7 @@
        <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__type-icon icon-camera"></div>
                    <div class="c-object-label__name">
                        Notebook Snapshots
                        <span v-if="snapshots.length"
--- a/src/plugins/notebook/components/NotebookSnapshotIndicator.vue
+++ b/src/plugins/notebook/components/NotebookSnapshotIndicator.vue
@ -1,5 +1,5 @@
 <template>
-<div class="c-indicator c-indicator--clickable icon-notebook"
+<div class="c-indicator c-indicator--clickable icon-camera"
     :class="[
         { 's-status-off': snapshotCount === 0 },
         { 's-status-on': snapshotCount > 0 },
--- a/src/plugins/notebook/plugin.js
+++ b/src/plugins/notebook/plugin.js
@ -1,3 +1,4 @@
 import CopyToNotebookAction from './actions/CopyToNotebookAction';
 import Notebook from './components/Notebook.vue';
 import NotebookSnapshotIndicator from './components/NotebookSnapshotIndicator.vue';
 import SnapshotContainer from './snapshot-container';
@ -13,6 +14,8 @@ export default function NotebookPlugin() {
        installed = true;
        openmct.actions.register(new CopyToNotebookAction(openmct));
        const notebookType = {
            name: 'Notebook',
            description: 'Create and save timestamped notes with embedded object snapshots.',
--- a/src/plugins/notebook/pluginSpec.js
+++ b/src/plugins/notebook/pluginSpec.js
@ -20,7 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-import { createOpenMct, createMouseEvent, resetApplicationState } from 'utils/testing';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
 import NotebookPlugin from './plugin';
 import Vue from 'vue';
@ -133,90 +133,4 @@ describe("Notebook plugin:", () => {
            expect(hasMajorElements).toBe(true);
        });
    });
    describe("Notebook Snapshots view:", () => {
        let snapshotIndicator;
        let drawerElement;
        function clickSnapshotIndicator() {
            const indicator = element.querySelector('.icon-notebook');
            const button = indicator.querySelector('button');
            const clickEvent = createMouseEvent('click');
            button.dispatchEvent(clickEvent);
        }
        beforeAll(() => {
            snapshotIndicator = openmct.indicators.indicatorObjects
                .find(indicator => indicator.key === 'notebook-snapshot-indicator').element;
            element.append(snapshotIndicator);
            return Vue.nextTick();
        });
        afterAll(() => {
            snapshotIndicator.remove();
            if (drawerElement) {
                drawerElement.remove();
            }
        });
        beforeEach(() => {
            drawerElement = document.querySelector('.l-shell__drawer');
        });
        afterEach(() => {
            if (drawerElement) {
                drawerElement.classList.remove('is-expanded');
            }
        });
        it("has Snapshots indicator", () => {
            const hasSnapshotIndicator = snapshotIndicator !== null && snapshotIndicator !== undefined;
            expect(hasSnapshotIndicator).toBe(true);
        });
        it("snapshots container has class isExpanded", () => {
            let classes = drawerElement.classList;
            const isExpandedBefore = classes.contains('is-expanded');
            clickSnapshotIndicator();
            classes = drawerElement.classList;
            const isExpandedAfterFirstClick = classes.contains('is-expanded');
            const success = isExpandedBefore === false
                && isExpandedAfterFirstClick === true;
            expect(success).toBe(true);
        });
        it("snapshots container does not have class isExpanded", () => {
            let classes = drawerElement.classList;
            const isExpandedBefore = classes.contains('is-expanded');
            clickSnapshotIndicator();
            classes = drawerElement.classList;
            const isExpandedAfterFirstClick = classes.contains('is-expanded');
            clickSnapshotIndicator();
            classes = drawerElement.classList;
            const isExpandedAfterSecondClick = classes.contains('is-expanded');
            const success = isExpandedBefore === false
                && isExpandedAfterFirstClick === true
                && isExpandedAfterSecondClick === false;
            expect(success).toBe(true);
        });
        it("show notebook snapshots container text", () => {
            clickSnapshotIndicator();
            const notebookSnapshots = drawerElement.querySelector('.l-browse-bar__object-name');
            const snapshotsText = notebookSnapshots.textContent.trim();
            expect(snapshotsText).toBe('Notebook Snapshots');
        });
    });
 });
--- a/src/plugins/notebook/snapshot.js
+++ b/src/plugins/notebook/snapshot.js
@ -49,7 +49,7 @@ export default class Snapshot {
            .then(domainObject => {
                addNotebookEntry(this.openmct, domainObject, notebookStorage, embed);
-                const defaultPath = `${domainObject.name} > ${notebookStorage.section.name} > ${notebookStorage.page.name}`;
+                const defaultPath = `${domainObject.name} - ${notebookStorage.section.name} - ${notebookStorage.page.name}`;
                const msg = `Saved to Notebook ${defaultPath}`;
                this._showNotification(msg);
            });
--- a/src/plugins/notebook/utils/notebook-entries.js
+++ b/src/plugins/notebook/utils/notebook-entries.js
@ -1,6 +1,6 @@
 import objectLink from '../../../ui/mixins/object-link';
-export const DEFAULT_CLASS = 'is-notebook-default';
+export const DEFAULT_CLASS = 'notebook-default';
 const TIME_BOUNDS = {
    START_BOUND: 'tc.startBound',
    END_BOUND: 'tc.endBound',
@ -103,7 +103,7 @@ export function createNewEmbed(snapshotMeta, snapshot = '') {
    };
 }
-export function addNotebookEntry(openmct, domainObject, notebookStorage, embed = null) {
+export function addNotebookEntry(openmct, domainObject, notebookStorage, embed = null, entryText = '') {
    if (!openmct || !domainObject || !notebookStorage) {
        return;
    }
@ -125,11 +125,11 @@ export function addNotebookEntry(openmct, domainObject, notebookStorage, embed =
    defaultEntries.push({
        id,
        createdOn: date,
-        text: '',
+        text: entryText,
        embeds
    });
-    addDefaultClass(domainObject);
+    addDefaultClass(domainObject, openmct);
    openmct.objects.mutate(domainObject, 'configuration.entries', entries);
    return id;
@ -199,11 +199,6 @@ export function deleteNotebookEntries(openmct, domainObject, selectedSection, se
    openmct.objects.mutate(domainObject, 'configuration.entries', entries);
 }
-function addDefaultClass(domainObject) {
+function addDefaultClass(domainObject, openmct) {
-    const classList = domainObject.classList || [];
+    openmct.status.set(domainObject.identifier, DEFAULT_CLASS);
    if (classList.includes(DEFAULT_CLASS)) {
        return;
    }
    classList.push(DEFAULT_CLASS);
 }
--- a/src/plugins/plot/res/templates/mct-plot.html
+++ b/src/plugins/plot/res/templates/mct-plot.html
@ -40,7 +40,7 @@
                <div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" title="Cursor is point locked. Click anywhere in the plot to unlock."></div>
                <div class="plot-legend-item"
                     ng-class="{
-                        'is-missing': series.domainObject.status === 'missing'
+                        'is-status--missing': series.domainObject.status === 'missing'
                    }"
                     ng-repeat="series in series track by $index"
                >
@ -48,7 +48,7 @@
                        <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="is-status__indicator" title="This item is missing or suspect"></span>
                        <span class="plot-series-name">{{ series.nameWithUnit() }}</span>
                    </div>
                    <div class="plot-series-value hover-value-enabled value-to-display-{{ legend.get('valueToShowWhenCollapsed') }} {{ series.closest.mctLimitState.cssClass }}"
@ -95,14 +95,14 @@
                    <tr ng-repeat="series in series"
                        class="plot-legend-item"
                        ng-class="{
-                            'is-missing': series.domainObject.status === 'missing'
+                            'is-status--missing': series.domainObject.status === 'missing'
                        }"
                    >
                        <td class="plot-series-swatch-and-name">
                            <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="is-status__indicator" title="This item is missing or suspect"></span>
                            <span class="plot-series-name">{{ series.get('name') }}</span>
                        </td>
--- a/src/plugins/plot/res/templates/plot.html
+++ b/src/plugins/plot/res/templates/plot.html
@ -46,7 +46,7 @@
        </button>
    </div>
-    <div class="l-view-section">
+    <div class="l-view-section u-style-receiver js-style-receiver">
        <div class="c-loading--overlay loading"
            ng-show="!!pending"></div>
        <mct-plot config="controller.config"
--- a/src/plugins/plot/res/templates/stacked-plot.html
+++ b/src/plugins/plot/res/templates/stacked-plot.html
@ -45,7 +45,7 @@
                title="Toggle grid lines">
        </button>
    </div>
-    <div class="l-view-section">
+    <div class="l-view-section u-style-receiver js-style-receiver">
        <div class="c-loading--overlay loading"
             ng-show="!!currentRequest.pending"></div>
        <div class="gl-plot child-frame u-inspectable"
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@ -58,7 +58,8 @@ define([
    './newFolderAction/plugin',
    './persistence/couch/plugin',
    './defaultRootName/plugin',
-    './timeline/plugin'
+    './timeline/plugin',
    './viewDatumAction/plugin'
 ], function (
    _,
    UTCTimeSystem,
@ -97,7 +98,8 @@ define([
    NewFolderAction,
    CouchDBPlugin,
    DefaultRootName,
-    Timeline
+    Timeline,
    ViewDatumAction
 ) {
    const bundleMap = {
        LocalStorage: 'platform/persistence/local',
@ -191,6 +193,7 @@ define([
    plugins.ISOTimeFormat = ISOTimeFormat.default;
    plugins.DefaultRootName = DefaultRootName.default;
    plugins.Timeline = Timeline.default;
    plugins.ViewDatumAction = ViewDatumAction.default;
    return plugins;
 });
--- a/src/plugins/remove/RemoveAction.js
+++ b/src/plugins/remove/RemoveAction.js
@ -25,6 +25,8 @@ export default class RemoveAction {
        this.key = 'remove';
        this.description = 'Remove this object from its containing object.';
        this.cssClass = "icon-trash";
        this.group = "action";
        this.priority = 1;
        this.openmct = openmct;
    }
@ -103,6 +105,16 @@ export default class RemoveAction {
        let parentType = parent && this.openmct.types.get(parent.type);
        let child = objectPath[0];
        let locked = child.locked ? child.locked : parent && parent.locked;
        let isEditing = this.openmct.editor.isEditing();
        if (isEditing) {
            let currentItemInView = this.openmct.router.path[0];
            let domainObject = objectPath[0];
            if (this.openmct.objects.areIdsEqual(currentItemInView.identifier, domainObject.identifier)) {
                return false;
            }
        }
        if (locked) {
            return false;
--- a/src/plugins/remove/plugin.js
+++ b/src/plugins/remove/plugin.js
@ -23,6 +23,6 @@ import RemoveAction from "./RemoveAction";
 export default function () {
    return function (openmct) {
-        openmct.contextMenu.registerAction(new RemoveAction(openmct));
+        openmct.actions.register(new RemoveAction(openmct));
    };
 }
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@ -29,13 +29,13 @@
            @click="showTab(tab, index)"
        >
            <div class="c-tabs-view__tab__label c-object-label"
-                 :class="{'is-missing': tab.domainObject.status === 'missing'}"
+                 :class="[tab.status ? `is-${tab.status}` : '']"
            >
                <div class="c-object-label__type-icon"
                     :class="tab.type.definition.cssClass"
                >
-                    <span class="is-missing__indicator"
+                    <span class="is-status__indicator"
-                          title="This item is missing"
+                          title="This item is missing or suspect"
                    ></span>
                </div>
                <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
@ -192,8 +192,10 @@ export default {
        },
        addItem(domainObject) {
            let type = this.openmct.types.get(domainObject.type) || unknownObjectType;
            let status = this.openmct.status.get(domainObject.identifier);
            let tabItem = {
                domainObject,
                status,
                type: type,
                key: this.openmct.objects.makeKeyString(domainObject.identifier)
            };
--- a/src/plugins/telemetryTable/TelemetryTable.js
+++ b/src/plugins/telemetryTable/TelemetryTable.js
@ -25,6 +25,7 @@ define([
    'lodash',
    './collections/BoundedTableRowCollection',
    './collections/FilteredTableRowCollection',
    './TelemetryTableNameColumn',
    './TelemetryTableRow',
    './TelemetryTableColumn',
    './TelemetryTableUnitColumn',
@ -34,6 +35,7 @@ define([
    _,
    BoundedTableRowCollection,
    FilteredTableRowCollection,
    TelemetryTableNameColumn,
    TelemetryTableRow,
    TelemetryTableColumn,
    TelemetryTableUnitColumn,
@ -71,6 +73,24 @@ define([
            openmct.time.on('timeSystem', this.refreshData);
        }
        /**
         * @private
         */
        addNameColumn(telemetryObject, metadataValues) {
            let metadatum = metadataValues.find(m => m.key === 'name');
            if (!metadatum) {
                metadatum = {
                    format: 'string',
                    key: 'name',
                    name: 'Name'
                };
            }
            const column = new TelemetryTableNameColumn(this.openmct, telemetryObject, metadatum);
            this.configuration.addSingleColumnForObject(telemetryObject, column);
        }
        initialize() {
            if (this.domainObject.type === 'table') {
                this.filterObserver = this.openmct.objects.observe(this.domainObject, 'configuration.filters', this.updateFilters);
@ -160,7 +180,6 @@ define([
        processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator) {
            let telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
            this.boundedRows.add(telemetryRows);
            this.emit('historical-rows-processed');
        }
        /**
@ -212,7 +231,13 @@ define([
        addColumnsForObject(telemetryObject) {
            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
            this.addNameColumn(telemetryObject, metadataValues);
            metadataValues.forEach(metadatum => {
                if (metadatum.key === 'name') {
                    return;
                }
                let column = this.createColumn(metadatum);
                this.configuration.addSingleColumnForObject(telemetryObject, column);
                // add units column if available
--- a/src/plugins/telemetryTable/TelemetryTableNameColumn.js
+++ b/src/plugins/telemetryTable/TelemetryTableNameColumn.js
@ -0,0 +1,44 @@
 /*****************************************************************************
 * 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([
    './TelemetryTableColumn.js'
 ], function (
    TelemetryTableColumn
 ) {
    class TelemetryTableNameColumn extends TelemetryTableColumn {
        constructor(openmct, telemetryObject, metadatum) {
            super(openmct, metadatum);
            this.telemetryObject = telemetryObject;
        }
        getRawValue() {
            return this.telemetryObject.name;
        }
        getFormattedValue() {
            return this.telemetryObject.name;
        }
    }
    return TelemetryTableNameColumn;
 });
--- a/src/plugins/telemetryTable/TelemetryTableRow.js
+++ b/src/plugins/telemetryTable/TelemetryTableRow.js
@ -26,6 +26,7 @@ define([], function () {
            this.columns = columns;
            this.datum = createNormalizedDatum(datum, columns);
            this.fullDatum = datum;
            this.limitEvaluator = limitEvaluator;
            this.objectKeyString = objectKeyString;
        }
@ -87,7 +88,7 @@ define([], function () {
        }
        getContextMenuActions() {
-            return [];
+            return ['viewDatumAction'];
        }
    }
--- a/src/plugins/telemetryTable/TelemetryTableViewProvider.js
+++ b/src/plugins/telemetryTable/TelemetryTableViewProvider.js
@ -54,15 +54,13 @@ define([
            view(domainObject, objectPath) {
                let table = new TelemetryTable(domainObject, openmct);
                let component;
                let markingProp = {
                    enable: true,
                    useAlternateControlBar: false,
                    rowName: '',
                    rowNamePlural: ''
                };
-
+                const view = {
                return {
                    show: function (element, editMode) {
                        component = new Vue({
                            el: element,
@ -72,7 +70,8 @@ define([
                            data() {
                                return {
                                    isEditing: editMode,
-                                    markingProp
+                                    markingProp,
                                    view
                                };
                            },
                            provide: {
@ -80,7 +79,7 @@ define([
                                table,
                                objectPath
                            },
-                            template: '<table-component :isEditing="isEditing" :marking="markingProp"/>'
+                            template: '<table-component ref="tableComponent" :isEditing="isEditing" :marking="markingProp" :view="view"/>'
                        });
                    },
                    onEditModeChange(editMode) {
@ -89,11 +88,22 @@ define([
                    onClearData() {
                        table.clearData();
                    },
                    getViewContext() {
                        if (component) {
                            return component.$refs.tableComponent.getViewContext();
                        } else {
                            return {
                                type: 'telemetry-table'
                            };
                        }
                    },
                    destroy: function (element) {
                        component.$destroy();
                        component = undefined;
                    }
                };
                return view;
            },
            priority() {
                return 1;
--- a/src/plugins/telemetryTable/ViewActions.js
+++ b/src/plugins/telemetryTable/ViewActions.js
@ -0,0 +1,123 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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.
 *****************************************************************************/
 let exportCSV = {
    name: 'Export Table Data',
    key: 'export-csv-all',
    description: "Export this view's data",
    cssClass: 'icon-download labeled',
    invoke: (objectPath, viewProvider) => {
        viewProvider.getViewContext().exportAllDataAsCSV();
    },
    group: 'view'
 };
 let exportMarkedRows = {
    name: 'Export Marked Rows',
    key: 'export-csv-marked',
    description: "Export marked rows as CSV",
    cssClass: 'icon-download labeled',
    invoke: (objectPath, viewProvider) => {
        viewProvider.getViewContext().exportMarkedRows();
    },
    group: 'view'
 };
 let unmarkAllRows = {
    name: 'Unmark All Rows',
    key: 'unmark-all-rows',
    description: 'Unmark all rows',
    cssClass: 'icon-x labeled',
    invoke: (objectPath, viewProvider) => {
        viewProvider.getViewContext().unmarkAllRows();
    },
    showInStatusBar: true,
    group: 'view'
 };
 let pause = {
    name: 'Pause',
    key: 'pause-data',
    description: 'Pause real-time data flow',
    cssClass: 'icon-pause',
    invoke: (objectPath, viewProvider) => {
        viewProvider.getViewContext().togglePauseByButton();
    },
    showInStatusBar: true,
    group: 'view'
 };
 let play = {
    name: 'Play',
    key: 'play-data',
    description: 'Continue real-time data flow',
    cssClass: 'c-button pause-play is-paused',
    invoke: (objectPath, viewProvider) => {
        viewProvider.getViewContext().togglePauseByButton();
    },
    showInStatusBar: true,
    group: 'view'
 };
 let expandColumns = {
    name: 'Expand Columns',
    key: 'expand-columns',
    description: "Increase column widths to fit currently available data.",
    cssClass: 'icon-arrows-right-left labeled',
    invoke: (objectPath, viewProvider) => {
        viewProvider.getViewContext().expandColumns();
    },
    showInStatusBar: true,
    group: 'view'
 };
 let autosizeColumns = {
    name: 'Autosize Columns',
    key: 'autosize-columns',
    description: "Automatically size columns to fit the table into the available space.",
    cssClass: 'icon-expand labeled',
    invoke: (objectPath, viewProvider) => {
        viewProvider.getViewContext().autosizeColumns();
    },
    showInStatusBar: true,
    group: 'view'
 };
 let viewActions = [
    exportCSV,
    exportMarkedRows,
    unmarkAllRows,
    pause,
    play,
    expandColumns,
    autosizeColumns
 ];
 viewActions.forEach(action => {
    action.appliesTo = (objectPath, viewProvider = {}) => {
        let viewContext = viewProvider.getViewContext && viewProvider.getViewContext();
        if (viewContext) {
            let type = viewContext.type;
            return type === 'telemetry-table';
        }
        return false;
    };
 });
 export default viewActions;
--- a/src/plugins/telemetryTable/components/sizing-row.vue
+++ b/src/plugins/telemetryTable/components/sizing-row.vue
@ -0,0 +1,54 @@
 <template>
 <tr class="c-telemetry-table__sizing-tr"><td>SIZING ROW</td></tr>
 </template>
 <script>
 export default {
    props: {
        isEditing: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        isEditing: function (isEditing) {
            if (isEditing) {
                this.pollForRowHeight();
            } else {
                this.clearPoll();
            }
        }
    },
    mounted() {
        this.$nextTick().then(() => {
            this.height = this.$el.offsetHeight;
            this.$emit('change-height', this.height);
        });
        if (this.isEditing) {
            this.pollForRowHeight();
        }
    },
    destroyed() {
        this.clearPoll();
    },
    methods: {
        pollForRowHeight() {
            this.clearPoll();
            this.pollID = window.setInterval(this.heightPoll, 300);
        },
        clearPoll() {
            if (this.pollID) {
                window.clearInterval(this.pollID);
                this.pollID = undefined;
            }
        },
        heightPoll() {
            let height = this.$el.offsetHeight;
            if (height !== this.height) {
                this.$emit('change-height', height);
                this.height = height;
            }
        }
    }
 };
 </script>
--- a/src/plugins/telemetryTable/components/table-row.vue
+++ b/src/plugins/telemetryTable/components/table-row.vue
@ -102,7 +102,17 @@ export default {
                selectable[columnKeys] = this.row.columns[columnKeys].selectable;
                return selectable;
-            }, {})
+            }, {}),
            actionsViewContext: {
                getViewContext: () => {
                    return {
                        viewHistoricalData: true,
                        viewDatumAction: true,
                        getDatum: this.getDatum,
                        skipCache: true
                    };
                }
            }
        };
    },
    computed: {
@ -170,14 +180,24 @@ export default {
                event.stopPropagation();
            }
        },
        getDatum() {
            return this.row.fullDatum;
        },
        showContextMenu: function (event) {
            event.preventDefault();
            this.markRow(event);
            this.row.getContextualDomainObject(this.openmct, this.row.objectKeyString).then(domainObject => {
                let contextualObjectPath = this.objectPath.slice();
                contextualObjectPath.unshift(domainObject);
-                this.openmct.contextMenu._showContextMenuForObjectPath(contextualObjectPath, event.x, event.y, this.row.getContextMenuActions());
+                let allActions = this.openmct.actions.get(contextualObjectPath, this.actionsViewContext);
                let applicableActions = this.row.getContextMenuActions().map(key => allActions[key]);
                if (applicableActions.length) {
                    this.openmct.menus.showMenu(event.x, event.y, applicableActions);
                }
            });
        }
    }
--- a/src/plugins/telemetryTable/components/table.scss
+++ b/src/plugins/telemetryTable/components/table.scss
@ -9,6 +9,9 @@
 .c-telemetry-table {
    // Table that displays telemetry in a scrolling body area
    @include fontAndSize();
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
@ -108,7 +111,7 @@
            display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
            align-items: stretch;
            position: absolute;
-            height: 18px; // Needed when a row has empty values in its cells
+            min-height: 18px; // Needed when a row has empty values in its cells
            .is-editing .l-layout__frame & {
                pointer-events: none;
@ -151,6 +154,12 @@
        }
    }
    &__sizing-tr {
        // A row element used to determine sizing of rows based on font size
        visibility: hidden;
        pointer-events: none;
    }
    &__footer {
        $pt: 2px;
        border-top: 1px solid $colorInteriorBorder;
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@ -23,8 +23,7 @@
 <div class="c-table-wrapper"
     :class="{ 'is-paused': paused }"
 >
-    <!-- main contolbar  start-->
+    <div v-if="enableLegacyToolbar"
    <div v-if="!marking.useAlternateControlBar"
         class="c-table-control-bar c-control-bar"
    >
        <button
@ -94,7 +93,6 @@
        <slot name="buttons"></slot>
    </div>
    <!-- main controlbar end -->
    <!-- alternate controlbar start -->
    <div v-if="marking.useAlternateControlBar"
@ -113,11 +111,11 @@
        <button
            :class="{'hide-nice': !markedRows.length}"
-            class="c-button icon-x labeled"
+            class="c-icon-button icon-x labeled"
            title="Deselect All"
            @click="unmarkAllRows()"
        >
-            <span class="c-button__label">{{ `Deselect ${marking.disableMultiSelect ? '' : 'All'}` }} </span>
+            <span class="c-icon-button__label">{{ `Deselect ${marking.disableMultiSelect ? '' : 'All'}` }} </span>
        </button>
        <slot name="buttons"></slot>
@ -125,7 +123,7 @@
    <!-- alternate controlbar end  -->
    <div
-        class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
+        class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar u-style-receiver js-style-receiver"
        :class="{
            'loading': loading,
            'is-paused' : paused
@ -234,6 +232,10 @@
            class="c-telemetry-table__sizing js-telemetry-table__sizing"
            :style="sizingTableWidth"
        >
            <sizing-row
                :is-editing="isEditing"
                @change-height="setRowHeight"
            />
            <tr>
                <template v-for="(title, key) in headers">
                    <th
@ -270,6 +272,7 @@ import TableFooterIndicator from './table-footer-indicator.vue';
 import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 import SizingRow from './sizing-row.vue';
 const VISIBLE_ROW_COUNT = 100;
 const ROW_HEIGHT = 17;
@ -282,7 +285,8 @@ export default {
        TableColumnHeader,
        search,
        TableFooterIndicator,
-        ToggleSwitch
+        ToggleSwitch,
        SizingRow
    },
    inject: ['table', 'openmct', 'objectPath'],
    props: {
@ -295,12 +299,12 @@ export default {
            default: true
        },
        allowFiltering: {
-            'type': Boolean,
+            type: Boolean,
-            'default': true
+            default: true
        },
        allowSorting: {
-            'type': Boolean,
+            type: Boolean,
-            'default': true
+            default: true
        },
        marking: {
            type: Object,
@ -313,6 +317,17 @@ export default {
                    rowNamePlural: ""
                };
            }
        },
        enableLegacyToolbar: {
            type: Boolean,
            default: false
        },
        view: {
            type: Object,
            required: false,
            default() {
                return {};
            }
        }
    },
    data() {
@ -388,6 +403,40 @@ export default {
        markedRows: {
            handler(newVal, oldVal) {
                this.$emit('marked-rows-updated', newVal, oldVal);
                if (this.viewActionsCollection) {
                    if (newVal.length > 0) {
                        this.viewActionsCollection.enable(['export-csv-marked', 'unmark-all-rows']);
                    } else if (newVal.length === 0) {
                        this.viewActionsCollection.disable(['export-csv-marked', 'unmark-all-rows']);
                    }
                }
            }
        },
        paused: {
            handler(newVal) {
                if (this.viewActionsCollection) {
                    if (newVal) {
                        this.viewActionsCollection.hide(['pause-data']);
                        this.viewActionsCollection.show(['play-data']);
                    } else {
                        this.viewActionsCollection.hide(['play-data']);
                        this.viewActionsCollection.show(['pause-data']);
                    }
                }
            }
        },
        isAutosizeEnabled: {
            handler(newVal) {
                if (this.viewActionsCollection) {
                    if (newVal) {
                        this.viewActionsCollection.show(['expand-columns']);
                        this.viewActionsCollection.hide(['autosize-columns']);
                    } else {
                        this.viewActionsCollection.show(['autosize-columns']);
                        this.viewActionsCollection.hide(['expand-columns']);
                    }
                }
            }
        }
    },
@ -400,6 +449,11 @@ export default {
        this.rowsRemoved = _.throttle(this.rowsRemoved, 200);
        this.scroll = _.throttle(this.scroll, 100);
        if (!this.marking.useAlternateControlBar && !this.enableLegacyToolbar) {
            this.viewActionsCollection = this.openmct.actions.get(this.objectPath, this.view);
            this.initializeViewActions();
        }
        this.table.on('object-added', this.addObject);
        this.table.on('object-removed', this.removeObject);
        this.table.on('outstanding-requests', this.outstandingRequests);
@ -506,7 +560,7 @@ export default {
            let columnWidths = {};
            let totalWidth = 0;
            let headerKeys = Object.keys(this.headers);
-            let sizingTableRow = this.sizingTable.children[0];
+            let sizingTableRow = this.sizingTable.children[1];
            let sizingCells = sizingTableRow.children;
            headerKeys.forEach((headerKey, headerIndex, array) => {
@ -840,7 +894,7 @@ export default {
                for (let i = firstRowIndex; i <= lastRowIndex; i++) {
                    let row = allRows[i];
-                    row.marked = true;
+                    this.$set(row, 'marked', true);
                    if (row !== baseRow) {
                        this.markedRows.push(row);
@ -901,6 +955,46 @@ export default {
            this.isAutosizeEnabled = true;
            this.$nextTick().then(this.calculateColumnWidths);
        },
        getViewContext() {
            return {
                type: 'telemetry-table',
                exportAllDataAsCSV: this.exportAllDataAsCSV,
                exportMarkedRows: this.exportMarkedRows,
                unmarkAllRows: this.unmarkAllRows,
                togglePauseByButton: this.togglePauseByButton,
                expandColumns: this.recalculateColumnWidths,
                autosizeColumns: this.autosizeColumns
            };
        },
        initializeViewActions() {
            if (this.markedRows.length > 0) {
                this.viewActionsCollection.enable(['export-csv-marked', 'unmark-all-rows']);
            } else if (this.markedRows.length === 0) {
                this.viewActionsCollection.disable(['export-csv-marked', 'unmark-all-rows']);
            }
            if (this.paused) {
                this.viewActionsCollection.hide(['pause-data']);
                this.viewActionsCollection.show(['play-data']);
            } else {
                this.viewActionsCollection.hide(['play-data']);
                this.viewActionsCollection.show(['pause-data']);
            }
            if (this.isAutosizeEnabled) {
                this.viewActionsCollection.show(['expand-columns']);
                this.viewActionsCollection.hide(['autosize-columns']);
            } else {
                this.viewActionsCollection.show(['autosize-columns']);
                this.viewActionsCollection.hide(['expand-columns']);
            }
        },
        setRowHeight(height) {
            this.rowHeight = height;
            this.setHeight();
            this.calculateTableSize();
            this.clearRowsAndRerender();
        }
    }
 };
--- a/src/plugins/telemetryTable/plugin.js
+++ b/src/plugins/telemetryTable/plugin.js
@ -23,11 +23,13 @@
 define([
    './TelemetryTableViewProvider',
    './TableConfigurationViewProvider',
-    './TelemetryTableType'
+    './TelemetryTableType',
    './ViewActions'
 ], function (
    TelemetryTableViewProvider,
    TableConfigurationViewProvider,
-    TelemetryTableType
+    TelemetryTableType,
    TelemetryTableViewActions
 ) {
    return function plugin() {
        return function install(openmct) {
@ -41,6 +43,10 @@ define([
                    return true;
                }
            });
            TelemetryTableViewActions.default.forEach(action => {
                openmct.actions.register(action);
            });
        };
    };
 });
--- a/src/plugins/telemetryTable/pluginSpec.js
+++ b/src/plugins/telemetryTable/pluginSpec.js
@ -168,6 +168,8 @@ describe("the plugin", () => {
                return telemetryPromise;
            });
            openmct.router.path = [testTelemetryObject];
            applicableViews = openmct.objectViews.get(testTelemetryObject);
            tableViewProvider = applicableViews.find((viewProvider) => viewProvider.key === 'table');
            tableView = tableViewProvider.view(testTelemetryObject, [testTelemetryObject]);
@ -183,10 +185,11 @@ describe("the plugin", () => {
        it("Renders a column for every item in telemetry metadata", () => {
            let headers = element.querySelectorAll('span.c-telemetry-table__headers__label');
-            expect(headers.length).toBe(3);
+            expect(headers.length).toBe(4);
-            expect(headers[0].innerText).toBe('Time');
+            expect(headers[0].innerText).toBe('Name');
-            expect(headers[1].innerText).toBe('Some attribute');
+            expect(headers[1].innerText).toBe('Time');
-            expect(headers[2].innerText).toBe('Another attribute');
+            expect(headers[2].innerText).toBe('Some attribute');
            expect(headers[3].innerText).toBe('Another attribute');
        });
        it("Supports column reordering via drag and drop", () => {
--- a/src/plugins/timeConductor/Conductor.vue
+++ b/src/plugins/timeConductor/Conductor.vue
@ -141,10 +141,11 @@
            <ConductorMode class="c-conductor__mode-select" />
            <ConductorTimeSystem class="c-conductor__time-system-select" />
            <ConductorHistory
                v-if="isFixed"
                class="c-conductor__history-select"
                :offsets="openmct.time.clockOffsets()"
                :bounds="bounds"
                :time-system="timeSystem"
                :mode="timeMode"
            />
        </div>
        <input
@ -210,6 +211,11 @@ export default {
            isZooming: false
        };
    },
    computed: {
        timeMode() {
            return this.isFixed ? 'fixed' : 'realtime';
        }
    },
    mounted() {
        document.addEventListener('keydown', this.handleKeyDown);
        document.addEventListener('keyup', this.handleKeyUp);
--- a/src/plugins/timeConductor/ConductorHistory.vue
+++ b/src/plugins/timeConductor/ConductorHistory.vue
@ -66,7 +66,9 @@
 <script>
 import toggleMixin from '../../ui/mixins/toggle-mixin';
-const LOCAL_STORAGE_HISTORY_KEY = 'tcHistory';
+const DEFAULT_DURATION_FORMATTER = 'duration';
 const LOCAL_STORAGE_HISTORY_KEY_FIXED = 'tcHistory';
 const LOCAL_STORAGE_HISTORY_KEY_REALTIME = 'tcHistoryRealtime';
 const DEFAULT_RECORDS = 10;
 export default {
@ -77,72 +79,115 @@ export default {
            type: Object,
            required: true
        },
        offsets: {
            type: Object,
            required: false,
            default: () => {}
        },
        timeSystem: {
            type: Object,
            required: true
        },
        mode: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            /**
             * previous bounds entries available for easy re-use
-             * @history array of timespans
+             * @realtimeHistory array of timespans
             * @timespans {start, end} number representing timestamp
             */
-            history: this.getHistoryFromLocalStorage(),
+            realtimeHistory: {},
            /**
             * previous bounds entries available for easy re-use
             * @fixedHistory array of timespans
             * @timespans {start, end} number representing timestamp
             */
            fixedHistory: {},
            presets: []
        };
    },
    computed: {
        currentHistory() {
            return this.mode + 'History';
        },
        isFixed() {
            return this.openmct.time.clock() === undefined;
        },
        hasHistoryPresets() {
            return this.timeSystem.isUTCBased && this.presets.length;
        },
        historyForCurrentTimeSystem() {
-            const history = this.history[this.timeSystem.key];
+            const history = this[this.currentHistory][this.timeSystem.key];
            return history;
        },
        storageKey() {
            let key = LOCAL_STORAGE_HISTORY_KEY_FIXED;
            if (this.mode !== 'fixed') {
                key = LOCAL_STORAGE_HISTORY_KEY_REALTIME;
            }
            return key;
        }
    },
    watch: {
        bounds: {
            handler() {
                // only for fixed time since we track offsets for realtime
                if (this.isFixed) {
                    this.addTimespan();
                }
            },
            deep: true
        },
        offsets: {
            handler() {
                this.addTimespan();
            },
            deep: true
        },
        timeSystem: {
-            handler() {
+            handler(ts) {
                this.loadConfiguration();
                this.addTimespan();
            },
            deep: true
        },
        mode: function () {
            this.getHistoryFromLocalStorage();
            this.initializeHistoryIfNoHistory();
            this.loadConfiguration();
        }
    },
    mounted() {
        this.getHistoryFromLocalStorage();
        this.initializeHistoryIfNoHistory();
    },
    methods: {
        getHistoryFromLocalStorage() {
-            const localStorageHistory = localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY);
+            const localStorageHistory = localStorage.getItem(this.storageKey);
            const history = localStorageHistory ? JSON.parse(localStorageHistory) : undefined;
-
+            this[this.currentHistory] = history;
            return history;
        },
        initializeHistoryIfNoHistory() {
-            if (!this.history) {
+            if (!this[this.currentHistory]) {
-                this.history = {};
+                this[this.currentHistory] = {};
                this.persistHistoryToLocalStorage();
            }
        },
        persistHistoryToLocalStorage() {
-            localStorage.setItem(LOCAL_STORAGE_HISTORY_KEY, JSON.stringify(this.history));
+            localStorage.setItem(this.storageKey, JSON.stringify(this[this.currentHistory]));
        },
        addTimespan() {
            const key = this.timeSystem.key;
-            let [...currentHistory] = this.history[key] || [];
+            let [...currentHistory] = this[this.currentHistory][key] || [];
            const timespan = {
-                start: this.bounds.start,
+                start: this.isFixed ? this.bounds.start : this.offsets.start,
-                end: this.bounds.end
+                end: this.isFixed ? this.bounds.end : this.offsets.end
            };
            let self = this;
@ -160,20 +205,24 @@ export default {
            }
            currentHistory.unshift(timespan);
-            this.history[key] = currentHistory;
+            this.$set(this[this.currentHistory], key, currentHistory);
            this.persistHistoryToLocalStorage();
        },
        selectTimespan(timespan) {
            if (this.isFixed) {
                this.openmct.time.bounds(timespan);
            } else {
                this.openmct.time.clockOffsets(timespan);
            }
        },
        selectPresetBounds(bounds) {
            const start = typeof bounds.start === 'function' ? bounds.start() : bounds.start;
            const end = typeof bounds.end === 'function' ? bounds.end() : bounds.end;
            this.selectTimespan({
-                start: start,
+                start,
-                end: end
+                end
            });
        },
        loadConfiguration() {
@ -184,7 +233,9 @@ export default {
            this.records = this.loadRecords(configurations);
        },
        loadPresets(configurations) {
-            const configuration = configurations.find(option => option.presets);
+            const configuration = configurations.find(option => {
                return option.presets && option.name.toLowerCase() === this.mode;
            });
            const presets = configuration ? configuration.presets : [];
            return presets;
@ -196,11 +247,24 @@ export default {
            return records;
        },
        formatTime(time) {
            let format = this.timeSystem.timeFormat;
            let isNegativeOffset = false;
            if (!this.isFixed) {
                if (time < 0) {
                    isNegativeOffset = true;
                }
                time = Math.abs(time);
                format = this.timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER;
            }
            const formatter = this.openmct.telemetry.getValueFormatter({
-                format: this.timeSystem.timeFormat
+                format: format
            }).formatter;
-            return formatter.format(time);
+            return (isNegativeOffset ? '-' : '') + formatter.format(time);
        }
    }
 };
--- a/src/plugins/viewDatumAction/ViewDatumAction.js
+++ b/src/plugins/viewDatumAction/ViewDatumAction.js
@ -0,0 +1,69 @@
 /*****************************************************************************
 * Open MCT, Copyright (c) 2014-2020, 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 MetadataListView from './components/MetadataList.vue';
 import Vue from 'vue';
 export default class ViewDatumAction {
    constructor(openmct) {
        this.name = 'View Full Datum';
        this.key = 'viewDatumAction';
        this.description = 'View full value of datum received';
        this.cssClass = 'icon-object';
        this._openmct = openmct;
    }
    invoke(objectPath, view) {
        let viewContext = view.getViewContext && view.getViewContext();
        let attributes = viewContext.getDatum && viewContext.getDatum();
        let component = new Vue ({
            provide: {
                name: this.name,
                attributes
            },
            components: {
                MetadataListView
            },
            template: '<MetadataListView />'
        });
        this._openmct.overlays.overlay({
            element: component.$mount().$el,
            size: 'large',
            dismissable: true,
            onDestroy: () => {
                component.$destroy();
            }
        });
    }
    appliesTo(objectPath, view = {}) {
        let viewContext = view.getViewContext && view.getViewContext() || {};
        let datum = viewContext.getDatum;
        let enabled = viewContext.viewDatumAction;
        if (enabled && datum) {
            return true;
        }
        return false;
    }
 }
--- a/src/plugins/viewDatumAction/components/MetadataList.vue
+++ b/src/plugins/viewDatumAction/components/MetadataList.vue
@ -0,0 +1,24 @@
 <template>
 <div class="c-attributes-view">
    <div class="c-overlay__top-bar">
        <div class="c-overlay__dialog-title">{{ name }}</div>
    </div>
    <div class="c-overlay__contents-main l-preview-window__object-view">
        <ul class="c-attributes-view__content">
            <li
                v-for="attribute in Object.keys(attributes)"
                :key="attribute"
            >
                <span class="c-attributes-view__grid-item__label">{{ attribute }}</span>
                <span class="c-attributes-view__grid-item__value">{{ attributes[attribute] }}</span>
            </li>
        </ul>
    </div>
 </div>
 </template>
 <script>
 export default {
    inject: ['name', 'attributes']
 };
 </script>
--- a/src/plugins/viewDatumAction/components/metadata-list.scss
+++ b/src/plugins/viewDatumAction/components/metadata-list.scss
@ -0,0 +1,30 @@
 .c-attributes-view {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    > * {
        flex: 0 0 auto;
    }
    &__content {
        $p: 3px;
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-row-gap: $p;
        li { display: contents; }
        [class*="__grid-item"] {
            border-bottom: 1px solid rgba(#999, 0.2);
            padding: 0 5px $p 0;
        }
        [class*="__label"] {
            opacity: 0.8;
        }
    }
 }
--- a/Show More
+++ b/Show More