Prevent default on click events for conductor delta buttons (#4033)

* UI fixes
- Fixed Time Conductor in Snow theme;
- Better overall approach to `c-menu` look-and-feel using filter;
- Fixed duplicate Inspector object icon for drawing objects in Display
Layouts;
- Better layout for snapshots container title to fix erroneous
character problem;
- Fix icon definition for Stop action to use correct class name;
- Added `padding-right` to `c-tree__scrollable`;
- Significant updates and cleanups to Painterro CSS overrides;
- Fix incorrect emphasis on "Cancel" in annotation dialog;
- Fix icon spacing in `__object-label` element of Snapshot dialog
template;
- Fixed left padding in tree view

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "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",
+                        "cssClass": "icon-box-round-corners",
                         "priority": "preferred"
                     }
                 ],

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

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

src/plugins/URLTimeSettingsSynchronizer/URLTimeSettingsSynchronizer.js

@@ -45,6 +45,7 @@ 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();
+        this.destroyCriteria(true);
         this.createCriteria(criterionConfigurations);
     }
 
@@ -204,7 +204,7 @@ export default class Condition extends EventEmitter {
         }
     }
 
-    destroyCriterion(id) {
+    destroyCriterion(id, isRemoved) {
         let found = this.findCriterion(id);
         if (found) {
             let criterion = found.item;
@@ -216,7 +216,9 @@ export default class Condition extends EventEmitter {
             });
             criterion.destroy();
             this.criteria.splice(found.index, 1);
-            this.updateDescription();
+            if (isRemoved) {
+                this.updateDescription();
+            }
 
             return true;
         }
@@ -309,17 +311,17 @@ export default class Condition extends EventEmitter {
         return this.criteria;
     }
 
-    destroyCriteria() {
+    destroyCriteria(isRemoved) {
         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);
+            success = success && this.destroyCriterion(this.criteria[i].id, isRemoved);
         }
 
         return success;
     }
 
-    destroy() {
-        this.destroyCriteria();
+    destroy(isRemoved) {
+        this.destroyCriteria(isRemoved);
     }
 }

src/plugins/condition/ConditionManager.js

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

src/plugins/notebook/components/NotebookEmbed.vue

@@ -101,7 +101,6 @@ export default {
                 buttons: [
                     {
                         label: 'Cancel',
-                        emphasis: true,
                         callback: () => {
                             painterroInstance.dismiss();
                             annotateOverlay.dismiss();
@@ -109,6 +108,7 @@ 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
-                        <span v-if="snapshots.length"
-                              class="l-browse-bar__object-details"
-                        >&nbsp;{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
-                        </span>
+                    </div>
+                    <div v-if="snapshots.length"
+                         class="l-browse-bar__object-details"
+                    >{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
                     </div>
                 </div>
                 <PopupMenu v-if="snapshots.length > 0"

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

@@ -4,8 +4,10 @@
         <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,10 +49,6 @@ 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);
     });
@@ -105,6 +101,11 @@ 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,9 +427,12 @@ 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.
-                if (!this.nextPurge || this.nextPurge < Date.now()) {
+                const isPanningOrZooming = this.isTimeOutOfSync;
+                const purgeRecords = !isPanningOrZooming && (!this.nextPurge || (this.nextPurge < Date.now()));
+                if (purgeRecords) {
                     const keepRange = {
                         min: newRange.min - (newRange.max - newRange.min),
                         max: newRange.max

src/plugins/plot/pluginSpec.js

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

src/plugins/timeConductor/Conductor.vue

@@ -85,7 +85,7 @@
                 <button
                     ref="startOffset"
                     class="c-button c-conductor__delta-button"
-                    @click="showTimePopupStart"
+                    @click.prevent="showTimePopupStart"
                 >
                     {{ offsets.start }}
                 </button>
@@ -133,7 +133,7 @@
                 <button
                     ref="endOffset"
                     class="c-button c-conductor__delta-button"
-                    @click="showTimePopupEnd"
+                    @click.prevent="showTimePopupEnd"
                 >
                     {{ offsets.end }}
                 </button>

src/plugins/timeConductor/conductor.scss

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

src/styles/_constants-espresso.scss

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

src/styles/_constants-maelstrom.scss

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

src/styles/_constants-snow.scss

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

src/styles/_controls.scss

@@ -458,6 +458,7 @@ 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: $interiorMargin;
+    $m: 0; //$interiorMargin;
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -514,21 +514,32 @@
     // 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;
-    margin-bottom: $interiorMargin;
+    padding: $interiorMarginSm;
 
-    > div > span {
-        display: flex;
-        align-items: center;
-        font-size: $fs;
+    > div {
+        display: contents;
+
+        > * + * { margin-left: $interiorMargin !important; }
+    }
+
+    .ptro-tool-controls {
+        display: flex;
+        margin-left: $interiorMarginLg !important;
+
+        > * + * {
+            margin-left: $interiorMargin !important;
+        }
     }
 
-    > div,
-    > div > span,
     .ptro-icon-btn,
     .ptro-named-btn,
     .ptro-color-btn,
@@ -538,27 +549,18 @@
     .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 0 0 5px;
+        margin: 0;
         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;
@@ -568,13 +570,15 @@
         width: $h !important;
     }
 
+    .ptro-check,
     .ptro-color-control,
     .ptro-icon-btn,
     .ptro-named-btn {
-        // Buttons in toolbar. Why the f* they're named like this is a mystery
-        background-color: $colorBtnBg;
-        color: $colorBtnFg;
-        padding: 0 $interiorMargin;
+        // Buttons in toolbar
+        border-radius: $smallCr;
+        box-shadow: rgba($colorBtnFg, 0.3) 0 0 0 1px;
+        color: $colorBtnFg !important;
+        padding: 1px $interiorMargin;
 
         &:hover {
             background: $colorBtnBgHov;
@@ -588,6 +592,13 @@
         }
     }
 
+    .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,15 +17,7 @@
         <div v-if="singleSelectNonObject"
              class="c-inspector__selected c-inspector__selected--non-domain-object  c-object-label"
         >
-            <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>
+            <span class="c-object-label__name">Layout Object</span>
         </div>
     </div>
     <div v-if="multiSelect"

src/ui/layout/mct-tree.scss

@@ -32,6 +32,7 @@
 
         &__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 = 15;
+const TREE_ITEM_INDENT_PX = 18;
 
 export default {
     name: 'MctTree',

src/ui/preview/preview-header.vue

@@ -103,10 +103,16 @@ 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);
@@ -116,7 +122,6 @@ 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 = '';
 
-describe('Application router utility functions', () => {
+xdescribe('Application router utility functions', () => {
     beforeAll(done => {
         appHolder = document.createElement('div');
         appHolder.style.width = '640px';