Save window location

* Adds conditional styles to Preview window

.circleci/config.yml

@@ -20,8 +20,8 @@ jobs:
             paths:
               - node_modules
         - run:
-            name: npm run test
-            command: npm run test
+            name: npm run test:coverage
+            command: npm run test:coverage
         - run:
             name: npm run lint
             command: npm run lint

index.html

@@ -82,6 +82,7 @@
         openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
         openmct.install(openmct.plugins.ObjectMigration());
         openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
+        openmct.install(openmct.plugins.WindowLayout());
         openmct.start();
     </script>
 </html>

karma.conf.js

@@ -24,16 +24,27 @@
 
 const devMode = process.env.NODE_ENV !== 'production';
 const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
+const coverageEnabled = process.env.COVERAGE === 'true';
+const reporters = ['progress', 'html'];
+
+if (coverageEnabled) {
+    reporters.push('coverage-istanbul');
+}
 
 module.exports = (config) => {
     const webpackConfig = require('./webpack.config.js');
     delete webpackConfig.output;
 
-    if (!devMode) {
+    if (!devMode || coverageEnabled) {
         webpackConfig.module.rules.push({
             test: /\.js$/,
-            exclude: /node_modules|example/,
-            use: 'istanbul-instrumenter-loader'
+            exclude: /node_modules|example|lib|dist/,
+            use: {
+                loader: 'istanbul-instrumenter-loader',
+                options: {
+                    esModules: true
+                }
+            }
         });
     }
 
@@ -45,11 +56,7 @@ module.exports = (config) => {
             'src/**/*Spec.js'
         ],
         port: 9876,
-        reporters: [
-            'progress',
-            'coverage',
-            'html'
-        ],
+        reporters: reporters,
         browsers: browsers,
         customLaunchers: {
             ChromeDebugging: {
@@ -61,27 +68,27 @@ module.exports = (config) => {
         colors: true,
         logLevel: config.LOG_INFO,
         autoWatch: true,
-        coverageReporter: {
-            dir: process.env.CIRCLE_ARTIFACTS ?
-                process.env.CIRCLE_ARTIFACTS + '/coverage' :
-                "dist/reports/coverage",
-            check: {
-                global: {
-                    lines: 80,
-                    excludes: ['src/plugins/plot/**/*.js']
-                }
-            }
-        },
         // HTML test reporting.
         htmlReporter: {
             outputDir: "dist/reports/tests",
             preserveDescribeNesting: true,
             foldAll: false
         },
+        coverageIstanbulReporter: {
+            fixWebpackSourcePaths: true,
+            dir: process.env.CIRCLE_ARTIFACTS ?
+                process.env.CIRCLE_ARTIFACTS + '/coverage' :
+                "dist/reports/coverage",
+            reports: ['html', 'lcovonly', 'text-summary'],
+            thresholds: {
+                global: {
+                    lines: 62
+                }
+            }
+        },
         preprocessors: {
-            // add webpack as preprocessor
-            'platform/**/*Spec.js': [ 'webpack', 'sourcemap' ],
-            'src/**/*Spec.js': [ 'webpack', 'sourcemap' ]
+            'platform/**/*Spec.js': ['webpack', 'sourcemap'],
+            'src/**/*Spec.js': ['webpack', 'sourcemap']
         },
         webpack: webpackConfig,
         webpackMiddleware: {

package.json

@@ -42,6 +42,7 @@
     "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^1.0.1",
     "karma-coverage": "^1.1.2",
+    "karma-coverage-istanbul-reporter": "^2.1.1",
     "karma-html-reporter": "^0.2.7",
     "karma-jasmine": "^1.1.2",
     "karma-sourcemap-loader": "^0.3.7",
@@ -52,9 +53,9 @@
     "marked": "^0.3.5",
     "mini-css-extract-plugin": "^0.4.1",
     "minimist": "^1.1.1",
-    "moment": "^2.11.1",
+    "moment": "2.25.3",
     "moment-duration-format": "^2.2.2",
-    "moment-timezone": "^0.5.21",
+    "moment-timezone": "0.5.28",
     "node-bourbon": "^4.2.3",
     "node-sass": "^4.9.2",
     "painterro": "^0.2.65",
@@ -75,6 +76,7 @@
     "zepto": "^1.2.0"
   },
   "scripts": {
+    "clean": "rm -rf ./dist",
     "start": "node app.js",
     "lint": "eslint platform example src --ext .js,.vue openmct.js",
     "lint:fix": "eslint platform example src --ext .js,.vue openmct.js --fix",
@@ -82,7 +84,8 @@
     "build:dev": "webpack",
     "build:watch": "webpack --watch",
     "test": "karma start --single-run",
-    "test-debug": "cross-env NODE_ENV=debug karma start --no-single-run",
+    "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
+    "test:coverage": "./scripts/test-coverage.sh",
     "test:watch": "karma start --no-single-run",
     "verify": "concurrently 'npm:test' 'npm:lint'",
     "jsdoc": "jsdoc -c jsdoc.json -R API.md -r -d dist/docs/api",

scripts/test-coverage.sh

@@ -0,0 +1,2 @@
+export NODE_OPTIONS=--max_old_space_size=4096
+cross-env COVERAGE=true karma start --single-run

src/plugins/condition/StyleRuleManager.js

@@ -23,10 +23,13 @@
 import EventEmitter from 'EventEmitter';
 
 export default class StyleRuleManager extends EventEmitter {
-    constructor(styleConfiguration, openmct, callback) {
+    constructor(styleConfiguration, openmct, callback, suppressSubscriptionOnEdit) {
         super();
         this.openmct = openmct;
         this.callback = callback;
+        if (suppressSubscriptionOnEdit) {
+            this.openmct.editor.on('isEditing', this.toggleSubscription.bind(this));
+        }
         if (styleConfiguration) {
             this.initialize(styleConfiguration);
             if (styleConfiguration.conditionSetIdentifier) {
@@ -37,9 +40,25 @@ export default class StyleRuleManager extends EventEmitter {
         }
     }
 
+    toggleSubscription(isEditing) {
+        this.isEditing = isEditing;
+        if (this.isEditing) {
+            if (this.stopProvidingTelemetry) {
+                this.stopProvidingTelemetry();
+            }
+            if (this.conditionSetIdentifier) {
+                this.applySelectedConditionStyle();
+            }
+        } else if (this.conditionSetIdentifier) {
+            this.subscribeToConditionSet();
+        }
+    }
+
     initialize(styleConfiguration) {
         this.conditionSetIdentifier = styleConfiguration.conditionSetIdentifier;
         this.staticStyle = styleConfiguration.staticStyle;
+        this.selectedConditionId = styleConfiguration.selectedConditionId;
+        this.defaultConditionId = styleConfiguration.defaultConditionId;
         this.updateConditionStylesMap(styleConfiguration.styles || []);
     }
 
@@ -54,7 +73,7 @@ export default class StyleRuleManager extends EventEmitter {
                         this.handleConditionSetResultUpdated(output[0]);
                     }
                 });
-            this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(conditionSetDomainObject, output => this.handleConditionSetResultUpdated(output));
+            this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(conditionSetDomainObject, this.handleConditionSetResultUpdated.bind(this));
         });
     }
 
@@ -66,9 +85,13 @@ export default class StyleRuleManager extends EventEmitter {
             let isNewConditionSet = !this.conditionSetIdentifier ||
                                     !this.openmct.objects.areIdsEqual(this.conditionSetIdentifier, styleConfiguration.conditionSetIdentifier);
             this.initialize(styleConfiguration);
-            //Only resubscribe if the conditionSet has changed.
-            if (isNewConditionSet) {
-                this.subscribeToConditionSet();
+            if (this.isEditing) {
+                this.applySelectedConditionStyle();
+            } else {
+                //Only resubscribe if the conditionSet has changed.
+                if (isNewConditionSet) {
+                    this.subscribeToConditionSet();
+                }
             }
         }
     }
@@ -103,6 +126,16 @@ export default class StyleRuleManager extends EventEmitter {
         }
     }
 
+    applySelectedConditionStyle() {
+        const conditionId = this.selectedConditionId || this.defaultConditionId;
+        if (!conditionId) {
+            this.applyStaticStyle();
+        } else if (this.conditionalStyleMap[conditionId]) {
+            this.currentStyle = this.conditionalStyleMap[conditionId];
+            this.updateDomainObjectStyle();
+        }
+    }
+
     applyStaticStyle() {
         if (this.staticStyle) {
             this.currentStyle = this.staticStyle.style;
@@ -123,6 +156,7 @@ export default class StyleRuleManager extends EventEmitter {
         }
         delete this.stopProvidingTelemetry;
         this.conditionSetIdentifier = undefined;
+        this.isEditing = undefined;
     }
 
 }

src/plugins/condition/components/Condition.vue

@@ -30,6 +30,7 @@
 >
     <div class="c-condition-h__drop-target"></div>
     <div v-if="isEditing"
+         :class="{'is-current': condition.id === currentConditionId}"
          class="c-condition c-condition--edit"
     >
         <!-- Edit view -->
@@ -167,6 +168,7 @@
     </div>
     <div v-else
          class="c-condition c-condition--browse"
+         :class="{'is-current': condition.id === currentConditionId}"
     >
         <!-- Browse view -->
         <div class="c-condition__header">
@@ -199,6 +201,10 @@ export default {
         ConditionDescription
     },
     props: {
+        currentConditionId: {
+            type: String,
+            default: ''
+        },
         condition: {
             type: Object,
             required: true

src/plugins/condition/components/ConditionCollection.vue

@@ -58,6 +58,7 @@
             <Condition v-for="(condition, index) in conditionCollection"
                        :key="condition.id"
                        :condition="condition"
+                       :current-condition-id="currentConditionId"
                        :condition-index="index"
                        :telemetry="telemetryObjs"
                        :is-editing="isEditing"
@@ -107,7 +108,8 @@ export default {
             moveIndex: undefined,
             isDragging: false,
             defaultOutput: undefined,
-            dragCounter: 0
+            dragCounter: 0,
+            currentConditionId: ''
         };
     },
     watch: {
@@ -145,6 +147,7 @@ export default {
     },
     methods: {
         handleConditionSetResultUpdated(data) {
+            this.currentConditionId = data.conditionId;
             this.$emit('conditionSetResultUpdated', data)
         },
         observeForChanges() {

src/plugins/condition/components/conditionals.scss

@@ -190,6 +190,7 @@
 }
 
 .c-condition {
+    border: 1px solid transparent;
     flex-direction: column;
     min-width: 400px;
 
@@ -234,6 +235,12 @@
     &__summary {
         flex: 1 1 auto;
     }
+
+    &.is-current {
+        $c: $colorBodyFg;
+        border-color: rgba($c, 0.2);
+        background: rgba($c, 0.2);
+    }
 }
 
 /***************************** CONDITION DEFINITION, EDITING */

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

@@ -79,6 +79,8 @@
             <div v-for="(conditionStyle, index) in conditionalStyles"
                  :key="index"
                  class="c-inspect-styles__condition"
+                 :class="{'is-current': conditionStyle.conditionId === selectedConditionId}"
+                 @click="applySelectedConditionStyle(conditionStyle.conditionId)"
             >
                 <condition-error :show-label="true"
                                  :condition="getCondition(conditionStyle.conditionId)"
@@ -126,7 +128,8 @@ export default {
             isEditing: this.openmct.editor.isEditing(),
             conditions: undefined,
             conditionsLoaded: false,
-            navigateToPath: ''
+            navigateToPath: '',
+            selectedConditionId: ''
         }
     },
     destroyed() {
@@ -191,6 +194,9 @@ export default {
             if (this.stopObservingItems) {
                 this.stopObservingItems();
             }
+            if (this.stopProvidingTelemetry) {
+                this.stopProvidingTelemetry();
+            }
         },
         initialize(conditionSetDomainObject) {
             //If there are new conditions in the conditionSet we need to set those styles to default
@@ -200,6 +206,13 @@ export default {
         },
         setEditState(isEditing) {
             this.isEditing = isEditing;
+            if (this.isEditing) {
+                if (this.stopProvidingTelemetry) {
+                    this.stopProvidingTelemetry();
+                }
+            } else {
+                this.subscribeToConditionSet();
+            }
         },
         addConditionSet() {
             let conditionSetDomainObject;
@@ -270,6 +283,8 @@ export default {
             let domainObjectStyles =  (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
             if (this.itemId) {
                 domainObjectStyles[this.itemId].conditionSetIdentifier = undefined;
+                domainObjectStyles[this.itemId].selectedConditionId = undefined;
+                domainObjectStyles[this.itemId].defaultConditionId = undefined;
                 delete domainObjectStyles[this.itemId].conditionSetIdentifier;
                 domainObjectStyles[this.itemId].styles = undefined;
                 delete domainObjectStyles[this.itemId].styles;
@@ -278,6 +293,8 @@ export default {
                 }
             } else {
                 domainObjectStyles.conditionSetIdentifier = undefined;
+                domainObjectStyles.selectedConditionId = undefined;
+                domainObjectStyles.defaultConditionId = undefined;
                 delete domainObjectStyles.conditionSetIdentifier;
                 domainObjectStyles.styles = undefined;
                 delete domainObjectStyles.styles;
@@ -287,16 +304,23 @@ export default {
             }
 
             this.persist(domainObjectStyles);
+            if (this.stopProvidingTelemetry) {
+                this.stopProvidingTelemetry();
+            }
         },
         updateDomainObjectItemStyles(newItems) {
             //check that all items that have been styles still exist. Otherwise delete those styles
             let domainObjectStyles =  (this.domainObject.configuration && this.domainObject.configuration.objectStyles) || {};
             let itemsToRemove = [];
             let keys = Object.keys(domainObjectStyles);
+            //TODO: Need an easier way to find which properties are itemIds
             keys.forEach((key) => {
-                if ((key !== 'styles') &&
+                const keyIsItemId = (key !== 'styles') &&
                     (key !== 'staticStyle') &&
-                    (key !== 'conditionSetIdentifier')) {
+                    (key !== 'defaultConditionId') &&
+                    (key !== 'selectedConditionId') &&
+                    (key !== 'conditionSetIdentifier');
+                if (keyIsItemId) {
                     if (!(newItems.find(item => item.id === key))) {
                         itemsToRemove.push(key);
                     }
@@ -324,6 +348,9 @@ export default {
             }
             let conditionalStyles = [];
             this.conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => {
+                if (conditionConfiguration.isDefault) {
+                    this.selectedConditionId = conditionConfiguration.id;
+                }
                 this.conditions[conditionConfiguration.id] = conditionConfiguration;
                 let foundStyle = this.findStyleByConditionId(conditionConfiguration.id);
                 if (foundStyle) {
@@ -339,7 +366,27 @@ export default {
             //we're doing this so that we remove styles for any conditions that have been removed from the condition set
             this.conditionalStyles = conditionalStyles;
             this.conditionsLoaded = true;
-            this.persist(this.getDomainObjectConditionalStyle());
+            this.persist(this.getDomainObjectConditionalStyle(this.selectedConditionId));
+            if (!this.isEditing) {
+                this.subscribeToConditionSet();
+            }
+        },
+        subscribeToConditionSet() {
+            if (this.stopProvidingTelemetry) {
+                this.stopProvidingTelemetry();
+            }
+            if (this.conditionSetDomainObject) {
+                this.openmct.telemetry.request(this.conditionSetDomainObject)
+                    .then(output => {
+                        if (output && output.length) {
+                            this.handleConditionSetResultUpdated(output[0]);
+                        }
+                    });
+                this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(this.conditionSetDomainObject, this.handleConditionSetResultUpdated.bind(this));
+            }
+        },
+        handleConditionSetResultUpdated(resultData) {
+            this.selectedConditionId = resultData ? resultData.conditionId : '';
         },
         initializeStaticStyle(objectStyles) {
             let staticStyle = objectStyles && objectStyles.staticStyle;
@@ -364,14 +411,19 @@ export default {
             let found = this.findStyleByConditionId(conditionStyle.conditionId);
             if (found) {
                 found.style = conditionStyle.style;
+                this.selectedConditionId = found.conditionId;
                 this.persist(this.getDomainObjectConditionalStyle());
             }
         },
-        getDomainObjectConditionalStyle() {
+        getDomainObjectConditionalStyle(defaultConditionId) {
             let objectStyle = {
                 styles: this.conditionalStyles,
-                staticStyle: this.staticStyle
+                staticStyle: this.staticStyle,
+                selectedConditionId: this.selectedConditionId
             };
+            if (defaultConditionId) {
+                objectStyle.defaultConditionId = defaultConditionId;
+            }
             if (this.conditionSetDomainObject) {
                 objectStyle.conditionSetIdentifier = this.conditionSetDomainObject.identifier;
             }
@@ -393,6 +445,10 @@ export default {
         getCondition(id) {
             return this.conditions ? this.conditions[id] : {};
         },
+        applySelectedConditionStyle(conditionId) {
+            this.selectedConditionId = conditionId;
+            this.persist(this.getDomainObjectConditionalStyle());
+        },
         persist(style) {
             this.openmct.objects.mutate(this.domainObject, 'configuration.objectStyles', style);
         }

src/plugins/condition/components/inspector/conditional-styles.scss

@@ -60,6 +60,31 @@
 
     &__condition {
         @include discreteItem();
+        border: 1px solid transparent;
+        pointer-events: none; // Prevent selecting when the object isn't being edited
+
+        &.is-current {
+            $c: $colorBodyFg;
+            border-color: rgba($c, 0.2);
+            background: rgba($c, 0.2);
+        }
+
+        .is-editing & {
+            cursor: pointer;
+            pointer-events: initial;
+            transition: $transOut;
+
+            &:hover {
+                background: rgba($colorBodyFg, 0.1);
+                transition: $transIn;
+            }
+
+            &.is-current {
+                $c: $editUIColorBg;
+                border-color: $c;
+                background: rgba($c, 0.1);
+            }
+        }
     }
 
     .c-style {

src/plugins/displayLayout/mixins/objectStyles-mixin.js

@@ -52,7 +52,7 @@ export default {
         },
         initObjectStyles() {
             if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager(this.objectStyle, this.openmct, this.updateStyle.bind(this));
+                this.styleRuleManager = new StyleRuleManager(this.objectStyle, this.openmct, this.updateStyle.bind(this), true);
             } else {
                 this.styleRuleManager.updateObjectStyleConfig(this.objectStyle);
             }

src/plugins/notebook/components/notebook-menu-switcher.vue

@@ -29,7 +29,7 @@
 
 <script>
 import Snapshot from '../snapshot';
-import { clearDefaultNotebook, getDefaultNotebook } from '../utils/notebook-storage';
+import { getDefaultNotebook } from '../utils/notebook-storage';
 import { NOTEBOOK_DEFAULT, NOTEBOOK_SNAPSHOT } from '../notebook-constants';
 
 export default {
@@ -40,6 +40,18 @@ export default {
             default() {
                 return {};
             }
+        },
+        ignoreLink: {
+            type: Boolean,
+            default() {
+                return false;
+            }
+        },
+        objectPath: {
+            type: Array,
+            default() {
+                return null;
+            }
         }
     },
     data() {
@@ -60,28 +72,22 @@ export default {
     methods: {
         async setNotebookTypes() {
             const notebookTypes = [];
-            let defaultPath = '';
             const defaultNotebook = getDefaultNotebook();
 
             if (defaultNotebook) {
-                const domainObject = await this.openmct.objects.get(defaultNotebook.notebookMeta.identifier)
-                    .then(d => d);
+                const domainObject = defaultNotebook.domainObject;
 
-                if (!domainObject.location) {
-                    clearDefaultNotebook();
-                } else {
-                    defaultPath = `${domainObject.name} - ${defaultNotebook.section.name} - ${defaultNotebook.page.name}`;
+                if (domainObject.location) {
+                    const defaultPath = `${domainObject.name} - ${defaultNotebook.section.name} - ${defaultNotebook.page.name}`;
+
+                    notebookTypes.push({
+                        cssClass: 'icon-notebook',
+                        name: `Save to Notebook ${defaultPath}`,
+                        type: NOTEBOOK_DEFAULT
+                    });
                 }
             }
 
-            if (defaultPath.length !== 0) {
-                notebookTypes.push({
-                    cssClass: 'icon-notebook',
-                    name: `Save to Notebook ${defaultPath}`,
-                    type: NOTEBOOK_DEFAULT
-                });
-            }
-
             notebookTypes.push({
                 cssClass: 'icon-notebook',
                 name: 'Save to Notebook Snapshots',
@@ -97,17 +103,27 @@ export default {
             this.showMenu = false;
         },
         snapshot(notebook) {
-            let element = document.getElementsByClassName("l-shell__main-container")[0];
-            const bounds = this.openmct.time.bounds();
-            const objectPath = this.openmct.router.path;
-            const snapshotMeta = {
-                bounds,
-                link: window.location.href,
-                objectPath,
-                openmct: this.openmct
-            };
+            this.hideMenu();
 
-            this.notebookSnapshot.capture(snapshotMeta, notebook.type, element);
+            this.$nextTick(() => {
+                const element = document.querySelector('.c-overlay__contents')
+                    || document.getElementsByClassName('l-shell__main-container')[0];
+
+                const bounds = this.openmct.time.bounds();
+                const link = !this.ignoreLink
+                    ? window.location.href
+                    : null;
+
+                const objectPath = this.objectPath || this.openmct.router.path;
+                const snapshotMeta = {
+                    bounds,
+                    link,
+                    objectPath,
+                    openmct: this.openmct
+                };
+
+                this.notebookSnapshot.capture(snapshotMeta, notebook.type, element);
+            });
         }
     }
 }

src/plugins/notebook/components/notebook.vue

@@ -239,6 +239,7 @@ export default {
             const section = this.getSelectedSection();
 
             return {
+                domainObject: this.internalDomainObject,
                 notebookMeta,
                 section,
                 page
@@ -440,7 +441,7 @@ export default {
         async updateDefaultNotebook(notebookStorage) {
             const defaultNotebookObject = await this.getDefaultNotebookObject();
             this.removeDefaultClass(defaultNotebookObject);
-            setDefaultNotebook(notebookStorage);
+            setDefaultNotebook(this.openmct, notebookStorage);
             this.addDefaultClass();
             this.defaultSectionId = notebookStorage.section.id;
             this.defaultPageId = notebookStorage.page.id;
@@ -495,7 +496,7 @@ export default {
                 return;
             }
 
-            if (section.id !== defaultNotebookSection.id) {
+            if (id !== defaultNotebookSection.id) {
                 return;
             }
 

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

@@ -1,6 +1,46 @@
 const NOTEBOOK_LOCAL_STORAGE = 'notebook-storage';
+let currentNotebookObject = null;
+let unlisten = null;
+
+function defaultNotebookObjectChanged(newDomainObject) {
+    if (newDomainObject.location !== null) {
+        currentNotebookObject = newDomainObject;
+        const notebookStorage = getDefaultNotebook();
+        notebookStorage.domainObject = newDomainObject;
+        saveDefaultNotebook(notebookStorage);
+
+        return;
+    }
+
+    if (unlisten) {
+        unlisten();
+        unlisten = null;
+    }
+
+    clearDefaultNotebook();
+}
+
+function observeDefaultNotebookObject(openmct, notebookStorage) {
+    const domainObject = notebookStorage.domainObject;
+    if (currentNotebookObject
+            && currentNotebookObject.identifier.key === domainObject.identifier.key) {
+        return;
+    }
+
+    if (unlisten) {
+        unlisten();
+        unlisten = null;
+    }
+
+    unlisten = openmct.objects.observe(notebookStorage.domainObject, '*', defaultNotebookObjectChanged);
+}
+
+function saveDefaultNotebook(notebookStorage) {
+    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
+}
 
 export function clearDefaultNotebook() {
+    currentNotebookObject = null;
     window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, null);
 }
 
@@ -10,20 +50,21 @@ export function getDefaultNotebook() {
     return JSON.parse(notebookStorage);
 }
 
-export function setDefaultNotebook(notebookStorage) {
-    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
+export function setDefaultNotebook(openmct, notebookStorage) {
+    observeDefaultNotebookObject(openmct, notebookStorage);
+    saveDefaultNotebook(notebookStorage);
 }
 
 export function setDefaultNotebookSection(section) {
     const notebookStorage = getDefaultNotebook();
 
     notebookStorage.section = section;
-    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
+    saveDefaultNotebook(notebookStorage);
 
 }
 
 export function setDefaultNotebookPage(page) {
     const notebookStorage = getDefaultNotebook();
     notebookStorage.page = page;
-    window.localStorage.setItem(NOTEBOOK_LOCAL_STORAGE, JSON.stringify(notebookStorage));
+    saveDefaultNotebook(notebookStorage);
 }

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

@@ -21,7 +21,7 @@
 -->
 <div ng-controller="StackedPlotController as stackedPlot"
       class="c-plot c-plot--stacked holder holder-plot has-control-bar">
-    <div class="l-control-bar" ng-show="!stackedPlot.hideExportButtons">
+    <div class="c-control-bar" ng-show="!stackedPlot.hideExportButtons">
        <span class="c-button-set c-button-set--strip-h">
           <button class="c-button icon-download"
              ng-click="stackedPlot.exportPNG()"

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

@@ -67,10 +67,10 @@ define([
         }
         this.$canvas = this.$element.find('canvas');
 
-        this.listenTo(this.$canvas, 'click', this.onMouseClick, this);
         this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
         this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
         this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
+        this.listenTo(this.$canvas, 'wheel', this.wheelZoom, this);
 
         this.watchForMarquee();
     };
@@ -78,7 +78,6 @@ define([
     MCTPlotController.prototype.initialize = function () {
         this.$canvas = this.$element.find('canvas');
 
-        this.listenTo(this.$canvas, 'click', this.onMouseClick, this);
         this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
         this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
         this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
@@ -210,23 +209,6 @@ define([
         this.highlightValues(point);
     };
 
-    MCTPlotController.prototype.onMouseClick = function ($event) {
-        const isClick = this.isMouseClick();
-        if (this.pan) {
-            this.endPan($event);
-        }
-        if (this.marquee) {
-            this.endMarquee($event);
-        }
-        this.$scope.$apply();
-
-        if (!this.$scope.highlights.length || !isClick) {
-            return;
-        }
-
-        this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
-    };
-
     MCTPlotController.prototype.highlightValues = function (point) {
         this.highlightPoint = point;
         this.$scope.$emit('plot:highlight:update', point);
@@ -274,11 +256,23 @@ define([
     MCTPlotController.prototype.onMouseUp = function ($event) {
         this.stopListening(this.$window, 'mouseup', this.onMouseUp, this);
         this.stopListening(this.$window, 'mousemove', this.trackMousePosition, this);
+
+        if (this.isMouseClick()) {
+            this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
+        }
+
+        if (this.allowPan) {
+            return this.endPan($event);
+        }
+
+        if (this.allowMarquee) {
+            return this.endMarquee($event);
+        }
     };
 
     MCTPlotController.prototype.isMouseClick = function () {
         if (!this.marquee) {
-            return;
+            return false;
         }
 
         const { start, end } = this.marquee;

src/plugins/plot/src/services/ExportImageService.js

@@ -81,7 +81,8 @@ define(
                         clonedElement.classList.add(className);
                     }
                     element.id = oldId;
-                }
+                },
+                removeContainer: true // Set to false to debug what html2canvas renders
             }).then(function (canvas) {
                 dialog.dismiss();
                 return new Promise(function (resolve, reject) {

src/plugins/plot/src/telemetry/PlotController.js

@@ -227,8 +227,9 @@ define([
     };
 
     PlotController.prototype.stopLoading = function () {
-        this.$scope.pending -= 1;
-        this.$scope.$digest();
+        this.$scope.$evalAsync(() => {
+            this.$scope.pending -= 1;
+        });
     };
 
     /**

src/plugins/plugins.js

@@ -51,7 +51,8 @@ define([
     './conditionWidget/plugin',
     './themes/espresso',
     './themes/maelstrom',
-    './themes/snow'
+    './themes/snow',
+    './windowLayout/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -83,7 +84,8 @@ define([
     ConditionWidgetPlugin,
     Espresso,
     Maelstrom,
-    Snow
+    Snow,
+    WindowLayout
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -192,6 +194,7 @@ define([
     plugins.Snow = Snow.default;
     plugins.Condition = ConditionPlugin.default;
     plugins.ConditionWidget = ConditionWidgetPlugin.default;
+    plugins.WindowLayout = WindowLayout.default;
 
     return plugins;
 });

src/plugins/tabs/components/tabs.vue

@@ -27,7 +27,7 @@
                 {'is-current': isCurrent(tab)},
                 tab.type.definition.cssClass
             ]"
-            @click="showTab(tab)"
+            @click="showTab(tab, index)"
         >
             <span class="c-button__label">{{ tab.domainObject.name }}</span>
         </button>
@@ -48,6 +48,7 @@
             </div>
         </div>
         <object-view
+            v-if="internalDomainObject.keep_alive ? currentTab : isCurrent(tab)"
             class="c-tabs-view__object"
             :object="tab.domainObject"
         />
@@ -57,7 +58,6 @@
 
 <script>
 import ObjectView from '../../../ui/components/ObjectView.vue';
-import _ from 'lodash';
 
 var unknownObjectType = {
     definition: {
@@ -73,6 +73,7 @@ export default {
     },
     data: function () {
         return {
+            internalDomainObject: this.domainObject,
             currentTab: {},
             tabsList: [],
             setCurrentTab: true,
@@ -85,9 +86,17 @@ export default {
             this.composition.on('add', this.addItem);
             this.composition.on('remove', this.removeItem);
             this.composition.on('reorder', this.onReorder);
-            this.composition.load();
+            this.composition.load().then(() => {
+                let currentTabIndex = this.domainObject.currentTabIndex;
+
+                if (currentTabIndex !== undefined && this.tabsList.length > currentTabIndex) {
+                    this.currentTab = this.tabsList[currentTabIndex];
+                }
+            });
         }
 
+        this.unsubscribe = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
+
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
     },
@@ -96,18 +105,25 @@ export default {
         this.composition.off('remove', this.removeItem);
         this.composition.off('reorder', this.onReorder);
 
+        this.unsubscribe();
+
         document.removeEventListener('dragstart', this.dragstart);
         document.removeEventListener('dragend', this.dragend);
     },
     methods:{
-        showTab(tab) {
+        showTab(tab, index) {
+            if (index !== undefined) {
+                this.storeCurrentTabIndex(index);
+            }
+
             this.currentTab = tab;
         },
         addItem(domainObject) {
             let type = this.openmct.types.get(domainObject.type) || unknownObjectType,
                 tabItem = {
                     domainObject,
-                    type: type
+                    type: type,
+                    key: this.openmct.objects.makeKeyString(domainObject.identifier)
                 };
 
             this.tabsList.push(tabItem);
@@ -126,7 +142,7 @@ export default {
             this.tabsList.splice(pos, 1);
 
             if (this.isCurrent(tabToBeRemoved)) {
-                this.showTab(this.tabsList[this.tabsList.length - 1]);
+                this.showTab(this.tabsList[this.tabsList.length - 1], this.tabsList.length - 1);
             }
         },
         onReorder(reorderPlan) {
@@ -138,6 +154,7 @@ export default {
         },
         onDrop(e) {
             this.setCurrentTab = true;
+            this.storeCurrentTabIndex(this.tabsList.length);
         },
         dragstart(e) {
             if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
@@ -155,7 +172,13 @@ export default {
             this.allowDrop = false;
         },
         isCurrent(tab) {
-            return _.isEqual(this.currentTab, tab)
+            return this.currentTab.key === tab.key;
+        },
+        updateInternalDomainObject(domainObject) {
+            this.internalDomainObject = domainObject;
+        },
+        storeCurrentTabIndex(index) {
+            this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
         }
     }
 }

src/plugins/tabs/plugin.js

@@ -36,7 +36,27 @@ define([
                 cssClass: 'icon-tabs-view',
                 initialize(domainObject) {
                     domainObject.composition = [];
-                }
+                    domainObject.keep_alive = true;
+                },
+                form: [
+                    {
+                        "key": "keep_alive",
+                        "name": "Keep Tabs Alive",
+                        "control": "select",
+                        "options": [
+                            {
+                                'name': 'True',
+                                'value': true
+                            },
+                            {
+                                'name': 'False',
+                                'value': false
+                            }
+                        ],
+                        "required": true,
+                        "cssClass": "l-input"
+                    }
+                ]
             });
         };
     };

src/plugins/telemetryTable/components/table.scss

@@ -165,7 +165,16 @@
 /******************************* LEGACY */
 .s-status-taking-snapshot,
 .overlay.snapshot {
-    // Handle overflow-y issues with tables and html2canvas
-    // Replaces .l-sticky-headers .l-tabular-body { overflow: auto; }
-    .c-table__body-w { overflow: auto; }
+    .c-table {
+        &__body-w {
+            overflow: auto; // Handle overflow-y issues with tables and html2canvas
+        }
+
+        &-control-bar {
+            display: none;
+            + * {
+                margin-top: 0 !important;
+            }
+        }
+    }
 }

src/plugins/windowLayout/components/WindowLayout.vue

@@ -0,0 +1,183 @@
+<template>
+<div v-if="!isOpener"
+     class="c-indicator c-indicator--clickable icon-save s-status-caution"
+>
+    <span class="label c-indicator__label">
+        <button @click="open2Windows">Open 2 Windows</button>
+        <button @click="closeAllWindows">Close Windows</button>
+        <button @click="openSavedWindows">Open Saved Windows</button>
+    </span>
+</div>
+</template>
+<script>
+export default {
+    inject: ['openmct'],
+    computed: {
+        isOpener() {
+            return window.opener;
+        }
+    },
+    mounted() {
+        this.openWindows = {};
+        this.windowFeatures = "menubar=yes,location=yes,tabs=yes, resizable=yes,scrollbars=yes, innerHeight=480,innerWidth=640,screenY=100";
+        window.addEventListener("message", this.receiveMessage, false);
+        if (window.opener) {
+            window.opener.postMessage({
+                status: 'READY',
+                name: window.name
+            },'*');
+            window.addEventListener('beforeunload', () => {
+                window.opener.postMessage({
+                    status: 'CLOSED',
+                    name: window.name
+                },'*');
+            });
+            window.addEventListener('blur', () => {
+                window.opener.postMessage({
+                    query: 'QUERY__SIZE',
+                    info: {
+                        innerHeight: window.innerHeight,
+                        innerWidth: window.innerWidth,
+                        screenLeft: window.screenLeft,
+                        screenTop: window.screenTop,
+                        screenWidth: screen.width,
+                        screenHeight: screen.height,
+                        screenAvailableWidth: screen.availWidth,
+                        screenAvailHeight: screen.availHeight,
+                        devicePixelRatio: window.devicePixelRatio,
+                        url: window.location.href
+                    },
+                    name: window.name
+                },'*');
+            });
+        }
+    },
+    methods: {
+        persistWindowInformation() {
+            window.localStorage.setItem('openmct-windowlayout-items',
+                JSON.stringify(this.getOpenWindowSpecifications()));
+        },
+        getScreenX() {
+            return !Object.keys(this.openWindows).length ? 100: (screen.width - (Object.keys(this.openWindows).length*640));
+        },
+        open2Windows() {
+            this.openWindow(`${this.windowFeatures},screenX=${this.getScreenX()}`);
+            this.openWindow(`${this.windowFeatures},screenX=${this.getScreenX()}`);
+        },
+        openWindow(windowFeatures) {
+            let newWindowName = `Open MCT Window ${Object.keys(this.openWindows).length+1}`;
+            this.openWindows[newWindowName] = { windowReference: window.open(window.location.href, newWindowName, windowFeatures)};
+        },
+        moveWindow() {
+            const key = Object.keys(this.openWindows)[0];
+            this.openWindows[key].postMessage({
+                command: 'moveTo',
+                params: [window.screenLeft + 40, window.screenTop + 40]
+            }, 'http://localhost:8080');
+        },
+        openSavedWindows() {
+            const persistedWindowObjs = window.localStorage.getItem('openmct-windowlayout-items');
+            if (persistedWindowObjs) {
+                const windowObjs = JSON.parse(persistedWindowObjs);
+                windowObjs.forEach(windowObj => {
+                    let newWindowName = windowObj.name;
+                    const features = `menubar=yes,location=yes,resizable=yes,scrollbars=yes,innerHeight=${windowObj.info.innerHeight || 480},innerWidth=${windowObj.info.innerWidth || 640},screenX=${windowObj.info.screenLeft || this.getScreenX()},screenY=${windowObj.info.screenTop || 100}`;
+                    const windowReference = window.open((windowObj.info.url || window.location.href), newWindowName, features);
+                    this.openWindows[newWindowName] = {
+                        windowReference,
+                        name: newWindowName,
+                        info: windowObj.info
+                    }
+                });
+            }
+        },
+        closeAllWindows() {
+            this.persistWindowInformation();
+            Object.keys(this.openWindows).forEach((windowName => {
+                const windowObj = this.openWindows[windowName];
+                windowObj.closedByOpener = true;
+                windowObj.windowReference.close();
+            }));
+        },
+        receiveMessage(event) {
+            const { data, origin, source} = event;
+            switch(origin) {
+            case 'http://localhost:8080':
+                if (data) {
+                    if (data.status === 'READY') {
+                        let newWindowReference = this.openWindows[data.name].windowReference;
+                        newWindowReference.postMessage({
+                            command: 'QUERY__SIZE'
+                        }, 'http://localhost:8080');
+                    } else if (data.status === 'CLOSED') {
+                        const closedByOpener = this.openWindows[data.name].closedByOpener;
+                        this.openWindows[data.name] = undefined;
+                        delete this.openWindows[data.name];
+                        if (!closedByOpener) {
+                            this.persistWindowInformation();
+                        }
+                    } else if (data.command) {
+                        switch(data.command) {
+                        case 'QUERY__SIZE':
+                            source.postMessage({
+                                query: data.command,
+                                info: {
+                                    innerHeight: window.innerHeight,
+                                    innerWidth: window.innerWidth,
+                                    screenLeft: window.screenLeft,
+                                    screenTop: window.screenTop,
+                                    screenWidth: screen.width,
+                                    screenHeight: screen.height,
+                                    screenAvailableWidth: screen.availWidth,
+                                    screenAvailHeight: screen.availHeight,
+                                    devicePixelRatio: window.devicePixelRatio,
+                                    url: window.location.href
+                                },
+                                name: window.name
+                            }, origin);
+                            break;
+                        default:
+                            window[data.command](...data.params);
+                            this.$nextTick(() => {
+                                source.postMessage({
+                                    query: data.command,
+                                    name: window.name
+                                }, origin);
+                            });
+                            break;
+                        }
+                    } else if (data.query) {
+                        if (data.info) {
+                            if (!this.openWindows[data.name]) {
+                                return;
+                            }
+                            this.openWindows[data.name].info = data.info;
+                            this.persistWindowInformation();
+                        } else {
+                            if (!this.openWindows[data.name]) {
+                                return;
+                            }
+                            let newWindowReference = this.openWindows[data.name].windowReference;
+                            newWindowReference.postMessage({
+                                command: 'QUERY__SIZE'
+                            }, 'http://localhost:8080');
+                        }
+                    }
+                }
+
+                break;
+            default:
+                break;
+            }
+        },
+        getOpenWindowSpecifications() {
+            return Object.keys(this.openWindows).map(key => {
+                return {
+                    name: key,
+                    info: this.openWindows[key].info
+                }
+            });
+        }
+    }
+}
+</script>

src/plugins/windowLayout/plugin.js

@@ -0,0 +1,43 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import Vue from 'vue';
+import WindowLayout from "./components/WindowLayout.vue";
+
+export default function plugin() {
+
+    return function install(openmct) {
+        let component = new Vue ({
+                provide: {
+                    openmct
+                },
+                components: {
+                    WindowLayout: WindowLayout
+                },
+                template: '<WindowLayout></WindowLayout>'
+            }),
+            indicator = {
+                element: component.$mount().$el
+            };
+
+        openmct.indicators.add(indicator);
+    };
+}

src/styles/_controls.scss

@@ -565,6 +565,20 @@ select {
         }
     }
 }
+/******************************************************** CONTROL BARS */
+.c-control-bar {
+    display: flex;
+    align-items: center;
+
+    > * + * {
+        margin-left: $interiorMarginSm;
+    }
+
+    &__label {
+        display: inline-block;
+        white-space: nowrap;
+    }
+}
 
 /******************************************************** PALETTES */
 .c-palette {

src/styles/_legacy-plots.scss

@@ -40,28 +40,58 @@ mct-plot {
         }
     }
 }
+
+.c-plot,
+.gl-plot {
+    .s-status-taking-snapshot & {
+        .c-control-bar {
+            display: none;
+        }
+        .gl-plot-y-label__select {
+            display: none;
+        }
+    }
+}
+
 .c-plot {
-    $p: $mainViewPad;
-    position: absolute;
-    top: $p; right: $p; bottom: $p; left: $p;
+    //$p: $mainViewPad;
+    @include abs($mainViewPad);
+    //position: absolute;
+    //top: $p; right: $p; bottom: $p; left: $p;
+
+    display: flex;
+    flex-direction: column;
+
+    > * + * {
+        margin-top: $interiorMargin;
+    }
+
+    .l-control-bar {
+        flex: 0 0 auto;
+    }
+
+    .l-view-section {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+    }
 
     &--stacked {
-        .l-view-section {
-            //  Make this a flex container
-            display: flex;
-            flex-flow: column nowrap;
-            .gl-plot.child-frame {
-                mct-plot {
-                    display: flex;
-                    flex: 1 1 auto;
-                    height: 100%;
-                    position: relative;
-                }
-                flex: 1 1 auto;
-                &:not(:first-child) {
-                    margin-top: $interiorMargin;
+        .child-frame {
+            .has-control-bar {
+                .c-control-bar {
+                    // Hides buttons per plot element in a stacked plot
+                    display: none;
                 }
             }
+
+            mct-plot {
+                display: flex;
+                flex: 1 1 auto;
+                height: 100%;
+                position: relative;
+            }
+            flex: 1 1 auto;
         }
 
         .s-status-timeconductor-unsynced .holder-plot {
@@ -70,7 +100,6 @@ mct-plot {
             }
         }
     }
-
 }
 
 
@@ -186,7 +215,7 @@ mct-plot {
             left: 0; top: 0; right: auto; bottom: 0;
             padding-left: 5px;
             text-orientation: mixed;
-            overflow: hidden;
+            //overflow: hidden;
             writing-mode: vertical-lr;
             &:before {
                 // Icon denoting configurability
@@ -339,11 +368,11 @@ mct-plot {
     z-index: -10;
 
     .l-view-section {
-        $m: $interiorMargin;
-        top: $m !important;
-        right: $m;
-        bottom: $m;
-        left: $m;
+        //$m: $interiorMargin;
+        //top: $m !important;
+        //right: $m;
+        //bottom: $m;
+        //left: $m;
 
         .s-status-timeconductor-unsynced .holder-plot {
             .t-object-alert.t-alert-unsynced {

src/styles/_legacy.scss

@@ -19,53 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******************************************************************* VIEWS */
-// From _views.scss
-// Legacy overlay and stacked plots depend on this for now
-// Styles for sub-dividing views generically
-.l-control-bar {
-    // Element that can be placed above l-view-section, holds controls, buttons, etc.
-    height: $controlBarH;
-}
-
-.c-control-bar {
-    display: flex;
-    align-items: center;
-
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
-
-    &__label {
-        display: inline-block;
-        white-space: nowrap;
-    }
-}
-
-.l-view-section {
-    @include abs();
-    overflow: auto;
-}
-
-.has-control-bar {
-    .l-view-section {
-        top: $controlBarH + $interiorMargin;
-    }
-}
-
-.child-frame {
-    .has-control-bar {
-        .l-control-bar,
-        .c-control-bar {
-            // Hides buttons per plot element in a stacked plot
-            display: none;
-        }
-        .l-view-section {
-            top: 0;
-        }
-    }
-}
-
 /*********************************************************************** CLOCKS AND TIMERS */
 .c-clock,
 .c-timer {

src/styles/notebook.scss

@@ -388,7 +388,21 @@
 .s-status-taking-snapshot,
 .overlay.snapshot {
     // Handle overflow-y issues with tables and html2canvas
+    background: $colorBodyBg; // Prevent html2canvas from using white background
+    color: $colorBodyFg;
+    padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image
+
     .l-sticky-headers .l-tabular-body { overflow: auto; }
+    .l-browse-bar {
+        display: none; // Suppress browse-bar when snapshotting from view-large overlay
+        + * {
+            margin-top: 0 !important; // Remove margin from any following elements
+        }
+    }
+
+    * {
+        box-shadow: none !important; // Prevent html2canvas problems with box-shadow
+    }
 }
 
 .c-notebook-snapshot {

src/ui/components/ObjectFrame.vue

@@ -59,6 +59,8 @@
 <script>
 import ObjectView from './ObjectView.vue'
 import ContextMenuDropDown from './contextMenuDropDown.vue';
+import PreviewHeader from '@/ui/preview/preview-header.vue';
+import Vue from 'vue';
 
 const SIMPLE_CONTENT_TYPES = [
     'clock',
@@ -116,13 +118,41 @@ export default {
                 childElement = parentElement.children[0];
 
             this.openmct.overlays.overlay({
-                element: childElement,
+                element: this.getOverlayElement(childElement),
                 size: 'large',
                 onDestroy() {
                     parentElement.append(childElement);
                 }
             });
         },
+        getOverlayElement(childElement) {
+            const fragment = new DocumentFragment();
+            const header = this.getPreviewHeader();
+            fragment.append(header);
+            fragment.append(childElement);
+
+            return fragment;
+        },
+        getPreviewHeader() {
+            const domainObject = this.objectPath[0];
+            const preview = new Vue({
+                components: {
+                    PreviewHeader
+                },
+                provide: {
+                    openmct: this.openmct,
+                    objectPath: this.objectPath
+                },
+                data() {
+                    return {
+                        domainObject
+                    }
+                },
+                template: '<PreviewHeader :domainObject="domainObject" :hideViewSwitcher="true" :showNotebookMenuSwitcher="true"></PreviewHeader>'
+            });
+
+            return preview.$mount().$el;
+        },
         getSelectionContext() {
             return this.$refs.objectView.getSelectionContext();
         }

src/ui/components/ObjectView.vue

@@ -201,7 +201,7 @@ export default {
         },
         initObjectStyles() {
             if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager((this.currentObject.configuration && this.currentObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this));
+                this.styleRuleManager = new StyleRuleManager((this.currentObject.configuration && this.currentObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this), true);
             } else {
                 this.styleRuleManager.updateObjectStyleConfig(this.currentObject.configuration && this.currentObject.configuration.objectStyles);
             }

src/ui/components/object-frame.scss

@@ -23,9 +23,12 @@
     }
 
     &:not(.c-so-view--no-frame) {
-        background: $colorBodyBg;
         border: $browseFrameBorder;
         padding: $interiorMargin;
+
+        .is-editing & {
+            background: rgba($colorBodyBg, 0.8);
+        }
     }
 
     &--no-frame {

src/ui/layout/BrowseBar.vue

@@ -36,6 +36,7 @@
         <!-- Action buttons -->
         <NotebookMenuSwitcher v-if="notebookEnabled"
                               :domain-object="domainObject"
+                              :object-path="openmct.router.path"
                               class="c-notebook-snapshot-menubutton"
         />
         <div class="l-browse-bar__actions">

src/ui/preview/Preview.vue

@@ -21,28 +21,12 @@
  *****************************************************************************/
 <template>
 <div class="l-preview-window">
-    <div class="l-browse-bar">
-        <div class="l-browse-bar__start">
-            <div
-                class="l-browse-bar__object-name--w"
-                :class="type.cssClass"
-            >
-                <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">
-            <div class="l-browse-bar__actions">
-                <view-switcher
-                    :views="views"
-                    :current-view="currentView"
-                    @setView="setView"
-                />
-            </div>
-        </div>
-    </div>
+    <PreviewHeader
+        :current-view="currentView"
+        :domain-object="domainObject"
+        :views="views"
+        @setView="setView"
+    />
     <div class="l-preview-window__object-view">
         <div ref="objectView"></div>
     </div>
@@ -50,13 +34,13 @@
 </template>
 
 <script>
-import ContextMenuDropDown from '../../ui/components/contextMenuDropDown.vue';
-import ViewSwitcher from '../../ui/layout/ViewSwitcher.vue';
+import PreviewHeader from './preview-header.vue';
+import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
+import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
 
 export default {
     components: {
-        ContextMenuDropDown,
-        ViewSwitcher
+        PreviewHeader
     },
     inject: [
         'openmct',
@@ -64,12 +48,9 @@ export default {
     ],
     data() {
         let domainObject = this.objectPath[0];
-        let type = this.openmct.types.get(domainObject.type);
 
         return {
             domainObject: domainObject,
-            type: type,
-            notebookEnabled: false,
             viewKey: undefined
         };
     },
@@ -90,6 +71,14 @@ export default {
     },
     destroyed() {
         this.view.destroy();
+        if (this.stopListeningStyles) {
+            this.stopListeningStyles();
+        }
+
+        if (this.styleRuleManager) {
+            this.styleRuleManager.destroy();
+            delete this.styleRuleManager;
+        }
     },
     methods: {
         clear() {
@@ -97,6 +86,7 @@ export default {
                 this.view.destroy();
                 this.$refs.objectView.innerHTML = '';
             }
+
             delete this.view;
             delete this.viewContainer;
         },
@@ -110,6 +100,46 @@ export default {
 
             this.view = this.currentView.view(this.domainObject, this.objectPath);
             this.view.show(this.viewContainer, false);
+            this.initObjectStyles();
+        },
+        initObjectStyles() {
+            if (!this.styleRuleManager) {
+                this.styleRuleManager = new StyleRuleManager((this.domainObject.configuration && this.domainObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this));
+            } else {
+                this.styleRuleManager.updateObjectStyleConfig(this.domainObject.configuration && this.domainObject.configuration.objectStyles);
+            }
+
+            if (this.stopListeningStyles) {
+                this.stopListeningStyles();
+            }
+
+            this.stopListeningStyles = this.openmct.objects.observe(this.domainObject, 'configuration.objectStyles', (newObjectStyle) => {
+                //Updating styles in the inspector view will trigger this so that the changes are reflected immediately
+                this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
+            });
+        },
+        updateStyle(styleObj) {
+            if (!styleObj) {
+                return;
+            }
+            let keys = Object.keys(styleObj);
+            keys.forEach(key => {
+                let firstChild = this.$refs.objectView.querySelector(':first-child');
+                if (firstChild) {
+                    if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('__no_value') > -1)) {
+                        if (firstChild.style[key]) {
+                            firstChild.style[key] = '';
+                        }
+                    } else {
+                        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);
+                        }
+                        firstChild.style[key] = styleObj[key];
+                    }
+                }
+            });
         }
     }
 }

src/ui/preview/PreviewAction.js

@@ -36,7 +36,12 @@ export default class PreviewAction {
          * Dependencies
          */
         this._openmct = openmct;
+
+        if (PreviewAction.isVisible === undefined) {
+            PreviewAction.isVisible = false;
+        }
     }
+
     invoke(objectPath) {
         let preview = new Vue({
             components: {
@@ -59,12 +64,19 @@ export default class PreviewAction {
                     callback: () => overlay.dismiss()
                 }
             ],
-            onDestroy: () => preview.$destroy()
+            onDestroy: () => {
+                PreviewAction.isVisible = false;
+                preview.$destroy()
+            }
         });
+
+        PreviewAction.isVisible = true;
     }
+
     appliesTo(objectPath) {
-        return !this._isNavigatedObject(objectPath) && !this._preventPreview(objectPath);
+        return !PreviewAction.isVisible && !this._isNavigatedObject(objectPath);
     }
+
     _isNavigatedObject(objectPath) {
         let targetObject = objectPath[0];
         let navigatedObject = this._openmct.router.path[0];

src/ui/preview/preview-header.vue

@@ -0,0 +1,92 @@
+<template>
+<div class="l-browse-bar">
+    <div class="l-browse-bar__start">
+        <div
+            class="l-browse-bar__object-name--w"
+            :class="type.cssClass"
+        >
+            <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">
+        <div class="l-browse-bar__actions">
+            <view-switcher
+                :v-if="!hideViewSwitcher"
+                :views="views"
+                :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>
+</template>
+
+
+<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',
+        'objectPath'
+    ],
+    components: {
+        ContextMenuDropDown,
+        NotebookMenuSwitcher,
+        ViewSwitcher
+    },
+    props: {
+        currentView: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        domainObject: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        hideViewSwitcher: {
+            type: Boolean,
+            default: () => {
+                return false;
+            }
+        },
+        showNotebookMenuSwitcher: {
+            type: Boolean,
+            default: () => {
+                return false;
+            }
+        },
+        views: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        }
+    },
+    data() {
+        return {
+            type: this.openmct.types.get(this.domainObject.type)
+        };
+    },
+    methods: {
+        setView(view) {
+            this.$emit('setView', view);
+        }
+    }
+}
+</script>