Missing/unknown item should appear visually distinct

- Remove unneeded in-progress CSS;

example/generator/GeneratorMetadataProvider.js

@@ -99,10 +99,10 @@ define([
 
     GeneratorMetadataProvider.prototype.getMetadata = function (domainObject) {
         return _.extend(
-            {},
-            domainObject.telemetry,
-            METADATA_BY_TYPE[domainObject.type]
-        );
+                {},
+                domainObject.telemetry,
+                METADATA_BY_TYPE[domainObject.type]
+            );
     };
 
     return GeneratorMetadataProvider;

example/notifications/res/dialog-launch.html

@@ -1,9 +1,9 @@
 <span class="h-indicator" ng-controller="DialogLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="c-indicator c-indicator--clickable icon-box-with-arrow s-status-available"><span class="label c-indicator__label">
-        <button ng-click="launchProgress(true)">Known</button>
-        <button ng-click="launchProgress(false)">Unknown</button>
-        <button ng-click="launchError()">Error</button>
-        <button ng-click="launchInfo()">Info</button>
+    <div class="ls-indicator icon-box-with-arrow s-status-available"><span class="label">
+        <a ng-click="launchProgress(true)">Known</a>
+        <a ng-click="launchProgress(false)">Unknown</a>
+        <a ng-click="launchError()">Error</a>
+        <a ng-click="launchInfo()">Info</a>
     </span></div>
 </span>

example/notifications/res/notification-launch.html

@@ -1,9 +1,9 @@
 <span class="h-indicator" ng-controller="NotificationLaunchController">
     <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <div class="c-indicator c-indicator--clickable icon-bell s-status-available"><span class="label c-indicator__label">
-        <button ng-click="newInfo()">Success</button>
-        <button ng-click="newError()">Error</button>
-        <button ng-click="newAlert()">Alert</button>
-        <button ng-click="newProgress()">Progress</button>
+    <div class="ls-indicator icon-bell s-status-available"><span class="label">
+        <a ng-click="newInfo()">Success</a>
+        <a ng-click="newError()">Error</a>
+        <a ng-click="newAlert()">Alert</a>
+        <a ng-click="newProgress()">Progress</a>
     </span></div>
 </span>

index.html

@@ -50,6 +50,7 @@
         openmct.install(openmct.plugins.Generator());
         openmct.install(openmct.plugins.ExampleImagery());
         openmct.install(openmct.plugins.UTCTimeSystem());
+        openmct.install(openmct.plugins.ImportExport());
         openmct.install(openmct.plugins.AutoflowView({
             type: "telemetry.panel"
         }));
@@ -79,9 +80,13 @@
         }));
         openmct.install(openmct.plugins.SummaryWidget());
         openmct.install(openmct.plugins.Notebook());
+        openmct.install(openmct.plugins.FolderView());
+        openmct.install(openmct.plugins.Tabs());
+        openmct.install(openmct.plugins.FlexibleLayout());
+        openmct.install(openmct.plugins.LADTable());
         openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
         openmct.install(openmct.plugins.ObjectMigration());
-        openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
+        openmct.install(openmct.plugins.GoToOriginalAction());
         openmct.start();
     </script>
 </html>

package.json

