fix for notebooks

karma.conf.js

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

package.json

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

platform/commonUI/dialog/res/templates/dialog.html

@@ -31,13 +31,13 @@
     </mct-form>
 </div>
 <div class="c-overlay__button-bar">
-    <button class='c-button c-button--major'
+    <a class='c-button c-button--major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
-    </button>
-    <button class='c-button  '
+    </a>
+    <a class='c-button  '
        ng-click="ngModel.cancel()">
         Cancel
-    </button>
+    </a>
 </div>

platform/commonUI/dialog/res/templates/overlay-options.html

@@ -31,13 +31,13 @@
         </mct-include>
     </div>
     <div class="c-overlay__button-bar">
-        <button ng-repeat="option in ngModel.dialog.options"
+        <a ng-repeat="option in ngModel.dialog.options"
            href=''
            class="s-button lg"
            title="{{option.description}}"
            ng-click="ngModel.confirm(option.key)"
            ng-class="{ major: $first, subtle: !$first }">
             {{option.name}}
-        </button>
+        </a>
     </div>
 </mct-container>

platform/commonUI/dialog/res/templates/overlay.html

@@ -24,7 +24,7 @@
     <div class="c-overlay__outer">
         <button ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="c-click-icon c-overlay__close-button icon-x"></button>
+           class="c-click-icon c-overlay__close-button icon-x-in-circle"></button>
         <div class="c-overlay__contents" ng-transclude></div>
     </div>
 </div>

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 u-style-receiver js-style-receiver" ng-controller="ClockController as clock">
+<div class="c-clock l-time-display" ng-controller="ClockController as clock">
 	<div class="c-clock__timezone">
 		{{clock.zone()}}
 	</div>

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 u-style-receiver js-style-receiver is-{{timer.timerState}}" ng-controller="TimerController as timer">
+<div class="c-timer is-{{timer.timerState}}" ng-controller="TimerController as timer">
     <div class="c-timer__controls">
         <button ng-click="timer.clickStopButton()"
                 ng-hide="timer.timerState == 'stopped'"

platform/search/res/templates/search.html

@@ -29,9 +29,9 @@
                        type="text" tabindex="10000"
                        ng-model="ngModel.input"
                        ng-keyup="controller.search()"/>
-                <button class="c-search__clear-input clear-icon icon-x-in-circle"
+                <a class="c-search__clear-input clear-icon icon-x-in-circle"
                    ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
-                   ng-click="ngModel.input = ''; controller.search()"></button>
+                   ng-click="ngModel.input = ''; controller.search()"></a>
                 <!-- To prevent double triggering of clicks on click away, render
                    non-clickable version of the button when menu active-->
                 <a ng-if="!toggle.isActive()" class="menu-icon context-available"
@@ -45,16 +45,16 @@
                 </mct-include>
             </div>
 
-            <button class="c-button c-search__btn-cancel"
+            <a class="c-button c-search__btn-cancel"
                ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
                ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
-                Cancel</button>
+                Cancel</a>
         </div>
 
         <div class="active-filter-display flex-elem holder"
              ng-class="{invisible: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
-            <button class="clear-filters icon-x-in-circle s-icon-button"
-               ng-click="ngModel.checkAll = true; menuController.checkAll()"></button>Filtered by: {{ ngModel.filtersString }}
+            <a class="clear-filters icon-x-in-circle s-icon-button"
+               ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
         </div>
 
         <div class="flex-elem holder results-msg" ng-model="ngModel" ng-show="!loading && ngModel.search">
@@ -72,7 +72,7 @@
                                 ng-model="ngModel"
                                 class="l-flex-row flex-elem grows">
             </mct-representation>
-            <button class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</button>
+            <a class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
         </div>
     </div>
 </div>

src/api/overlays/components/OverlayComponent.vue

@@ -7,7 +7,7 @@
     <div class="c-overlay__outer">
         <button
             v-if="dismissable"
-            class="c-click-icon c-overlay__close-button icon-x"
+            class="c-click-icon c-overlay__close-button icon-x-in-circle"
             @click="destroy"
         ></button>
         <div

src/api/overlays/components/overlay-component.scss

