From 89e8ed310e333b6fb99b87c8821cdcd53514fee3 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Fri, 27 Sep 2024 14:21:36 -0700
Subject: [PATCH] use `resizeObserver` instead of window listeners safer access
 to `localStorage` initial state ie. legacy localStorage having `expanded` but
 not `multiline`

---
 src/ui/layout/AppLayout.vue                   | 169 +++++++++++++-----
 src/ui/layout/layout.scss                     |   4 -
 src/ui/layout/status-bar/StatusIndicators.vue |  49 +----
 3 files changed, 129 insertions(+), 93 deletions(-)

diff --git a/src/ui/layout/AppLayout.vue b/src/ui/layout/AppLayout.vue
index 3f6cac8b0a..5cb2611c67 100644
--- a/src/ui/layout/AppLayout.vue
+++ b/src/ui/layout/AppLayout.vue
@@ -33,22 +33,17 @@
       :class="{
         'l-shell__head--expanded': headExpanded,
         'l-shell__head--minify-indicators': !headExpanded,
-        'l-shell__head--indicators-single-line': !indicatorsMultiline,
-        '--indicators-overflowing': indicatorsOverflowing
+        'l-shell__head--indicators-single-line': !indicatorsMultiline
       }"
     >
       <CreateButton class="l-shell__create-button" />
       <GrandSearch ref="grand-search" />
-      <StatusIndicators
-        :head-expanded="headExpanded"
-        :indicators-multiline="indicatorsMultiline"
-        @indicators-overflowing="indicatorsOverflowUpdate"
-      />
+      <StatusIndicators ref="indicatorsComponent" />
       <button
         class="l-shell__head__button"
-        :class="[indicatorsMultilineCssClass, indicatorsOverflowingCssClass]"
-        :aria-label="`Display as ${indicatorsMultiline ? 'single line' : 'multiple lines'}`"
-        :title="`Display as ${indicatorsMultiline ? 'single line' : 'multiple lines'}`"
+        :class="indicatorsMultilineCssClass"
+        :aria-label="indicatorsMultilineLabel"
+        :title="indicatorsMultilineLabel"
         @click="toggleIndicatorsMultiline"
       ></button>
       <button
@@ -176,6 +171,8 @@
 </template>
 
 <script>
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+
 import ObjectView from '../components/ObjectView.vue';
 import Inspector from '../inspector/InspectorPanel.vue';
 import Toolbar from '../toolbar/ToolbarContainer.vue';
@@ -190,6 +187,10 @@ import GrandSearch from './search/GrandSearch.vue';
 import NotificationBanner from './status-bar/NotificationBanner.vue';
 import StatusIndicators from './status-bar/StatusIndicators.vue';
 