@@ -4,7 +4,6 @@
   "description": "The Open MCT core platform",
   "dependencies": {},
   "devDependencies": {
-    "acorn": "6.2.0",
     "angular": "1.4.14",
     "angular-route": "1.4.14",
     "babel-eslint": "8.2.6",

platform/commonUI/general/res/templates/angular-indicator.html

@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div class="c-indicator {{ngModel.getCssClass()}}"
+<div class="ls-indicator {{ngModel.getCssClass()}}"
 	 title="{{ngModel.getDescription()}}"
 	 ng-show="ngModel.getText().length > 0">
-	<span class="label c-indicator__label">{{ngModel.getText()}}</span>
+	<span class="label">{{ngModel.getText()}}</span>
 </div>

platform/commonUI/notification/res/notification-indicator.html

@@ -1,8 +1,8 @@
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div ng-show="notifications.length > 0" class="c-indicator c-indicator--clickable s-status-{{highest.severity}} icon-bell"
+<div ng-show="notifications.length > 0" class="ls-indicator s-status-{{highest.severity}} icon-bell"
       ng-controller="NotificationIndicatorController">
-    <span class="label c-indicator__label">
-        <button ng-click="showNotificationsList()">
-           {{notifications.length}} Notification<span ng-show="notifications.length > 1">s</span></button>
-    </span><span class="c-indicator__count">{{notifications.length}}</span>
+    <span class="label">
+        <a ng-click="showNotificationsList()">
+           {{notifications.length}} Notification<span ng-show="notifications.length > 1">s</span></a>
+    </span><span class="count">{{notifications.length}}</span>
 </div>

platform/features/clock/src/indicators/ClockIndicator.js

@@ -49,7 +49,7 @@ define(
         };
 
         ClockIndicator.prototype.getCssClass = function () {
-            return "t-indicator-clock icon-clock no-minify c-indicator--not-clickable";
+            return "t-indicator-clock icon-clock no-collapse float-right";
         };
 
         ClockIndicator.prototype.getText = function () {

platform/persistence/couch/src/CouchIndicator.js

@@ -100,7 +100,7 @@ define(
         }
 
         CouchIndicator.prototype.getCssClass = function () {
-            return "c-indicator--clickable icon-database " + this.state.statusClass;
+            return "icon-database " + this.state.statusClass;
         };
 
         CouchIndicator.prototype.getGlyphClass = function () {

platform/persistence/elastic/src/ElasticIndicator.js

@@ -84,7 +84,7 @@ define(
         }
 
         ElasticIndicator.prototype.getCssClass = function () {
-            return "c-indicator--clickable icon-database";
+            return "icon-database";
         };
         ElasticIndicator.prototype.getGlyphClass = function () {
             return this.state.glyphClass;

platform/persistence/local/src/LocalStorageIndicator.js

@@ -41,7 +41,7 @@ define(
         }
 
         LocalStorageIndicator.prototype.getCssClass = function () {
-            return "c-indicator--clickable icon-database s-status-caution";
+            return "icon-database s-status-caution";
         };
         LocalStorageIndicator.prototype.getGlyphClass = function () {
             return 'caution';

src/MCT.js

@@ -246,21 +246,12 @@ define([
         this.branding = BrandingAPI.default;
 
         this.legacyRegistry = defaultRegistry;
-
-        // Plugin's that are installed by default
-
         this.install(this.plugins.Plot());
         this.install(this.plugins.TelemetryTable());
         this.install(PreviewPlugin.default());
         this.install(LegacyIndicatorsPlugin());
         this.install(LicensesPlugin.default());
         this.install(RemoveActionPlugin.default());
-        this.install(this.plugins.ImportExport());
-        this.install(this.plugins.FolderView());
-        this.install(this.plugins.Tabs());
-        this.install(this.plugins.FlexibleLayout());
-        this.install(this.plugins.LADTable());
-        this.install(this.plugins.GoToOriginalAction());
 
         if (typeof BUILD_CONSTANTS !== 'undefined') {
             this.install(buildInfoPlugin(BUILD_CONSTANTS));

src/adapter/views/LegacyViewProvider.js

@@ -108,9 +108,6 @@ define([
                             link();
                         }
                     },
-                    onClearData() {
-                        scope.$broadcast('clearData');
-                    },
                     destroy: function () {
                         element.off();
                         element.remove();

src/api/indicators/SimpleIndicator.js

@@ -28,7 +28,7 @@ define(['zepto', './res/indicator-template.html'],
             this.openmct = openmct;
             this.element = $(indicatorTemplate)[0];
 
-            this.textElement = this.element.querySelector('.js-indicator-text');
+            this.textElement = this.element.querySelector('.indicator-text');
 
             //Set defaults
             this.text('New Indicator');

src/api/indicators/res/indicator-template.html

@@ -1,3 +1,3 @@
-<div class="c-indicator c-indicator--clickable c-indicator--simple" title="">
-    <span class="label js-indicator-text c-indicator__label"></span>
+<div class="ls-indicator" title="">
+    <span class="label indicator-text"></span>
 </div>

src/api/overlays/components/DialogComponent.vue

@@ -93,7 +93,7 @@
         &.message-severity-error:before {
             @include legacyMessage();
             content: $glyph-icon-alert-triangle;
-            color: $colorWarningHi;
+            color: $colorWarningLo;
         }
 
         // Messages in a list

src/api/overlays/components/OverlayComponent.vue

@@ -69,7 +69,6 @@
             flex: 1 1 auto;
             display: flex;
             flex-direction: column;
-            overflow: hidden;
         }
 
         &__top-bar {

src/plugins/clearData/clearDataAction.js

@@ -1,39 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-export default class ClearDataAction {
-    constructor(openmct, appliesToObjects) {
-        this.name = 'Clear Data';
-        this.description = 'Clears current data for object, unsubscribes and resubscribes to data';
-
-        this._openmct = openmct;
-        this._appliesToObjects = appliesToObjects;
-    }
-    invoke(objectPath) {
-        this._openmct.objectViews.emit('clearData', objectPath[0]);
-    }
-    appliesTo(objectPath) {
-        let contextualDomainObject = objectPath[0];
-
-        return this._appliesToObjects.filter(type => contextualDomainObject.type === type).length;
-    }
-}

src/plugins/clearData/components/globalClearIndicator.vue

@@ -1,18 +0,0 @@
-<template>
-    <div class="c-indicator c-indicator--clickable icon-session">
-        <span class="label c-indicator__label">
-            <button @click="globalClearEmit">Clear All Data</button>
-        </span>
-    </div>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-    methods: {
-        globalClearEmit() {
-            this.openmct.objectViews.emit('clearData');
-        }
-    }
-}
-</script>

src/plugins/clearData/plugin.js

@@ -1,54 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2019, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    './components/globalClearIndicator.vue',
-    './clearDataAction',
-    'vue'
-], function (
-    GlobaClearIndicator,
-    ClearDataAction,
-    Vue
-) {
-    return function plugin(appliesToObjects) {
-        appliesToObjects = appliesToObjects || [];
-
-        return function install(openmct) {
-            let component = new Vue ({
-                    provide: {
-                        openmct
-                    },
-                    components: {
-                        GlobalClearIndicator: GlobaClearIndicator.default
-                    },
-                    template: '<GlobalClearIndicator></GlobalClearIndicator>'
-                }),
-                indicator = {
-                    element: component.$mount().$el
-                };
-
-            openmct.indicators.add(indicator);
-
-            openmct.contextMenu.registerAction(new ClearDataAction.default(openmct, appliesToObjects));
-        };
-    };
-});

src/plugins/clearData/test/clearDataActionSpec.js

@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-import ClearDataActionPlugin  from '../plugin.js';
-import ClearDataAction from '../clearDataAction.js';
-
-describe('When the Clear Data Plugin is installed,', function () {
-    var mockObjectViews = jasmine.createSpyObj('objectViews', ['emit']),
-        mockIndicatorProvider = jasmine.createSpyObj('indicators', ['add']),
-        mockContextMenuProvider = jasmine.createSpyObj('contextMenu', ['registerAction']),
-        openmct = {
-            objectViews: mockObjectViews,
-            indicators: mockIndicatorProvider,
-            contextMenu: mockContextMenuProvider,
-            install: function (plugin) {
-                plugin(this);
-            }
-        },
-        mockObjectPath = [
-            {name: 'mockObject1'},
-            {name: 'mockObject2'}
-        ];
-
-    it('Global Clear Indicator is installed', function () {
-        openmct.install(ClearDataActionPlugin([]));
-
-        expect(mockIndicatorProvider.add).toHaveBeenCalled();
-    });
-
-    it('Clear Data context menu action is installed', function () {
-        openmct.install(ClearDataActionPlugin([]));
-
-        expect(mockContextMenuProvider.registerAction).toHaveBeenCalled();
-    });
-
-    it('clear data action emits a clearData event when invoked', function () {
-        let action = new ClearDataAction(openmct);
-
-        action.invoke(mockObjectPath);
-
-        expect(mockObjectViews.emit).toHaveBeenCalledWith('clearData', mockObjectPath[0]);
-    });
-});

src/plugins/displayLayout/components/SubobjectView.vue

@@ -22,7 +22,7 @@
 <template>
     <layout-frame :item="item"
                   :grid-size="gridSize"
-                  :title="domainObject && domainObject.name"
+                  :title="domainObject && domainObject.name + ': ' + domainObject.type"
                   @move="(gridDelta) => $emit('move', gridDelta)"
                   @endMove="() => $emit('endMove')">
         <object-frame v-if="domainObject"

src/plugins/displayLayout/components/TelemetryView.vue

@@ -23,12 +23,14 @@
  <template>
      <layout-frame :item="item"
                    :grid-size="gridSize"
+                   :title="domainObject && domainObject.name + ': ' + domainObject.type"
+                   :class="{'c-telemetry-view--unknown': domainObject.type.indexOf('unknown') !== -1}"
                    @move="(gridDelta) => $emit('move', gridDelta)"
                    @endMove="() => $emit('endMove')">
         <div class="c-telemetry-view"
              :style="styleObject"
              v-if="domainObject">
-            <div v-if="showLabel"
+            <div v-if="showLabel || domainObject.type.indexOf('unknown') !== -1"
                   class="c-telemetry-view__label">
                 <div class="c-telemetry-view__label-text">{{ domainObject.name }}</div>
             </div>
@@ -50,6 +52,21 @@
         display: flex;
         align-items: stretch;
 
+        &--unknown {
+            .c-telemetry-view__label-text {
+                @include isUnknown();
+                display: flex;
+                align-items: center;
+                &:before {
+                    content: $glyph-icon-object-unknown;
+                    font-family: symbolsfont;
+                    font-style: normal;
+                    display: inline-block;
+                    margin-right: $interiorMarginSm;
+                }
+            }
+        }
+
         > * {
             // Label and value holders
             flex: 1 1 auto;

src/plugins/displayLayout/plugin.js

@@ -25,7 +25,7 @@ import Vue from 'vue'
 import objectUtils from '../../api/objects/object-utils.js'
 import DisplayLayoutType from './DisplayLayoutType.js'
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js'
-import AlphaNumericFormatViewProvider from './AlphanumericFormatViewProvider.js'
+import AlphaNumericFormatViewProvider from './AlphaNumericFormatViewProvider.js'
 
 export default function DisplayLayoutPlugin(options) {
     return function (openmct) {

src/plugins/filters/components/FilterObject.vue

@@ -63,13 +63,7 @@ export default {
 
             if (filterValue && filterValue[comparator]) {
                 if (value === false) {
-                    let filteredValueName = filterValue[comparator].filter(v => v !== valueName);
-
-                    if (filteredValueName.length === 0) {
-                        delete this.updatedFilters[key];
-                    } else {
-                        filterValue[comparator] = filteredValueName;
-                    }
+                    filterValue[comparator] = filterValue[comparator].filter(v => v !== valueName);
                 } else {
                     filterValue[comparator].push(valueName);
                 }
@@ -83,14 +77,6 @@ export default {
             this.$emit('updateFilters', this.keyString, this.updatedFilters);
         },
         updateTextFilter(key, comparator, value) {
-            if (value.trim() === '') {
-                if (this.updatedFilters[key]) {
-                    delete this.updatedFilters[key];
-                    this.$emit('updateFilters', this.keyString, this.updatedFilters);
-                }
-                return;
-            }
-
             if (!this.updatedFilters[key]) {
                 this.$set(this.updatedFilters, key, {});
                 this.$set(this.updatedFilters[key], comparator, '');

src/plugins/filters/components/FiltersView.vue

@@ -59,18 +59,14 @@ export default {
         removeChildren(identifier) {
             let keyString = this.openmct.objects.makeKeyString(identifier);
             this.$delete(this.children, keyString);
-            delete this.persistedFilters[keyString];
-            this.mutateConfigurationFilters();
+            this.persistFilters(keyString);
         },
         persistFilters(keyString, userSelects) {
             this.persistedFilters[keyString] = userSelects;
-            this.mutateConfigurationFilters();
+            this.openmct.objects.mutate(this.providedObject, 'configuration.filters', this.persistedFilters);
         },
         updatePersistedFilters(filters) {
             this.persistedFilters = filters;
-        },
-        mutateConfigurationFilters() {
-            this.openmct.objects.mutate(this.providedObject, 'configuration.filters', this.persistedFilters);
         }
     },
     mounted(){

src/plugins/folderView/components/GridItem.vue

@@ -1,6 +1,6 @@
 <template>
     <a class="l-grid-view__item c-grid-item"
-        :class="{ 'is-alias': item.isAlias === true }"
+        :class="{ 'is-alias': item.isAlias === true, 'c-grid-item--unknown': item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1 }"
         :href="objectLink">
         <div class="c-grid-item__type-icon"
              :class="(item.type.cssClass != undefined) ? 'bg-' + item.type.cssClass : 'bg-icon-object-unknown'">
@@ -34,10 +34,13 @@
         padding: $interiorMarginLg;
 
         &__type-icon {
-            filter: $colorKeyFilter;
             flex: 0 0 $gridItemMobile;
             font-size: floor($gridItemMobile / 2);
             margin-right: $interiorMarginLg;
+            &:before {
+                filter: $colorKeyFilter;
+                height: 100%;
+            }
         }
 
         &.is-alias {
@@ -48,6 +51,22 @@
             }
         }
 
+        &--unknown {
+            @include isUnknown();
+            /*[class*='__'] {
+                opacity: 0.7;
+            }
+            
+            [class*='__name'],
+            [class*='__metadata'] {
+                font-style: italic;
+            }*/
+
+            [class*='__type-icon__glyph'] {
+                filter: $filterItemUnknown;
+            }
+        }
+
         &__details {
             display: flex;
             flex-flow: column nowrap;
@@ -93,11 +112,10 @@
             transition: background $transOutMs ease-in-out;
 
             &:hover {
-                background: $colorItemBgHov;
-                transition: $transIn;
+                filter: $filterItemHoverFg;
+                //transition: $transIn;
 
                 .c-grid-item__type-icon {
-                    filter: $colorKeyFilterHov;
                     transform: scale(1);
                     transition: $transInBounce;
                 }

src/plugins/folderView/components/GridView.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="l-grid-view">
+    <div class="l-grid-view foo">
         <grid-item v-for="(item, index) in items"
             :key="index"
             :item="item"
@@ -31,129 +31,6 @@
             }
         }
     }
-
-    /******************************* GRID ITEMS */
-    .c-grid-item {
-        // Mobile-first
-        @include button($bg: $colorItemBg, $fg: $colorItemFg);
-        cursor: pointer;
-        display: flex;
-        padding: $interiorMarginLg;
-
-        &__type-icon {
-            filter: $colorKeyFilter;
-            flex: 0 0 $gridItemMobile;
-            font-size: floor($gridItemMobile / 2);
-            margin-right: $interiorMarginLg;
-        }
-
-        &.is-alias {
-            // Object is an alias to an original.
-            [class*='__type-icon'] {
-                @include isAlias();
-                color: $colorIconAliasForKeyFilter;
-            }
-        }
-
-        &__details {
-            display: flex;
-            flex-flow: column nowrap;
-            flex: 1 1 auto;
-        }
-
-        &__name {
-            @include ellipsize();
-            color: $colorItemFg;
-            font-size: 1.2em;
-            font-weight: 400;
-            margin-bottom: $interiorMarginSm;
-        }
-
-        &__metadata {
-            color: $colorItemFgDetails;
-            font-size: 0.9em;
-
-            body.mobile & {
-                [class*='__item-count'] {
-                    &:before {
-                        content: ' - ';
-                    }
-                }
-            }
-        }
-
-        &__controls {
-            color: $colorItemFgDetails;
-            flex: 0 0 64px;
-            font-size: 1.2em;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        body.desktop & {
-            $transOutMs: 300ms;
-            flex-flow: column nowrap;
-            transition: background $transOutMs ease-in-out;
-
-            &:hover {
-                background: $colorItemBgHov;
-                transition: $transIn;
-
-                .c-grid-item__type-icon {
-                    filter: $colorKeyFilterHov;
-                    transform: scale(1);
-                    transition: $transInBounce;
-                }
-            }
-
-            > * {
-                margin: 0; // Reset from mobile
-            }
-
-            &__controls {
-                align-items: start;
-                flex: 0 0 auto;
-                order: 1;
-                .c-info-button,
-                .c-pointer-icon { display: none; }
-            }
-
-            &__type-icon {
-                flex: 1 1 auto;
-                font-size: floor($gridItemDesk / 3);
-                margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
-                order: 2;
-                transform: scale(0.9);
-                transform-origin: center;
-                transition: all $transOutMs ease-in-out;
-            }
-
-            &__details {
-                flex: 0 0 auto;
-                justify-content: flex-end;
-                order: 3;
-            }
-
-            &__metadata {
-                display: flex;
-
-                &__type {
-                    flex: 1 1 auto;
-                    @include ellipsize();
-                }
-
-                &__item-count {
-                    opacity: 0.7;
-                    flex: 0 0 auto;
-                }
-            }
-        }
-    }
 </style>
 
 <script>

src/plugins/folderView/components/ListItem.vue

@@ -1,6 +1,6 @@
 <template>
     <tr class="c-list-item"
-        :class="{ 'is-alias': item.isAlias === true }"
+        :class="{ 'is-alias': item.isAlias === true, 'c-list-item--unknown': item.type.cssClass === undefined || item.type.cssClass.indexOf('unknown') !== -1 }"
         @click="navigate">
         <td class="c-list-item__name">
             <a :href="objectLink" ref="objectLink">
@@ -20,6 +20,7 @@
     /******************************* LIST ITEM */
     .c-list-item {
         &__name a {
+            color: $colorItemFg;
             display: flex;
 
             > * + * { margin-left: $interiorMarginSm; }
@@ -53,6 +54,11 @@
                 }
             }
         }
+
+        &--unknown {
+            @include isUnknown();
+            filter: $filterItemUnknown;
+        }
     }
 </style>
 

src/plugins/folderView/components/ListView.vue

@@ -62,15 +62,16 @@
 
         tbody tr {
             background: $colorListItemBg;
-            transition: $transOut;
         }
 
         body.desktop & {
             tbody tr {
+                transition: $transOut;
                 cursor: pointer;
 
                 &:hover {
-                    background: $colorListItemBgHov;
+                    background: $colorItemTreeHoverBg;
+                    filter: $filterItemHoverFg;
                     transition: $transIn;
                 }
             }

src/plugins/plot/src/configuration/PlotSeries.js

@@ -377,19 +377,6 @@ define([
                 delete this.unsubscribe;
             }
             this.fetch();
-        },
-
-        /**
-         * Clears the plot series, unsubscribes and resubscribes
-         * @public
-         */
-        refresh: function () {
-            this.reset();
-            if (this.unsubscribe) {
-                this.unsubscribe();
-                delete this.unsubscribe;
-            }
-            this.fetch();
         }
     });
 

src/plugins/plot/src/telemetry/PlotController.js

@@ -63,11 +63,8 @@ define([
 
         $scope.pending = 0;
 
-        this.clearData = this.clearData.bind(this);
-
         this.listenTo($scope, 'user:viewport:change:end', this.onUserViewportChangeEnd, this);
         this.listenTo($scope, '$destroy', this.destroy, this);
-        this.listenTo($scope, 'clearData', this.clearData);
 
         this.config = this.getConfig(this.$scope.domainObject);
         this.listenTo(this.config.series, 'add', this.addSeries, this);
@@ -77,7 +74,6 @@ define([
         this.followTimeConductor();
 
         this.newStyleDomainObject = $scope.domainObject.useCapability('adapter');
-        this.keyString = this.openmct.objects.makeKeyString(this.newStyleDomainObject.identifier);
 
         this.filterObserver = this.openmct.objects.observe(
             this.newStyleDomainObject,
@@ -267,12 +263,6 @@ define([
         });
     };
 
-    PlotController.prototype.clearData = function () {
-        this.config.series.forEach(function (series) {
-            series.refresh();
-        });
-    };
-
     /**
      * Export view as JPG.
      */

src/plugins/plugins.js

@@ -43,8 +43,7 @@ define([
     './LADTable/plugin',
     './filters/plugin',
     './objectMigration/plugin',
-    './goToOriginalAction/plugin',
-    './clearData/plugin'
+    './goToOriginalAction/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -68,8 +67,7 @@ define([
     LADTable,
     Filters,
     ObjectMigration,
-    GoToOriginalAction,
-    ClearData
+    GoToOriginalAction
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -168,7 +166,6 @@ define([
     plugins.Filters = Filters;
     plugins.ObjectMigration = ObjectMigration.default;
     plugins.GoToOriginalAction = GoToOriginalAction.default;
-    plugins.ClearData = ClearData;
 
     return plugins;
 });

src/plugins/tabs/components/tabs.vue

@@ -16,7 +16,10 @@
                 v-for="(tab,index) in tabsList"
                 :key="index"
                 :class="[
-                    {'is-current': isCurrent(tab)},
+                    {
+                    'is-current': isCurrent(tab),
+                    'c-tab--unknown': tab.type.definition.cssClass.indexOf('unknown') !== -1
+                    },
                     tab.type.definition.cssClass
                 ]"
                 @click="showTab(tab)">
@@ -29,7 +32,12 @@
             :class="{'c-tabs-view__object-holder--hidden': !isCurrent(tab)}">
             <div v-if="currentTab"
                  class="c-tabs-view__object-name l-browse-bar__object-name--w"
-                 :class="currentTab.type.definition.cssClass">
+                 :class="[
+                 {
+                    'c-tabs-view__object--unknown': tab.type.definition.cssClass.indexOf('unknown') !== -1
+                 },
+                    currentTab.type.definition.cssClass
+                 ]">
                 <div class="l-browse-bar__object-name">
                     {{currentTab.domainObject.name}}
                 </div>
@@ -102,6 +110,13 @@
             width: 100%;
         }
     }
+
+    .c-tab,
+    .c-tabs-view__object {
+        &--unknown {
+            @include isUnknown();
+        }
+    }
 </style>
 
 <script>

src/plugins/telemetryTable/TelemetryTable.js

@@ -49,8 +49,6 @@ define([
             this.telemetryObjects = [];
             this.outstandingRequests = 0;
             this.configuration = new TelemetryTableConfiguration(domainObject, openmct);
-            this.paused = false;
-            this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
             this.addTelemetryObject = this.addTelemetryObject.bind(this);
             this.removeTelemetryObject = this.removeTelemetryObject.bind(this);
@@ -134,6 +132,13 @@ define([
             this.emit('object-removed', objectIdentifier);
         }
 
+        /**
+         * @private
+         */
+        createRow(datum, columnMap, keyString, limitEvaluator) {
+            return new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator);
+        }
+
         requestDataFor(telemetryObject) {
             this.incrementOutstandingRequests();
             let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
@@ -146,17 +151,14 @@ define([
                     let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
                     let columnMap = this.getColumnMapForObject(keyString);
                     let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
-                    this.processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator);
+
+                    let telemetryRows = telemetryData.map(datum => this.createRow(datum, columnMap, keyString, limitEvaluator));
+                    this.boundedRows.add(telemetryRows);
                 }).finally(() => {
                     this.decrementOutstandingRequests();
                 });
         }
 
-        processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator) {
-            let telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
-            this.boundedRows.add(telemetryRows);
-        }
-
         /**
          * @private
          */
@@ -220,17 +222,10 @@ define([
                 if (!this.telemetryObjects.includes(telemetryObject)) {
                     return;
                 }
-
-                if (!this.paused) {
-                    this.processRealtimeDatum(datum, columnMap, keyString, limitEvaluator);
-                }
+                this.boundedRows.add(this.createRow(datum, columnMap, keyString, limitEvaluator));
             }, subscribeOptions);
         }
 
-        processRealtimeDatum(datum, columnMap, keyString, limitEvaluator) {
-            this.boundedRows.add(new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
-        }
-
         isTelemetryObject(domainObject) {
             return domainObject.hasOwnProperty('telemetry');
         }
@@ -259,24 +254,12 @@ define([
             }
         }
 
-        pause() {
-            this.paused = true;
-            this.boundedRows.unsubscribeFromBounds();
-        }
-
-        unpause() {
-            this.paused = false;
-            this.boundedRows.subscribeToBounds();
-            this.refreshData();
-        }
-
         destroy() {
             this.boundedRows.destroy();
             this.filteredRows.destroy();
             Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
             this.openmct.time.off('bounds', this.refreshData);
             this.openmct.time.off('timeSystem', this.refreshData);
-
             if (this.filterObserver) {
                 this.filterObserver();
             }

src/plugins/telemetryTable/TelemetryTableColumn.js

@@ -21,11 +21,10 @@
  *****************************************************************************/
 define(function () {
     class TelemetryTableColumn {
-        constructor (openmct, metadatum, options = {selectable: false}) {
+        constructor (openmct, metadatum) {
             this.metadatum = metadatum;
             this.formatter = openmct.telemetry.getValueFormatter(metadatum);
             this.titleValue = this.metadatum.name;
-            this.selectable = options.selectable;
         }
 
         getKey() {
@@ -56,7 +55,8 @@ define(function () {
                 return formattedValue;
             }
         }
-    }
+
+    };
 
     return TelemetryTableColumn;
 });

src/plugins/telemetryTable/TelemetryTableViewProvider.js

@@ -67,15 +67,12 @@ define([
                                 table
                             },
                             el: element,
-                            template: '<table-component :isEditing="isEditing" :enableMarking="true"></table-component>'
+                            template: '<table-component :isEditing="isEditing"></table-component>'
                         });
                     },
                     onEditModeChange(isEditing) {
                         component.isEditing = isEditing;
                     },
-                    onClearData() {
-                        table.refreshData();
-                    },
                     destroy: function (element) {
                         component.$destroy();
                         component = undefined;

src/plugins/telemetryTable/collections/BoundedTableRowCollection.js

@@ -43,8 +43,7 @@ define(
                 this.sortByTimeSystem(openmct.time.timeSystem());
 
                 this.lastBounds = openmct.time.bounds();
-
-                this.subscribeToBounds();
+                openmct.time.on('bounds', this.bounds);
             }
 
             addOne(item) {
@@ -141,16 +140,8 @@ define(
                 return this.parseTime(row.datum[this.sortOptions.key]);
             }
 
-            unsubscribeFromBounds() {
-                this.openmct.time.off('bounds', this.bounds);
-            }
-
-            subscribeToBounds() {
-                this.openmct.time.on('bounds', this.bounds);
-            }
-
             destroy() {
-                this.unsubscribeFromBounds();
+                this.openmct.time.off('bounds', this.bounds);
             }
         }
         return BoundedTableRowCollection;

src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue

@@ -1,176 +0,0 @@
-<template>
-    <div v-if="filterNames.length > 0"
-        :title=title
-        class="c-filter-indication"
-        :class="{ 'c-filter-indication--mixed': mixed }">
-        <span class="c-filter-indication__mixed">{{ label }}</span>
-        <span v-for="(name, index) in filterNames"
-              class="c-filter-indication__label">
-            {{ name }}
-        </span>
-    </div>
-</template>
-
-<style lang="scss">
-    @import "~styles/sass-base";
-    .c-filter-indication {
-        @include userSelectNone();
-        background: $colorFilterBg;
-        color: $colorFilterFg;
-        display: flex;
-        align-items: center;
-        font-size: 0.9em;
-        margin-top: $interiorMarginSm;
-        padding: 2px;
-        text-transform: uppercase;
-
-        &:before {
-            font-family: symbolsfont-12px;
-            content: $glyph-icon-filter;
-            display: block;
-            font-size: 12px;
-            margin-right: $interiorMarginSm;
-        }
-
-        &__mixed {
-            font-weight: bold;
-            margin-right: $interiorMarginSm;
-        }
-
-        &--mixed {
-            .c-filter-indication__mixed {
-                font-style: italic;
-            }
-        }
-
-        &__label {
-            + .c-filter-indication__label {
-                &:before {
-                    content: ',';
-                }
-            }
-        }
-    }
-</style>
-
-<script>
-    const FILTER_INDICATOR_LABEL = 'Filters:';
-    const FILTER_INDICATOR_LABEL_MIXED = 'Mixed Filters:';
-    const FILTER_INDICATOR_TITLE = 'Data filters are being applied to this view.';
-    const FILTER_INDICATOR_TITLE_MIXED = 'A mix of data filter values are being applied to this view.';
-
-    export default {
-        inject: ['openmct', 'table'],
-        data() {
-            return {
-                filterNames: [],
-                filteredTelemetry: {},
-                mixed: false,
-                label: '',
-                title: ''
-            }           
-        },
-        methods: {
-            isTelemetryObject(domainObject) {
-                return domainObject.hasOwnProperty('telemetry');
-            },
-            setFilterNames() {
-                let names = [];
-
-                this.composition && this.composition.load().then((domainObjects) => {
-                    domainObjects.forEach(telemetryObject => {
-                        let keyString= this.openmct.objects.makeKeyString(telemetryObject.identifier);
-                        let filters = this.filteredTelemetry[keyString];
-                        this.telemetryKeyStrings.add(keyString);
-
-                        if (filters !== undefined) {
-                            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
-                            Object.keys(filters).forEach(key => {
-                                metadataValues.forEach(metadaum => {
-
-                                    if (key === metadaum.key) {
-                                        names.push(metadaum.name);
-                                    }
-                                });
-                            });
-                        }
-                    });
-                    this.filterNames = Array.from(new Set(names));
-                });
-            },
-            handleConfigurationChanges(configuration) {
-                if (!_.eq(this.filteredTelemetry, configuration.filters)) {
-                    this.updateFilters(configuration.filters || {});
-                }
-            },
-            checkFiltersForMixedValues() {
-                let valueToCompare = this.filteredTelemetry[Object.keys(this.filteredTelemetry)[0]];
-                let mixed = false;
-
-                Object.values(this.filteredTelemetry).forEach(value => {
-                    if (!_.isEqual(valueToCompare, value)) {
-                        mixed = true;
-                        return;
-                    }
-                });
-
-                // If the filtered telemetry is not mixed at this point, check the number of available objects
-                // with the number of filtered telemetry. If they are not equal, the filters must be mixed.
-                if (mixed === false && _.size(this.filteredTelemetry) !== this.telemetryKeyStrings.size) {
-                    mixed = true;
-                }
-
-                this.mixed = mixed;
-            },
-            setLabels() {
-                if (this.mixed) {
-                    this.label = FILTER_INDICATOR_LABEL_MIXED;
-                    this.title = FILTER_INDICATOR_TITLE_MIXED;
-                } else {
-                    this.label = FILTER_INDICATOR_LABEL;
-                    this.title = FILTER_INDICATOR_TITLE;
-                }
-            },
-            updateFilters(filters) {
-                this.filteredTelemetry = JSON.parse(JSON.stringify(filters));
-                this.setFilterNames();
-                this.updateIndicatorLabel();
-            },
-            addChildren(child) {
-                let keyString = this.openmct.objects.makeKeyString(child.identifier);
-                this.telemetryKeyStrings.add(keyString);
-                this.updateIndicatorLabel();
-            },
-            removeChildren(identifier) {
-                let keyString = this.openmct.objects.makeKeyString(identifier);
-                this.telemetryKeyStrings.delete(keyString);
-                this.updateIndicatorLabel();
-            },
-            updateIndicatorLabel() {
-                this.checkFiltersForMixedValues();
-                this.setLabels();
-            }
-        },
-        mounted() {
-            let filters = this.table.configuration.getConfiguration().filters || {};
-            this.telemetryKeyStrings = new Set();
-            this.composition = this.openmct.composition.get(this.table.configuration.domainObject);
-
-            if (this.composition) {
-                this.composition.on('add', this.addChildren);
-                this.composition.on('remove', this.removeChildren);
-            }
-
-            this.table.configuration.on('change', this.handleConfigurationChanges);
-            this.updateFilters(filters);
-        },
-        destroyed() {
-            this.table.configuration.off('change', this.handleConfigurationChanges);
-
-            if (this.composition) {
-                this.composition.off('add', this.addChildren);
-                this.composition.off('remove', this.removeChildren);
-            }
-        }
-    }
-</script>

src/plugins/telemetryTable/components/table-row.vue

@@ -20,36 +20,22 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<tr :style="{ top: rowTop }"
-    class="noselect"
-    :class="[
-        rowClass,
-        {'is-selected': marked}
-    ]"
-    @click="markRow">
-    <component v-for="(title, key) in headers" 
+<tr :style="{ top: rowTop }" :class="rowClass">
+    <component
+        v-for="(title, key) in headers"
         :key="key"
         :is="componentList[key]"
         :columnKey="key"
         :style="columnWidths[key] === undefined ? {} : { width: columnWidths[key] + 'px', 'max-width': columnWidths[key] + 'px'}"
         :title="formattedRow[key]"
-        :class="[cellLimitClasses[key], selectableColumns[key] ? 'is-selectable' : '']"
+        :class="cellLimitClasses[key]"
+        class="is-selectable"
         @click="selectCell($event.currentTarget, key)"
-        :row="row">
-    </component>
+        :row="row"></component>
 </tr>
 </template>
 
 <style>
-    .noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-        -webkit-user-select: none; /* Safari */
-        -khtml-user-select: none; /* Konqueror HTML */
-        -moz-user-select: none; /* Firefox */
-            -ms-user-select: none; /* Internet Explorer/Edge */
-                user-select: none; /* Non-prefixed version, currently
-                                    supported by Chrome and Opera */
-    }
 </style>
 
 <script>
@@ -65,10 +51,6 @@ export default {
             componentList: Object.keys(this.headers).reduce((components, header) => {
                 components[header] = this.row.getCellComponentName(header) || 'table-cell';
                 return components
-            }, {}),
-            selectableColumns : Object.keys(this.row.columns).reduce((selectable, columnKeys) => {
-                selectable[columnKeys] = this.row.columns[columnKeys].selectable;
-                return selectable;
             }, {})
         }
     },
@@ -99,11 +81,6 @@ export default {
             type: Number,
             required: false,
             default: 0
-        },
-        marked: {
-            type: Boolean,
-            required: false,
-            default: false
         }
     },
     methods: {
@@ -115,41 +92,22 @@ export default {
             this.rowClass = row.getRowClass();
             this.cellLimitClasses = row.getCellLimitClasses();
         },
-        markRow: function (event) {
-            let keyCtrlModifier = false;
-
-            if (event.ctrlKey || event.metaKey) {
-                keyCtrlModifier = true;
-            }
-
-            if (event.shiftKey) {
-                this.$emit('markMultipleConcurrent', this.rowIndex);
-            } else {
-                if (this.marked) {
-                    this.$emit('unmark', this.rowIndex, keyCtrlModifier);
-                } else {
-                    this.$emit('mark', this.rowIndex, keyCtrlModifier);
-                }
-            }
-        },
         selectCell(element, columnKey) {
-            if (this.selectableColumns[columnKey]) {
-                 //TODO: This is a hack. Cannot get parent this way.
-                this.openmct.selection.select([{
-                    element: element,
-                    context: {
-                        type: 'table-cell',
-                        row: this.row.objectKeyString,
-                        column: columnKey
-                    }
-                },{
-                    element: this.openmct.layout.$refs.browseObject.$el,
-                    context: {
-                        item: this.openmct.router.path[0]
-                    }
-                }], false);
-                event.stopPropagation();
-            }
+            //TODO: This is a hack. Cannot get parent this way.
+            this.openmct.selection.select([{
+                element: element,
+                context: {
+                    type: 'table-cell',
+                    row: this.row.objectKeyString,
+                    column: columnKey
+                }
+            },{
+                element: this.openmct.layout.$refs.browseObject.$el,
+                context: {
+                    item: this.openmct.router.path[0]
+                }
+            }], false);
+            event.stopPropagation();
         }
     },
     // TODO: use computed properties

src/plugins/telemetryTable/components/table.vue

@@ -20,134 +20,93 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<div class="c-table-wrapper">
-    <div class="c-table-control-bar c-control-bar">
+<div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
+     :class="{'loading': loading}">
+    <div :style="{ 'max-width': widthWithScroll, 'min-width': '150px'}"><slot></slot></div>
+    <div v-if="allowExport" class="c-table__control-bar c-control-bar">
         <button class="c-button icon-download labeled"
-                v-if="allowExport"
-                v-on:click="exportAllDataAsCSV()"
-                title="Export This View's Data">
-            <span class="c-button__label">Export Table Data</span>
+           v-on:click="exportAsCSV()"
+           title="Export This View's Data">
+            <span class="c-button__label">Export As CSV</span>
         </button>
-        <button class="c-button icon-download labeled"
-                v-if="allowExport"
-                v-show="markedRows.length"
-                v-on:click="exportMarkedDataAsCSV()"
-                title="Export Marked Rows As CSV">
-            <span class="c-button__label">Export Marked Rows</span>
-        </button>
-        <button class="c-button icon-x labeled"
-                v-show="markedRows.length"
-                v-on:click="unmarkAllRows()"
-                title="Unmark All Rows">
-            <span class="c-button__label">Unmark All Rows</span>
-        </button>
-        <div v-if="enableMarking"
-            class="c-separator">
-        </div>
-        <button v-if="enableMarking"
-                class="c-button icon-pause pause-play labeled"
-                :class=" paused ? 'icon-play is-paused' : 'icon-pause'"
-                v-on:click="togglePauseByButton()"
-                :title="paused ? 'Continue Data Flow' : 'Pause Data Flow'">
-                <span class="c-button__label">
-                    {{paused ? 'Play' : 'Pause'}}
-                </span>
-        </button>
-        <slot name="buttons"></slot>
     </div>
-
-    <div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
-         :class="{
-         'loading': loading,
-         'paused' : paused
-        }">
-
-        <div :style="{ 'max-width': widthWithScroll, 'min-width': '150px'}"><slot></slot></div>
-
-        <div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>
-        <!-- Headers table -->
-        <div class="c-telemetry-table__headers-w js-table__headers-w" ref="headersTable" :style="{ 'max-width': widthWithScroll}">
-            <table class="c-table__headers c-telemetry-table__headers">
-                <thead>
-                    <tr class="c-telemetry-table__headers__labels">
-                        <table-column-header
-                            v-for="(title, key, headerIndex) in headers"
-                            :key="key"
-                            :headerKey="key"
-                            :headerIndex="headerIndex"
-                            @sort="allowSorting && sortBy(key)"
-                            @resizeColumn="resizeColumn"
-                            @dropTargetOffsetChanged="setDropTargetOffset"
-                            @dropTargetActive="dropTargetActive"
-                            @reorderColumn="reorderColumn"
-                            @resizeColumnEnd="updateConfiguredColumnWidths"
-                            :columnWidth="columnWidths[key]"
-                            :sortOptions="sortOptions"
-                            :isEditing="isEditing"
-                        ><span class="c-telemetry-table__headers__label">{{title}}</span>
-                        </table-column-header>
-                    </tr>
-                    <tr class="c-telemetry-table__headers__filter">
-                        <table-column-header
-                            v-for="(title, key, headerIndex) in headers"
-                            :key="key"
-                            :headerKey="key"
-                            :headerIndex="headerIndex"
-                            @resizeColumn="resizeColumn"
-                            @dropTargetOffsetChanged="setDropTargetOffset"
-                            @dropTargetActive="dropTargetActive"
-                            @reorderColumn="reorderColumn"
-                            @resizeColumnEnd="updateConfiguredColumnWidths"
-                            :columnWidth="columnWidths[key]"
-                            :isEditing="isEditing"
-                            >
-                            <search class="c-table__search"
-                                v-model="filters[key]"
-                                v-on:input="filterChanged(key)"
-                                v-on:clear="clearFilter(key)" />
-                        </table-column-header>
-                    </tr>
-                </thead>
-            </table>
-        </div>
-        <!-- Content table -->
-        <div class="c-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w" @scroll="scroll" :style="{ 'max-width': widthWithScroll}">
-            <div class="c-telemetry-table__scroll-forcer" :style="{ width: totalWidth + 'px' }"></div>
-            <table class="c-table__body c-telemetry-table__body js-telemetry-table__content"
-                   :style="{ height: totalHeight + 'px'}">
-                <tbody>
-                    <telemetry-table-row v-for="(row, rowIndex) in visibleRows"
-                        :headers="headers"
-                        :columnWidths="columnWidths"
-                        :rowIndex="rowIndex"
-                        :rowOffset="rowOffset"
-                        :rowHeight="rowHeight"
-                        :row="row"
-                        :marked="row.marked"
-                        @mark="markRow"
-                        @unmark="unmarkRow"
-                        @markMultipleConcurrent="markMultipleConcurrentRows">
-                    </telemetry-table-row>
-                </tbody>
-            </table>
-        </div>
-        <!-- Sizing table -->
-        <table class="c-telemetry-table__sizing js-telemetry-table__sizing" :style="sizingTableWidth">
-            <tr>
-                <template v-for="(title, key) in headers">
-                <th :key="key" :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}">{{title}}</th>
-                </template>
-            </tr>
-            <telemetry-table-row v-for="(sizingRowData, objectKeyString) in sizingRows"
-                :key="objectKeyString"
-                :headers="headers"
-                :columnWidths="configuredColumnWidths"
-                :row="sizingRowData">
-            </telemetry-table-row>
+    <div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>
+    <!-- Headers table -->
+    <div class="c-telemetry-table__headers-w js-table__headers-w" ref="headersTable" :style="{ 'max-width': widthWithScroll}">
+        <table class="c-table__headers c-telemetry-table__headers">
+            <thead>
+                <tr class="c-telemetry-table__headers__labels">
+                    <table-column-header
+                        v-for="(title, key, headerIndex) in headers"
+                        :key="key"
+                        :headerKey="key"
+                        :headerIndex="headerIndex"
+                        @sort="allowSorting && sortBy(key)"
+                        @resizeColumn="resizeColumn"
+                        @dropTargetOffsetChanged="setDropTargetOffset"
+                        @dropTargetActive="dropTargetActive"
+                        @reorderColumn="reorderColumn"
+                        @resizeColumnEnd="updateConfiguredColumnWidths"
+                        :columnWidth="columnWidths[key]"
+                        :sortOptions="sortOptions"
+                        :isEditing="isEditing"
+                    ><span class="c-telemetry-table__headers__label">{{title}}</span>
+                    </table-column-header>
+                </tr>
+                <tr class="c-telemetry-table__headers__filter">
+                    <table-column-header
+                        v-for="(title, key, headerIndex) in headers"
+                        :key="key"
+                        :headerKey="key"
+                        :headerIndex="headerIndex"
+                        @resizeColumn="resizeColumn"
+                        @dropTargetOffsetChanged="setDropTargetOffset"
+                        @dropTargetActive="dropTargetActive"
+                        @reorderColumn="reorderColumn"
+                        @resizeColumnEnd="updateConfiguredColumnWidths"
+                        :columnWidth="columnWidths[key]"
+                        :isEditing="isEditing"
+                        >
+                        <search class="c-table__search"
+                            v-model="filters[key]"
+                            v-on:input="filterChanged(key)"
+                            v-on:clear="clearFilter(key)" />
+                    </table-column-header>
+                </tr>
+            </thead>
         </table>
-        <telemetry-filter-indicator></telemetry-filter-indicator>
     </div>
-</div><!-- closes c-table-wrapper -->
+    <!-- Content table -->
+    <div class="c-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w" @scroll="scroll" :style="{ 'max-width': widthWithScroll}">
+        <div class="c-telemetry-table__scroll-forcer" :style="{ width: totalWidth + 'px' }"></div>
+        <table class="c-table__body c-telemetry-table__body js-telemetry-table__content"
+               :style="{ height: totalHeight + 'px'}">
+            <tbody>
+                <telemetry-table-row v-for="(row, rowIndex) in visibleRows"
+                    :headers="headers"
+                    :columnWidths="columnWidths"
+                    :rowIndex="rowIndex"
+                    :rowOffset="rowOffset"
+                    :rowHeight="rowHeight"
+                    :row="row">
+                </telemetry-table-row>
+            </tbody>
+        </table>
+    </div>
+    <!-- Sizing table -->
+    <table class="c-telemetry-table__sizing js-telemetry-table__sizing" :style="sizingTableWidth">
+        <tr>
+            <template v-for="(title, key) in headers">
+            <th :key="key" :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}">{{title}}</th>
+            </template>
+        </tr>
+        <telemetry-table-row v-for="(sizingRowData, objectKeyString) in sizingRows"
+            :headers="headers"
+            :columnWidths="configuredColumnWidths"
+            :row="sizingRowData">
+        </telemetry-table-row>
+    </table>
+</div>
 </template>
 
 <style lang="scss">
@@ -173,7 +132,7 @@
             display: block;
             flex: 1 0 auto;
             width: 100px;
-            vertical-align: middle; // This is crucial to hiding 4px height injected by browser by default
+            vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
         }
 
         td {
@@ -258,10 +217,6 @@
                 align-items: stretch;
                 position: absolute;
                 height: 18px; // Needed when a row has empty values in its cells
-
-                &.is-selected {
-                    background-color: $colorSelectedBg;
-                }
             }
 
             td {
@@ -312,10 +267,6 @@
         }
     }
 
-    .paused {
-        border: 1px solid #ff9900;
-    }
-
     /******************************* LEGACY */
     .s-status-taking-snapshot,
     .overlay.snapshot {
@@ -329,7 +280,6 @@
 import TelemetryTableRow from './table-row.vue';
 import search from '../../../ui/components/search.vue';
 import TableColumnHeader from './table-column-header.vue';
-import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
 import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
 
@@ -345,8 +295,7 @@ export default {
     components: {
         TelemetryTableRow,
         TableColumnHeader,
-        search,
-        TelemetryFilterIndicator
+        search
     },
     inject: ['table', 'openmct'],
     props: {
@@ -365,10 +314,6 @@ export default {
         allowSorting: {
             'type': Boolean,
             'default': true
-        },
-        enableMarking: {
-            type: Boolean,
-            default: false
         }
     },
     data() {
@@ -397,10 +342,7 @@ export default {
             dropOffsetLeft: undefined,
             isDropTargetActive: false,
             isAutosizeEnabled: configuration.autosize,
-            scrollW: 0,
-            markCounter: 0,
-            paused: false,
-            markedRows: []
+            scrollW: 0
         }
     },
     computed: {
@@ -586,27 +528,15 @@ export default {
             // which causes subsequent scroll to use an out of date height.
             this.contentTable.style.height = this.totalHeight + 'px'; 
         },
-        exportAsCSV(data) {
+        exportAsCSV() {
             const headerKeys = Object.keys(this.headers);
-
-            this.csvExporter.export(data, {
+            const justTheData = this.table.filteredRows.getRows()
+                .map(row => row.getFormattedDatum(this.headers));
+            this.csvExporter.export(justTheData, {
                 filename: this.table.domainObject.name + '.csv',
                 headers: headerKeys
             });
         },
-        exportAllDataAsCSV() {
-            const justTheData = this.table.filteredRows.getRows()
-                .map(row => row.getFormattedDatum(this.headers));
-
-            this.exportAsCSV(justTheData);
-        },
-        exportMarkedDataAsCSV() {
-            const data = this.table.filteredRows.getRows()
-                .filter(row => row.marked === true)
-                .map(row => row.getFormattedDatum(this.headers));
-
-            this.exportAsCSV(data);
-        },
         outstandingRequests(loading) {
             this.loading = loading;
         },
@@ -698,105 +628,8 @@ export default {
         clearRowsAndRerender() {
             this.visibleRows = [];
             this.$nextTick().then(this.updateVisibleRows);
-        },
-        pause(pausedByButton) {
-            if (pausedByButton) {
-                this.pausedByButton = true;
-            }
-            this.paused = true;
-            this.table.pause();
-        },
-        unpause(unpausedByButton) {
-            if (unpausedByButton) {
-                this.paused = false;
-                this.table.unpause();
-                this.markedRows = [];
-                this.pausedByButton = false;
-            } else {
-                if (!this.pausedByButton) {
-                    this.paused = false;
-                    this.table.unpause();
-                    this.markedRows = [];
-                }
-            }
-            
-        },
-        togglePauseByButton() {
-            if (this.paused) {
-                this.unpause(true);
-            } else {
-                this.pause(true);
-            }
-        },
-        undoMarkedRows(unpause) {
-            this.markedRows.forEach(r => r.marked = false);
-            this.markedRows = [];
-        },
-        unmarkRow(rowIndex) {
-            this.undoMarkedRows();
-            this.unpause();
-        },
-        markRow(rowIndex, keyModifier) {
-            if (!this.enableMarking) {
-                return;
-            }
-
-            let insertMethod = 'unshift';
-
-            if (this.markedRows.length && !keyModifier) {
-                this.undoMarkedRows();
-                insertMethod = 'push';
-            }
-
-            let markedRow = this.visibleRows[rowIndex];
-
-            this.$set(markedRow, 'marked', true);
-            this.pause();
-
-            this.markedRows[insertMethod](markedRow);
-        },
-        unmarkAllRows(skipUnpause) {
-            this.markedRows.forEach(row => row.marked = false);
-            this.markedRows = [];
-            this.unpause();
-        },
-        markMultipleConcurrentRows(rowIndex) {
-            if (!this.enableMarking) {
-                return;
-            }
-
-            if (!this.markedRows.length) {
-                this.markRow(rowIndex);
-            } else {
-                if (this.markedRows.length > 1) {
-                    this.markedRows.forEach((r,i) => {
-                        if (i !== 0) {
-                            r.marked = false;
-                        }
-                    });
-                    this.markedRows.splice(1);
-                }
-                let lastRowToBeMarked = this.visibleRows[rowIndex];
-
-                let allRows = this.table.filteredRows.getRows(),
-                    firstRowIndex = allRows.indexOf(this.markedRows[0]),
-                    lastRowIndex = allRows.indexOf(lastRowToBeMarked);
-
-                //supports backward selection
-                if (lastRowIndex < firstRowIndex) {
-                    let temp = lastRowIndex;
-                
-                    lastRowIndex = firstRowIndex;
-                    firstRowIndex = temp - 1;
-                }
-
-                for (var i = firstRowIndex + 1; i <= lastRowIndex; i++) {
-                    let row = allRows[i];
-                    row.marked = true;
-                    this.markedRows.push(row);
-                }
-            }
         }
+
     },
     created() {
         this.filterChanged = _.debounce(this.filterChanged, 500);

src/styles-new/_about.scss

@@ -108,6 +108,10 @@
 
     a {
         color: $colorAboutLink;
+
+        &:hover {
+            color: $colorAHov;
+        }
     }
 
     em {

src/styles-new/_constants-espresso.scss

@@ -70,6 +70,9 @@ $colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;
+$colorStatusBarBg: $colorHeadBg;
+$colorStatusBarFg: $colorBodyFg;
+$colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
 $colorKeyHov: #26d8ff;
@@ -102,8 +105,8 @@ $colorStatusPartialBg: #3f5e8b;
 $colorStatusCompleteBg: #457638;
 $colorAlert: #ff3c00;
 $colorAlertFg: #fff;
-$colorWarningHi: #ff0000;
-$colorWarningHiFg: #ffdad0;
+$colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
 $colorWarningLo: #ff9900;
 $colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
@@ -114,8 +117,6 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
-$colorFilterBg: #44449c;
-$colorFilterFg: #8984e9;
 
 // States
 $colorPausedBg: #ff9900;
@@ -141,6 +142,8 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(1.2);
+$filterItemUnknown: contrast(0);
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
@@ -278,11 +281,6 @@ $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #555555;
 $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #777777;
-$colorIndicatorBgHov: rgba($colorHeadFg, 0.1);
-$colorIndicatorMenuBg: $colorHeadBg;
-$colorIndicatorMenuBgShdw: rgba(white, 0.6) 0 0 6px;
-$colorIndicatorMenuFg: $colorHeadFg;
-$colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
 
 // Staleness
 $colorTelemFresh: pullForward($colorBodyFg, 20%);

src/styles-new/_constants-maelstrom.scss

@@ -74,6 +74,9 @@ $colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
 $colorHeadFg: $colorBodyFg;
+$colorStatusBarBg: $colorHeadBg;
+$colorStatusBarFg: $colorBodyFg;
+$colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
 $colorKeyHov: #26d8ff;
@@ -106,8 +109,8 @@ $colorStatusPartialBg: #3f5e8b;
 $colorStatusCompleteBg: #457638;
 $colorAlert: #ff3c00;
 $colorAlertFg: #fff;
-$colorWarningHi: #ff0000;
-$colorWarningHiFg: #ffdad0;
+$colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
 $colorWarningLo: #ff9900;
 $colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
@@ -118,8 +121,6 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
-$colorFilterBg: #44449c;
-$colorFilterFg: #8984e9;
 
 // States
 $colorPausedBg: #ff9900;
@@ -145,6 +146,8 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(1.2);
+$filterItemUnknown: contrast(0);
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
@@ -282,11 +285,6 @@ $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #555555;
 $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #777777;
-$colorIndicatorBgHov: rgba($colorHeadFg, 0.1);
-$colorIndicatorMenuBg: $colorHeadBg;
-$colorIndicatorMenuBgShdw: rgba(white, 0.6) 0 0 6px;
-$colorIndicatorMenuFg: $colorHeadFg;
-$colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
 
 // Staleness
 $colorTelemFresh: pullForward($colorBodyFg, 20%);

src/styles-new/_constants-snow.scss

@@ -70,6 +70,9 @@ $colorBodyFgEm: #333;
 $colorGenBg: #fff;
 $colorHeadBg: #eee;
 $colorHeadFg: $colorBodyFg;
+$colorStatusBarBg: #000;
+$colorStatusBarFg: #999;
+$colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
 $colorKeyHov: #00c0f6;
@@ -114,8 +117,6 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
-$colorFilterBg: #a29fe2;
-$colorFilterFg: #fff;
 
 // States
 $colorPausedBg: #ff9900;
@@ -141,6 +142,8 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
 $browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(0.9);
+$filterItemUnknown: contrast(0);
 
 /************************************************** EDITING */
 $editUIColor: $uiColor; // Base color
@@ -278,11 +281,6 @@ $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #444;
 $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #666;
-$colorIndicatorBgHov: rgba($colorHeadFg, 0.1);
-$colorIndicatorMenuBg: white;
-$colorIndicatorMenuBgShdw: rgba(black, 0.6) 0 0 6px;
-$colorIndicatorMenuFg: $colorHeadFg;
-$colorIndicatorMenuFgHov: pullForward($colorHeadFg, 10%);
 
 // Staleness
 $colorTelemFresh: pullForward($colorBodyFg, 20%);

src/styles-new/_constants.scss

@@ -141,8 +141,6 @@ $glyph-icon-grid: '\e922';
 $glyph-icon-grippy-ew: '\e923';
 $glyph-icon-columns: '\e924';
 $glyph-icon-rows: '\e925';
-$glyph-icon-filter: '\e926';
-$glyph-icon-filter-outline: '\e927';
 $glyph-icon-arrows-right-left: '\ea00';
 $glyph-icon-arrows-up-down: '\ea01';
 $glyph-icon-bullet: '\ea02';

src/styles-new/_controls.scss

@@ -49,21 +49,6 @@ button {
         }
     }
 
-    &[class*='__collapse-button'] {
-        box-shadow: none;
-        background: $splitterBtnColorBg;
-        color: $splitterBtnColorFg;
-        border-radius: $smallCr;
-        font-size: 6px;
-        line-height: 90%;
-        padding: 3px 15px;
-
-        @include hover() {
-            background: $colorBtnBgHov;
-            color: $colorBtnFgHov;
-        }
-    }
-
     &.is-active {
         background: $colorBtnActiveBg;
         color: $colorBtnActiveFg;
@@ -91,7 +76,13 @@ button {
     @include cClickIconButton();
 
     &--menu {
-        @include hasMenu();
+        &:after {
+            content: $glyph-icon-arrow-down;
+            font-family: symbolsfont;
+            font-size: 0.7em;
+            margin-left: floor($interiorMarginSm * 0.8);
+            opacity: 0.5;
+        }
     }
 }
 
@@ -141,7 +132,7 @@ button {
 
 /******************************************************** DISCLOSURE CONTROLS */
 /********* Disclosure Button */
-// Provides a downward arrow icon that when clicked displays additional options and/or info.
+// Provides a downward arrow icon that when clicked displays a context menu
 // Always placed AFTER an element
 .c-disclosure-button {
     @include cClickIcon();
@@ -600,15 +591,15 @@ select {
     margin-right: $m;
 }
 
-.c-separator {
-    @include cToolbarSeparator();
-}
-
 .c-toolbar {
     > * + * {
         margin-left: 2px;
     }
 
+    &__button {
+
+    }
+
     &__separator {
         @include cToolbarSeparator();
     }

src/styles-new/_global.scss

@@ -79,9 +79,6 @@ a {
     color: $colorA;
     cursor: pointer;
     text-decoration: none;
-    &:hover {
-        color: $colorAHov;
-    }
 }
 
 body, html {

src/styles-new/_glyphs.scss

@@ -30,10 +30,10 @@
 }
 
 @font-face {
-    // Use https://icomoon.io/app with icomoon-project-Open-MCT-Symbols-12px.json to generate font files
+    // Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
     font-family: 'symbolsfont-12px';
-    src: url('./fonts/Open-MCT-Symbols-12px.woff') format('woff'),
-    url('./fonts/Open-MCT-Symbols-12px.ttf') format('truetype');
+    src: url('./fonts/openmct-symbols-12px.woff') format('woff'),
+    url('./fonts/openmct-symbols-12px.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
@@ -77,8 +77,6 @@
 .icon-grippy-ew {  @include glyphBefore($glyph-icon-grippy-ew); }
 .icon-columns {  @include glyphBefore($glyph-icon-columns); }
 .icon-rows {  @include glyphBefore($glyph-icon-rows); }
-.icon-filter {  @include glyphBefore($glyph-icon-filter); }
-.icon-filter-outline {  @include glyphBefore($glyph-icon-filter-outline); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
 .icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
@@ -166,8 +164,6 @@
 
 /************************** 12 PX CLASSES */
 // TODO: sync with 16px redo as of 10/25/18
-.icon-filter-12px {  @include glyphBefore($glyph-icon-filter,'symbolsfont-12px'); }
-.icon-filter-outline-12px {  @include glyphBefore($glyph-icon-filter-outline,'symbolsfont-12px'); }
 .icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
 .icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
 .icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }

src/styles-new/_legacy.scss

@@ -782,6 +782,126 @@ mct-indicators mct-include {
     display: contents;
 }
 
+.ls-indicator {
+    $bg: rgba(white, 0.2) !important;
+    $hbg: $colorStatusBarBg;
+    $hshdw: rgba(white, 0.4) 0 0 3px;
+    $br: $controlCr;
+    $hoverYOffset: -35px;
+    background: transparent !important;
+    border-radius: $br;
+    display: inline-block;
+    position: relative;
+    padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
+    text-transform: uppercase;
+
+    &:before {
+        display: inline-block;
+    }
+
+    .label {
+        // Hover bubbles that appear when hovering on an Indicator
+        display: inline-block;
+
+        a,
+        button,
+        s-button,
+        .c-button {
+            // Make <a> in label look like buttons
+            transition: $transIn;
+            background: transparent;
+            border: 1px solid rgba($colorStatusBarFg, 0.5);
+            border-radius: $br;
+            box-sizing: border-box;
+            color: inherit;
+            font-size: inherit;
+            height: auto;
+            line-height: normal;
+            padding: 0 2px;
+            &:hover {
+                background: $bg;
+                color: #fff;
+            }
+        }
+
+        [class*='icon-'] {
+            // If any elements within label include the class 'icon-*' then deal with their :before's
+            &:before {
+                font-size: 0.8em;
+                margin-right: $interiorMarginSm;
+            }
+        }
+    }
+
+    &.no-collapse {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        > *,
+        &:before {
+            flex: 1 1 auto;
+        }
+
+        &:before {
+            margin-right: $interiorMarginSm;
+        }
+    }
+
+    &:not(.no-collapse) {
+        &:before {
+            margin-right: 0 !important;
+        }
+
+        .label {
+            transition: all 250ms ease-in 100ms;
+            background: $hbg;
+            border-radius: $br;
+            font-size: .6rem;
+            left: 0;
+            bottom: 140%;
+            opacity: 0;
+            padding: $interiorMarginSm $interiorMargin;
+            position: absolute;
+            transform-origin: 10px 100%;
+            transform: scale(0.0);
+            white-space: nowrap;
+            z-index: 50;
+
+            &:before {
+                // Infobubble-style arrow element
+                content: '';
+                display: block;
+                position: absolute;
+                top: 100%;
+                @include triangle('down', $size: 4px, $ratio: 1, $color: $hbg);
+            }
+        }
+
+        @include hover() {
+            background: $bg;
+
+            .label {
+                opacity: 1;
+                transform: scale(1.0);
+                transition: all 100ms ease-out 0s;
+            }
+        }
+    }
+
+    &.float-right {
+        float: right;
+    }
+}
+
+/* Mobile */
+// Hide the clock indicator when we're phone portrait
+body.phone.portrait {
+    .ls-indicator.t-indicator-clock {
+        display: none;
+    }
+}
+
 /************************************************* DATETIME UI */
 @mixin complexFieldHolder($myW) {
     width: $myW + $interiorMargin;

src/styles-new/_mixins.scss

@@ -36,10 +36,14 @@
 }
 
 @mixin glyphBg($glyphUrl) {
-    background-image: $glyphUrl;
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
+    &:before {
+        content: '';
+        display: block;
+        background-image: $glyphUrl;
+        background-position: center;
+        background-size: contain;
+        background-repeat: no-repeat;
+    }
 }
 
 [class*="icon-"] {
@@ -97,6 +101,24 @@
     }
 }
 
+@mixin isUnknown() {
+    // Common styles to be applied to tree items, object labels, grid and list item views
+    font-style: italic;
+    opacity: 0.7;
+
+    &[class*='icon']:before,
+    &[class*='icon']:after,
+    [class*='icon']:before,
+    [class*='icon']:after {
+        font-style: normal; // Prevent symbolsfont element from being italicized;
+    }
+
+    [class*='icon']:before {
+        // Target :before to avoid affecting alias indicator
+        filter: $filterItemUnknown;
+    }
+}
+
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
     background-image: linear-gradient(-45deg,
         rgba($c, $a) 25%, transparent 25%,
@@ -420,9 +442,20 @@
     }
 }
 
-@mixin cClickIconButtonLayout() {
+@mixin cClickIconButton() {
+    // A clickable element that just includes the icon
+    // Background is displayed on hover
+    // Padding is included to facilitate a bigger hit area
+    // Make the icon bigger relative to its container
     $pLR: 4px;
     $pTB: 4px;
+
+    @include cControl();
+    background: none;
+    box-shadow: none;
+    cursor: pointer;
+    transition: $transOut;
+    border-radius: $controlCr;
     padding: $pTB $pLR;
 
     &:before,
@@ -431,20 +464,6 @@
         // Needed for c-togglebutton.
         font-size: 1.25em;
     }
-}
-
-@mixin cClickIconButton() {
-    // A clickable element that just includes the icon
-    // Background is displayed on hover
-    // Padding is included to facilitate a bigger hit area
-    // Make the icon bigger relative to its container
-    @include cControl();
-    @include cClickIconButtonLayout();
-    background: none;
-    box-shadow: none;
-    cursor: pointer;
-    transition: $transOut;
-    border-radius: $controlCr;
 
     @include hover() {
         transition: $transIn;
@@ -481,16 +500,6 @@
     }
 }
 
-@mixin hasMenu() {
-    &:after {
-        content: $glyph-icon-arrow-down;
-        font-family: symbolsfont;
-        font-size: 0.7em;
-        margin-left: floor($interiorMarginSm * 0.8);
-        opacity: 0.5;
-    }
-}
-
 @mixin cSelect($bg, $fg, $arwClr, $shdw) {
     $svgArwClr: str-slice(inspect($arwClr), 2, str-length(inspect($arwClr))); // Remove initial # in color value
     background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"), $bg;

src/styles-new/_status.scss

@@ -61,7 +61,7 @@
 }
 
 @mixin indicatorStatusColors($c) {
-    &:before, .c-indicator__count {
+    &:before, .count {
         color: $c;
     }
 }
@@ -127,7 +127,7 @@ tr {
 .s-status-icon-ok:before { content: $glyph-icon-check; }
 
 /*************************************************** INDICATOR COLORING */
-.c-indicator {
+.ls-indicator {
     &.s-status-info {
         @include indicatorStatusColors($colorInfo);
     }

src/styles-new/_table.scss

@@ -76,43 +76,23 @@ div.c-table {
     height: 100%;
 }
 
-.c-table-wrapper {
-    // Wraps .c-control-bar and .c-table
-    @include abs();
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    > .c-table {
-        height: auto;
-        flex: 1 1 auto;
-    }
-
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
-}
-
-.c-table-control-bar {
-    display: flex;
-    flex: 0 0 auto;
-
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
-}
-
 .c-table {
     // Can be used by any type of table, scrolling, LAD, etc.
     $min-w: 50px;
 
     width: 100%;
 
+    &__control-bar,
     &__headers-w {
         flex: 0 0 auto;
     }
 
     /******************************* ELEMENTS */
+
+    &__control-bar {
+        margin-bottom: $interiorMarginSm;
+    }
+
     thead tr,
     &.c-table__headers {
         background: $colorTabHeaderBg;

src/styles-new/fonts/Icomoon.Open MCT Symbols 2018.json

@@ -1,8 +1,8 @@
 {
   "metadata": {
-    "name": "Open MCT Symbols 16px",
+    "name": "Open MCT Symbols",
     "lastOpened": 0,
-    "created": 1561482854927
+    "created": 1541830438012
   },
   "iconSets": [
     {
@@ -317,29 +317,13 @@
           "code": 59685,
           "tempChar": ""
         },
-        {
-          "order": 161,
-          "id": 142,
-          "name": "icon-filter",
-          "prevSize": 32,
-          "code": 59686,
-          "tempChar": ""
-        },
-        {
-          "order": 162,
-          "id": 141,
-          "name": "icon-filter-outline",
-          "prevSize": 32,
-          "code": 59687,
-          "tempChar": ""
-        },
         {
           "order": 27,
           "id": 105,
           "name": "icon-arrows-right-left",
           "prevSize": 32,
           "code": 59904,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 26,
@@ -347,7 +331,7 @@
           "name": "icon-arrows-up-down",
           "prevSize": 32,
           "code": 59905,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -355,7 +339,7 @@
           "name": "icon-bullet",
           "prevSize": 32,
           "code": 59906,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 150,
@@ -363,7 +347,7 @@
           "prevSize": 32,
           "code": 59907,
           "name": "icon-calendar",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 45,
@@ -371,7 +355,7 @@
           "name": "icon-chain-links",
           "prevSize": 32,
           "code": 59908,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 73,
@@ -379,7 +363,7 @@
           "name": "icon-download",
           "prevSize": 32,
           "code": 59909,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 39,
@@ -387,7 +371,7 @@
           "name": "icon-duplicate",
           "prevSize": 32,
           "code": 59910,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 50,
@@ -395,7 +379,7 @@
           "name": "icon-folder-new",
           "prevSize": 32,
           "code": 59911,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 138,
@@ -403,7 +387,7 @@
           "name": "icon-fullscreen-collapse",
           "prevSize": 32,
           "code": 59912,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 139,
@@ -411,7 +395,7 @@
           "name": "icon-fullscreen-expand",
           "prevSize": 32,
           "code": 59913,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 122,
@@ -419,7 +403,7 @@
           "name": "icon-layers",
           "prevSize": 32,
           "code": 59914,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 151,
@@ -427,7 +411,7 @@
           "name": "icon-line-horz",
           "prevSize": 32,
           "code": 59915,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 100,
@@ -435,7 +419,7 @@
           "name": "icon-magnify",
           "prevSize": 32,
           "code": 59916,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 99,
@@ -443,7 +427,7 @@
           "name": "icon-magnify-in",
           "prevSize": 32,
           "code": 59917,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 101,
@@ -451,7 +435,7 @@
           "name": "icon-magnify-out-v2",
           "prevSize": 32,
           "code": 59918,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 103,
@@ -459,7 +443,7 @@
           "name": "icon-menu",
           "prevSize": 32,
           "code": 59919,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 124,
@@ -467,7 +451,7 @@
           "name": "icon-move",
           "prevSize": 32,
           "code": 59920,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -475,7 +459,7 @@
           "name": "icon-new-window",
           "prevSize": 32,
           "code": 59921,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 63,
@@ -483,7 +467,7 @@
           "name": "icon-paint-bucket-v2",
           "prevSize": 32,
           "code": 59922,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 15,
@@ -491,7 +475,7 @@
           "name": "icon-pencil",
           "prevSize": 32,
           "code": 59923,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 54,
@@ -499,7 +483,7 @@
           "name": "icon-pencil-edit-in-place",
           "prevSize": 32,
           "code": 59924,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 40,
@@ -507,7 +491,7 @@
           "name": "icon-play",
           "prevSize": 32,
           "code": 59925,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 125,
@@ -515,7 +499,7 @@
           "name": "icon-pause",
           "prevSize": 32,
           "code": 59926,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 119,
@@ -523,7 +507,7 @@
           "name": "icon-plot-resource",
           "prevSize": 32,
           "code": 59927,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 48,
@@ -531,7 +515,7 @@
           "name": "icon-pointer-left",
           "prevSize": 32,
           "code": 59928,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 47,
@@ -539,7 +523,7 @@
           "name": "icon-pointer-right",
           "prevSize": 32,
           "code": 59929,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 85,
@@ -547,7 +531,7 @@
           "name": "icon-refresh",
           "prevSize": 32,
           "code": 59930,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -555,7 +539,7 @@
           "name": "icon-save",
           "prevSize": 32,
           "code": 59931,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 56,
@@ -563,7 +547,7 @@
           "name": "icon-save-as",
           "prevSize": 32,
           "code": 59932,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -571,7 +555,7 @@
           "name": "icon-sine",
           "prevSize": 32,
           "code": 59933,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -579,7 +563,7 @@
           "name": "icon-font",
           "prevSize": 32,
           "code": 59934,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 41,
@@ -587,7 +571,7 @@
           "name": "icon-thumbs-strip",
           "prevSize": 32,
           "code": 59935,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 146,
@@ -595,7 +579,7 @@
           "name": "icon-two-parts-both",
           "prevSize": 32,
           "code": 59936,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 145,
@@ -603,7 +587,7 @@
           "name": "icon-two-parts-one-only",
           "prevSize": 32,
           "code": 59937,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 82,
@@ -611,7 +595,7 @@
           "name": "icon-resync",
           "prevSize": 32,
           "code": 59938,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 86,
@@ -619,7 +603,7 @@
           "name": "icon-reset",
           "prevSize": 32,
           "code": 59939,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 61,
@@ -627,7 +611,7 @@
           "name": "icon-x-in-circle",
           "prevSize": 32,
           "code": 59940,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 84,
@@ -635,7 +619,7 @@
           "name": "icon-brightness",
           "prevSize": 32,
           "code": 59941,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 83,
@@ -643,7 +627,7 @@
           "name": "icon-contrast",
           "prevSize": 32,
           "code": 59942,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 87,
@@ -651,7 +635,7 @@
           "name": "icon-expand",
           "prevSize": 32,
           "code": 59943,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 89,
@@ -659,7 +643,7 @@
           "name": "icon-list-view",
           "prevSize": 32,
           "code": 59944,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 133,
@@ -667,7 +651,7 @@
           "name": "icon-grid-snap-to",
           "prevSize": 32,
           "code": 59945,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 132,
@@ -675,7 +659,7 @@
           "name": "icon-grid-snap-no",
           "prevSize": 32,
           "code": 59946,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 94,
@@ -683,7 +667,7 @@
           "name": "icon-frame-show",
           "prevSize": 32,
           "code": 59947,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 95,
@@ -691,7 +675,7 @@
           "name": "icon-frame-hide",
           "prevSize": 32,
           "code": 59948,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 97,
@@ -699,7 +683,7 @@
           "name": "icon-import",
           "prevSize": 32,
           "code": 59949,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 96,
@@ -707,7 +691,7 @@
           "name": "icon-export",
           "prevSize": 32,
           "code": 59950,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 114,
@@ -715,7 +699,7 @@
           "name": "icon-font-size",
           "prevSize": 32,
           "code": 59951,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 144,
@@ -723,7 +707,7 @@
           "name": "icon-activity",
           "prevSize": 32,
           "code": 60160,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 104,
@@ -731,7 +715,7 @@
           "name": "icon-activity-mode",
           "prevSize": 32,
           "code": 60161,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 137,
@@ -739,7 +723,7 @@
           "name": "icon-autoflow-tabular",
           "prevSize": 32,
           "code": 60162,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -747,7 +731,7 @@
           "name": "icon-clock",
           "prevSize": 32,
           "code": 60163,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 2,
@@ -755,7 +739,7 @@
           "name": "icon-database",
           "prevSize": 32,
           "code": 60164,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 3,
@@ -763,7 +747,7 @@
           "name": "icon-database-query",
           "prevSize": 32,
           "code": 60165,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
@@ -771,7 +755,7 @@
           "name": "icon-dataset",
           "prevSize": 32,
           "code": 60166,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -779,7 +763,7 @@
           "name": "icon-datatable",
           "prevSize": 32,
           "code": 60167,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 136,
@@ -787,7 +771,7 @@
           "name": "icon-dictionary",
           "prevSize": 32,
           "code": 60168,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 51,
@@ -795,7 +779,7 @@
           "name": "icon-folder",
           "prevSize": 32,
           "code": 60169,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 147,
@@ -803,7 +787,7 @@
           "name": "icon-image",
           "prevSize": 32,
           "code": 60170,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 4,
@@ -811,7 +795,7 @@
           "name": "icon-layout",
           "prevSize": 32,
           "code": 60171,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -819,7 +803,7 @@
           "name": "icon-object",
           "prevSize": 32,
           "code": 60172,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -827,7 +811,7 @@
           "name": "icon-object-unknown",
           "prevSize": 32,
           "code": 60173,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 105,
@@ -835,7 +819,7 @@
           "name": "icon-packet",
           "prevSize": 32,
           "code": 60174,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -843,7 +827,7 @@
           "name": "icon-page",
           "prevSize": 32,
           "code": 60175,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 130,
@@ -851,7 +835,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 32,
           "code": 60176,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -859,7 +843,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 32,
           "code": 60177,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 134,
@@ -867,7 +851,7 @@
           "name": "icon-session",
           "prevSize": 32,
           "code": 60178,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
@@ -875,7 +859,7 @@
           "name": "icon-tabular",
           "prevSize": 32,
           "code": 60179,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 107,
@@ -883,7 +867,7 @@
           "name": "icon-tabular-lad",
           "prevSize": 32,
           "code": 60180,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 106,
@@ -891,7 +875,7 @@
           "name": "icon-tabular-lad-set",
           "prevSize": 32,
           "code": 60181,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 70,
@@ -899,7 +883,7 @@
           "name": "icon-tabular-realtime",
           "prevSize": 32,
           "code": 60182,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
@@ -907,7 +891,7 @@
           "name": "icon-tabular-scrolling",
           "prevSize": 32,
           "code": 60183,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 131,
@@ -915,7 +899,7 @@
           "name": "icon-telemetry",
           "prevSize": 32,
           "code": 60184,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 108,
@@ -923,7 +907,7 @@
           "name": "icon-timeline",
           "prevSize": 32,
           "code": 60185,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
@@ -931,7 +915,7 @@
           "name": "icon-timer",
           "prevSize": 32,
           "code": 60186,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 69,
@@ -939,7 +923,7 @@
           "name": "icon-topic",
           "prevSize": 32,
           "code": 60187,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -947,7 +931,7 @@
           "name": "icon-box-with-dashed-lines-v2",
           "prevSize": 32,
           "code": 60188,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -955,7 +939,7 @@
           "name": "icon-summary-widget",
           "prevSize": 32,
           "code": 60189,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
@@ -963,7 +947,7 @@
           "name": "icon-notebook",
           "prevSize": 32,
           "code": 60190,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 118,
@@ -971,7 +955,7 @@
           "name": "icon-tabs-view",
           "prevSize": 32,
           "code": 60191,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 117,
@@ -979,7 +963,7 @@
           "name": "icon-flexible-layout",
           "prevSize": 32,
           "code": 60192,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 152,
@@ -987,7 +971,7 @@
           "name": "icon-generator-sine",
           "prevSize": 32,
           "code": 60193,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 153,
@@ -995,7 +979,7 @@
           "name": "icon-generator-event",
           "prevSize": 32,
           "code": 60194,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 160,
@@ -1003,7 +987,7 @@
           "name": "icon-gauge",
           "prevSize": 32,
           "code": 60195,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
@@ -1618,46 +1602,6 @@
             ]
           }
         },
-        {
-          "id": 142,
-          "paths": [
-            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h256v-512l-192-192h640l-192 192v512h256c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0z"
-          ],
-          "attrs": [
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 1,
-          "tags": [
-            "icon-filter"
-          ],
-          "colorPermutations": {
-            "11841841841": [
-              {}
-            ]
-          }
-        },
-        {
-          "id": 141,
-          "paths": [
-            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h768c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0zM896 895.8h-256v-383.8l192-192h-640l192 192v384h-256v-767.8h768z"
-          ],
-          "attrs": [
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
-          "grid": 1,
-          "tags": [
-            "icon-filter-outline"
-          ],
-          "colorPermutations": {
-            "11841841841": [
-              {}
-            ]
-          }
-        },
         {
           "id": 105,
           "paths": [

src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json

@@ -1,35 +1,19 @@
 {
   "metadata": {
-    "name": "Open MCT Symbols 12px",
+    "name": "openmct-symbols-12px",
     "lastOpened": 0,
-    "created": 1561483556329
+    "created": 1527031065005
   },
   "iconSets": [
     {
       "selection": [
-        {
-          "order": 12,
-          "id": 10,
-          "name": "icon12-filter",
-          "prevSize": 12,
-          "code": 59686,
-          "tempChar": ""
-        },
-        {
-          "order": 14,
-          "id": 11,
-          "name": "icon12-filter-outline",
-          "prevSize": 12,
-          "code": 59687,
-          "tempChar": ""
-        },
         {
           "order": 9,
           "id": 6,
           "name": "icon12-crosshair",
           "prevSize": 12,
           "code": 59696,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -37,7 +21,7 @@
           "name": "icon12-grippy",
           "prevSize": 12,
           "code": 59697,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -45,7 +29,7 @@
           "name": "icon12-list-view",
           "prevSize": 12,
           "code": 921666,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -53,14 +37,14 @@
           "prevSize": 12,
           "code": 921865,
           "name": "icon12-folder",
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
       "metadata": {
-        "name": "Open MCT Symbols 12px",
+        "name": "openmct-symbols-12px",
         "importSize": {
-          "width": 384,
+          "width": 279,
           "height": 384
         },
         "designer": "Charles Hacskaylo"
@@ -68,28 +52,6 @@
       "height": 1024,
       "prevSize": 12,
       "icons": [
-        {
-          "id": 10,
-          "paths": [
-            "M853.333 0h-682.667c-94.135 0.302-170.364 76.532-170.667 170.638l-0 0.029v682.667c0.302 94.135 76.532 170.364 170.638 170.667l0.029 0h256v-341.333l-341.333-341.333h853.333l-341.333 341.333 1.067 341.333h254.933c94.135-0.302 170.364-76.532 170.667-170.638l0-0.029v-682.667c-0.302-94.135-76.532-170.364-170.638-170.667l-0.029-0z"
-          ],
-          "attrs": [],
-          "grid": 0,
-          "tags": [
-            "icon12-filter"
-          ]
-        },
-        {
-          "id": 11,
-          "paths": [
-            "M853.333 0h-682.667c-94.135 0.302-170.364 76.532-170.667 170.638l-0 0.029v682.667c0.302 94.135 76.532 170.364 170.638 170.667l0.029 0h682.667c94.135-0.302 170.364-76.532 170.667-170.638l0-0.029v-682.667c-0.302-94.135-76.532-170.364-170.638-170.667l-0.029-0zM170.933 853.333h-0.267v-512l256 256v256zM853.067 853.333h-255.2l-0.533-256 256-256v511.733zM853.333 341.333h-682.667v-170.4h682.667z"
-          ],
-          "attrs": [],
-          "grid": 0,
-          "tags": [
-            "icon12-filter-outline"
-          ]
-        },
         {
           "id": 6,
           "paths": [
@@ -98,11 +60,26 @@
             "M597.333 768h-170.667v256h170.667v-256z",
             "M256 426.667h-256v170.667h256v-170.667z"
           ],
-          "attrs": [],
+          "attrs": [
+            {},
+            {},
+            {},
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
           "grid": 0,
           "tags": [
             "icon12-crosshair"
-          ]
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {},
+              {},
+              {},
+              {}
+            ]
+          }
         },
         {
           "id": 8,
@@ -118,12 +95,39 @@
             "M744.773 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
             "M744.773 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z"
           ],
-          "attrs": [],
+          "attrs": [
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {}
+          ],
           "width": 745,
+          "isMulticolor": false,
+          "isMulticolor2": false,
           "grid": 0,
           "tags": [
             "icon12-grippy"
-          ]
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {},
+              {},
+              {},
+              {},
+              {},
+              {},
+              {},
+              {},
+              {},
+              {}
+            ]
+          }
         },
         {
           "id": 7,
@@ -132,11 +136,24 @@
             "M0 426.667h1024v170.667h-1024v-170.667z",
             "M0 853.333h1024v170.667h-1024v-170.667z"
           ],
-          "attrs": [],
+          "attrs": [
+            {},
+            {},
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
           "grid": 0,
           "tags": [
             "icon12-list-view"
-          ]
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {},
+              {},
+              {}
+            ]
+          }
         },
         {
           "id": 3,
@@ -145,14 +162,40 @@
             "M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
           ],
           "attrs": [],
+          "isMulticolor": false,
           "grid": 0,
           "tags": [
             "icon12-folder"
-          ]
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {
+                "f": 0
+              },
+              {
+                "f": 0
+              }
+            ]
+          }
         }
       ],
       "invisible": false,
-      "colorThemes": [],
+      "colorThemes": [
+        [
+          [
+            0,
+            0,
+            0,
+            1
+          ],
+          [
+            0,
+            161,
+            75,
+            1
+          ]
+        ]
+      ],
       "colorThemeIdx": 0
     }
   ],
@@ -163,9 +206,9 @@
     "showQuickUse2": true,
     "showSVGs": true,
     "fontPref": {
-      "prefix": "openmct-symbols-",
+      "prefix": "icon-",
       "metadata": {
-        "fontFamily": "Open-MCT-Symbols-12px",
+        "fontFamily": "openmct-symbols-12px",
         "majorVersion": 1,
         "minorVersion": 0
       },
@@ -174,12 +217,7 @@
         "baseline": 6.25,
         "whitespace": 50
       },
-      "embed": false,
-      "noie8": true,
-      "ie7": false,
-      "showMetadata": false,
-      "includeMetadata": false,
-      "showMetrics": true
+      "embed": false
     },
     "imagePref": {
       "prefix": "icon-",

src/ui/components/ObjectFrame.vue

@@ -22,11 +22,13 @@
 <template>
     <div class="c-so-view has-local-controls"
         :class="{
-            'c-so-view--no-frame': !hasFrame,
+            'c-so-view--no-frame': !hasFrame && cssClass.indexOf('unknown') === -1,
             'has-complex-content': complexContent
         }">
-        <div class="c-so-view__header">
-            <div class="c-so-view__header__icon" :class="cssClass"></div>
+        <div class="c-so-view__header"
+            :class="{'c-so-view__header--unknown': cssClass.indexOf('unknown') !== -1}">
+            <div class="c-so-view__header__icon"
+                 :class="cssClass"></div>
             <div class="c-so-view__header__name">
                 {{ domainObject && domainObject.name }}
             </div>
@@ -74,6 +76,10 @@
                 @include ellipsize();
                 flex: 0 1 auto;
             }
+
+            &--unknown {
+                @include isUnknown();
+            }
         }
 
         &:not(.c-so-view--no-frame) {
@@ -123,12 +129,7 @@
         .c-click-icon,
         .c-button {
             // Shrink buttons a bit when they appear in a frame
-            align-items: baseline;
-            font-size: 0.85em;
-            padding: 3px 5px;
-            &:before {
-                font-size: 0.8em;
-            }
+            font-size: 0.8em;
         }
     }
 </style>

src/ui/components/ObjectLabel.vue

@@ -1,5 +1,6 @@
 <template>
 <a class="c-tree__item__label c-object-label"
+   :class="{'c-object-label--unknown': typeClass.indexOf('icon-object-unknown') !== -1}"
     draggable="true"
     @dragstart="dragStart"
     @click="navigateOrPreview"
@@ -39,6 +40,10 @@
             color: $colorItemTreeIcon;
             width: $treeTypeIconW;
         }
+
+        &--unknown {
+            @include isUnknown();
+        }
     }
 </style>
 

src/ui/components/ObjectView.vue

@@ -61,8 +61,6 @@ export default {
             if (this.composition) {
                 this.composition._destroy();
             }
-
-            this.openmct.objectViews.off('clearData', this.clearData);
         },
         invokeEditModeHandler(editMode) {
             this.currentView.onEditModeChange(editMode);
@@ -114,8 +112,6 @@ export default {
                 this.removeSelectable = openmct.selection.selectable(
                     this.$el, this.getSelectionContext(), true);
             }
-
-            this.openmct.objectViews.on('clearData', this.clearData);
         },
         show(object, viewKey, immediatelySelect) {
             if (this.unlisten) {
@@ -191,22 +187,6 @@ export default {
         getComposableDomainObject(event) {
             let serializedDomainObject = event.dataTransfer.getData('openmct/composable-domain-object');
             return JSON.parse(serializedDomainObject);
-        },
-        clearData(domainObject) {
-            if (domainObject) {
-                let clearKeyString = this.openmct.objects.makeKeyString(domainObject.identifier),
-                    currentObjectKeyString = this.openmct.objects.makeKeyString(this.currentObject.identifier);
-                
-                if (clearKeyString === currentObjectKeyString) {
-                    if (this.currentView.onClearData) {
-                        this.currentView.onClearData();
-                    }
-                }
-            } else {
-                if (this.currentView.onClearData) {
-                    this.currentView.onClearData();
-                }
-            }
         }
     }
 }

src/ui/layout/BrowseBar.vue

@@ -5,7 +5,12 @@
                 class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-pointer-left"
                 @click="goToParent"></button>
             <div class="l-browse-bar__object-name--w"
-                 :class="type.cssClass">
+                 :class="[
+                     {
+                        'l-browse-bar--unknown': type.cssClass.indexOf('unknown') !== -1
+                     },
+                    type.cssClass
+                 ]">
                 <span
                     class="l-browse-bar__object-name c-input-inline"
                     @blur="updateName"
@@ -316,5 +321,9 @@ const PLACEHOLDER_OBJECT = {};
         &__object-name {
             flex: 0 1 auto;
         }
+
+        &--unknown {
+            @include isUnknown();
+        }
     }
 </style>

src/ui/layout/Layout.vue

@@ -2,15 +2,9 @@
     <div class="l-shell" :class="{
             'is-editing': isEditing
         }">
-        <div class="l-shell__head" :class="{
-            'l-shell__head--expanded': headExpanded,
-            'l-shell__head--minify-indicators': !headExpanded
-             }">
+        <div class="l-shell__head">
             <CreateButton class="l-shell__create-button"></CreateButton>
-            <indicators class="l-shell__head-section l-shell__indicators">
-            </indicators>
-            <notification-banner></notification-banner>
-            <div class="l-shell__head-section l-shell__controls">
+            <div class="l-shell__controls">
                 <button class="c-icon-button c-icon-button--major icon-new-window" title="Open in a new browser tab"
                     @click="openInNewTab"
                     target="_blank">
@@ -21,8 +15,6 @@
                 </button>
             </div>
             <app-logo></app-logo>
-            <button class="l-shell__head__collapse-button c-button"
-                    @click="toggleShellHead"></button>
         </div>
         <multipane class="l-shell__main"
                    type="horizontal">
@@ -52,6 +44,9 @@
                 <Inspector :isEditing="isEditing" ref="inspector"></Inspector>
             </pane>
         </multipane>
+        <div class="l-shell__status">
+            <StatusBar></StatusBar>
+        </div>
     </div>
 </template>
 
@@ -66,6 +61,12 @@
         flex-flow: column nowrap;
         overflow: hidden;
 
+        &__status {
+            background: $colorStatusBarBg;
+            color: $colorStatusBarFg;
+            padding: $interiorMarginSm;
+        }
+
         &__pane-tree {
             width: 40%;
 
@@ -159,52 +160,14 @@
         }
 
         &__head {
-            align-items: stretch;
+            align-items: center;
             background: $colorHeadBg;
             justify-content: space-between;
-            padding: $interiorMargin $interiorMargin + 2;
+            padding: $interiorMargin;
 
             > [class*="__"] + [class*="__"] {
                 margin-left: $interiorMargin;
             }
-
-            [class*='__head__collapse-button'] {
-                align-self: start;
-                $p: 6px;
-                padding-left: $p !important;
-                padding-right: $p !important;
-
-                &:before {
-                    content: $glyph-icon-arrow-down;
-                    font-size: 1.1em;
-                }
-            }
-
-            &-section {
-                // Subdivides elements across the head
-                display: flex;
-                flex: 0 1 auto;
-                padding: 0 $interiorMargin;
-            }
-
-            &--expanded {
-                .c-indicator__label {
-                    transition: none !important;
-                }
-
-                [class*='__head__collapse-button'] {
-                    &:before {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-        }
-
-        &__controls {
-            $brdr: 1px solid $colorInteriorBorder;
-            border-right: $brdr;
-            border-left: $brdr;
-            align-items: start;
         }
 
         &__create-button,
@@ -212,17 +175,11 @@
             flex: 0 0 auto;
         }
 
-        &__create-button { margin-right: $interiorMarginLg; }
-
-        &__indicators {
-            //@include test();
-            flex: 1 1 auto;
-            flex-wrap: wrap;
-            [class*='indicator-clock'] { order: 90; }
-
-            .c-indicator .label {
-                font-size: 0.9em;
-            }
+        &__controls {
+            flex: 1 1 100%;
+            display: flex;
+            justify-content: flex-end;
+            margin-right: 2.5%;
         }
 
         /******************************* MAIN AREA */
@@ -309,10 +266,9 @@
     import multipane from './multipane.vue';
     import pane from './pane.vue';
     import BrowseBar from './BrowseBar.vue';
+    import StatusBar from './status-bar/StatusBar.vue';
     import Toolbar from '../toolbar/Toolbar.vue';
     import AppLogo from './AppLogo.vue';
-    import Indicators from './status-bar/Indicators.vue';
-    import NotificationBanner from './status-bar/NotificationBanner.vue';
 
     var enterFullScreen = () => {
         var docElm = document.documentElement;
@@ -353,10 +309,9 @@
             multipane,
             pane,
             BrowseBar,
+            StatusBar,
             Toolbar,
-            AppLogo,
-            Indicators,
-            NotificationBanner
+            AppLogo
         },
         mounted() {
             this.openmct.editor.on('isEditing', (isEditing)=>{
@@ -366,18 +321,11 @@
             this.openmct.selection.on('change', this.toggleHasToolbar);
         },
         data: function () {
-            let storedHeadProps = window.localStorage.getItem('openmct-shell-head');
-            let headExpanded = true;
-            if (storedHeadProps) {
-                headExpanded = JSON.parse(storedHeadProps).expanded;
-            }
-
             return {
                 fullScreen: false,
                 conductorComponent: undefined,
                 isEditing: false,
-                hasToolbar: false,
-                headExpanded
+                hasToolbar: false
             }
         },
         computed: {
@@ -386,18 +334,6 @@
             }
         },
         methods: {
-            toggleShellHead() {
-                this.headExpanded = !this.headExpanded;
-
-                window.localStorage.setItem(
-                    'openmct-shell-head',
-                    JSON.stringify(
-                        {
-                            expanded: this.headExpanded
-                        }
-                    )
-                );
-            },
             fullScreenToggle() {
                 if (this.fullScreen) {
                     this.fullScreen = false;

src/ui/layout/mct-tree.vue

@@ -83,13 +83,7 @@
 
             &:hover {
                 background: $colorItemTreeHoverBg;
-                .c-tree__item__type-icon:before {
-                    color: $colorItemTreeIconHover;
-                }
-
-                .c-tree__item__name {
-                    color: $colorItemTreeHoverFg;
-                }
+                > * { filter: $filterItemHoverFg; }
             }
 
             &.is-navigated-object,

src/ui/layout/pane.vue

@@ -148,6 +148,21 @@
                 font-size: floor(12px * .9);
             }
 
+            &__collapse-button {
+                box-shadow: none;
+                background: $splitterBtnColorBg;
+                color: $splitterBtnColorFg;
+                border-radius: $smallCr;
+                font-size: 6px;
+                line-height: 90%;
+                padding: 3px 15px;
+
+                @include hover() {
+                    background: $colorBtnBgHov;
+                    color: $colorBtnFgHov;
+                }
+            }
+
             &__label {
                 // Name of the pane
                 @include ellipsize();

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

@@ -17,137 +17,10 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
+<span id='status' class='status-holder'></span>
 </template>
 
 <style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-indicator {
-        @include cControl();
-        @include cClickIconButtonLayout();
-        button { text-transform: uppercase; }
-
-        background: none !important;
-        border-radius: $controlCr;
-        overflow: visible;
-        position: relative;
-        text-transform: uppercase;
-
-
-        &.no-minify {
-            // For items that cannot be minified
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-
-            > *,
-            &:before {
-                flex: 1 1 auto;
-            }
-
-            &:before {
-                margin-right: $interiorMarginSm;
-            }
-        }
-
-        &:not(.no-minify) {
-            &:before {
-                margin-right: 0 !important;
-            }
-        }
-    }
-
-    .c-indicator__label {
-        // Label element. Appears as a hover bubble element when Indicators are minified;
-        // Appears as an inline element when not.
-        display: inline-block;
-        transition:none;
-        white-space: nowrap;
-
-        a,
-        button,
-        s-button,
-        .c-button {
-            // Make <a> in label look like buttons
-            transition: $transIn;
-            background: transparent;
-            border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
-            border-radius: $controlCr;
-            box-sizing: border-box;
-            color: inherit;
-            font-size: inherit;
-            height: auto;
-            line-height: normal;
-            padding: 0 2px;
-            &:hover {
-                background: rgba($colorIndicatorMenuFg, 0.1);
-                border-color: rgba($colorIndicatorMenuFg, 0.75);
-                color: $colorIndicatorMenuFgHov;
-            }
-        }
-
-        [class*='icon-'] {
-            // If any elements within label include the class 'icon-*' then deal with their :before's
-            &:before {
-                font-size: 0.8em;
-                margin-right: $interiorMarginSm;
-            }
-        }
-    }
-
-    .c-indicator__count {
-        display: none; // Only displays when Indicator is minified, see below
-    }
-
-    [class*='minify-indicators'] {
-        // All styles for minified Indicators should go in here
-        .c-indicator:not(.no-minify) {
-            @include hover() {
-                background: $colorIndicatorBgHov;
-                .c-indicator__label {
-                    box-shadow: $colorIndicatorMenuBgShdw;
-                    transform: scale(1.0);
-                    transition: transform 100ms ease-out 100ms;
-                }
-            }
-            .c-indicator__label {
-                transition: transform 250ms ease-in 200ms;
-                background: $colorIndicatorMenuBg;
-                color: $colorIndicatorMenuFg;
-                border-radius: $controlCr;
-                left: 0;
-                top: 130%;
-                padding: $interiorMargin $interiorMargin;
-                position: absolute;
-                transform-origin: 10px 0;
-                transform: scale(0.0);
-                overflow: visible;
-                z-index: 50;
-
-                &:before {
-                    // Infobubble-style arrow element
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    bottom: 100%;
-                    @include triangle('up', $size: 4px, $ratio: 1, $color: $colorIndicatorMenuBg);
-                }
-            }
-
-            .c-indicator__count {
-                display: inline-block;
-                margin-left: $interiorMarginSm;
-            }
-        }
-    }
-
-    /* Mobile */
-    // Hide the clock indicator when we're phone portrait
-    body.phone.portrait {
-        .c-indicator.t-indicator-clock {
-            display: none;
-        }
-    }
 </style>
 
 <script>
@@ -156,7 +29,12 @@
 
         mounted() {
             this.openmct.indicators.indicatorObjects.forEach((indicator) => {
-                this.$el.appendChild(indicator.element);
+                // So that we can consistently position indicator elements,
+                // guarantee that they are wrapped in an element we control
+                var wrapperNode = document.createElement('span');
+                wrapperNode.className = 'l-indicator';
+                wrapperNode.appendChild(indicator.element);
+                this.$el.appendChild(wrapperNode);
             });
         }
     }

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

@@ -57,19 +57,20 @@
 
     .c-message-banner {
         $closeBtnSize: 7px;
+        $m: 1px;
 
         border-radius: $controlCr;
         @include statusBannerColors($colorStatusDefault, $colorStatusFg);
         cursor: pointer;
+
         display: flex;
         align-items: center;
         left: 50%;
-        top: 50%;
         max-width: 50%;
-        max-height: 25px;
-        padding: $interiorMarginSm $interiorMargin $interiorMarginSm $interiorMarginLg;
+        padding: $interiorMargin $interiorMargin $interiorMargin $interiorMarginLg;
         position: absolute;
-        transform: translate(-50%, -50%);
+        transform: translateX(-50%);
+        bottom: $m;
         z-index: 2;
 
         > * + * {

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

@@ -0,0 +1,42 @@
+<!--
+ Open MCT, Copyright (c) 2014-2018, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+    <span class="c-status">
+    <indicators></indicators>
+    <notification-banner></notification-banner>
+    </span>
+</template>
+
+<style lang="scss">
+    .c-status {
+        width: 100%;
+    }
+</style>
+
+<script>
+    import Indicators from './Indicators.vue';
+    import NotificationBanner from './NotificationBanner.vue';
+
+    export default {
+        components: {
+            Indicators,
+            NotificationBanner
+        }
+    }
+</script>

src/ui/registries/ViewRegistry.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 /*global console */
 
-define(['EventEmitter'], function (EventEmitter) {
+define([], function () {
     const DEFAULT_VIEW_PRIORITY = 100;
 
     /**
@@ -31,12 +31,9 @@ define(['EventEmitter'], function (EventEmitter) {
      * @memberof module:openmct
      */
     function ViewRegistry() {
-        EventEmitter.apply(this);
         this.providers = {};
     }
 
-    ViewRegistry.prototype = Object.create(EventEmitter.prototype);
-
 
     /**
      * @private for platform-internal use