- Now uses Watch instead of Update to handle changes from containing AppLayout.vue component.

- Code cleanup, console.log removals.

src/ui/layout/AppLayout.vue

@@ -40,8 +40,8 @@
       <CreateButton class="l-shell__create-button" />
       <GrandSearch ref="grand-search" />
       <StatusIndicators
-        :listen-for-overflow="!indicatorsMultiline"
+        :head-expanded="headExpanded"
-        :content-updated="headExpanded || indicatorsMultiline"
+        :indicators-multiline="indicatorsMultiline"
         @indicators-overflowing="indicatorsOverflowUpdate"
       />
       <button
@@ -282,13 +282,13 @@ export default {
     },
     toggleShellHead() {
       this.headExpanded = !this.headExpanded;
-      this.setLocalStorage();
+      this.setLocalStorageShellHead();
     },
     toggleIndicatorsMultiline() {
       this.indicatorsMultiline = !this.indicatorsMultiline;
-      this.setLocalStorage();
+      this.setLocalStorageShellHead();
     },
-    setLocalStorage() {
+    setLocalStorageShellHead() {
       window.localStorage.setItem(
         'openmct-shell-head',
         JSON.stringify({
@@ -346,7 +346,6 @@ export default {
       this.disableClearButton = isDisabled;
     },
     indicatorsOverflowUpdate(isOverflowing) {
-      console.log('indicatorsOverflowUpdate', isOverflowing);
       this.indicatorsOverflowing = isOverflowing;
     }
   }

src/ui/layout/status-bar/StatusIndicators.vue

@@ -33,16 +33,13 @@ import { shallowRef } from 'vue';
 export default {
   inject: ['openmct'],
   props: {
-    contentUpdated: {
+    headExpanded: {
-      type: String,
+      type: Boolean,
       required: true
     },
-    listenForOverflow: {
+    indicatorsMultiline: {
       type: Boolean,
-      required: false,
+      required: true
-      default() {
-        return false;
-      }
     }
   },
   emits: ['indicators-overflowing'],
@@ -60,34 +57,30 @@ export default {
       return [...this.indicators].sort((a, b) => b.value.priority - a.value.priority);
     }
   },
-  // watch: {
+  watch: {
-  //   contentUpdated() {
+    headExpanded() {
-  //     console.log('content updated');
+      this.checkOverflowNextTick();
-  //     this.checkOverflow();
+    },
-  //   }
+    indicatorsMultiline() {
-  // },
+      if (!this.indicatorsMultiline) {
+        window.addEventListener('resize', this.checkOverflow);
+      } else {
+        window.removeEventListener('resize', this.checkOverflow);
+      }
+      this.checkOverflowNextTick();
+    }
+  },
   mounted() {
-    if (this.listenForOverflow) {
+    if (!this.indicatorsMultiline) {
+      // `load` listener is necessary because the width of the Indicators has to be eval'd after other components have loaded.
       window.addEventListener('load', this.checkOverflow);
       window.addEventListener('resize', this.checkOverflow);
     }
   },
   beforeUnmount() {
     this.openmct.indicators.off('addIndicator', this.addIndicator);
-    if (this.listenForOverflow) {
+    window.removeEventListener('load', this.checkOverflow);
-      window.removeEventListener('load', this.checkOverflow);
+    window.removeEventListener('resize', this.checkOverflow);
-      window.removeEventListener('resize', this.checkOverflow);
-    }
-  },
-  updated() {
-    // console.log('updated');
-    if (this.listenForOverflow) {
-      window.addEventListener('resize', this.checkOverflow);
-      this.checkOverflow();
-    } else {
-      window.removeEventListener('resize', this.checkOverflow);
-      this.checkOverflow();
-    }
   },
   created() {
     this.openmct.indicators.on('addIndicator', this.addIndicator);
@@ -99,6 +92,11 @@ export default {
     checkOverflow() {
       const element = this.$refs.indicators;
       this.$emit('indicators-overflowing', element.scrollWidth > element.clientWidth);
+    },
+    checkOverflowNextTick() {
+      this.$nextTick(() => {
+        this.checkOverflow();
+      });
     }
   }
 };