@@ -29,12 +29,13 @@
     }
 
     &__close-button {
-        $p: $interiorMargin + 2px;
+        $p: $interiorMargin;
+        border-radius: 100% !important;
         color: $overlayColorFg;
-        font-size: 1.5em;
+        display: inline-block;
+        font-size: 1.25em;
         position: absolute;
         top: $p; right: $p;
-        z-index: 99;
     }
 
     &__contents {
@@ -42,7 +43,7 @@
         display: flex;
         flex-direction: column;
         outline: none;
-        overflow: auto;
+        overflow: hidden;
     }
 
     &__top-bar {
@@ -86,10 +87,6 @@
     .c-click-icon {
         filter: $overlayBrightnessAdjust;
     }
-
-    .c-object-label__name {
-        filter: $objectLabelNameFilter;
-    }
 }
 
 body.desktop {
@@ -103,6 +100,7 @@ body.desktop {
     }
 
     // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
+    .l-overlay-large,
     .l-overlay-small,
     .l-overlay-fit {
         .c-overlay__outer {
@@ -120,28 +118,8 @@ body.desktop {
 
     .l-overlay-large {
         // Default
-        $pad: $interiorMarginLg;
-        $tbPad: floor($pad * 0.8);
-        $lrPad: $pad;
-        .c-overlay {
-            &__blocker {
-                display: none;
-            }
-
-            &__outer {
-                @include overlaySizing($overlayOuterMarginFullscreen);
-                padding: $tbPad $lrPad;
-            }
-
-            &__close-button {
-                //top: $interiorMargin;
-                //right: $interiorMargin;
-            }
-        }
-
-        .l-browse-bar {
-            margin-right: 50px; // Don't cover close button
-            margin-bottom: $interiorMargin;
+        .c-overlay__outer {
+            @include overlaySizing($overlayOuterMarginLg);
         }
     }
 
@@ -161,4 +139,4 @@ body.desktop {
             min-width: 20%;
         }
     }
-}
+}

src/api/telemetry/TelemetryAPI.js

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

src/api/telemetry/TelemetryAPISpec.js

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

src/plugins/LADTable/components/LADTable.vue

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 <template>
-<div class="c-lad-table-wrapper u-style-receiver js-style-receiver">
+<div class="c-lad-table-wrapper">
     <table class="c-table c-lad-table">
         <thead>
             <tr>

src/plugins/condition/StyleRuleManager.js

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

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

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

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

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

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -127,7 +127,7 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
 
         if (validatedData) {
             if (this.isStalenessCheck()) {
-                if (this.stalenessSubscription && this.stalenessSubscription[validatedData.id]) {
+                if (this.stalenessSubscription[validatedData.id]) {
                     this.stalenessSubscription[validatedData.id].update(validatedData);
                 }
                 this.telemetryDataCache[validatedData.id] = false;

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -142,14 +142,12 @@ export default class TelemetryCriterion extends EventEmitter {
             };
         }
 
-        let telemetryObject = this.telemetryObject;
-
         return this.openmct.telemetry.request(
             this.telemetryObject,
             options
         ).then(results => {
             const latestDatum = results.length ? results[results.length - 1] : {};
-            const normalizedDatum = this.createNormalizedDatum(latestDatum, telemetryObject);
+            const normalizedDatum = this.createNormalizedDatum(latestDatum, this.telemetryObject);
 
             return {
                 id: this.id,

src/plugins/condition/criterion/TelemetryCriterionSpec.js

@@ -21,14 +21,12 @@
  *****************************************************************************/
 
 import TelemetryCriterion from "./TelemetryCriterion";
-import { getMockTelemetry } from "utils/testing";
 
 let openmct = {},
     mockListener,
     testCriterionDefinition,
     testTelemetryObject,
-    telemetryCriterion,
-    mockTelemetry = getMockTelemetry();
+    telemetryCriterion;
 
 describe("The telemetry criterion", function () {
 
@@ -62,7 +60,7 @@ describe("The telemetry criterion", function () {
         };
         openmct.objects = jasmine.createSpyObj('objects', ['get', 'makeKeyString']);
         openmct.objects.makeKeyString.and.returnValue(testTelemetryObject.identifier.key);
-        openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject', "subscribe", "getMetadata", "getValueFormatter", "request"]);
+        openmct.telemetry = jasmine.createSpyObj('telemetry', ['isTelemetryObject', "subscribe", "getMetadata", "getValueFormatter"]);
         openmct.telemetry.isTelemetryObject.and.returnValue(true);
         openmct.telemetry.subscribe.and.returnValue(function () {});
         openmct.telemetry.getValueFormatter.and.returnValue({
@@ -111,30 +109,4 @@ describe("The telemetry criterion", function () {
         });
         expect(telemetryCriterion.result).toBeTrue();
     });
-
-    describe('the LAD request', () => {
-        beforeEach(async () => {
-            let telemetryRequestResolve;
-            let telemetryRequestPromise = new Promise((resolve) => {
-                telemetryRequestResolve = resolve;
-            });
-            openmct.telemetry.request.and.callFake(() => {
-                setTimeout(() => {
-                    telemetryRequestResolve(mockTelemetry);
-                }, 100);
-                return telemetryRequestPromise;
-            });
-        });
-
-        it("returns results for slow LAD requests", async function () {
-            const criteriaRequest = telemetryCriterion.requestLAD();
-            telemetryCriterion.destroy();
-            expect(telemetryCriterion.telemetryObject).toBeUndefined();
-            setTimeout(() => {
-                criteriaRequest.then((result) => {
-                    expect(result).toBeDefined();
-                });
-            }, 300);
-        });
-    });
 });

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -22,7 +22,7 @@
 
 <template>
 <component :is="urlDefined ? 'a' : 'span'"
-           class="c-condition-widget u-style-receiver js-style-receiver"
+           class="c-condition-widget"
            :href="urlDefined ? internalDomainObject.url : null"
 >
     <div class="c-condition-widget__label">

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -124,117 +124,7 @@ define(['lodash'], function (_) {
                         'telemetry.plot.overlay-multi': [
                             VIEW_TYPES['telemetry.plot.stacked']
                         ]
-                    },
-                    SMALL_FONT_SIZES = [
-                        {
-                            name: 'Default Size',
-                            value: 'default'
-                        },
-                        {
-                            name: '8px',
-                            value: '8'
-                        },
-                        {
-                            name: '9px',
-                            value: '9'
-                        },
-                        {
-                            name: '10px',
-                            value: '10'
-                        },
-                        {
-                            name: '11px',
-                            value: '11'
-                        },
-                        {
-                            name: '12px',
-                            value: '12'
-                        },
-                        {
-                            name: '13px',
-                            value: '13'
-                        },
-                        {
-                            name: '14px',
-                            value: '14'
-                        },
-                        {
-                            name: '16px',
-                            value: '16'
-                        },
-                        {
-                            name: '18px',
-                            value: '18'
-                        },
-                        {
-                            name: '20px',
-                            value: '20'
-                        },
-                        {
-                            name: '24px',
-                            value: '24'
-                        }
-                    ],
-                    LARGE_FONT_SIZES = [
-                        {
-                            name: '28px',
-                            value: '28'
-                        },
-                        {
-                            name: '32px',
-                            value: '32'
-                        },
-                        {
-                            name: '36px',
-                            value: '36'
-                        },
-                        {
-                            name: '42px',
-                            value: '42'
-                        },
-                        {
-                            name: '48px',
-                            value: '48'
-                        },
-                        {
-                            name: '72px',
-                            value: '72'
-                        },
-                        {
-                            name: '96px',
-                            value: '96'
-                        },
-                        {
-                            name: '128px',
-                            value: '128'
-                        }
-                    ],
-                    FONTS = [
-                        {
-                            name: 'Default',
-                            value: 'default'
-                        },
-                        {
-                            name: 'Bold',
-                            value: 'default-bold'
-                        },
-                        {
-                            name: 'Narrow',
-                            value: 'narrow'
-                        },
-                        {
-                            name: 'Narrow Bold',
-                            value: 'narrow-bold'
-                        },
-                        {
-                            name: 'Monospace',
-                            value: 'monospace'
-                        },
-                        {
-                            name: 'Monospace Bold',
-                            value: 'monospace-bold'
-                        }
-                    ]
+                    };
 
                 function getUserInput(form) {
                     return openmct.$injector.get('dialogService').getUserInput(form, {});
@@ -488,136 +378,25 @@ define(['lodash'], function (_) {
                     }
                 }
 
-                function getAvailableFontSizeOptions(selection) {
-                    let sizeOptions = 'big';
-
-                    selection.forEach(selectable => {
-                        if (selectable[0].context.item) {
-                            if (selectable[0].context.item.type.includes('plot') ||
-                            selectable[0].context.item.type.includes('table')) {
-                                sizeOptions = 'small';
-                            }
-                        }
-                    });
-
-                    if (sizeOptions === 'small') {
-                        return SMALL_FONT_SIZES;
-                    } else {
-                        return SMALL_FONT_SIZES.concat(LARGE_FONT_SIZES);
-                    }
-                }
-
-                function getFontSizeMenu(selectedParent, selection) {
-
-                    if (selection.length === 1) {
-                        let primary = selection[0][0];
-                        let type = primary.context.layoutItem.type;
-
-                        if (type === 'subobject-view') {
-                            let objectType = primary.context.item.type;
-
-                            if (objectType === 'layout' ||
-                                objectType === 'flexible-layout' ||
-                                objectType === 'tabs') {
-                                return;
-                            }
-                        }
-
-                        return {
-                            control: 'select-menu',
-                            domainObject: selectedParent,
-                            icon: "icon-font-size",
-                            applicableSelectedItems: selection,
-                            property: (selectionPath) => {
-                                return getPath(selectionPath) + '.fontSize';
-                            },
-                            title: "Set font size",
-                            options: getAvailableFontSizeOptions(selection)
-                        };
-                    } else {
-                        return {
-                            control: 'select-menu',
-                            domainObject: selectedParent,
-                            icon: "icon-font-size",
-                            applicableSelectedItems: selection.filter(selectionPath => {
-                                let type = selectionPath[0].context.layoutItem.type;
-
-                                if (type === 'line-view' || type === 'box-view') {
-                                    return false;
-                                } else if (type === 'subobject-view') {
-                                    let objectType = selectionPath[0].context.item.type;
-
-                                    if (objectType === 'layout' ||
-                                        objectType === 'flexible-layout' ||
-                                        objectType === 'tabs') {
-                                        return false;
-                                    }
-                                }
-                                return true;
-                            }),
-                            property: (selectionPath) => {
-                                return getPath(selectionPath) + '.fontSize';
-                            },
-                            title: "Set font size",
-                            options: getAvailableFontSizeOptions(selection)
-                        }
-                    }
-                }
-
-                function getFontMenu(selectedParent, selection) {
-                    if (selection.length === 1) {
-                        let primary = selection[0][0];
-                        let type = primary.context.layoutItem.type;
-
-                        if (type === 'subobject-view') {
-                            let objectType = primary.context.item.type;
-
-                            if (objectType === 'layout' ||
-                                objectType === 'flexible-layout' ||
-                                objectType === 'tabs') {
-                                return;
-                            }
-                        }
-
-                        return {
-                            control: 'select-menu',
-                            domainObject: selectedParent,
-                            icon: "icon-font",
-                            applicableSelectedItems: selection,
-                            property: (selectionPath) => {
-                                return getPath(selectionPath) + '.font';
-                            },
-                            title: "Set font style",
-                            options: FONTS
-                        }
-                    } else {
-                        return {
-                            control: 'select-menu',
-                            domainObject: selectedParent,
-                            icon: "icon-font",
-                            applicableSelectedItems: selection.filter(selectionPath => {
-                                let type = selectionPath[0].context.layoutItem.type;
-
-                                if (type === 'line-view' || type === 'box-view') {
-                                    return false;
-                                } else if (type === 'subobject-view') {
-                                    let objectType = selectionPath[0].context.item.type;
-
-                                    if (objectType === 'layout' ||
-                                    objectType === 'flexible-layout' ||
-                                    objectType === 'tabs') {
-                                        return false;
-                                    }
-                                }
-                                return true;
-                            }),
-                            property: (selectionPath) => {
-                                return getPath(selectionPath) + '.font';
-                            },
-                            title: "Set font style",
-                            options: FONTS
-                        }
-                    }
+                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) {
@@ -630,7 +409,7 @@ define(['lodash'], function (_) {
                         property: function (selectionPath) {
                             return getPath(selectionPath);
                         },
-                        icon: "icon-pencil",
+                        icon: "icon-font",
                         title: "Edit text properties",
                         dialog: DIALOG_FORM.text
                     };
@@ -807,8 +586,7 @@ define(['lodash'], function (_) {
                     'display-mode': [],
                     'telemetry-value': [],
                     'style': [],
-                    'font-size': [],
-                    'font-family': [],
+                    'text-style': [],
                     'position': [],
                     'duplicate': [],
                     'remove': []
@@ -844,16 +622,6 @@ define(['lodash'], function (_) {
                         if (toolbar.viewSwitcher.length === 0) {
                             toolbar.viewSwitcher = [getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)];
                         }
-                        if (toolbar['font-size'].length === 0) {
-                            toolbar['font-size'] = [
-                                getFontSizeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
-                        if (toolbar['font-family'].length === 0) {
-                            toolbar['font-family'] = [
-                                getFontMenu(selectedParent, selectedObjects)
-                            ];
-                        }
                     } else if (layoutItem.type === 'telemetry-view') {
                         if (toolbar['display-mode'].length === 0) {
                             toolbar['display-mode'] = [getDisplayModeMenu(selectedParent, selectedObjects)];
@@ -861,14 +629,9 @@ define(['lodash'], function (_) {
                         if (toolbar['telemetry-value'].length === 0) {
                             toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selectedObjects)];
                         }
-                        if (toolbar['font-size'].length === 0) {
-                            toolbar['font-size'] = [
-                                getFontSizeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
-                        if (toolbar['font-family'].length === 0) {
-                            toolbar['font-family'] = [
-                                getFontMenu(selectedParent, selectedObjects)
+                        if (toolbar['text-style'].length === 0) {
+                            toolbar['text-style'] = [
+                                getTextSizeMenu(selectedParent, selectedObjects)
                             ];
                         }
                         if (toolbar.position.length === 0) {
@@ -887,14 +650,9 @@ define(['lodash'], function (_) {
                             toolbar.viewSwitcher = [getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)];
                         }
                     } else if (layoutItem.type === 'text-view') {
-                        if (toolbar['font-size'].length === 0) {
-                            toolbar['font-size'] = [
-                                getFontSizeMenu(selectedParent, selectedObjects)
-                            ];
-                        }
-                        if (toolbar['font-family'].length === 0) {
-                            toolbar['font-family'] = [
-                                getFontMenu(selectedParent, selectedObjects)
+                        if (toolbar['text-style'].length === 0) {
+                            toolbar['text-style'] = [
+                                getTextSizeMenu(selectedParent, selectedObjects)
                             ];
                         }
                         if (toolbar.position.length === 0) {

src/plugins/displayLayout/components/BoxView.vue

@@ -29,7 +29,7 @@
     @endMove="() => $emit('endMove')"
 >
     <div
-        class="c-box-view u-style-receiver js-style-receiver"
+        class="c-box-view"
         :class="[styleClass]"
         :style="style"
     ></div>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="l-layout u-style-receiver js-style-receiver"
+    class="l-layout"
     :class="{
         'is-multi-selected': selectedLayoutItems.length > 1,
         'allow-editing': isEditing
@@ -612,13 +612,6 @@ export default {
                 object.composition.push(...composition);
             }
 
-            if (object.modified || object.persisted) {
-                object.modified = undefined;
-                object.persisted = undefined;
-                delete object.modified;
-                delete object.persisted;
-            }
-
             object.name = objectName;
             object.identifier = identifier;
             object.location = parentKeyString;

src/plugins/displayLayout/components/ImageView.vue

@@ -81,7 +81,6 @@ 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 + ')';

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -25,14 +25,14 @@
     class="l-layout__frame c-frame"
     :class="{
         'no-frame': !item.hasFrame,
-        'u-inspectable': inspectable,
-        'is-in-small-container': size.width < 600 || size.height < 600
+        'u-inspectable': inspectable
     }"
     :style="style"
 >
     <slot></slot>
+
     <div
-        class="c-frame__move-bar"
+        class="c-frame-edit__move"
         @mousedown="isEditing ? startMove([1,1], [0,0], $event) : null"
     ></div>
 </div>
@@ -61,13 +61,6 @@ export default {
         }
     },
     computed: {
-        size() {
-            let {width, height} = this.item;
-            return {
-                width: (this.gridSize[0] * width),
-                height: (this.gridSize[1] * height)
-            };
-        },
         style() {
             let {x, y, width, height} = this.item;
             return {

src/plugins/displayLayout/components/LineView.vue

@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="l-layout__frame c-frame no-frame c-line-view"
+    class="l-layout__frame c-frame no-frame"
     :class="[styleClass]"
     :style="style"
 >
@@ -31,20 +31,14 @@
         height="100%"
     >
         <line
-            class="c-line-view__hover-indicator"
-            v-bind="linePosition"
-            vector-effect="non-scaling-stroke"
-        />
-        <line
-            class="c-line-view__line"
             v-bind="linePosition"
             :stroke="stroke"
-            vector-effect="non-scaling-stroke"
+            stroke-width="2"
         />
     </svg>
 
     <div
-        class="c-frame__move-bar"
+        class="c-frame-edit__move"
         @mousedown="startDrag($event)"
     ></div>
     <div
@@ -55,8 +49,7 @@
             class="c-frame-edit__handle"
             :class="startHandleClass"
             @mousedown="startDrag($event, 'start')"
-        >
-        </div>
+        ></div>
         <div
             class="c-frame-edit__handle"
             :class="endHandleClass"
@@ -75,18 +68,14 @@ const START_HANDLE_QUADRANTS = {
     1: 'c-frame-edit__handle--sw',
     2: 'c-frame-edit__handle--se',
     3: 'c-frame-edit__handle--ne',
-    4: 'c-frame-edit__handle--nw',
-    5: 'c-frame-edit__handle--nw',
-    6: 'c-frame-edit__handle--ne'
+    4: 'c-frame-edit__handle--nw'
 };
 
 const END_HANDLE_QUADRANTS = {
     1: 'c-frame-edit__handle--ne',
     2: 'c-frame-edit__handle--nw',
     3: 'c-frame-edit__handle--sw',
-    4: 'c-frame-edit__handle--se',
-    5: 'c-frame-edit__handle--sw',
-    6: 'c-frame-edit__handle--nw'
+    4: 'c-frame-edit__handle--se'
 };
 
 export default {
@@ -169,12 +158,6 @@ export default {
         },
         vectorQuadrant() {
             let {x, y, x2, y2} = this.position;
-            if (x2 === x) {
-                return 5; // Vertical line
-            }
-            if (y2 === y) {
-                return 6; // Horizontal line
-            }
             if (x2 > x) {
                 if (y2 < y) {
                     return 1;
@@ -187,27 +170,21 @@ export default {
             return 3;
         },
         linePosition() {
-            let pos = {};
-            switch(this.vectorQuadrant) {
-            case 1:
-            case 3:
-                // slopes up
-                pos = {x1: '0%', y1: '100%', x2: '100%', y2: '0%'};
-                break;
-            case 5:
-                // vertical
-                pos = {x1: '0%', y1: '0%', x2: '0%', y2: '100%'};
-                break;
-            case 6:
-                // horizontal
-                pos = {x1: '0%', y1: '0%', x2: '100%', y2: '0%'};
-                break;
-            default:
-                // slopes down
-                pos = {x1: '0%', y1: '0%', x2: '100%', y2: '100%'};
-                break;
-            }
-            return pos;
+            return this.vectorQuadrant % 2 !== 0
+                // odd vectorQuadrant slopes up
+                ? {
+                    x1: '0%',
+                    y1: '100%',
+                    x2: '100%',
+                    y2: '0%'
+                }
+                // even vectorQuadrant slopes down
+                : {
+                    x1: '0%',
+                    y1: '0%',
+                    x2: '100%',
+                    y2: '100%'
+                };
         }
     },
     watch: {
@@ -232,7 +209,8 @@ export default {
             layoutItem: this.item,
             index: this.index
         };
-        this.removeSelectable = this.openmct.selection.selectable(this.$el, this.context, this.initSelect);
+        this.removeSelectable = this.openmct.selection.selectable(
+            this.$el, this.context, this.initSelect);
     },
     destroyed() {
         if (this.removeSelectable) {
@@ -246,17 +224,12 @@ export default {
             document.body.addEventListener('mousemove', this.continueDrag);
             document.body.addEventListener('mouseup', this.endDrag);
             this.startPosition = [event.pageX, event.pageY];
-            let {x, y, x2, y2} = this.item;
-            this.dragPosition = {x, y, x2, y2};
-            if (x === x2 || y === y2) {
-                if (y > y2 || x < x2) {
-                    if (this.dragging === 'start') {
-                        this.dragging = 'end';
-                    } else if (this.dragging === 'end') {
-                        this.dragging = 'start';
-                    }
-                }
-            }
+            this.dragPosition = {
+                x: this.item.x,
+                y: this.item.y,
+                x2: this.item.x2,
+                y2: this.item.y2
+            };
             event.preventDefault();
         },
         continueDrag(event) {
@@ -290,7 +263,7 @@ export default {
         },
         calculateDragPosition(pxDeltaX, pxDeltaY) {
             let gridDeltaX = Math.round(pxDeltaX / this.gridSize[0]);
-            let gridDeltaY = Math.round(pxDeltaY / this.gridSize[1]);
+            let gridDeltaY = Math.round(pxDeltaY / this.gridSize[0]); // TODO: should this be gridSize[1]?
             let {x, y, x2, y2} = this.item;
             let dragPosition = {x, y, x2, y2};
 

src/plugins/displayLayout/components/SubobjectView.vue

@@ -35,8 +35,6 @@
         :object-path="currentObjectPath"
         :has-frame="item.hasFrame"
         :show-edit-view="false"
-        :font-size="item.fontSize"
-        :font="item.font"
     />
 </layout-frame>
 </template>
@@ -75,8 +73,6 @@ export default {
             y: position[1],
             identifier: domainObject.identifier,
             hasFrame: hasFrameByDefault(domainObject.type),
-            fontSize: 'default',
-            font: 'default',
             viewKey
         };
     },
@@ -124,6 +120,7 @@ export default {
             if (!this.context) {
                 return;
             }
+
             this.context.layoutItem = newItem;
         }
     },

src/plugins/displayLayout/components/TelemetryView.vue

@@ -30,14 +30,12 @@
 >
     <div
         v-if="domainObject"
-        class="u-style-receiver c-telemetry-view"
+        class="c-telemetry-view"
         :class="{
             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"
@@ -91,8 +89,7 @@ export default {
             stroke: "",
             fill: "",
             color: "",
-            fontSize: 'default',
-            font: 'default'
+            size: "13px"
         };
     },
     inject: ['openmct', 'objectPath'],
@@ -139,15 +136,10 @@ export default {
             return displayMode === 'all' || displayMode === 'value';
         },
         styleObject() {
-            let size;
-            //for legacy size support
-            if (!this.item.fontSize) {
-                size = this.item.size
-            }
-
             return Object.assign({}, {
-                size
+                fontSize: this.item.size
             }, this.itemStyle);
+
         },
         fieldName() {
             return this.valueMetadata && this.valueMetadata.name;

src/plugins/displayLayout/components/TextView.vue

@@ -29,9 +29,7 @@
     @endMove="() => $emit('endMove')"
 >
     <div
-        class="c-text-view u-style-receiver js-style-receiver"
-        :data-font-size="item.fontSize"
-        :data-font="item.font"
+        class="c-text-view"
         :class="[styleClass]"
         :style="style"
     >
@@ -49,14 +47,13 @@ export default {
         return {
             fill: '',
             stroke: '',
+            size: '13px',
             color: '',
             x: 1,
             y: 1,
             width: 10,
             height: 5,
-            text: element.text,
-            fontSize: 'default',
-            font: 'default'
+            text: element.text
         };
     },
     inject: ['openmct'],
@@ -87,14 +84,8 @@ export default {
     },
     computed: {
         style() {
-            let size;
-            //legacy size support
-            if (!this.item.fontSize) {
-                size = this.item.size;
-            }
-
             return Object.assign({
-                size
+                fontSize: this.item.size
             }, this.itemStyle);
         }
     },

src/plugins/displayLayout/components/box-and-line-views.scss

@@ -1,60 +0,0 @@
-.c-box-view {
-    border-width: $drawingObjBorderW !important;
-    display: flex;
-    align-items: stretch;
-
-    .c-frame & {
-        @include abs();
-    }
-}
-
-.c-line-view {
-    &.c-frame {
-        box-shadow: none !important;
-    }
-
-    .c-frame-edit {
-        border: none;
-    }
-
-    .c-handle-info {
-        background: rgba(#999, 0.2);
-        padding: 2px;
-        position: absolute;
-        top: 5px; left: 5px;
-        white-space: nowrap;
-    }
-
-    svg {
-        // Prevent clipping when line is horizontal and vertical
-        min-height: 1px;
-        min-width: 1px;
-        // Must use !important to counteract setting in normalize.min.css
-        overflow: visible;
-    }
-
-    &__line {
-        stroke-linecap: round;
-        stroke-width: $drawingObjBorderW;
-    }
-
-    &__hover-indicator {
-        display: none;
-        opacity: 0.5;
-        stroke: $editFrameColorHov;
-        stroke-width: $drawingObjBorderW + 4;
-    }
-
-    .is-editing & {
-        // Needed to allow line to be moved
-        $w: 4px;
-        min-width: $w;
-        min-height: $w;
-
-        &:hover {
-            [class*='__hover-indicator'] {
-                display: inline;
-            }
-        }
-    }
-}

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

@@ -0,0 +1,8 @@
+.c-box-view {
+    display: flex;
+    align-items: stretch;
+
+    .c-frame & {
+        @include abs();
+    }
+}

src/plugins/displayLayout/components/layout-frame.scss

@@ -7,13 +7,9 @@
     > *:first-child {
         flex: 1 1 auto;
     }
-
-    &.is-in-small-container {
-        //background: rgba(blue, 0.1);
-    }
 }
 
-.c-frame__move-bar {
+.c-frame-edit__move {
     display: none;
 }
 
@@ -33,7 +29,7 @@
             border: $editFrameSelectedBorder;
             box-shadow: $editFrameSelectedShdw;
 
-            .c-frame__move-bar {
+            .c-frame-edit__move {
                 cursor: move;
             }
         }
@@ -41,7 +37,7 @@
 
     /******************* DEFAULT STYLES FOR -EDIT__MOVE */
     // All object types
-    .c-frame__move-bar {
+    .c-frame-edit__move {
         @include abs();
         display: block;
     }
@@ -56,7 +52,7 @@
             transition-delay: $moveBarOutDelay;
         }
 
-        + .c-frame__move-bar {
+        + .c-frame-edit__move {
             display: none;
         }
 
@@ -65,14 +61,14 @@
     .l-layout {
         /******************* 0 - 1 ITEM SELECTED */
         &:not(.is-multi-selected) {
-            > .l-layout__frame {
+            > .l-layout__frame[s-selected] {
                 > .c-so-view.has-complex-content {
                     > .c-so-view__local-controls {
                         transition: transform $transOutTime ease-in-out;
                         transition-delay: $moveBarOutDelay;
                     }
 
-                    + .c-frame__move-bar {
+                    + .c-frame-edit__move {
                         transition: $transOut;
                         transition-delay: $moveBarOutDelay;
                         @include userSelectNone();
@@ -93,7 +89,7 @@
                             $lrOffset: 25%;
                             @include grippy($editFrameMovebarColorFg);
                             content: '';
-                            display: none;
+                            display: block;
                             position: absolute;
                             top: $tbOffset;
                             right: $lrOffset;
@@ -115,7 +111,7 @@
                             transition-delay: 0s;
                         }
 
-                        + .c-frame__move-bar {
+                        + .c-frame-edit__move {
                             transition: $transIn;
                             transition-delay: 0s;
                             height: $editFrameMovebarH;
@@ -123,19 +119,12 @@
                     }
                 }
             }
-            > .l-layout__frame[s-selected] {
-                > .c-so-view.has-complex-content {
-                    + .c-frame__move-bar:before {
-                        display: block;
-                    }
-                }
-            }
         }
 
         /******************* > 1 ITEMS SELECTED */
         &.is-multi-selected {
             .l-layout__frame[s-selected] {
-                > .c-so-view.has-complex-content + .c-frame__move-bar {
+                > .c-so-view.has-complex-content + .c-frame-edit__move {
                     display: block;
                 }
             }

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -29,13 +29,13 @@
         >
         </div>
         <div class="c-imagery__control-bar">
-            <div class="c-imagery__timestamp u-style-receiver js-style-receiver">{{ getTime() }}</div>
+            <div class="c-imagery__timestamp">{{ getTime() }}</div>
             <div class="h-local-controls flex-elem">
-                <button
+                <a
                     class="c-button icon-pause pause-play"
                     :class="{'is-paused': paused()}"
                     @click="paused(!paused())"
-                ></button>
+                ></a>
             </div>
         </div>
     </div>
@@ -228,8 +228,8 @@ export default {
         subscribe() {
             this.unsubscribe = this.openmct.telemetry
                 .subscribe(this.domainObject, (datum) => {
-                    let parsedTimestamp = this.timeFormat.parse(datum);
-                    let bounds = this.openmct.time.bounds();
+                    let parsedTimestamp = this.timeFormat.parse(datum[this.timeKey]),
+                        bounds = this.openmct.time.bounds();
 
                     if(parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end) {
                         this.updateHistory(datum);

src/plugins/imagery/components/imagery-view-layout.scss

@@ -42,7 +42,6 @@
         height: 135px;
         overflow-x: auto;
         overflow-y: hidden;
-        padding-bottom: $interiorMarginSm;
 
         &.is-paused {
             background: rgba($colorPausedBg, 0.4);
@@ -100,7 +99,7 @@
 .c-imagery {
     .h-local-controls--overlay-content {
         position: absolute;
-        left: $interiorMargin; top: $interiorMargin;
+        right: $interiorMargin; top: $interiorMargin;
         z-index: 2;
         background: $colorLocalControlOvrBg;
         border-radius: $basicCr;

src/plugins/notebook/components/notebook-embed.vue

@@ -248,8 +248,7 @@ export default {
         previewEmbed() {
             const self = this;
             const previewAction = new PreviewAction(self.openmct);
-            this.openmct.objects.get(self.embed.domainObject.identifier)
-                .then(domainObject => previewAction.invoke([domainObject]));
+            previewAction.invoke(JSON.parse(self.embed.objectPath));
         },
         removeEmbed(success) {
             if (!success) {

src/plugins/notebook/snapshot.js

@@ -1,6 +1,6 @@
 import { addNotebookEntry, createNewEmbed } from './utils/notebook-entries';
 import { getDefaultNotebook } from './utils/notebook-storage';
-import { NOTEBOOK_DEFAULT } from '@/plugins/notebook/notebook-constants';
+import { NOTEBOOK_DEFAULT } from './notebook-constants';
 import SnapshotContainer from './snapshot-container';
 
 export default class Snapshot {

src/plugins/notebook/utils/notebook-entries.js

@@ -95,7 +95,8 @@ export const createNewEmbed = (snapshotMeta, snapshot = '') => {
         id: 'embed-' + date,
         name,
         snapshot,
-        type
+        type,
+        objectPath: JSON.stringify(objectPath)
     };
 }
 

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

@@ -21,11 +21,8 @@
 -->
 <div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
     <div class="c-plot-legend gl-plot-legend"
-         ng-class="{
-            'hover-on-plot': !!highlights.length,
-            'is-legend-hidden': legend.get('hideLegendWhenSmall')
-        }"
-    >
+         ng-class="{ 'hover-on-plot': !!highlights.length }"
+         ng-show="legend.get('position') !== 'hidden'">
         <div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
             ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
             ng-click="legend.set('expanded', !legend.get('expanded'));">
@@ -39,13 +36,11 @@
                  ng-class="{'is-cursor-locked': !!lockHighlightPoint }">
                 <div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" title="Cursor is point locked. Click anywhere in the plot to unlock."></div>
                 <div class="plot-legend-item"
-                     ng-class="{
-                        'is-missing': series.domainObject.status === 'missing'
-                    }"
+                     ng-class="{'is-missing': series.domainObject.status === 'missing'}"
                      ng-repeat="series in series track by $index"
                 >
                     <div class="plot-series-swatch-and-name">
-                        <span class="plot-series-color-swatch"
+                        <span class="plot-series-color-swatch "
                               ng-style="{ 'background-color': series.get('color').asHexString() }">
                         </span>
                         <span class="is-missing__indicator" title="This item is missing"></span>
@@ -91,9 +86,7 @@
                     </thead>
                     <tr ng-repeat="series in series"
                         class="plot-legend-item"
-                        ng-class="{
-                            'is-missing': series.domainObject.status === 'missing'
-                        }"
+                        ng-class="{'is-missing': series.domainObject.status === 'missing'}"
                     >
                         <td class="plot-series-swatch-and-name">
                             <span class="plot-series-color-swatch"
@@ -135,7 +128,7 @@
     <div class="plot-wrapper-axis-and-display-area flex-elem grows">
         <div class="gl-plot-axis-area gl-plot-y has-local-controls"
              ng-style="{
-                 width: (tickWidth + 20) + 'px'
+                 width: (tickWidth + 30) + 'px'
              }">
 
             <div class="gl-plot-label gl-plot-y-label"
@@ -153,6 +146,7 @@
                 </option>
             </select>
 
+
             <mct-ticks axis="yAxis">
                 <div ng-repeat="tick in ticks track by tick.value"
                      class="gl-plot-tick gl-plot-y-tick-label"
@@ -165,15 +159,17 @@
         </div>
         <div class="gl-plot-wrapper-display-area-and-x-axis"
              ng-style="{
-                 left: (tickWidth + 20) + 'px'
-             }">
+                     left: (tickWidth + 30) + 'px'
+                 }">
+            <div class="l-state-indicators">
+                <span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
+                      title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
+                <span class="l-state-indicators__alert-cursor-lock icon-cursor-lock"
+                      title="Telemetry point selection is locked. Click anywhere in the plot to unlock."
+                      ng-if="lockHighlightPoint"></span>
+            </div>
 
             <div class="gl-plot-display-area has-local-controls has-cursor-guides">
-                <div class="l-state-indicators">
-                    <span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
-                          title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
-                </div>
-
                 <mct-ticks axis="xAxis">
                     <div class="gl-plot-hash hash-v"
                          ng-repeat="tick in ticks track by tick.value"

src/plugins/plot/res/templates/plot-options-browse.html

@@ -114,11 +114,6 @@
                      title="The position of the legend relative to the plot display area.">Position</div>
                 <div class="grid-cell value capitalize">{{ config.legend.get('position') }}</div>
             </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Hide the legend when the plot is small">Hide when plot small</div>
-                <div class="grid-cell value">{{ config.legend.get('hideLegendWhenSmall') ? "Yes" : "No" }}</div>
-            </li>
             <li class="grid-row">
                 <div class="grid-cell label"
                      title="Show the legend expanded by default">Expand by Default</div>

src/plugins/plot/res/templates/plot-options-edit.html

@@ -174,6 +174,7 @@
                      title="The position of the legend relative to the plot display area.">Position</div>
                 <div class="grid-cell value">
                     <select ng-model="form.position">
+                        <option value="hidden">Hidden</option>
                         <option value="top">Top</option>
                         <option value="right">Right</option>
                         <option value="bottom">Bottom</option>
@@ -181,11 +182,6 @@
                     </select>
                 </div>
             </li>
-            <li class="grid-row">
-                <div class="grid-cell label"
-                     title="Hide the legend when the plot is small">Hide when plot small</div>
-                <div class="grid-cell value"><input type="checkbox" ng-model="form.hideLegendWhenSmall"/></div>
-            </li>
             <li class="grid-row">
                 <div class="grid-cell label"
                      title="Show the legend expanded by default">Expand by default</div>

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

@@ -41,7 +41,7 @@
         </button>
     </div>
 
-    <div class="l-view-section u-style-receiver js-style-receiver">
+    <div class="l-view-section">
         <div class="c-loading--overlay loading"
             ng-show="!!pending"></div>
         <mct-plot config="controller.config"

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

@@ -40,7 +40,7 @@
                 title="Toggle cursor guides">
         </button>
     </div>
-    <div class="l-view-section u-style-receiver js-style-receiver">
+    <div class="l-view-section">
         <div class="c-loading--overlay loading"
              ng-show="!!currentRequest.pending"></div>
         <div class="gl-plot child-frame u-inspectable"

src/plugins/plot/src/configuration/LegendModel.js

@@ -48,7 +48,6 @@ define([
             return {
                 position: 'top',
                 expandByDefault: false,
-                hideLegendWhenSmall: false,
                 valueToShowWhenCollapsed: 'nearestValue',
                 showTimestampWhenExpanded: true,
                 showValueWhenExpanded: true,

src/plugins/plot/src/inspector/PlotLegendFormController.js

@@ -32,11 +32,6 @@ define([
                 modelProp: 'position',
                 objectPath: 'configuration.legend.position'
             },
-            {
-                modelProp: 'hideLegendWhenSmall',
-                coerce: Boolean,
-                objectPath: 'configuration.legend.hideLegendWhenSmall'
-            },
             {
                 modelProp: 'expandByDefault',
                 coerce: Boolean,

src/plugins/tabs/components/tabs.scss

@@ -17,19 +17,6 @@
             margin-right: $interiorMarginSm;
             opacity: 0.7;
         }
-
-        &__label {
-            flex: 1 1 auto;
-        }
-
-        &__close-btn {
-            flex: 0 0 auto;
-            pointer-events: all;
-        }
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
     }
 
     &__object-holder {

src/plugins/tabs/components/tabs.vue

@@ -19,7 +19,7 @@
         >
             Drag objects here to add them to this view.
         </div>
-        <div
+        <button
             v-for="(tab,index) in tabsList"
             :key="index"
             class="c-tab c-tabs-view__tab"
@@ -28,12 +28,19 @@
             }"
             @click="showTab(tab, index)"
         >
-            <span class="c-button__label c-tabs-view__tab__label">{{ tab.domainObject.name }}</span>
-            <button v-if="isEditing"
-                    class="icon-x c-click-icon c-tabs-view__tab__close-btn"
-                    @click="showRemoveDialog(index)"
-            ></button>
-        </div>
+            <div class="c-object-label"
+                 :class="{'is-missing': tab.domainObject.status === 'missing'}"
+            >
+                <div class="c-object-label__type-icon"
+                     :class="tab.type.definition.cssClass"
+                >
+                    <span class="is-missing__indicator"
+                          title="This item is missing"
+                    ></span>
+                </div>
+                <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
+            </div>
+        </button>
     </div>
     <div
         v-for="(tab, index) in tabsList"
@@ -52,7 +59,6 @@
 
 <script>
 import ObjectView from '../../../ui/components/ObjectView.vue';
-import RemoveAction from '../../remove/RemoveAction.js';
 import {
     getSearchParam,
     setSearchParam,
@@ -117,7 +123,6 @@ export default {
 
         this.unsubscribe = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
 
-        this.RemoveAction = new RemoveAction(this.openmct);
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
     },
@@ -148,38 +153,6 @@ export default {
 
             this.currentTab = tab;
         },
-        showRemoveDialog(index) {
-            if(!this.tabsList[index]) {
-                return;
-            }
-
-            let activeTab = this.tabsList[index];
-            let childDomainObject = activeTab.domainObject
-
-            let prompt = this.openmct.overlays.dialog({
-                iconClass: 'alert',
-                message: `This action will remove this tab from the Tabs Layout. Do you want to continue?`,
-                buttons: [
-                    {
-                        label: 'Ok',
-                        emphasis: 'true',
-                        callback: () => {
-                            this.removeFromComposition(childDomainObject);
-                            prompt.dismiss();
-                        }
-                    },
-                    {
-                        label: 'Cancel',
-                        callback: () => {
-                            prompt.dismiss();
-                        }
-                    }
-                ]
-            });
-        },
-        removeFromComposition(childDomainObject) {
-            this.composition.remove(childDomainObject);
-        },
         addItem(domainObject) {
             let type = this.openmct.types.get(domainObject.type) || unknownObjectType,
                 tabItem = {

src/plugins/telemetryTable/TelemetryTableRow.js

@@ -74,10 +74,6 @@ define([], function () {
             return this.cellLimitClasses;
         }
 
-        getContextualDomainObject(openmct, objectKeyString) {
-            return openmct.objects.get(objectKeyString);
-        }
-
         getContextMenuActions() {
             return [];
         }

src/plugins/telemetryTable/components/sizing-row.vue

@@ -1,56 +0,0 @@
-<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>

src/plugins/telemetryTable/components/table-row.vue

@@ -171,7 +171,7 @@ export default {
         showContextMenu: function (event) {
             event.preventDefault();
 
-            this.row.getContextualDomainObject(this.openmct, this.row.objectKeyString).then(domainObject => {
+            this.openmct.objects.get(this.row.objectKeyString).then((domainObject) => {
                 let contextualObjectPath = this.objectPath.slice();
                 contextualObjectPath.unshift(domainObject);
 

src/plugins/telemetryTable/components/table.scss

@@ -9,9 +9,6 @@
 
 .c-telemetry-table {
     // Table that displays telemetry in a scrolling body area
-
-    @include fontAndSize();
-
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
@@ -57,16 +54,6 @@
                 width: 100%;
             }
         }
-
-        &__filter {
-            .c-table__search {
-                padding-top: 0;
-                padding-bottom: 0;
-            }
-            .is-in-small-container & {
-                display: none;
-            }
-        }
     }
 
     &__headers__label {
@@ -99,10 +86,6 @@
         height: 0; // Fixes Chrome 73 overflow bug
         overflow-x: auto;
         overflow-y: scroll;
-
-        .is-editing & {
-            pointer-events: none;
-        }
     }
 
     /******************************* TABLES */
@@ -115,7 +98,7 @@
             display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
             align-items: stretch;
             position: absolute;
-            min-height: 18px; // Needed when a row has empty values in its cells
+            height: 18px; // Needed when a row has empty values in its cells
 
             &.is-selected {
                 background-color: $colorSelectedBg !important;
@@ -153,15 +136,9 @@
             white-space: nowrap;
         }
     }
-
-    &__sizing-tr {
-        // A row element used to determine sizing of rows based on font size
-        visibility: hidden;
-        pointer-events: none;
-    }
 }
 
-/******************************* SPECIFIC CASE WRAPPERS */
+/******************************* EDITING */
 .is-editing {
     .c-telemetry-table__headers__labels {
         th[draggable],
@@ -181,10 +158,8 @@
     }
 }
 
-.is-paused {
-    .c-table__body-w {
-        border: 1px solid rgba($colorPausedBg, 0.8);
-    }
+.paused {
+    border: 1px solid #ff9900;
 }
 
 /******************************* LEGACY */

src/plugins/telemetryTable/components/table.vue

@@ -20,16 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<div class="c-table-wrapper"
-     :class="{ 'is-paused': paused }"
->
+<div class="c-table-wrapper">
     <!-- main contolbar  start-->
     <div v-if="!marking.useAlternateControlBar"
          class="c-table-control-bar c-control-bar"
     >
         <button
             v-if="allowExport"
-            v-show="!markedRows.length"
             class="c-button icon-download labeled"
             title="Export this view's data"
             @click="exportAllDataAsCSV()"
@@ -125,10 +122,10 @@
     <!-- alternate controlbar end  -->
 
     <div
-        class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar u-style-receiver js-style-receiver"
+        class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
         :class="{
             'loading': loading,
-            'is-paused' : paused
+            'paused' : paused
         }"
     >
         <div :style="{ 'max-width': widthWithScroll, 'min-width': '150px'}">
@@ -234,10 +231,6 @@
             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,7 +263,6 @@ import TelemetryFilterIndicator from './TelemetryFilterIndicator.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;
@@ -283,8 +275,7 @@ export default {
         TableColumnHeader,
         search,
         TelemetryFilterIndicator,
-        ToggleSwitch,
-        SizingRow
+        ToggleSwitch
     },
     inject: ['table', 'openmct', 'objectPath'],
     props: {
@@ -882,12 +873,6 @@ export default {
             this.isAutosizeEnabled = true;
 
             this.$nextTick().then(this.calculateColumnWidths);
-        },
-        setRowHeight(height) {
-            this.rowHeight = height;
-            this.setHeight();
-            this.calculateTableSize();
-            this.clearRowsAndRerender();
         }
     }
 }

src/styles/_constants-espresso.scss

@@ -84,10 +84,6 @@ $filterHov: brightness(1.3); // Tree, location items
 $colorSelectedBg: pushBack($colorKey, 10%);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
-// Object labels
-$objectLabelTypeIconOpacity: 0.7;
-$objectLabelNameFilter: brightness(1.3);
-
 // Layout
 $shellMainPad: 4px 0;
 $shellPanePad: $interiorMargin, 7px;
@@ -98,7 +94,7 @@ $sideBarHeaderBg: rgba($colorBodyFg, 0.2);
 $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
 
 // Status colors, mainly used for messaging and item ancillary symbols
-$colorStatusFg: #888;
+$colorStatusFg: #999;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
 $colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
@@ -209,9 +205,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
-$colorBtnCautionBg: $colorStatusAlert;
+$colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
-$colorBtnCautionFg: $colorBtnBg;
+$colorBtnCautionFg: $colorBtnFg;
 $colorBtnActiveBg: $colorOk;
 $colorBtnActiveFg: $colorOkFg;
 $colorBtnSelectedBg: $colorSelectedBg;
@@ -339,7 +335,7 @@ $shdwItemText: none;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
+$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
@@ -357,7 +353,7 @@ $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
-$legendTableHeadBg: $colorTabHeaderBg;
+$legendTableHeadBg: rgba($colorBodyFg, 0.15);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-maelstrom.scss

@@ -88,10 +88,6 @@ $filterHov: brightness(1.3); // Tree, location items
 $colorSelectedBg: pushBack($colorKey, 10%);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
-// Object labels
-$objectLabelTypeIconOpacity: 0.7;
-$objectLabelNameFilter: brightness(1.3);
-
 // Layout
 $shellMainPad: 4px 0;
 $shellPanePad: $interiorMargin, 7px;
@@ -213,9 +209,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
-$colorBtnCautionBg: $colorStatusAlert;
+$colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
-$colorBtnCautionFg: $colorBtnBg;
+$colorBtnCautionFg: $colorBtnFg;
 $colorBtnActiveBg: $colorOk;
 $colorBtnActiveFg: $colorOkFg;
 $colorBtnSelectedBg: $colorSelectedBg;
@@ -343,7 +339,7 @@ $shdwItemText: none;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
+$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);

src/styles/_constants-snow.scss

@@ -80,14 +80,10 @@ $uiColor: #289fec; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
-$filterHov: brightness(0.8) contrast(2); // Tree, location items
+$filterHov: brightness(1.3); // Tree, location items
 $colorSelectedBg: pushBack($colorKey, 40%);
 $colorSelectedFg: pullForward($colorBodyFg, 10%);
 
-// Object labels
-$objectLabelTypeIconOpacity: 0.5;
-$objectLabelNameFilter: brightness(0.5);
-
 // Layout
 $shellMainPad: 4px 0;
 $shellPanePad: $interiorMargin, 7px;
@@ -228,7 +224,7 @@ $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 $btnStdH: 24px;
 $colorCursorGuide: rgba(black, 0.6);
 $shdwCursorGuide: rgba(white, 0.4) 0 0 2px;
-$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
+$colorLocalControlOvrBg: rgba($colorBodyFg, 0.8);
 $colorSelectBg: $colorBtnBg; // This must be a solid color, not a gradient, due to usage of SVG bg in selects
 $colorSelectFg: $colorBtnFg;
 $colorSelectArw: lighten($colorBtnBg, 20%);

src/styles/_constants.scss

@@ -40,10 +40,11 @@ $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 $menuLineH: 1.5rem;
 $treeItemIndent: 16px;
 $treeTypeIconW: 18px;
+$overlayOuterMarginLg: 5%;
 $overlayOuterMarginFullscreen: 0%;
 $overlayOuterMarginDialog: 20%;
 $overlayInnerMargin: 25px;
-$mainViewPad: 0px;
+$mainViewPad: 2px;
 /*************** Items */
 $itemPadLR: 5px;
 $gridItemDesk: 175px;
@@ -56,7 +57,7 @@ $tabularTdPadTB: 2px;
 $plotYBarW: 60px;
 $plotYLabelMinH: 20px;
 $plotYLabelW: 10px;
-$plotXBarH: 32px;
+$plotXBarH: 35px;
 $plotLegendH: 20px;
 $plotLegendWidthCollapsed: 20%;
 $plotLegendWidthExpanded: 50%;
@@ -89,8 +90,6 @@ $messageIconD: 80px;
 $messageListIconD: 32px;
 /*************** Tables */
 $tableResizeColHitareaD: 6px;
-/*************** Misc */
-$drawingObjBorderW: 3px;
 
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used
@@ -102,8 +101,6 @@ $colorProgressBarHolder: rgba(black, 0.1);
 $colorProgressBar: #0085ad;
 $progressAnimW: 500px;
 $progressBarMinH: 6px;
-/************************** FONT STYLING */
-$listFontSizes: 8,9,10,11,12,13,14,16,18,20,24,28,32,36,42,48,72,96,128;
 
 /************************** GLYPH CHAR UNICODES */
 $glyph-icon-alert-rect: '\e900';

src/styles/_controls.scss

@@ -57,6 +57,11 @@ button {
         line-height: 90%;
         padding: 3px 10px;
 
+        @include hover() {
+            background: $colorBtnBgHov;
+            color: $colorBtnFgHov;
+        }
+
         @include desktop() {
             font-size: 6px;
         }

src/styles/_global.scss

@@ -96,37 +96,6 @@ body.desktop {
     }
 }
 
-/******************************************************** FONTS */
-@mixin fontAndSize() {
-    @each $size in $listFontSizes {
-        &[data-font-size="#{$size}"] {
-            font-size: #{$size}px;
-
-            // Set row heights in telemetry tables
-            tr {
-                min-height: #{$size + ($tabularTdPadTB * 2)};
-            }
-
-        }
-    }
-
-    &[data-font*="bold"] {
-        font-weight: bold;
-    }
-
-    &[data-font*="narrow"] {
-        font-family: 'Arial Narrow', sans-serif;
-    }
-
-    &[data-font*="monospace"] {
-        font-family: 'Andale Mono', sans-serif;
-    }
-}
-
-.u-style-receiver {
-    @include fontAndSize();
-}
-
 /******************************************************** HTML ENTITIES */
 a {
     color: $colorA;
@@ -237,6 +206,10 @@ body.desktop .has-local-controls {
     &:hover {
         box-shadow: $browseSelectableShdwHov;
     }
+
+    &[s-selected] {
+        border: $browseSelectedBorder;
+    }
 }
 
 /**************************** EDITING */
@@ -257,7 +230,7 @@ body.desktop .has-local-controls {
 }
 
 /******************************************************** STATES */
-@mixin  spinner($b: 5, $c: $colorKey) {
+@mixin  spinner($b: 5px, $c: $colorKey) {
     animation-name: rotation-centered;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
@@ -307,13 +280,13 @@ body.desktop .has-local-controls {
     }
     &.c-tree__item {
         $d: $waitSpinnerTreeD;
-        $spinnerL: 19 + $d/2;
+        $spinnerL: 19px + $d/2;
 
         display: flex;
         align-items: center;
         padding-left: $spinnerL + $d/2 + $interiorMargin;
         background: $colorLoadingBg;
-        min-height: 5 + $d;
+        min-height: 5px + $d;
 
         .c-tree__item__label {
             font-style: italic;
@@ -322,7 +295,7 @@ body.desktop .has-local-controls {
         &:before {
             height: $d;
             width: $d;
-            border-width: 4;
+            border-width: 4px;
             left: $spinnerL;
         }
         &:after {

src/styles/_legacy-plots.scss

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, United States Government
+ * Open MCT, Copyright (c) 2014-2018, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -29,19 +29,16 @@ mct-plot {
     .gl-plot.child-frame {
         &:hover {
             background: rgba($editUIColorBg, 0.1);
-            box-shadow: inset rgba($editUIColorBg, 0.3) 0 0 0 1px;
+            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
         }
 
         &[s-selected] {
-            background: rgba($editUIColorBg, 0.2);
-            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
+            border: 1px solid $editUIColorFg !important;
+            color: $editUIColorFg !important;
+            box-shadow: $editFrameSelectedShdw;
             z-index: 2;
         }
     }
-
-    .plot-wrapper-axis-and-display-area {
-        pointer-events: none;
-    }
 }
 
 .c-plot,
@@ -70,14 +67,20 @@ mct-plot {
 }
 
 .c-plot {
+    //$p: $mainViewPad;
     @include abs($mainViewPad);
+    //position: absolute;
+    //top: $p; right: $p; bottom: $p; left: $p;
 
     display: flex;
     flex-direction: column;
 
-    .c-control-bar {
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    .l-control-bar {
         flex: 0 0 auto;
-        margin-bottom: $interiorMargin;
     }
 
     .l-view-section {
@@ -111,12 +114,6 @@ mct-plot {
             }
         }
     }
-
-    .is-in-small-container & {
-        .c-control-bar {
-            display: none;
-        }
-    }
 }
 
 .gl-plot {
@@ -208,6 +205,7 @@ mct-plot {
         &.gl-plot-y-label {
             display: block;
             left: 0; top: 0; right: auto; bottom: 0;
+            padding-left: 5px;
             text-orientation: mixed;
             writing-mode: vertical-lr;
             &:before {
@@ -273,7 +271,7 @@ mct-plot {
         align-items: center;
         position: absolute;
         top: $m;
-        left: $m;
+        right: $m;
         z-index: 9;
 
         &__reset {
@@ -286,18 +284,15 @@ mct-plot {
             top: $m;
             right: $m;
         }
-
-        .c-button {
-            box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
-        }
     }
 
     .l-state-indicators {
         color: $colorPausedBg;
         position: absolute;
-        cursor: help;
-        font-size: 1.2em;
-        bottom: $interiorMarginSm;
+        display: block;
+        font-size: 1.5em;
+        pointer-events: none;
+        top: $interiorMarginSm;
         left: $interiorMarginSm;
         z-index: 2;
 
@@ -356,11 +351,11 @@ mct-plot {
 
 .gl-plot-tick {
     &.gl-plot-x-tick-label {
-        top: $interiorMarginSm;
+        top: $interiorMargin;
     }
     &.gl-plot-y-tick-label {
-        right: $interiorMarginSm;
-        left: auto;
+        right: $interiorMargin;
+        left: $interiorMargin;
     }
 }
 
@@ -457,22 +452,8 @@ mct-plot {
         @include propertiesHeader();
         margin-bottom: $interiorMarginSm;
     }
-
-    .is-in-small-container & {
-        &.is-legend-hidden {
-            display: none;
-        }
-    }
 }
 
-.c-plot--stacked {
-    .is-legend-hidden {
-        // Always show the legend in a stacked plot
-        display: flex !important;
-    }
-}
-
-
 .gl-plot-legend {
     display: flex;
     align-items: flex-start;
@@ -544,19 +525,10 @@ mct-plot {
     flex: 1 1 auto;
 }
 
-.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
-.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
-.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
-.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
-
-.gl-plot,
-.c-plot {
+.gl-plot {
     &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
     &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
 
-    &.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; }
-    &.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; }
-
     &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
     &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
     &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
@@ -568,6 +540,7 @@ mct-plot {
 
         .plot-legend-item {
             display: flex;
+            align-items: center;
             justify-content: stretch;
 
             .plot-series-swatch-and-name,
@@ -596,10 +569,8 @@ mct-plot {
 
     /***************** TOP OR BOTTOM */
     &.plot-legend-top,
-    &.plot-legend-bottom,
-    &.plot-legend-hidden {
+    &.plot-legend-bottom {
         // General styles when legend is on the top or bottom
-        // -hidden included for legacy plots
         flex-direction: column;
 
         &.plot-legend-collapsed {
@@ -621,7 +592,6 @@ mct-plot {
     &.plot-legend-left,
     &.plot-legend-right {
         // General styles when legend is on left or right
-
         .gl-plot-legend {
             max-height: inherit;
         }
@@ -652,7 +622,6 @@ mct-plot {
                 }
             }
             .plot-legend-item {
-                margin-bottom: $interiorMarginSm;
                 margin-left: 0;
                 flex-wrap: nowrap;
                 .plot-series-swatch-and-name {
@@ -680,31 +649,6 @@ mct-plot {
     }
 }
 
-/***************** STACKED PLOT LEGEND OVERRIDES */
-.c-plot--stacked {
-    // Always show the legend on top, ignore any position setting
-    .c-plot,
-    .gl-plot {
-        flex-direction: column !important;
-
-        .c-plot-legend,
-        .gl-plot-legend {
-            margin: 0;
-            margin-bottom: $interiorMargin;
-            order: 1 !important;
-            width: 100% !important;
-
-            .plot-wrapper-collapsed-legend {
-                flex-direction: row !important;
-            }
-        }
-        .plot-wrapper-axis-and-display-area {
-            order: 2 !important;
-        }
-    }
-
-}
-
 /***************** CURSOR GUIDES */
 [class*='c-cursor-guide'] {
     box-shadow: $shdwCursorGuide;

src/styles/_legacy.scss

@@ -52,7 +52,6 @@
     $ctrlW: 22px;
 
     &__controls {
-        font-size: 1rem !important;
         margin-right: 0;
         min-width: 0;
         overflow: hidden;
@@ -63,7 +62,7 @@
     }
 
     &__direction {
-        font-size: 0.9rem !important;
+        font-size: 0.9em;
         margin-right: $interiorMargin;
     }
 

src/styles/_mixins.scss

@@ -443,18 +443,28 @@
     }
 
     @include hover() {
-        filter: $filterHov;
+        background: $colorBtnBgHov;
+        color: $colorBtnFgHov;
     }
 
     &[class*="--major"],
     &[class*='is-active']{
         background: $colorBtnMajorBg;
         color: $colorBtnMajorFg;
+
+        @include hover() {
+            background: $colorBtnMajorBgHov;
+            color: $colorBtnMajorFgHov;
+        }
     }
 
     &[class*='--caution'] {
-        background: $colorBtnCautionBg !important;
-        color: $colorBtnCautionFg !important;
+        background: $colorBtnCautionBg;
+        color: $colorBtnCautionFg;
+
+        &:hover {
+            background: $colorBtnCautionBgHov;
+        }
     }
 }
 

src/styles/_table.scss

@@ -90,28 +90,14 @@ div.c-table {
         flex: 1 1 auto;
     }
 
-    .is-in-small-container & {
-        &:not(.is-paused) {
-            .c-table-control-bar {
-                display: none;
-            }
-        }
-        .c-table-control-bar {
-            .c-click-icon,
-            .c-button {
-                &__label {
-                    display: none;
-                }
-            }
-        }
+    > * + * {
+        margin-top: $interiorMarginSm;
     }
 }
 
 .c-table-control-bar {
     display: flex;
     flex: 0 0 auto;
-    //margin-bottom: $interiorMarginSm; // This approach to allow margin to go away when control bar is hidden
-    padding: $interiorMarginSm 0;
 
     > * + * {
         margin-left: $interiorMarginSm;

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

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "Open MCT Symbols 16px",
     "lastOpened": 0,
-    "created": 1596146160781
+    "created": 1593102875898
   },
   "iconSets": [
     {
@@ -752,7 +752,7 @@
           "tempChar": ""
         },
         {
-          "order": 189,
+          "order": 114,
           "id": 4,
           "name": "icon-font-size",
           "prevSize": 24,
@@ -2686,26 +2686,17 @@
         {
           "id": 4,
           "paths": [
-            "M1148 416h-152l-65.82 175.54 66.5 177.32 75.32-200.86 78.38 209h-150.66l42.76 114h150.64l49.88 133h133l-228-608z",
-            "M384 0l-384 1024h224l84-224h408l84 224h224l-384-1024zM380 608l132-352 132 352z"
-          ],
-          "attrs": [
-            {},
-            {}
+            "M842.841 380.048h-120.956l-52.382 139.676 52.918 141.12 59.942-159.84 62.361 166.314h-119.884l34.019 90.717h119.884l39.695 105.836h105.836l-181.434-483.823z",
+            "M263.903 160.129l-263.903 703.742h153.944l57.729-153.944h280.397l57.729 153.944h153.944l-263.903-703.742zM261.154 577.976l90.717-241.911 90.717 241.911z"
           ],
+          "attrs": [],
           "grid": 16,
           "tags": [
             "icon-font-size-alt1"
           ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
           "colorPermutations": {
-            "12552552551": [
-              {},
-              {}
-            ]
-          },
-          "width": 1376
+            "12552552551": []
+          }
         },
         {
           "id": 141,

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

@@ -100,7 +100,7 @@
 <glyph unicode="&#xea2c;" glyph-name="icon-frame-hide" d="M128 642h420l104 128h-652v-802.4l128 157.4zM896 2h-420l-104-128h652v802.4l-128-157.4zM832 834l-832-1024h192l832 1024zM392 450l104 128h-304v-128z" />
 <glyph unicode="&#xea2d;" glyph-name="icon-import" d="M832 639.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 128v-192l384 384-384 384v-192h-192v-384z" />
 <glyph unicode="&#xea2e;" glyph-name="icon-export" d="M192 0.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 320l-384 384v-192h-192v-384h192v-192l384 384z" />
-<glyph unicode="&#xea2f;" glyph-name="icon-font-size" horiz-adv-x="1376" d="M1148 416h-152l-65.82-175.54 66.5-177.32 75.32 200.86 78.38-209h-150.66l42.76-114h150.64l49.88-133h133l-228 608zM384 832l-384-1024h224l84 224h408l84-224h224l-384 1024zM380 224l132 352 132-352z" />
+<glyph unicode="&#xea2f;" glyph-name="icon-font-size" d="M842.841 451.952h-120.956l-52.382-139.676 52.918-141.12 59.942 159.84 62.361-166.314h-119.884l34.019-90.717h119.884l39.695-105.836h105.836l-181.434 483.823zM263.903 671.871l-263.903-703.742h153.944l57.729 153.944h280.397l57.729-153.944h153.944l-263.903 703.742zM261.154 254.024l90.717 241.911 90.717-241.911z" />
 <glyph unicode="&#xea30;" glyph-name="icon-clear-data" d="M632 520l-120-120-120 120-80-80 120-120-120-120 80-80 120 120 120-120 80 80-120 120 120 120-80 80zM512 832c-282.76 0-512-86-512-192v-640c0-106 229.24-192 512-192s512 86 512 192v640c0 106-229.24 192-512 192zM512 0c-176.731 0-320 143.269-320 320s143.269 320 320 320c176.731 0 320-143.269 320-320v0c0-176.731-143.269-320-320-320v0z" />
 <glyph unicode="&#xea31;" glyph-name="icon-history" d="M576 768c-247.4 0-448-200.6-448-448h-128l192-192 192 192h-128c0 85.4 33.2 165.8 93.8 226.2 60.4 60.6 140.8 93.8 226.2 93.8s165.8-33.2 226.2-93.8c60.6-60.4 93.8-140.8 93.8-226.2s-33.2-165.8-93.8-226.2c-60.4-60.6-140.8-93.8-226.2-93.8s-165.8 33.2-226.2 93.8l-90.6-90.6c81-81 193-131.2 316.8-131.2 247.4 0 448 200.6 448 448s-200.6 448-448 448zM576 560c-26.6 0-48-21.4-48-48v-211.8l142-142c9.4-9.4 21.6-14 34-14s24.6 4.6 34 14c18.8 18.8 18.8 49.2 0 67.8l-114 114v172c0 26.6-21.4 48-48 48z" />
 <glyph unicode="&#xea32;" glyph-name="icon-arrow-up-to-parent" horiz-adv-x="1056" d="M643.427 6.739c-81.955 0.697-148.179 67.065-148.642 149.010v395.872l296.871-247.393v197.914l-395.828 329.857-395.828-328.62v-197.502l296.871 246.156v-396.241c0-190.905 155.239-346.556 346.144-346.968l412.321-0.825 0.412 197.914z" />

src/styles/vue-styles.scss

@@ -3,7 +3,7 @@
 @import "../plugins/condition/components/conditionals.scss";
 @import "../plugins/conditionWidget/components/condition-widget.scss";
 @import "../plugins/condition/components/inspector/conditional-styles.scss";
-@import "../plugins/displayLayout/components/box-and-line-views";
+@import "../plugins/displayLayout/components/box-view.scss";
 @import "../plugins/displayLayout/components/display-layout.scss";
 @import "../plugins/displayLayout/components/edit-marquee.scss";
 @import "../plugins/displayLayout/components/image-view.scss";

src/ui/components/ObjectFrame.vue

@@ -66,8 +66,6 @@
         :object="domainObject"
         :show-edit-view="showEditView"
         :object-path="objectPath"
-        :font-size="fontSize"
-        :font="font"
     />
 </div>
 </template>
@@ -105,14 +103,6 @@ export default {
         showEditView: {
             type: Boolean,
             default: true
-        },
-        fontSize: {
-            type: String,
-            default: ''
-        },
-        font: {
-            type: String,
-            default: ''
         }
     },
     data() {
@@ -152,11 +142,8 @@ export default {
         getOverlayElement(childElement) {
             const fragment = new DocumentFragment();
             const header = this.getPreviewHeader();
-            const wrapper = document.createElement('div');
-            wrapper.classList.add('l-preview-window__object-view');
-            wrapper.append(childElement);
             fragment.append(header);
-            fragment.append(wrapper);
+            fragment.append(childElement);
 
             return fragment;
         },

src/ui/components/ObjectView.vue

@@ -20,30 +20,12 @@ export default {
             default: () => {
                 return [];
             }
-        },
-        fontSize: {
-            type: String,
-            default: ''
-        },
-        font: {
-            type: String,
-            default: ''
         }
     },
     watch: {
         object(newObject, oldObject) {
             this.currentObject = newObject;
             this.debounceUpdateView();
-        },
-        fontSize(newSize, oldSize) {
-            if (newSize !== oldSize) {
-                this.setFontSize(newSize);
-            }
-        },
-        font(newFont, oldFont) {
-            if (newFont !== oldFont) {
-                this.setFont(newFont);
-            }
         }
     },
     destroyed() {
@@ -81,9 +63,8 @@ export default {
         if (this.currentObject) {
             //This is to apply styles to subobjects in a layout
             this.initObjectStyles();
-            this.setFontSize(this.fontSize);
-            this.setFont(this.font);
         }
+
     },
     methods: {
         clear() {
@@ -110,15 +91,6 @@ export default {
 
             this.openmct.objectViews.off('clearData', this.clearData);
         },
-        getStyleReceiver() {
-            let styleReceiver = this.$el.querySelector('.js-style-receiver');
-
-            if (!styleReceiver) {
-                styleReceiver = this.$el.querySelector(':first-child');
-            }
-
-            return styleReceiver;
-        },
         invokeEditModeHandler(editMode) {
             let edit;
 
@@ -139,20 +111,20 @@ export default {
                 return;
             }
             let keys = Object.keys(styleObj);
-            let elemToStyle = this.getStyleReceiver();
             keys.forEach(key => {
-                if (elemToStyle) {
+                let firstChild = this.$el.querySelector(':first-child');
+                if (firstChild) {
                     if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('__no_value') > -1)) {
-                        if (elemToStyle.style[key]) {
-                            elemToStyle.style[key] = '';
+                        if (firstChild.style[key]) {
+                            firstChild.style[key] = '';
                         }
                     } else {
-                        if (!styleObj.isStyleInvisible && elemToStyle.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) {
-                            elemToStyle.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
-                        } else if (styleObj.isStyleInvisible && !elemToStyle.classList.contains(styleObj.isStyleInvisible)) {
-                            elemToStyle.classList.add(styleObj.isStyleInvisible);
+                        if (!styleObj.isStyleInvisible && firstChild.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) {
+                            firstChild.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
+                        } else if (styleObj.isStyleInvisible && !firstChild.classList.contains(styleObj.isStyleInvisible)) {
+                            firstChild.classList.add(styleObj.isStyleInvisible);
                         }
-                        elemToStyle.style[key] = styleObj[key];
+                        firstChild.style[key] = styleObj[key];
                     }
                 }
             });
@@ -170,7 +142,7 @@ export default {
             }
 
             this.viewContainer = document.createElement('div');
-            this.viewContainer.classList.add('l-angular-ov-wrapper');
+            this.viewContainer.classList.add('u-angular-object-view-wrapper');
             this.$el.append(this.viewContainer);
             let provider = this.getViewProvider();
             if (!provider) {
@@ -333,14 +305,6 @@ export default {
                 parentObject = objectPath[1];
 
             return [browseObject, parentObject, this.currentObject].every(object => object && !object.locked);
-        },
-        setFontSize(newSize) {
-            let elemToStyle = this.getStyleReceiver();
-            elemToStyle.dataset.fontSize = newSize;
-        },
-        setFont(newFont) {
-            let elemToStyle = this.getStyleReceiver();
-            elemToStyle.dataset.font = newFont;
         }
     }
 }

src/ui/components/object-frame.scss

@@ -10,21 +10,25 @@
     &__header {
         flex: 0 0 auto;
         display: flex;
-        font-size: 1.05em;
         align-items: center;
-        margin-bottom: $interiorMarginSm;
-        padding: 1px 2px;
+        margin-bottom: $interiorMargin;
 
-        .c-object-label {
-            &__name {
-                filter: $objectLabelNameFilter;
-            }
+        &__icon {
+            flex: 0 0 auto;
+            margin-right: $interiorMarginSm;
+            opacity: 0.5;
+        }
+
+        &__name {
+            @include headerFont(1em);
+            @include ellipsize();
+            flex: 0 1 auto;
         }
     }
 
     &:not(.c-so-view--no-frame) {
         border: $browseFrameBorder;
-        padding: 0 $interiorMarginSm;
+        padding: $interiorMargin;
 
         .is-editing & {
             background: rgba($colorBodyBg, 0.8);
@@ -36,6 +40,10 @@
             display: none;
         }
 
+        > .c-so-view__local-controls {
+            top: $interiorMarginSm; right: $interiorMarginSm;
+        }
+
         &.is-missing {
             @include isMissing($absPos: true);
 
@@ -47,19 +55,9 @@
     }
 
     &__local-controls {
-        // View Large button
-        box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
         position: absolute;
         top: $interiorMargin; right: $interiorMargin;
-        z-index: 10;
-    }
-
-    .c-click-icon,
-    .c-button {
-        // Shrink buttons a bit when they appear in a frame
-        border-radius: $smallCr !important;
-        font-size: 0.9em;
-        padding: 3px 5px;
+        z-index: 2;
     }
 
     &__view-large {
@@ -70,6 +68,7 @@
         > .c-so-view__view-large { display: block; }
     }
 
+    /*************************** OBJECT VIEW */
     &__object-view {
         flex: 1 1 auto;
         height: 0; // Chrome 73 overflow bug fix
@@ -80,10 +79,15 @@
             @include abs();
         }
     }
+
+    .c-click-icon,
+    .c-button {
+        // Shrink buttons a bit when they appear in a frame
+        font-size: 0.9em;
+        padding: 3px 5px;
+    }
 }
 
-.l-angular-ov-wrapper {
-    // This element is the recipient for object styling; cannot be display: contents
-    height: 100%;
-    overflow: hidden;
+.u-angular-object-view-wrapper {
+    display: contents;
 }

src/ui/components/object-label.scss

@@ -19,7 +19,6 @@
         display: block;
         flex: 0 0 auto;
         font-size: 1.1em;
-        opacity: $objectLabelTypeIconOpacity;
     }
 
     &.is-missing {

src/ui/inspector/ObjectName.vue

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

src/ui/inspector/inspector.scss

@@ -8,13 +8,13 @@
         margin-top: $interiorMargin;
     }
 
-    &__selected,
-    &__multiple-selected {
+    &__selected-w,
+    &__multiple-selected-w {
         @include headerFont(1.1em);
         padding: $interiorMarginSm 0;
     }
 
-    &__multiple-selected {
+    &__multiple-selected-w {
         $p: $interiorMarginLg;
         background: rgba($colorWarningLo, 0.3);
         border-radius: $basicCr;
@@ -25,11 +25,10 @@
     }
 
     &__selected {
-        .c-object-label__name {
-            filter: $objectLabelNameFilter;
-        }
+        @include ellipsize();
+        flex: 1 1 auto;
 
-        &--non-domain-object .c-object-label__name {
+        &--non-domain-object {
             font-style: italic;
         }
     }

src/ui/layout/BrowseBar.vue

@@ -55,7 +55,7 @@
                 :title="lockedOrUnlocked"
                 class="c-button"
                 :class="{
-                    'icon-lock c-button--caution': domainObject.locked,
+                    'icon-lock': domainObject.locked,
                     'icon-unlocked': !domainObject.locked
                 }"
                 @click="toggleLock(!domainObject.locked)"

src/ui/layout/layout.scss

@@ -313,13 +313,6 @@
 
     &__actions,
     &__end {
-        .c-button {
-            &[class*='icon-']:before {
-                min-width: 1em;
-                text-align: center;
-            }
-        }
-
         > * + * {
             margin-left: $interiorMargin;
         }
@@ -357,10 +350,6 @@
         flex: 0 1 auto;
     }
 
-    .c-object-label__name {
-        filter: $objectLabelNameFilter;
-    }
-
     &__object-name--w {
         @include headerFont(1.4em);
         min-width: 0;

src/ui/preview/Preview.vue

@@ -35,8 +35,8 @@
 
 <script>
 import PreviewHeader from './preview-header.vue';
-import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
-import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
+import { STYLE_CONSTANTS } from "../../plugins/condition/utils/constants";
+import StyleRuleManager from "../../plugins/condition/StyleRuleManager";
 
 export default {
     components: {
@@ -95,7 +95,7 @@ export default {
 
             this.viewKey = view.key;
             this.viewContainer = document.createElement('div');
-            this.viewContainer.classList.add('l-angular-ov-wrapper');
+            this.viewContainer.classList.add('u-angular-object-view-wrapper');
             this.$refs.objectView.append(this.viewContainer);
 
             this.view = this.currentView.view(this.domainObject, this.objectPath);

src/ui/preview/preview-header.vue

@@ -1,15 +1,14 @@
 <template>
-<div class="c-preview-header l-browse-bar">
+<div class="l-browse-bar">
     <div class="l-browse-bar__start">
         <div
-            class="l-browse-bar__object-name--w c-object-label"
+            class="l-browse-bar__object-name--w"
+            :class="type.cssClass"
         >
-            <div class="c-object-label__type-icon"
-                 :class="type.cssClass"
-            ></div>
-            <span class="l-browse-bar__object-name c-object-label__name">
+            <span class="l-browse-bar__object-name">
                 {{ domainObject.name }}
             </span>
+            <context-menu-drop-down :object-path="objectPath" />
         </div>
     </div>
     <div class="l-browse-bar__end">
@@ -20,6 +19,12 @@
                 :current-view="currentView"
                 @setView="setView"
             />
+            <NotebookMenuSwitcher v-if="showNotebookMenuSwitcher"
+                                  :domain-object="domainObject"
+                                  :ignore-link="true"
+                                  :object-path="objectPath"
+                                  class="c-notebook-snapshot-menubutton"
+            />
         </div>
     </div>
 </div>
@@ -27,13 +32,18 @@
 
 
 <script>
+import ContextMenuDropDown from '../../ui/components/contextMenuDropDown.vue';
+import NotebookMenuSwitcher from '../../plugins/notebook/components/notebook-menu-switcher.vue';
 import ViewSwitcher from '../../ui/layout/ViewSwitcher.vue';
 
 export default {
     inject: [
-        'openmct'
+        'openmct',
+        'objectPath'
     ],
     components: {
+        ContextMenuDropDown,
+        NotebookMenuSwitcher,
         ViewSwitcher
     },
     props: {
@@ -55,6 +65,12 @@ export default {
                 return false;
             }
         },
+        showNotebookMenuSwitcher: {
+            type: Boolean,
+            default: () => {
+                return false;
+            }
+        },
         views: {
             type: Array,
             default: () => {

src/ui/preview/preview.scss

@@ -13,9 +13,11 @@
     }
 
     &__object-view {
+        background: $colorBodyBg;
+        border: 1px solid $colorInteriorBorder;
         flex: 1 1 auto;
-        height: 0; // Chrome 73
         overflow: auto;
+        padding: $interiorMargin;
 
         > div:not([class]) {
             // Target an immediate child div without a class and make it display: contents

src/ui/toolbar/components/toolbar-select-menu.vue

@@ -50,7 +50,7 @@ export default {
                 return selectedOption.name || selectedOption.value
             }
             // If no selected option, then options are non-specific
-            return '??';
+            return '??px';
         },
         nonSpecific() {
             return this.options.nonSpecific === true;

webpack.config.js

@@ -14,9 +14,6 @@ const gitRevision = require('child_process')
 const gitBranch = require('child_process')
     .execSync('git rev-parse --abbrev-ref HEAD')
     .toString().trim();
-const vueFile = devMode ?
-    path.join(__dirname, "node_modules/vue/dist/vue.js") :
-    path.join(__dirname, "node_modules/vue/dist/vue.min.js");
 
 const webpackConfig = {
     mode: devMode ? 'development' : 'production',
@@ -40,7 +37,7 @@ const webpackConfig = {
             "csv": "comma-separated-values",
             "EventEmitter": "eventemitter3",
             "bourbon": "bourbon.scss",
-            "vue": vueFile,
+            "vue": path.join(__dirname, "node_modules/vue/dist/vue.js"),
             "d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
             "printj": path.join(__dirname, "node_modules/printj/dist/printj.min.js"),
             "styles": path.join(__dirname, "src/styles"),