+const SHELL_HEAD_LOCAL_STORAGE_KEY = 'openmct-shell-head';
+const DEFAULT_HEAD_EXPANDED = true;
+const DEFAULT_INDICATORS_MULTILINE = true;
+
 export default {
   components: {
     Inspector,
@@ -207,15 +208,120 @@ export default {
     RecentObjectsList
   },
   inject: ['openmct'],
-  data: function () {
-    let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
-    let headExpanded = true;
-    let indicatorsMultiline = true;
-    if (storedHeadProps) {
-      headExpanded = JSON.parse(storedHeadProps).expanded;
-      indicatorsMultiline = JSON.parse(storedHeadProps).multiline;
+  setup() {
+    let resizeObserver;
+    let element;
+
+    const storedHeadProps = localStorage.getItem(SHELL_HEAD_LOCAL_STORAGE_KEY);
+    const storedHeadPropsObject = JSON.parse(storedHeadProps);
+    const storedHeadExpanded = storedHeadPropsObject?.expanded;
+    const storedIndicatorsMultiline = storedHeadPropsObject?.multiline;
+
+    // template ref of StatusIndicators component
+    const indicatorsComponent = ref(null);
+
+    const width = ref(null);
+    const scrollWidth = ref(null);
+    const headExpanded = ref(storedHeadExpanded ?? DEFAULT_HEAD_EXPANDED);
+    const indicatorsMultiline = ref(storedIndicatorsMultiline ?? DEFAULT_INDICATORS_MULTILINE);
+
+    const isOverflowing = computed(() => scrollWidth.value > width.value);
+    const indicatorsMultilineCssClass = computed(() => {
+      const multilineClass = indicatorsMultiline.value ? 'icon-singleline' : 'icon-multiline';
+      const overflowingClass =
+        isOverflowing.value && !indicatorsMultiline.value
+          ? 'c-button c-button--major'
+          : 'c-icon-button';
+      return `${multilineClass} ${overflowingClass}`;
+    });
+    const indicatorsMultilineLabel = computed(() => {
+      return `Display as ${indicatorsMultiline.value ? 'single line' : 'multiple lines'}`;
+    });
+
+    const initialHeadProps = JSON.stringify({
+      expanded: headExpanded.value,
+      multiline: indicatorsMultiline.value
+    });
+
+    if (initialHeadProps !== storedHeadProps) {
+      localStorage.setItem(SHELL_HEAD_LOCAL_STORAGE_KEY, initialHeadProps);
     }
 
+    onMounted(() => {
+      resizeObserver = new ResizeObserver((entries) => {
+        width.value = entries[0].target.clientWidth;
+        scrollWidth.value = entries[0].target.scrollWidth;
+      });
+
+      // indicatorsContainer is a template ref inside of indicatorsComponent
+      element = indicatorsComponent.value.$refs.indicatorsContainer;
+
+      if (!indicatorsMultiline.value) {
+        observeIndicatorsOverflow();
+      }
+    });
+
+    onUnmounted(() => {
+      resizeObserver.disconnect();
+    });
+
+    function observeIndicatorsOverflow() {
+      resizeObserver.observe(element);
+    }
+
+    function unObserveIndicatorsOverflow() {
+      resizeObserver.unobserve(element);
+    }
+
+    function checkIndicatorsElementWidths() {
+      if (!indicatorsMultiline.value) {
+        width.value = element.clientWidth;
+        scrollWidth.value = element.scrollWidth;
+      }
+    }
+
+    async function toggleShellHead() {
+      headExpanded.value = !headExpanded.value;
+      setLocalStorageShellHead();
+
+      // nextTick is used because the element width on toggle is updated using css
+      await nextTick();
+      checkIndicatorsElementWidths();
+    }
+
+    function toggleIndicatorsMultiline() {
+      indicatorsMultiline.value = !indicatorsMultiline.value;
+      setLocalStorageShellHead();
+
+      if (indicatorsMultiline.value) {
+        unObserveIndicatorsOverflow();
+      } else {
+        observeIndicatorsOverflow();
+      }
+    }
+
+    function setLocalStorageShellHead() {
+      localStorage.setItem(
+        SHELL_HEAD_LOCAL_STORAGE_KEY,
+        JSON.stringify({
+          expanded: headExpanded.value,
+          multiline: indicatorsMultiline.value
+        })
+      );
+    }
+
+    return {
+      indicatorsComponent,
+      isOverflowing,
+      headExpanded,
+      indicatorsMultiline,
+      indicatorsMultilineCssClass,
+      indicatorsMultilineLabel,
+      toggleIndicatorsMultiline,
+      toggleShellHead
+    };
+  },
+  data() {
     return {
       fullScreen: false,
       conductorComponent: undefined,
@@ -224,9 +330,6 @@ export default {
       actionCollection: undefined,
       triggerSync: false,
       triggerReset: false,
-      headExpanded,
-      indicatorsMultiline,
-      indicatorsOverflowing: false,
       isResizing: false,
       disableClearButton: false
     };
@@ -237,12 +340,6 @@ export default {
     },
     resizingClass() {
       return this.isResizing ? 'l-shell__resizing' : '';
-    },
-    indicatorsMultilineCssClass() {
-      return this.indicatorsMultiline ? 'icon-singleline' : 'icon-multiline';
-    },
-    indicatorsOverflowingCssClass() {
-      return this.indicatorsOverflowing ? 'c-button c-button--major' : 'c-icon-button';
     }
   },
   mounted() {
@@ -280,23 +377,6 @@ export default {
         document.msExitFullscreen();
       }
     },
-    toggleShellHead() {
-      this.headExpanded = !this.headExpanded;
-      this.setLocalStorageShellHead();
-    },
-    toggleIndicatorsMultiline() {
-      this.indicatorsMultiline = !this.indicatorsMultiline;
-      this.setLocalStorageShellHead();
-    },
-    setLocalStorageShellHead() {
-      window.localStorage.setItem(
-        'openmct-shell-head',
-        JSON.stringify({
-          expanded: this.headExpanded,
-          multiline: this.indicatorsMultiline
-        })
-      );
-    },
     fullScreenToggle() {
       if (this.fullScreen) {
         this.fullScreen = false;
@@ -344,9 +424,6 @@ export default {
     },
     setClearButtonDisabled(isDisabled) {
       this.disableClearButton = isDisabled;
-    },
-    indicatorsOverflowUpdate(isOverflowing) {
-      this.indicatorsOverflowing = isOverflowing;
     }
   }
 };
diff --git a/src/ui/layout/layout.scss b/src/ui/layout/layout.scss
index dc88692df6..237c772124 100644
--- a/src/ui/layout/layout.scss
+++ b/src/ui/layout/layout.scss
@@ -274,10 +274,6 @@
         margin-left: auto; // Mimics justify-content: flex-end when in single line mode.
       }
     }
-
-    &.--is-overflowing {
-      background: rgba(deeppink, 0.1);
-    }
   }
 
   /******************************* MAIN AREA */
diff --git a/src/ui/layout/status-bar/StatusIndicators.vue b/src/ui/layout/status-bar/StatusIndicators.vue
index 080809bf53..53c08d38d5 100644
--- a/src/ui/layout/status-bar/StatusIndicators.vue
+++ b/src/ui/layout/status-bar/StatusIndicators.vue
@@ -17,7 +17,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div ref="indicators" class="l-shell__head-section l-shell__indicators">
+  <div ref="indicatorsContainer" class="l-shell__head-section l-shell__indicators">
     <component
       :is="indicator.value.vueComponent"
       v-for="indicator in sortedIndicators"
@@ -28,21 +28,15 @@
 </template>
 
 <script>
-import { shallowRef } from 'vue';
+import { defineExpose, ref, shallowRef } from 'vue';
 
 export default {
   inject: ['openmct'],
-  props: {
-    headExpanded: {
-      type: Boolean,
-      required: true
-    },
-    indicatorsMultiline: {
-      type: Boolean,
-      required: true
-    }
+  setup() {
+    const indicatorsContainer = ref(null);
+
+    defineExpose({ indicatorsContainer });
   },
-  emits: ['indicators-overflowing'],
   data() {
     return {
       indicators: this.openmct.indicators.getIndicatorObjectsByPriority().map(shallowRef)
@@ -57,30 +51,8 @@ export default {
       return [...this.indicators].sort((a, b) => b.value.priority - a.value.priority);
     }
   },
-  watch: {
-    headExpanded() {
-      this.checkOverflowNextTick();
-    },
-    indicatorsMultiline() {
-      if (!this.indicatorsMultiline) {
-        window.addEventListener('resize', this.checkOverflow);
-      } else {
-        window.removeEventListener('resize', this.checkOverflow);
-      }
-      this.checkOverflowNextTick();
-    }
-  },
-  mounted() {
-    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);
-    window.removeEventListener('load', this.checkOverflow);
-    window.removeEventListener('resize', this.checkOverflow);
   },
   created() {
     this.openmct.indicators.on('addIndicator', this.addIndicator);
@@ -88,15 +60,6 @@ export default {
   methods: {
     addIndicator(indicator) {
       this.indicators.push(shallowRef(indicator));
-    },
-    checkOverflow() {
-      const element = this.$refs.indicators;
-      this.$emit('indicators-overflowing', element.scrollWidth > element.clientWidth);
-    },
-    checkOverflowNextTick() {
-      this.$nextTick(() => {
-        this.checkOverflow();
-      });
     }
   }
 };