Address review comments:

Fixes telemetry view visibility and styling issue
Removes none option for border and background styles for drawing objects

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

@@ -33,6 +33,7 @@
                 <style-editor class="c-inspect-styles__editor"
                               :style-item="staticStyle"
                               :is-editing="isEditing"
+                              :prevent-none="preventNone"
                               @persist="updateStaticStyle"
                 />
             </div>
@@ -105,7 +106,7 @@ import ConditionDescription from "@/plugins/condition/components/ConditionDescri
 import ConditionError from "@/plugins/condition/components/ConditionError.vue";
 import Vue from 'vue';
 import PreviewAction from "@/ui/preview/PreviewAction.js";
-import { getStyleProp } from "@/plugins/condition/utils/styleUtils";
+import {getInitialStyleForItem} from "@/plugins/condition/utils/styleUtils";
 
 export default {
     name: 'ConditionalStylesView',
@@ -126,15 +127,8 @@ export default {
             isEditing: this.openmct.editor.isEditing(),
             conditions: undefined,
             conditionsLoaded: false,
-            navigateToPath: ''
+            navigateToPath: '',
-        }
+            preventNone: false
-    },
-    watch: {
-        domainObject: {
-            handler(newDomainObject) {
-                this.domainObject = newDomainObject;
-            },
-            deep: true
         }
     },
     destroyed() {
@@ -143,13 +137,7 @@ export default {
         }
     },
     mounted() {
-        this.canHide = false;
         this.itemId = '';
-        this.initialStyles = this.getStyleProperties({
-            fill: 'transparent',
-            stroke: 'transparent',
-            color: 'transparent'
-        });
         this.getDomainObjectFromSelection();
         this.previewAction = new PreviewAction(this.openmct);
         if (this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
@@ -165,44 +153,40 @@ export default {
         this.openmct.editor.on('isEditing', this.setEditState);
     },
     methods: {
-        getStyleProperties(item) {
+        isItemType(type, item) {
-            let styleProps = {};
+            return item && (item.type === type);
-            Object.keys(item).forEach((key) => {
+        },
-                Object.assign(styleProps, getStyleProp(key, item[key]));
+        isDrawingItem(item) {
-            });
+            return !this.isItemType('subobject-view', item) && !this.isItemType('telemetry-view', item);
-            return styleProps;
         },
         getDomainObjectFromSelection() {
+            let layoutItem;
             let domainObject;
 
             if (this.selection[0].length > 1) {
                 //If there are more than 1 items in the this.selection[0] list, the first one could either be a sub domain object OR a layout drawing control.
                 //The second item in the this.selection[0] list is the container object (usually a layout)
-                let layoutItem = this.selection[0][0].context.layoutItem;
+                layoutItem = this.selection[0][0].context.layoutItem;
                 const item = this.selection[0][0].context.item;
                 this.canHide = true;
-                if (layoutItem && (layoutItem.type === 'subobject-view')) {
+                if (item && this.isItemType('subobject-view', layoutItem)) {
                     domainObject = item;
                 } else {
                     domainObject = this.selection[0][1].context.item;
-                    if (!item) {
+                    this.itemId = layoutItem.id;
-                        //if this isn't a sub-object
+                    this.preventNone = this.isDrawingItem(layoutItem);
-                        this.initialStyles = {};
-                        this.initialStyles = this.getStyleProperties(layoutItem);
-                        this.itemId = layoutItem.id;
-                    } else {
-                        layoutItem = Object.assign({}, { id: this.selection[0][0].context.layoutItem.id }, item);
-                        this.itemId = layoutItem.id;
-                    }
                 }
             } else {
                 domainObject = this.selection[0][0].context.item;
             }
             this.domainObject = domainObject;
+            this.initialStyles = getInitialStyleForItem(domainObject, layoutItem);
             if (this.stopObserving) {
                 this.stopObserving();
             }
-            this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
+            if (this.domainObject) {
+                this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
+            }
         },
         initialize(conditionSetDomainObject) {
             //If there are new conditions in the conditionSet we need to set those styles to default

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

@@ -24,7 +24,7 @@
 <div class="c-style">
     <span class="c-style-thumb"
           :class="{ 'is-style-invisible': styleItem.style.isStyleInvisible }"
-          :style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : styleItem.style ]"
+          :style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
     >
         <span class="c-style-thumb__text"
               :class="{ 'hide-nice': !styleItem.style.color }"
@@ -33,27 +33,27 @@
         </span>
     </span>
     <span class="c-toolbar">
-        <toolbar-color-picker v-if="styleItem.style.border"
+        <toolbar-color-picker v-if="hasProperty(styleItem.style.border)"
                               class="c-style__toolbar-button--border-color u-menu-to--center"
                               :options="borderColorOption"
                               @change="updateStyleValue"
         />
-        <toolbar-color-picker v-if="styleItem.style.backgroundColor"
+        <toolbar-color-picker v-if="hasProperty(styleItem.style.backgroundColor)"
                               class="c-style__toolbar-button--background-color u-menu-to--center"
                               :options="backgroundColorOption"
                               @change="updateStyleValue"
         />
-        <toolbar-color-picker v-if="styleItem.style.color"
+        <toolbar-color-picker v-if="hasProperty(styleItem.style.color)"
                               class="c-style__toolbar-button--color u-menu-to--center"
                               :options="colorOption"
                               @change="updateStyleValue"
         />
-        <toolbar-button v-if="styleItem.style.imageUrl !== undefined"
+        <toolbar-button v-if="hasProperty(styleItem.style.imageUrl)"
                         class="c-style__toolbar-button--image-url"
                         :options="imageUrlOption"
                         @change="updateStyleValue"
         />
-        <toolbar-toggle-button v-if="styleItem.style.isStyleInvisible !== undefined"
+        <toolbar-toggle-button v-if="hasProperty(styleItem.style.isStyleInvisible)"
                                class="c-style__toolbar-button--toggle-visible"
                                :options="isStyleInvisibleOption"
                                @change="updateStyleValue"
@@ -83,35 +83,51 @@ export default {
         isEditing: {
             type: Boolean
         },
+        preventNone: {
+            type: Boolean
+        },
         styleItem: {
             type: Object,
             required: true
         }
     },
     computed: {
+        itemStyle() {
+            let style = {};
+            const keys = Object.keys(this.styleItem.style);
+            keys.forEach(key => {
+                style[key] = this.normalizeValue(this.styleItem.style[key]);
+            });
+            return style;
+        },
         borderColorOption() {
+            let value = this.styleItem.style.border.replace('1px solid ', '');
             return {
                 icon: 'icon-line-horz',
                 title: STYLE_CONSTANTS.borderColorTitle,
-                value: this.styleItem.style.border.replace('1px solid ', ''),
+                value: this.normalizeValue(value),
                 property: 'border',
-                isEditing: this.isEditing
+                isEditing: this.isEditing,
+                preventNone: this.preventNone
             }
         },
         backgroundColorOption() {
+            let value = this.styleItem.style.backgroundColor;
             return {
                 icon: 'icon-paint-bucket',
                 title: STYLE_CONSTANTS.backgroundColorTitle,
-                value: this.styleItem.style.backgroundColor,
+                value: this.normalizeValue(value),
                 property: 'backgroundColor',
-                isEditing: this.isEditing
+                isEditing: this.isEditing,
+                preventNone: this.preventNone
             }
         },
         colorOption() {
+            let value = this.styleItem.style.color;
             return {
                 icon: 'icon-font',
                 title: STYLE_CONSTANTS.textColorTitle,
-                value: this.styleItem.style.color,
+                value: this.normalizeValue(value),
                 property: 'color',
                 isEditing: this.isEditing
             }
@@ -138,7 +154,8 @@ export default {
                 property: 'imageUrl',
                 formKeys: ['url'],
                 value: {url: this.styleItem.style.imageUrl},
-                isEditing: this.isEditing
+                isEditing: this.isEditing,
+                preventNone: this.preventNone
             }
         },
         isStyleInvisibleOption() {
@@ -146,6 +163,7 @@ export default {
                 value: this.styleItem.style.isStyleInvisible,
                 property: 'isStyleInvisible',
                 isEditing: this.isEditing,
+                preventNone: this.preventNone,
                 options: [
                     {
                         value: '',
@@ -163,6 +181,15 @@ export default {
         }
     },
     methods: {
+        hasProperty(property) {
+            return property !== undefined;
+        },
+        normalizeValue(value) {
+            if (!value) {
+                return 'transparent';
+            }
+            return value;
+        },
         updateStyleValue(value, item) {
             if (item.property === 'border') {
                 value = '1px solid ' + value;

src/plugins/condition/utils/styleUtils.js

@@ -19,27 +19,81 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+const NONE_VALUE = 'transparent';
 
-export const getStyleProp = (key, defaultValue) => {
+const styleProps = {
-    let styleProp = undefined;
+    backgroundColor: {
-    switch(key) {
+        svgProperty: 'fill',
-    case 'fill': styleProp = {
+        noneValue: NONE_VALUE,
-        backgroundColor: defaultValue || 'transparent'
+        applicableForType: type => {
-    };
+            return !type ? true : (type === 'text-view' ||
-        break;
+                                      type === 'telemetry-view' ||
-    case 'stroke': styleProp = {
+                                      type === 'box-view' ||
-        border: '1px solid ' + (defaultValue || 'transparent')
+                                      type === 'subobject-view');
-    };
+        }
-        break;
+    },
-    case 'color': styleProp = {
+    border: {
-        color: defaultValue || 'transparent'
+        svgProperty: 'stroke',
-    };
+        noneValue: NONE_VALUE,
-        break;
+        applicableForType: type => {
-    case 'url': styleProp = {
+            return !type ? true : (type === 'text-view' ||
-        imageUrl: defaultValue || 'transparent'
+                                            type === 'telemetry-view' ||
-    };
+                                            type === 'box-view' ||
-        break;
+                                            type === 'image-view' ||
+                                            type === 'line-view'||
+                                            type === 'subobject-view');
+        }
+    },
+    color: {
+        svgProperty: 'color',
+        noneValue: 'NONE_VALUE',
+        applicableForType: type => {
+            return !type ? true : (type === 'text-view' ||
+                                    type === 'telemetry-view'||
+                                    type === 'subobject-view');
+        }
+    },
+    imageUrl: {
+        svgProperty: 'url',
+        noneValue: '',
+        applicableForType: type => {
+            return !type ? false : type === 'image-view';
+        }
     }
-
+};
-    return styleProp;
+
+const getStaticStyleForItem = (domainObject, id) => {
+    let domainObjectStyles = domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
+    if (domainObjectStyles) {
+        if (id && domainObjectStyles[id] && domainObjectStyles[id].staticStyle) {
+            return domainObjectStyles[id].staticStyle.style;
+        } else if (domainObjectStyles.staticStyle) {
+            return domainObjectStyles.staticStyle.style;
+        }
+    }
+};
+
+//Returns either existing static styles or uses SVG defaults if available
+export const getInitialStyleForItem = (domainObject, item) => {
+    const type = item && item.type;
+    const id = item && item.id;
+    let style = {};
+
+    let staticStyle = getStaticStyleForItem(domainObject, id);
+
+    const properties = Object.keys(styleProps);
+    properties.forEach(property => {
+        const styleProp = styleProps[property];
+        if (styleProp.applicableForType(type)) {
+            let defaultValue;
+            if (staticStyle) {
+                defaultValue = staticStyle[property];
+            } else if (item) {
+                defaultValue = item[styleProp.svgProperty];
+            }
+            style[property] = defaultValue === undefined ? styleProp.noneValue : defaultValue;
+        }
+    });
+
+    return style;
 };

src/plugins/displayLayout/components/TelemetryView.vue

@@ -30,7 +30,8 @@
     <div
         v-if="domainObject"
         class="c-telemetry-view"
-        :style="styleObject"
+        :class="styleClass"
+        :style="telemetryObjectStyle || styleObject"
         @contextmenu.prevent="showContextMenu"
     >
         <div
@@ -48,8 +49,7 @@
             v-if="showValue"
             :title="fieldName"
             class="c-telemetry-view__value"
-            :class="[telemetryClass, !telemetryClass && styleClass]"
+            :class="[telemetryClass]"
-            :style="!telemetryClass && telemetryObjectStyle"
         >
             <div class="c-telemetry-view__value-text">
                 {{ telemetryValue }}
@@ -135,7 +135,7 @@ export default {
             }
         },
         styleClass() {
-            return this.telemetryObjectStyle && !!this.telemetryObjectStyle.isStyleInvisible;
+            return this.telemetryObjectStyle && this.telemetryObjectStyle.isStyleInvisible;
         },
         telemetryObjectStyle() {
             let styleObj = Object.assign({}, this.itemStyle);