center image properly

example/imagery/plugin.js

@@ -49,10 +49,6 @@ define([
         ];
         const IMAGE_DELAY = 20000;
 
-        function getCompassValues(min, max) {
-            return min + Math.random() * (max - min);
-        }
-
         function pointForTimestamp(timestamp, name) {
             const url = IMAGE_SAMPLES[Math.floor(timestamp / IMAGE_DELAY) % IMAGE_SAMPLES.length];
             const urlItems = url.split('/');
@@ -63,9 +59,6 @@ define([
                 utc: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
                 local: Math.floor(timestamp / IMAGE_DELAY) * IMAGE_DELAY,
                 url,
-                sunOrientation: getCompassValues(0, 360),
-                cameraPan: getCompassValues(0, 360),
-                heading: getCompassValues(0, 360),
                 imageDownloadName
             };
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.7.5",
+  "version": "1.7.4",
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {

platform/features/clock/bundle.js

@@ -181,7 +181,7 @@ define([
                         ],
                         "category": "contextual",
                         "name": "Stop",
-                        "cssClass": "icon-box-round-corners",
+                        "cssClass": "icon-box",
                         "priority": "preferred"
                     }
                 ],

platform/features/clock/test/controllers/TimerControllerSpec.js

@@ -101,7 +101,7 @@ define(
                     name: "Pause"
                 });
                 mockStop.getMetadata.and.returnValue({
-                    cssClass: "icon-box-round-corners",
+                    cssClass: "icon-box",
                     name: "Stop"
                 });
                 mockScope.domainObject = mockDomainObject;

src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js

@@ -45,7 +45,6 @@ export default class URLTimeSettingsSynchronizer {
     }
 
     initialize() {
-        this.updateTimeSettings();
         this.openmct.router.on('change:params', this.updateTimeSettings);
 
         TIME_EVENTS.forEach(event => {

src/plugins/condition/Condition.js

@@ -138,7 +138,7 @@ export default class Condition extends EventEmitter {
     }
 
     updateCriteria(criterionConfigurations) {
-        this.destroyCriteria(true);
+        this.destroyCriteria();
         this.createCriteria(criterionConfigurations);
     }
 
@@ -204,7 +204,7 @@ export default class Condition extends EventEmitter {
         }
     }
 
-    destroyCriterion(id, isRemoved) {
+    destroyCriterion(id) {
         let found = this.findCriterion(id);
         if (found) {
             let criterion = found.item;
@@ -216,9 +216,7 @@ export default class Condition extends EventEmitter {
             });
             criterion.destroy();
             this.criteria.splice(found.index, 1);
-            if (isRemoved) {
-                this.updateDescription();
-            }
+            this.updateDescription();
 
             return true;
         }
@@ -311,17 +309,17 @@ export default class Condition extends EventEmitter {
         return this.criteria;
     }
 
-    destroyCriteria(isRemoved) {
+    destroyCriteria() {
         let success = true;
         //looping through the array backwards since destroyCriterion modifies the criteria array
         for (let i = this.criteria.length - 1; i >= 0; i--) {
-            success = success && this.destroyCriterion(this.criteria[i].id, isRemoved);
+            success = success && this.destroyCriterion(this.criteria[i].id);
         }
 
         return success;
     }
 
-    destroy(isRemoved) {
-        this.destroyCriteria(isRemoved);
+    destroy() {
+        this.destroyCriteria();
     }
 }

src/plugins/condition/ConditionManager.js

@@ -41,7 +41,7 @@ export default class ConditionManager extends EventEmitter {
         this.subscriptions = {};
         this.telemetryObjects = {};
         this.testData = {
-            conditionTestInputs: this.conditionSetDomainObject.configuration.conditionTestData,
+            conditionTestData: [],
             applied: false
         };
         this.initialize();
@@ -154,10 +154,8 @@ export default class ConditionManager extends EventEmitter {
 
     updateConditionDescription(condition) {
         const found = this.conditionSetDomainObject.configuration.conditionCollection.find(conditionConfiguration => (conditionConfiguration.id === condition.id));
-        if (found.summary !== condition.description) {
-            found.summary = condition.description;
-            this.persistConditions();
-        }
+        found.summary = condition.description;
+        this.persistConditions();
     }
 
     initCondition(conditionConfiguration, index) {
@@ -227,7 +225,7 @@ export default class ConditionManager extends EventEmitter {
     removeCondition(id) {
         let index = this.conditions.findIndex(item => item.id === id);
         if (index > -1) {
-            this.conditions[index].destroy(true);
+            this.conditions[index].destroy();
             this.conditions.splice(index, 1);
         }
 
@@ -416,10 +414,8 @@ export default class ConditionManager extends EventEmitter {
     }
 
     updateTestData(testData) {
-        if (!_.isEqual(testData, this.testData)) {
-            this.testData = testData;
-            this.openmct.objects.mutate(this.conditionSetDomainObject, 'configuration.conditionTestData', this.testData.conditionTestInputs);
-        }
+        this.testData = testData;
+        this.openmct.objects.mutate(this.conditionSetDomainObject, 'configuration.conditionTestData', this.testData.conditionTestInputs);
     }
 
     persistConditions() {
@@ -437,7 +433,7 @@ export default class ConditionManager extends EventEmitter {
         }
 
         this.conditions.forEach((condition) => {
-            condition.destroy(false);
+            condition.destroy();
         });
     }
 }

src/plugins/imagery/components/Compass/Compass.vue

@@ -26,13 +26,11 @@
     :style="`width: 100%; height: 100%`"
 >
     <CompassHUD
-        v-if="hasCameraFieldOfView"
         :sun-heading="sunHeading"
         :camera-angle-of-view="cameraAngleOfView"
         :camera-pan="cameraPan"
     />
     <CompassRose
-        v-if="hasCameraFieldOfView"
         :camera-angle-of-view="cameraAngleOfView"
         :camera-pan="cameraPan"
         :compass-rose-sizing-classes="compassRoseSizingClasses"
@@ -87,11 +85,6 @@ export default {
         cameraAngleOfView() {
             return CAMERA_ANGLE_OF_VIEW;
         }
-    },
-    methods: {
-        toggleLockCompass() {
-            this.$emit('toggle-lock-compass');
-        }
     }
 };
 </script>

src/plugins/imagery/components/Compass/CompassHUD.vue

@@ -104,7 +104,10 @@ export default {
         },
         cameraPan: {
             type: Number,
-            required: true
+            required: true,
+            default() {
+                return 0;
+            }
         }
     },
     computed: {

src/plugins/imagery/components/Compass/CompassRose.vue

@@ -21,184 +21,79 @@
  *****************************************************************************/
 
 <template>
-<div ref="compassRoseWrapper"
-     class="w-direction-rose"
-     :class="compassRoseSizingClasses"
-     @click="toggleLockCompass"
+<div
+    class="w-direction-rose"
+    :class="compassRoseSizingClasses"
 >
-    <svg ref="compassRoseSvg"
-         class="c-compass-rose-svg"
-         viewBox="0 0 100 100"
+    <div ref="directionRose"
+         class="c-direction-rose"
+         @click="toggleLockCompass"
     >
-        <mask id="mask0"
-              mask-type="alpha"
-              maskUnits="userSpaceOnUse"
-              x="0"
-              y="0"
-              width="100"
-              height="100"
+        <div
+            class="c-nsew"
+            :style="compassRoseStyle"
         >
-            <circle cx="50"
-                    cy="50"
-                    r="50"
-                    fill="black"
-            />
-        </mask>
-        <g class="c-cr__compass-wrapper">
-            <g class="c-cr__compass-main"
-               mask="url(#mask0)"
-            >
-                <!-- Background and clipped elements -->
-                <rect class="c-cr__bg"
-                      width="100"
-                      height="100"
-                      fill="black"
-                />
-                <rect class="c-cr__edge"
-                      width="100"
-                      height="100"
-                      fill="url(#paint0_radial)"
-                />
-                <rect v-if="hasSunHeading"
-                      class="c-cr__sun"
-                      width="100"
-                      height="100"
-                      fill="url(#paint1_radial)"
-                      :style="sunHeadingStyle"
-                />
+        </div>
 
-                <!-- Camera FOV -->
-                <mask id="mask2"
-                      class="c-cr__cam-fov-l-mask"
-                      mask-type="alpha"
-                      maskUnits="userSpaceOnUse"
-                      x="0"
-                      y="0"
-                      width="50"
-                      height="100"
-                >
-                    <rect width="51"
-                          height="100"
-                    />
-                </mask>
-                <mask id="mask1"
-                      class="c-cr__cam-fov-r-mask"
-                      mask-type="alpha"
-                      maskUnits="userSpaceOnUse"
-                      x="50"
-                      y="0"
-                      width="50"
-                      height="100"
-                >
-                    <rect x="49"
-                          width="51"
-                          height="100"
-                    />
-                </mask>
-                <g class="c-cr__cam-fov"
-                   :style="cameraPanStyle"
-                >
-                    <g mask="url(#mask2)">
-                        <rect class="c-cr__cam-fov-r"
-                              x="49"
-                              width="51"
-                              height="100"
-                              :style="cameraFOVStyleRightHalf"
-                        />
-                    </g>
-                    <g mask="url(#mask1)">
-                        <rect class="c-cr__cam-fov-l"
-                              width="51"
-                              height="100"
-                              :style="cameraFOVStyleLeftHalf"
-                        />
-                    </g>
-                </g>
-            </g>
+        <div
+            v-if="hasHeading"
+            class="c-spacecraft-body"
+            :style="headingStyle"
+        >
+        </div>
 
-            <!-- Spacecraft body -->
-            <path v-if="hasHeading"
-                  class="c-cr__spacecraft-body"
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M37 49C35.3431 49 34 50.3431 34 52V82C34 83.6569 35.3431 85 37 85H63C64.6569 85 66 83.6569 66 82V52C66 50.3431 64.6569 49 63 49H37ZM50 52L58 60H55V67H45V60H42L50 52Z"
-                  :style="headingStyle"
-            />
+        <div
+            v-if="hasSunHeading"
+            class="c-sun"
+            :style="sunHeadingStyle"
+        ></div>
 
-            <!-- NSEW and ticks -->
-            <g class="c-cr__nsew"
-               :style="compassRoseStyle"
+        <div ref="camField"
+             class="c-cam-field"
+             :style="cameraPanStyle"
+        >
+            <svg ref="camFieldSVG"
+                 viewBox="0 0 100 100"
             >
-                <g class="c-cr__ticks-major">
-                    <path d="M50 3L43 10H57L50 3Z" />
-                    <path d="M4 51V49H10V51H4Z"
-                          class="--hide-min"
-                    />
-                    <path d="M49 96V90H51V96H49Z"
-                          class="--hide-min"
-                    />
-                    <path d="M90 49V51H96V49H90Z"
-                          class="--hide-min"
-                    />
-                </g>
-                <g class="c-cr__ticks-minor --hide-small">
-                    <path d="M4 51V49H10V51H4Z" />
-                    <path d="M90 51V49H96V51H90Z" />
-                    <path d="M51 96H49V90H51V96Z" />
-                    <path d="M51 10L49 10V4L51 4V10Z" />
-                </g>
-                <g class="c-cr__nsew-text">
-                    <path :style="cardinalTextRotateW"
-                          class="c-cr__nsew-w --hide-small"
-                          d="M56.7418 45.004H54.1378L52.7238 52.312H52.6958L51.2258 45.004H48.7758L47.3058 52.312H47.2778L45.8638 45.004H43.2598L45.9618 55H48.6078L49.9798 48.112H50.0078L51.3798 55H53.9838L56.7418 45.004Z"
-                    />
-                    <path :style="cardinalTextRotateE"
-                          class="c-cr__nsew-e --hide-small"
-                          d="M46.104 55H54.21V52.76H48.708V50.856H53.608V48.84H48.708V47.09H54.07V45.004H46.104V55Z"
-                    />
-                    <path :style="cardinalTextRotateS"
-                          class="c-cr__nsew-s --hide-small"
-                          d="M45.6531 51.64C45.6671 54.202 47.6971 55.21 49.9931 55.21C52.1911 55.21 54.3471 54.398 54.3471 51.864C54.3471 50.058 52.8911 49.386 51.4491 48.98C49.9931 48.574 48.5511 48.434 48.5511 47.664C48.5511 47.006 49.2511 46.81 49.8111 46.81C50.6091 46.81 51.4631 47.104 51.4211 48.014H54.0251C54.0111 45.76 52.0091 44.794 50.0211 44.794C48.1451 44.794 45.9471 45.648 45.9471 47.832C45.9471 49.666 47.4451 50.31 48.8731 50.716C50.3151 51.122 51.7431 51.29 51.7431 52.172C51.7431 52.914 50.9311 53.194 50.1471 53.194C49.0411 53.194 48.3131 52.816 48.2571 51.64H45.6531Z"
-                    />
-                    <path :style="cardinalTextRotateN"
-                          class="c-cr__nsew-n"
-                          d="M42.5935 60H46.7935V49.32H46.8415L52.7935 60H57.3775V42.864H53.1775V53.424H53.1295L47.1775 42.864H42.5935V60Z"
-                    />
-                </g>
-            </g>
-        </g>
-        <defs>
-            <radialGradient id="paint0_radial"
-                            cx="0"
-                            cy="0"
-                            r="1"
-                            gradientUnits="userSpaceOnUse"
-                            gradientTransform="translate(50 50) rotate(90) scale(50)"
-            >
-                <stop offset="0.751387"
-                      stop-opacity="0"
+                <rect
+                    class="c-nsew__tick c-tick-ne"
+                    x="49"
+                    y="0"
+                    fill="red"
+                    width="2"
+                    height="5"
                 />
-                <stop offset="1"
-                      stop-color="white"
+                <rect
+                    class="c-nsew__tick c-tick-se"
+                    x="95"
+                    y="49"
+                    width="5"
+                    height="2"
                 />
-            </radialGradient>
-            <radialGradient id="paint1_radial"
-                            cx="0"
-                            cy="0"
-                            r="1"
-                            gradientUnits="userSpaceOnUse"
-                            gradientTransform="translate(50 -7) rotate(-90) scale(18.5)"
-            >
-                <stop offset="0.716377"
-                      stop-color="#FFCC00"
+                <rect
+                    class="c-nsew__tick c-tick-sw"
+                    x="49"
+                    y="95"
+                    width="2"
+                    height="5"
                 />
-                <stop offset="1"
-                      stop-color="#FF9900"
-                      stop-opacity="0"
+                <rect
+                    class="c-nsew__tick c-tick-nw"
+                    x="0"
+                    y="49"
+                    width="5"
+                    height="2"
                 />
-            </radialGradient>
-        </defs>
-    </svg>
+                <path fill="gray"
+                      d="M50, 50
+                        L30,8
+                        A40 40 0 0 1 70,8
+                        Z
+                        "
+                />
+            </svg>
+        </div>
+    </div>
 </div>
 </template>
 
@@ -251,17 +146,32 @@ export default {
         north() {
             return this.lockCompass ? rotate(-this.cameraPan) : 0;
         },
-        cardinalTextRotateN() {
-            return { transform: `translateY(-27%) rotate(${ -this.north }deg)` };
+        northTextTransform() {
+            return this.cardinalPointsTextTransform.north;
         },
-        cardinalTextRotateS() {
-            return { transform: `translateY(30%) rotate(${ -this.north }deg)` };
+        eastTextTransform() {
+            return this.cardinalPointsTextTransform.east;
         },
-        cardinalTextRotateE() {
-            return { transform: `translateX(30%) rotate(${ -this.north }deg)` };
+        southTextTransform() {
+            return this.cardinalPointsTextTransform.south;
         },
-        cardinalTextRotateW() {
-            return { transform: `translateX(-30%) rotate(${ -this.north }deg)` };
+        westTextTransform() {
+            return this.cardinalPointsTextTransform.west;
+        },
+        cardinalPointsTextTransform() {
+            /**
+             * cardinal points text must be rotated
+             * in the opposite direction that north is rotated
+             * to keep text vertically oriented
+             */
+            const rotation = `rotate(${ -this.north })`;
+
+            return {
+                north: `translate(50,23) ${ rotation }`,
+                east: `translate(82,50) ${ rotation }`,
+                south: `translate(18,50) ${ rotation }`,
+                west: `translate(50,82) ${ rotation }`
+            };
         },
         hasHeading() {
             return this.heading !== undefined;
@@ -270,7 +180,7 @@ export default {
             const rotation = rotate(this.north, this.heading);
 
             return {
-                transform: `rotate(${ rotation }deg)`
+                transform: `translateX(-50%) rotate(${ rotation }deg)`
             };
         },
         hasSunHeading() {
@@ -294,14 +204,14 @@ export default {
         // rotated counter-clockwise from camera pan angle
         cameraFOVStyleLeftHalf() {
             return {
-                transform: `rotate(${ this.cameraAngleOfView / 2 }deg)`
+                transform: `translateX(50%) rotate(${ -this.cameraAngleOfView / 2 }deg)`
             };
         },
         // right half of camera field of view
         // rotated clockwise from camera pan angle
         cameraFOVStyleRightHalf() {
             return {
-                transform: `rotate(${ -this.cameraAngleOfView / 2 }deg)`
+                transform: `translateX(-50%) rotate(${ this.cameraAngleOfView / 2 }deg)`
             };
         }
     },
@@ -319,9 +229,12 @@ export default {
     },
     methods: {
         resizeSvg() {
-            const svg = this.$refs.compassRoseSvg;
-            svg.setAttribute('width', this.$refs.compassRoseWrapper.clientWidth);
-            svg.setAttribute('height', this.$refs.compassRoseWrapper.clientHeight);
+            const svg = this.$refs.camFieldSVG;
+            svg.setAttribute('width', this.$refs.camField.clientWidth);
+            svg.setAttribute('height', this.$refs.camField.clientHeight);
+        },
+        rotateSVG() {
+            this.$refs.camField.style.transform = "rotate(45deg)";
         },
         toggleLockCompass() {
             this.lockCompass = !this.lockCompass;

src/plugins/imagery/components/Compass/compass.scss

@@ -12,8 +12,8 @@ $elemBg: rgba(black, 0.7);
 .c-compass {
     pointer-events: none; // This allows the image element to receive a browser-level context click
     position: absolute;
-    left: 0;
-    top: 0;
+    left: 0%;
+    top: 0%;
     z-index: 1;
     @include userSelectNone;
 }
@@ -80,55 +80,113 @@ $elemBg: rgba(black, 0.7);
         transform: translateX(-50%);
         z-index: 1;
     }
+
 }
 
-/***************************** COMPASS SVG */
-.c-compass-rose-svg {
+/***************************** COMPASS DIRECTIONS */
+.c-nsew {
     $color: $interfaceKeyColor;
-    position: absolute;
-    top: 0; left: 0;
+    $inset: 5%;
+    $tickHeightPerc: 15%;
+    text-shadow: black 0 0 10px;
+    top: $inset;
+    right: $inset;
+    bottom: $inset;
+    left: $inset;
+    z-index: 3;
 
-    g, path, rect {
-        // In an SVG, rotation occurs about the center of the SVG, not the element
-        transform-origin: center;
+    &__tick,
+    &__label {
+        fill: $color;
     }
 
-    .c-cr {
-        &__bg {
-            fill: #000;
-            opacity: 0.8;
+    &__minor-ticks {
+        opacity: 0.5;
+        transform-origin: center;
+        transform: rotate(45deg);
+    }
+
+    &__label {
+        dominant-baseline: central;
+        font-size: 1.25em;
+        font-weight: bold;
+    }
+
+    .c-label-n {
+        font-size: 2em;
+    }
+}
+
+/***************************** CAMERA FIELD ANGLE */
+.c-cam-field {
+    $color: white;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+
+    .cam-field-half {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        .cam-field-area {
+            background: $color;
+            top: -30%;
+            right: 0;
+            bottom: -30%;
+            left: 0;
         }
 
-        &__edge {
-            opacity: 0.1;
+        // clip-paths overlap a bit to avoid a gap between halves
+        &-l {
+            clip-path: polygon(0 0, 50.5% 0, 50.5% 100%, 0 100%);
+
+            .cam-field-area {
+                transform-origin: left center;
+            }
         }
 
-        &__sun {
-            opacity: 0.7;
-        }
+        &-r {
+            clip-path: polygon(49.5% 0, 100% 0, 100% 100%, 49.5% 100%);
 
-        &__cam-fov-l,
-        &__cam-fov-r {
-            // Cam FOV indication
-            opacity: 0.2;
-            fill: #fff;
+            .cam-field-area {
+                transform-origin: right center;
+            }
         }
+    }
+}
 
-        &__nsew-text,
-        &__spacecraft-body,
-        &__ticks-major,
-        &__ticks-minor {
-            fill: $color;
-        }
+/***************************** SPACECRAFT BODY */
+.c-spacecraft-body {
+    $color: $interfaceKeyColor;
+    $s: 30%;
+    background: $color;
+    border-radius: 3px;
+    height: $s;
+    width: $s;
+    left: 50%;
+    top: 50%;
+    opacity: 0.4;
+    transform-origin: center top;
+    transform: translateX(-50%); // center by default, overridden by CompassRose.vue / headingStyle()
 
-        &__ticks-minor {
-            opacity: 0.5;
-            transform: rotate(45deg);
-        }
-
-        &__spacecraft-body {
-            opacity: 0.3;
-        }
+    &:before {
+        // Direction arrow
+        $color: rgba(black, 0.5);
+        $arwPointerY: 60%;
+        $arwBodyOffset: 25%;
+        background: $color;
+        content: '';
+        display: block;
+        position: absolute;
+        top: 10%;
+        right: 20%;
+        bottom: 50%;
+        left: 20%;
+        clip-path: polygon(50% 0, 100% $arwPointerY, 100%-$arwBodyOffset $arwPointerY, 100%-$arwBodyOffset 100%, $arwBodyOffset 100%, $arwBodyOffset $arwPointerY, 0 $arwPointerY);
     }
 }
 
@@ -136,28 +194,32 @@ $elemBg: rgba(black, 0.7);
 .w-direction-rose {
     $s: 10%;
     $m: 2%;
-    cursor: pointer;
-    pointer-events: all;
     position: absolute;
     bottom: $m;
     left: $m;
     width: $s;
     padding-top: $s;
-    z-index: 2;
 
     &.--rose-min {
         $s: 30px;
         width: $s;
         padding-top: $s;
-        .--hide-min {
-            display: none;
-        }
     }
 
     &.--rose-small {
-        .--hide-small {
+        .c-nsew__minor-ticks,
+        .c-tick-w,
+        .c-tick-s,
+        .c-tick-e,
+        .c-label-w,
+        .c-label-s,
+        .c-label-e {
             display: none;
         }
+
+        .c-label-n {
+            font-size: 2.5em;
+        }
     }
 
     &.--rose-max {
@@ -166,3 +228,44 @@ $elemBg: rgba(black, 0.7);
         padding-top: $s;
     }
 }
+
+.c-direction-rose {
+    $c2: rgba(white, 0.1);
+    background: $elemBg;
+    background-image: radial-gradient(circle closest-side, transparent, transparent 80%, $c2);
+    transform-origin: 0 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: circle(50% at 50% 50%);
+    border-radius: 100%;
+    pointer-events: all;
+
+    svg, div {
+        position: absolute;
+    }
+
+    // Sun
+    .c-sun {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        &:before {
+            $s: 35%;
+            @include sun();
+            content: '';
+            display: block;
+            position: absolute;
+            opacity: 0.7;
+            top: 0;
+            left: 50%;
+            height: $s;
+            width: $s;
+            transform: translate(-50%, -60%);
+        }
+    }
+}

src/plugins/imagery/components/imagery-view-layout.scss

@@ -194,10 +194,6 @@
                 margin-right: $interiorMarginSm;
             }
         }
-
-        .s-status-taking-snapshot & {
-            display: none;
-        }
     }
 
     &__lc {
@@ -279,10 +275,6 @@
             content: $glyph-icon-play;
         }
     }
-
-    .s-status-taking-snapshot & {
-        display: none;
-    }
 }
 
 .c-imagery__prev-next-buttons {
@@ -297,10 +289,6 @@
     .c-nav {
         pointer-events: all;
     }
-
-    .s-status-taking-snapshot & {
-        display: none;
-    }
 }
 
 .c-nav {

src/plugins/notebook/components/NotebookEmbed.vue

@@ -101,6 +101,7 @@ export default {
                 buttons: [
                     {
                         label: 'Cancel',
+                        emphasis: true,
                         callback: () => {
                             painterroInstance.dismiss();
                             annotateOverlay.dismiss();
@@ -108,7 +109,6 @@ export default {
                     },
                     {
                         label: 'Save',
-                        emphasis: true,
                         callback: () => {
                             painterroInstance.save((snapshotObject) => {
                                 annotateOverlay.dismiss();

src/plugins/notebook/components/NotebookSnapshotContainer.vue

@@ -7,10 +7,10 @@
                     <div class="c-object-label__type-icon icon-camera"></div>
                     <div class="c-object-label__name">
                         Notebook Snapshots
-                    </div>
-                    <div v-if="snapshots.length"
-                         class="l-browse-bar__object-details"
-                    >{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
+                        <span v-if="snapshots.length"
+                              class="l-browse-bar__object-details"
+                        >&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
+                        </span>
                     </div>
                 </div>
                 <PopupMenu v-if="snapshots.length > 0"

src/plugins/notebook/components/snapshot-template.html

@@ -4,10 +4,8 @@
         <div class="l-browse-bar__start">
             <div class="l-browse-bar__object-name--w">
                 <span class="c-object-label l-browse-bar__object-name"
+                    v-bind:class="cssClass"
                 >
-                    <span class="c-object-label__type-icon"
-                          v-bind:class="cssClass"
-                    ></span>
                     <span class="c-object-label__name">{{ name }}</span>
                 </span>
             </div>

src/plugins/plan/pluginSpec.js

@@ -49,6 +49,10 @@ describe('the plugin', function () {
         child.style.height = '480px';
         element.appendChild(child);
 
+        openmct.time.timeSystem('utc', {
+            start: 1597160002854,
+            end: 1597181232854
+        });
         openmct.on('start', done);
         openmct.start(appHolder);
     });
@@ -101,11 +105,6 @@ describe('the plugin', function () {
         let planView;
 
         beforeEach(() => {
-            openmct.time.timeSystem('utc', {
-                start: 1597160002854,
-                end: 1597181232854
-            });
-
             planDomainObject = {
                 identifier: {
                     key: 'test-object',

src/plugins/plot/MctPlot.vue

@@ -427,12 +427,9 @@ export default {
                 this.skipReloadOnInteraction = false;
                 this.loadMoreData(newRange, true);
             } else {
-                // If we're not panning or zooming (time conductor and plot x-axis times are not out of sync)
                 // Drop any data that is more than 1x (max-min) before min.
                 // Limit these purges to once a second.
-                const isPanningOrZooming = this.isTimeOutOfSync;
-                const purgeRecords = !isPanningOrZooming && (!this.nextPurge || (this.nextPurge < Date.now()));
-                if (purgeRecords) {
+                if (!this.nextPurge || this.nextPurge < Date.now()) {
                     const keepRange = {
                         min: newRange.min - (newRange.max - newRange.min),
                         max: newRange.max

src/plugins/plot/pluginSpec.js

@@ -279,10 +279,6 @@ describe("the plugin", function () {
         let plotView;
 
         beforeEach(() => {
-            openmct.time.timeSystem("utc", {
-                start: 0,
-                end: 4
-            });
             const getFunc = openmct.$injector.get;
             spyOn(openmct.$injector, "get")
                 .withArgs("exportImageService").and.returnValue({

src/plugins/telemetryTable/pluginSpec.js

@@ -121,11 +121,6 @@ describe("the plugin", () => {
         let tableInstance;
 
         beforeEach(() => {
-            openmct.time.timeSystem('utc', {
-                start: 0,
-                end: 4
-            });
-
             testTelemetryObject = {
                 identifier: {
                     namespace: "",

src/plugins/timeConductor/conductor.scss

@@ -237,6 +237,7 @@
     }
 }
 
+// Prototype
 [class^='pr-tc-input-menu'] {
     // Uses ^= here to target both start and end menus
     background: $colorBodyBg;
@@ -246,7 +247,8 @@
     grid-column-gap: 3px;
     grid-row-gap: 4px;
     align-items: start;
-    filter: $filterMenu;
+
+    filter: brightness(1.4);
     box-shadow: $shdwMenu;
     padding: $interiorMargin;
     position: absolute;

src/styles/_constants-espresso.scss

@@ -237,12 +237,11 @@ $shdwSelect: rgba(black, 0.5) 0 0.5px 3px;
 $controlDisabledOpacity: 0.2;
 
 // Menus
-$colorMenuBg: $colorBodyBg;
-$colorMenuFg: $colorBodyFg;
-$colorMenuIc: $colorKey;
-$filterMenu:  brightness(1.4);
-$colorMenuHovBg: rgba($colorKey, 0.5);
-$colorMenuHovFg: $colorBodyFgEm;
+$colorMenuBg: pullForward($colorBodyBg, 15%);
+$colorMenuFg: pullForward($colorBodyFg, 30%);
+$colorMenuIc: pullForward($colorKey, 15%);
+$colorMenuHovBg: $colorMenuIc;
+$colorMenuHovFg: pullForward($colorMenuFg, 10%);
 $colorMenuHovIc: $colorMenuHovFg;
 $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;

src/styles/_constants-maelstrom.scss

@@ -241,12 +241,11 @@ $shdwSelect: rgba(black, 0.5) 0 0.5px 3px;
 $controlDisabledOpacity: 0.2;
 
 // Menus
-$colorMenuBg: $colorBodyBg;
-$colorMenuFg: $colorBodyFg;
-$colorMenuIc: $colorKey;
-$filterMenu:  brightness(1.4);
-$colorMenuHovBg: rgba($colorKey, 0.5);
-$colorMenuHovFg: $colorBodyFgEm;
+$colorMenuBg: pullForward($colorBodyBg, 15%);
+$colorMenuFg: pullForward($colorBodyFg, 30%);
+$colorMenuIc: pullForward($colorKey, 15%);
+$colorMenuHovBg: $colorMenuIc;
+$colorMenuHovFg: pullForward($colorMenuFg, 10%);
 $colorMenuHovIc: $colorMenuHovFg;
 $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;

src/styles/_constants-snow.scss

@@ -237,10 +237,9 @@ $shdwSelect: none;
 $controlDisabledOpacity: 0.3;
 
 // Menus
-$colorMenuBg: $colorBodyBg;
-$colorMenuFg: $colorBodyFg;
+$colorMenuBg: pushBack($colorBodyBg, 10%);
+$colorMenuFg: pullForward($colorMenuBg, 70%);
 $colorMenuIc: $colorKey;
-$filterMenu: brightness(0.95);
 $colorMenuHovBg: $colorMenuIc;
 $colorMenuHovFg: $colorMenuBg;
 $colorMenuHovIc: $colorMenuBg;

src/styles/_controls.scss

@@ -458,7 +458,6 @@ select {
 @mixin menuOuter() {
     border-radius: $basicCr;
     background: $colorMenuBg;
-    filter: $filterMenu;
     text-shadow: $shdwMenuText;
     padding: $interiorMarginSm;
     box-shadow: $shdwMenu;

src/styles/notebook.scss

@@ -490,7 +490,7 @@
 }
 
 #snap-annotation {
-    $m: 0; //$interiorMargin;
+    $m: $interiorMargin;
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -514,32 +514,21 @@
     // Holds tool buttons, color selectors, etc.
     $h: 22px;
     $fs: 0.8rem;
-    $m: $interiorMarginSm;
 
-    display: flex;
-    align-items: center;
-    height: $h + ($m * 2) !important;
-    margin-bottom: $interiorMarginLg;
     order: 1;
     flex: 0 0 auto;
+    height: auto;
     background-color: transparent !important;
-    padding: $interiorMarginSm;
+    margin-bottom: $interiorMargin;
 
-    > div {
-        display: contents;
-
-        > * + * { margin-left: $interiorMargin !important; }
-    }
-
-    .ptro-tool-controls {
+    > div > span {
         display: flex;
-        margin-left: $interiorMarginLg !important;
-
-        > * + * {
-            margin-left: $interiorMargin !important;
-        }
+        align-items: center;
+        font-size: $fs;
     }
 
+    > div,
+    > div > span,
     .ptro-icon-btn,
     .ptro-named-btn,
     .ptro-color-btn,
@@ -549,18 +538,27 @@
     .tool-controls,
     .ptro-input {
         // Lot of resets for crappy CSS in Painterro
+        &:first-child {
+            margin-left: 0 !important;
+        }
+        display: inline-block;
         font-family: inherit;
         font-size: $fs !important;
         height: $h !important;
-        margin: 0;
+        margin: 0 0 0 5px;
         position: relative;
+        width: auto !important;
         line-height: $h !important;
+        top: auto;
+        right: auto;
+        bottom: auto;
+        left: auto;
+        vertical-align: top;
     }
 
     .ptro-tool-ctl-name {
         border-radius: 0;
         background: none;
-        color: $colorBodyFg;
         top: auto;
         font-family: inherit;
         padding: 0;
@@ -570,15 +568,13 @@
         width: $h !important;
     }
 
-    .ptro-check,
     .ptro-color-control,
     .ptro-icon-btn,
     .ptro-named-btn {
-        // Buttons in toolbar
-        border-radius: $smallCr;
-        box-shadow: rgba($colorBtnFg, 0.3) 0 0 0 1px;
-        color: $colorBtnFg !important;
-        padding: 1px $interiorMargin;
+        // Buttons in toolbar. Why the f* they're named like this is a mystery
+        background-color: $colorBtnBg;
+        color: $colorBtnFg;
+        padding: 0 $interiorMargin;
 
         &:hover {
             background: $colorBtnBgHov;
@@ -592,13 +588,6 @@
         }
     }
 
-    .ptro-color-control,
-    .ptro-icon-btn,
-    .ptro-named-btn {
-        // Buttons in toolbar
-        background-color: $colorBtnBg;
-    }
-
     .ptro-color-active-control {
         background: $colorBtnMajorBg  !important;
         color: $colorBtnMajorFg !important;

src/ui/inspector/ObjectName.vue

@@ -17,7 +17,15 @@
         <div v-if="singleSelectNonObject"
              class="c-inspector__selected c-inspector__selected--non-domain-object  c-object-label"
         >
-            <span class="c-object-label__name">Layout Object</span>
+            <span class="c-object-label__type-icon"
+                  :class="typeCssClass"
+            ></span>
+            <span v-if="!activity"
+                  class="c-object-label__name"
+            >Layout Object</span>
+            <span v-else
+                  class="c-object-label__name"
+            >{{ activity.name }}</span>
         </div>
     </div>
     <div v-if="multiSelect"

src/ui/layout/mct-tree.scss

@@ -32,7 +32,6 @@
 
         &__scrollable {
             overflow: auto;
-            padding-right: $interiorMargin;
         }
 
         &__item--empty {

src/ui/layout/mct-tree.vue

@@ -113,7 +113,7 @@ import search from '../components/search.vue';
 const ITEM_BUFFER = 25;
 const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
 const RETURN_ALL_DESCDNDANTS = true;
-const TREE_ITEM_INDENT_PX = 18;
+const TREE_ITEM_INDENT_PX = 15;
 
 export default {
     name: 'MctTree',

src/ui/preview/preview-header.vue

@@ -103,16 +103,10 @@ export default {
     },
     mounted() {
         if (this.actionCollection) {
-            this.actionCollection.hide(HIDDEN_ACTIONS);
             this.actionCollection.on('update', this.updateActionItems);
             this.updateActionItems(this.actionCollection.getActionsObject());
         }
     },
-    destroyed() {
-        if (this.actionCollection) {
-            this.actionCollection.off('update', this.updateActionItems);
-        }
-    },
     methods: {
         setView(view) {
             this.$emit('setView', view);
@@ -122,6 +116,7 @@ export default {
             delete this.actionCollection;
         },
         updateActionItems() {
+            this.actionCollection.hide(HIDDEN_ACTIONS);
             this.statusBarItems = this.actionCollection.getStatusBarActions();
             this.menuActionItems = this.actionCollection.getVisibleActions();
         },

src/ui/router/ApplicationRouterSpec.js

@@ -8,7 +8,7 @@ let resolveFunction;
 
 let initialHash = '';
 
-xdescribe('Application router utility functions', () => {
+describe('Application router utility functions', () => {
     beforeAll(done => {
         appHolder = document.createElement('div');
         appHolder.style.width = '640px';