[Time] Conductors and API Enhancements (#6768)

* Fixed #4975 - Compact Time Conductor styling
* Fixed #5773 - Ubiquitous global clock
* Mode functionality added to TimeAPI
* TimeAPI modified to always have a ticking clock
* Mode dropdown added to independent and regular time conductors
* Overall conductor appearance modifications and enhancements
* TimeAPI methods deprecated with warnings
* Significant updates to markup, styling and behavior of main Time Conductor and independent version.


---------

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
Co-authored-by: Shefali <simplyrender@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
Co-authored-by: Scott Bell <scott@traclabs.com>

src/ui/layout/BrowseBar.vue

@@ -49,6 +49,15 @@
     </div>
 
     <div class="l-browse-bar__end">
+      <div
+        v-if="supportsIndependentTime"
+        class="c-conductor-holder--compact l-shell__main-independent-time-conductor"
+      >
+        <independent-time-conductor
+          :domain-object="domainObject"
+          :object-path="openmct.router.path"
+        />
+      </div>
       <ViewSwitcher v-if="!isEditing" :current-view="currentView" :views="views" />
       <!-- Action buttons -->
       <NotebookMenuSwitcher
@@ -130,12 +139,21 @@
 <script>
 import ViewSwitcher from './ViewSwitcher.vue';
 import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
+import IndependentTimeConductor from '@/plugins/timeConductor/independent/IndependentTimeConductor.vue';
 import tooltipHelpers from '../../api/tooltips/tooltipMixins';
 
+const SupportedViewTypes = [
+  'plot-stacked',
+  'plot-overlay',
+  'bar-graph.view',
+  'time-strip.view',
+  'example.imagery'
+];
 const PLACEHOLDER_OBJECT = {};
 
 export default {
   components: {
+    IndependentTimeConductor,
     NotebookMenuSwitcher,
     ViewSwitcher
   },
@@ -226,6 +244,11 @@ export default {
       } else {
         return 'Unlocked for editing - click to lock.';
       }
+    },
+    supportsIndependentTime() {
+      const viewKey = this.getViewKey();
+
+      return this.domainObject && SupportedViewTypes.includes(viewKey);
     }
   },
   watch: {
@@ -300,6 +323,14 @@ export default {
     edit() {
       this.openmct.editor.edit();
     },
+    getViewKey() {
+      let viewKey = this.viewKey;
+      if (this.objectViewKey) {
+        viewKey = this.objectViewKey;
+      }
+
+      return viewKey;
+    },
     promptUserandCancelEditing() {
       let dialog = this.openmct.overlays.dialog({
         iconClass: 'alert',

src/ui/layout/layout.scss

@@ -289,17 +289,6 @@
     flex: 1 1 auto !important;
   }
 
-  &__time-conductor {
-    border-top: 1px solid $colorInteriorBorder;
-    display: flex;
-    flex-direction: column;
-    padding-top: $interiorMargin;
-
-    > * + * {
-      margin-top: $interiorMargin;
-    }
-  }
-
   &__main {
     > .l-pane {
       padding: nth($shellPanePad, 1) 0;
@@ -383,10 +372,10 @@
   align-items: center;
   justify-content: space-between;
 
-  [class*='__'] {
-    // Removes extraneous horizontal white space
-    display: inline-flex;
-  }
+  //[class*="__"] {
+  //    // Removes extraneous horizontal white space
+  //    display: inline-flex;
+  //}
 
   > * + * {
     margin-left: $interiorMarginSm;